CSS
css 全称层叠样式表，主要通过以下三种方式设置：
- 直接在标签内设置 style 属性；
- 写在 head 里面的 style 标签中；
- 写在单独的文件中，通过 link 引入。
<link rel="stylesheet" href="xxx.css" />
选择器
为了解耦和让代码更好看一点，我们常常使用第二种或第三种方式设置 css，而这两种方式又引出了一个选择器的概念。选择器分为以下几类：
- id 选择器（较少用），通过在需要设置 css 的标签里设置 id 属性；
#i1{
color: #000;
font-size: 20px;
}
使用：
...
<div id="i1"></div>
！注：选择器中的属性之间用分号隔离
- class 选择器；
.i1{
color: #000;
font-size: 20px;
}
使用：
...
<div class="i1"></div>
- 标签选择器；
div{
color: #000;
font-size: 20px;
}
使用：
<div></div>
- 层级选择器，可以用到每一层的 css 样式；
#i1{
background-color: #000;
}
#i1 .c1{
background-color: #eeeeee;
}
使用：
<div id="i1">
<div class="c1"></div>
</div>
- 组合选择器，使用逗号做分隔，被设置的 css 效果每个都能使用。
#i1{
background-color: #000;
}
#i1,.c1{
background-color: #eeeeee;
}
常用属性
- border，边框属性，如：
border: 1px solid #eeeeee;，可以看到该属性的值分别为宽度，样式（solid 实线，还可以有虚线等），颜色，边框属性还可以根据四个方位只分为一部分的边框，如：border-left 等。 - height，width，text-align，line-height；color，background-color，font-size，font-weight（字体加粗）；
- float，让标签飘起来，所以可以让块级标签页可以堆叠。但是当漂到一定程度时，父标签无法管理的时候
<div style="clear: both;"></div>； - display，可以让标签消失，可以用来做很多东西，比如后面会讲的模态框，display 的值有，none（让标签消失），inline（让标签表现为行内标签，无法设置宽度高度 padding margin），block（..块级标签），inline-block（既具有行内的只占本身大小，也具有块级的可以设置宽高等）；
- position，有如下值：
- fixed，固定在页面的某个位置；
- relative + absolute，设置了 absolute 的标签将会与设置了 relative 的标签的处于相对位置（根据 top, bottom, left, right 的值来定）；
- opacity，透明度， =1 表示透明；
- z-index，层级顺序，常与 position 连用做一些特殊的效果；
- overflow，值有 hidden，auto；
- background-image，当使用图片做背景时，如果图片过小，浏览器会帮我们自动重复；
小技巧
<body style="margin: 0 auto">
...
由于 body 标签内部设置了一个 padding，所以当想要完全覆盖整个屏幕时，则需要这样设置。
网友评论