1.层叠次序
css style的执行顺序是怎么样的呢?这个算是很基础的css问题了,一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
2.背景效果:
- background-color:背景颜色
- background-image:url(。。)背景图像
- background-repeat:no-repeat/repeat-x/repeat-y 设置背景图像是否及如何重复
- background-attachment:scroll(默认)/fixed 背景图像是否固定或者随着页面的其余部分滚动
- background-position:设置背景图像的起始位置
背景颜色的简写属性为 "background":
例如:body {background:#ffffff url('img_tree.png') no-repeat right top;}
当使用简写属性时,属性值的顺序为:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
3.文本属性
当text-align设置为"justify",每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。
属性 | 描述 |
---|---|
color | 设置文本颜色 |
direction | 设置文本方向。 |
letter-spacing | 设置字符间距 |
line-height | 设置行高 |
text-align | 对齐元素中的文本 |
text-decoration | 向文本添加修饰 |
text-indent | 缩进元素中文本的首行 |
text-shadow | 设置文本阴影 |
text-transform | 控制元素中的字母 |
unicode-bidi | 设置或返回文本是否被重写 |
vertical-align | 设置元素的垂直对齐 |
white-space | 设置元素中空白的处理方式 |
word-spacing | 设置字间距 |
4.字体属性
Property | 描述 |
---|---|
font | 在一个声明中设置所有的字体属性 |
font-family | 指定文本的字体系列 |
font-size | 指定文本的字体大小 |
font-style | 指定文本的字体样式 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 指定字体的粗细。 |
5.链接样式
四个链接状态是:
- a:link - 正常,未访问过的链接
- a:visited - 用户已访问过的链接
- a:hover - 当用户鼠标放在链接上时
- a:active - 链接被点击的那一刻
6.列表属性
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
7. 盒子模型(Box Model)
不同部分的说明:
- Margin(外边距) - 清除边框外的区域,外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域,内边距是透明的。
- Content(内容) - 盒子的内容,显示文本和图像。
8.border-style 值
none: 默认无边框
dotted: dotted:定义一个点线框
dashed: 定义一个虚线框
solid: 定义实线边界
double: 定义两个边界。 两个边界的宽度和border-width的值相同
groove: 定义3D沟槽边界。效果取决于边界的颜色值
ridge: 定义3D脊边界。效果取决于边界的颜色值
inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
outset: 定义一个3D突出边框。 效果取决于边界的颜色值
9.CSS Outlines
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
轮廓(outline)属性指定了样式,颜色和外边框的宽度。
10.CSS Display(显示) 与 Visibility(可见性)
1.display属性设置一个元素应如何显示,(inline,block,inline-block,none)
2.visibility属性指定一个元素应可见还是隐藏(hidden)
注意:隐藏元素时,display:none隐藏的元素不会占用任何空间,visibility:hidden隐藏的元素仍需占用与未隐藏之前一样的空间
11.CSS Positioning(定位)
Static 定位:HTML元素的默认值,即没有定位,元素出现在正常的流中。
Fixed 定位:元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动。
注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持.
Fixed定位使元素的位置与文档流无关,因此不占据空间。
Fixed定位的元素和其他元素重叠。
Relative 定位:相对定位元素的定位是相对其正常位置。
Absolute 定位:绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>
12.重叠的元素
元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素,z-index属性指定了一个元素的堆叠顺序(哪个元素应该放在前面,或后面),一个元素可以有正数或负数的堆叠顺序。
clip | 剪辑一个绝对定位的元素 |
cursor | 显示光标移动到指定的类型 | url/auto/crosshair/default/pointer/move/e-resize/ne-resize/nw-resize/n-resize/se-resize/sw-resize/s-resize/w-resize/text/wait/help |
清除浮动 - 使用 clear
13.组合选择符
在 CSS3 中包含了四种组合方式:
- 1.后代(儿孙)选取器(以空格分隔)
- 2.子元素(直接后代-儿子)选择器(以大于号分隔)
- 3.相邻兄弟(后面一个兄弟)选择器(以加号分隔)
- 4.普通兄弟(后面所有兄弟)选择器(以破折号分隔)
14.CSS 伪类(Pseudo-classes)
伪类的语法:
CSS类也可以使用伪类:
注意: 在CSS定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
注意: 在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
注意:伪类的名称不区分大小写。
所有CSS伪类/元素
选择器 | 示例 | 示例说明 |
---|---|---|
:checked | input:checked | 选择所有选中的表单元素 |
:disabled | input:disabled | 选择所有禁用的表单元素 |
:empty | p:empty | 选择所有没有子元素的p元素 |
:enabled | input:enabled | 选择所有启用的表单元素 |
:first-of-type | p:first-of-type | 选择每个父元素是p元素的第一个p子元素 |
:in-range | input:in-range | 选择元素指定范围内的值 |
:invalid | input:invalid | 选择所有无效的元素 |
:last-child | p:last-child | 选择所有p元素的最后一个子元素 |
:last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
:not(selector) | :not(p) | 选择所有p以外的元素 |
:nth-child(n) | p:nth-child(2) | 选择所有p元素的第二个子元素 |
:nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
:nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
:only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
:only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
:optional | input:optional | 选择没有"required"的元素属性 |
:out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
:read-only | input:read-only | 选择只读属性的元素属性 |
:read-write | input:read-write | 选择没有只读属性的元素属性 |
:required | input:required | 选择有"required"属性指定的元素属性 |
:root | root | 选择文档的根元素 |
:target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
:valid | input:valid | 选择所有有效值的属性 |
:link | a:link | 选择所有未访问链接 |
:visited | a:visited | 选择所有访问过的链接 |
:active | a:active | 选择正在活动链接 |
:hover | a:hover | 把鼠标放在链接上的状态 |
:focus | input:focus | 选择元素输入后具有焦点 |
:first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
:first-line | p:first-line | 选择每个<p> 元素的第一行 |
:first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
:before | p:before | 在每个<p>元素之前插入内容 |
:after | p:after | 在每个<p>元素之后插入内容 |
:lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
15.CSS 伪元素
伪元素的语法:
CSS类也可以使用伪元素: