在标签上设置 style 属性
- background-color:red;
- height: 48px;
- ...
1.1 标签的 style 属性
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- </head>
- <body>
- <div style="background-color:red;height: 48px;">dd</div>
- <div></div>
- <div></div>
- </body>
1.2 写在 head 里面, style 标签
1.2.1 id 选择器
? #id{属性: 值}
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- #i1{
- background-color:red;
- height: 48px;
- }
- #i2{
- background-color:red;
- height: 48px;
- }
- </style>
- </head>
- <body>
- <div id="i1">dd</div>
- <span>ff</span>
- <div id="i2">ww</div>
- <div>ff</div>
- </body>
1.2.2 class 选择器
? .class{属性: 值}
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .c1{
- background-color:blue;
- height: 48px;
- }
- </style>
- </head>
- <body>
- <div>dd</div>
- <span class="c1">ff</span>
- <div>ww</div>
- <div class="c1">ff</div>
- </body>
1.2.3 标签选择器
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- div{
- background-color:blue;
- height: 48px;
- }
- </style>
- </head>
- <body>
- <div>dd</div>
- <span>ff</span>
- <div>ww</div>
- <span>ff</span>
- </body>
1.2.4 关联选择器 (层级选择器)
? .c1 .c2 div{属性: 值}
连接方式: 空格
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- .c1 div{
- background-color:blue;
- height: 48px;
- }
- </style>
- </head>
- <body>
- <div>dd</div>
- <span class="c1">
- <div>111</div>
- </span>
- <div>ww</div>
- <span>ff</span>
- </body>
1.2.5 组合选择器
? #i1,#i2 {属性: 值}
连接方式: 逗号
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <style>
- #i1,.c1,#i2{
- background-color:red;
- height: 48px;
- }
- </style>
- </head>
- <body>
- <div id="i1">dd</div>
- <span class="c1">ff</span>
- <div id="i2">ww</div>
- <div>ff</div>
- </body>
1.2.6 属性选择器
对选择到的标签再通过属性进行一次筛选
- <head>
- <meta charset="UTF-8">
- <title>
- Title
- </title>
- <style>
- input[n="alex"]{width:100px;height:200px} input[type="password"]{width:100px;height:100px}
- </style>
- </head>
- <body>
- <input type="text" n="alex">
- <input type="password">
- </body>
1.2.7 优先级
标签上的 style 优先, 其它按照编写顺序, 就近原则
1.3 写在 CSS 文件里
1.3.1 引入
<link rel="stylesheet" href="style.css"/>
1.4 注释
/* ......... */
1.5 边框
border: 1px solid red
边框 1 像素宽, 实体, 红色
- border-left
- 1.6 height, width, line-height, color, font-size, font-weight, text-align,
width 可以使用百分比, 像素...
若 height 的父元素 height 像素固定, 也可使用百分比.
text-align:center 水平方向居中
line-height 垂直方向根据标签高度. 等于标签高度, 则显示居中
font-weight 字体加粗
font-size 字体大小
color 字体颜色
1.7 float
让标签飘起来, 块级标签也可以堆叠
- <body>
- <div style="width: 20%;background-color: red;float: left;">dsasdas</div>
- <div style="width: 80%;background-color: black;float: left;">dsasdas</div>
- </body>
老子管不住的时候, 加
- <body>
- <div style="width: 300px;border: 1px solid red">
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="width: 96px;height: 30px;border: 1px solid green;float: left;">dsasdas</div>
- <div style="clear: both;"></div>
- </div>
- </body>
- 1.8 display
块级标签转为行内标签
- <body>
- <div style="background-color: red;display: inline">asdf</div>
- <span style="background-color: red;"">asdf</span>
- </body>
行内标签转换为 块级标签
- <body>
- <div style="background-color: red;">asdf</div>
- <span style="background-color: red;display: block">asdf</span>
- </body>
来源: http://www.bubuko.com/infodetail-2563157.html