选择器
元素选择器
p {color: "red";}
ID选择器
#i1 { background-color: red; }
类选择器
.c1 { font-size: 14px; }
p.c1 {
color: red;
}
注意：
样式类名不要用数字开头（有的浏览器不认）。
标签中的class属性如果有多个，要用空格分隔。
通用选择器
* { color: white; }
4|2****组合选择器
后代选择器
/li内部的a标签设置字体颜色/
li a { color: green; }
儿子选择器
/选择所有父级是
元素/
div>p { font-family: "Arial Black", arial-black, cursive; }
毗邻选择器
/选择所有紧接着
元素/
div+p { margin: 5px; }
弟弟选择器
/i1后面所有的兄弟p标签/
#i1~p { border: 2px solid royalblue; }
4|3****属性选择器
/用于选取带有指定属性的元素。/
p[title] { color: red; } /*用于选取带有指定属性和值的元素。*/ p[title="213"] { color: green; }
4|4****分组和嵌套
分组
当多个元素的样式相同的时候，我们没有必要重复地为每个元素都设置样式，我们可以通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式。
例如：
div, p { color: red; }
上面的代码为div标签和p标签统一设置字体为红色。
通常，我们会分两行来写，更清晰:
div, p { color: red; }
嵌套
多种选择器可以混合起来使用，比如：.c1类内部所有p标签设置字体颜色为红色。
.c1 p { color: red; }
4|5****伪类选择器
/* 未访问的链接 */
a:link { color: #FF0000 }
/* 鼠标移动到链接上 */
a:hover { color: #FF00FF }
/* 选定的链接 */
a:active { color: #0000FF }
/* 已访问的链接 */
a:visited { color: #00FF00 }
/input输入框获取焦点时样式/
input:focus { outline: none; background-color: #eee; }
4|6****伪元素选择器
first-letter
常用的给首字母设置特殊样式：
p:first-letter { font-size: 48px; color: red; }
before
/在每个
元素之前插入内容/
p:before { content:"*"; color:red; }
after
/在每个
元素之后插入内容/ p:after { content:"[?]"; color:blue; }
首行缩进
将段落的第一行缩进 32像素：
p { text-indent: 32px; }
去除li标签的样式
list-style: none;
文字之间的距离
将文字的间距调整为5像素：
p {
letter-spacing: 5px;
}
5|5****边框
边框属性
- border-width
- border-style
- border-color
#i1 { border- 2px; border-style: solid; border-color: red; }
通常使用简写方式：
#i1 { border: 2px solid red; }
边框样式
| 值 | 描述 |
| :----: | :------------: |
| none | 无边框。 |
| dotted | 点状虚线边框。 |
| dashed | 矩形虚线边框。 |
| solid | 实线边框。 |
除了可以统一设置边框外还可以单独为某一个边框设置样式，如下所示：
#i1 { border-top-style:dotted; border-top-color: red; border-right-style:solid; border-bottom-style:dotted; border-left-style:none; }
5|6****border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
5|7****display属性
用于控制HTML元素的显示效果。
| 值 | 意义 |
| ---------------------- | ------------------------------------------------------------ |
| display:"none" | HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。 |
| display:"block" | 默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。 |
| display:"inline" | 按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
| display:"inline-block" | 使元素同时具有行内元素和块级元素的特点。 |
display:"none"与visibility:hidden的区别：
visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。
5|8 CSS盒子模型
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框): 围绕在内边距和内容外的边框。
- Content(内容): 盒子的内容，显示文本和图像。
看图吧：
5|9****margin外边距
.margin-test { margin-top:5px; margin-right:10px; margin-bottom:15px; margin-left:20px; }
推荐使用简写：
.margin-test { margin: 5px 10px 15px 20px; }
顺序：上右下左
常见居中：
.mycenter { margin: 0 auto; }
5|10****padding内填充
.padding-test { padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; }
推荐使用简写：
.padding-test { padding: 5px 10px 15px 20px; }
顺序：上右下左
补充padding的常用简写方式：
- 提供一个，用于四边；
- 提供两个，第一个用于上－下，第二个用于左－右；
- 如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
- 提供四个参数值，将按上－右－下－左的顺序作用于四边；
5|11****float
在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
- 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
三种取值
left：向左浮动
right：向右浮动
none：默认值，不浮动