CSS总结
CSS 属性组:
- 背景
- 文本
- 字体
- 边框和轮廓
- 外边距
- 内边距
- 列表
- 内容生成
- 尺寸
- 定位
- 打印
- 表格
- 伪类
- 伪元素
提示和注释:
属性:“属性” 列指向语法、实例、浏览器支持等内容。
CSS:"CSS" 列指示属性是在哪个 CSS 版本中定义的(CSS1 还是 CSS2)。
提示:W3School 的 CSS 参考手册定期在所有主流浏览器中进行测试。最后测试时间:2009 年 10 月 8 日。
CSS 背景属性(Background)
属性 | 描述 | CSS | background在一个声明中设置所有的背景属性。1background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1background-color设置元素的背景颜色。1background-image设置元素的背景图像。1background-position设置背景图像的开始位置。1background-repeat设置是否及如何重复背景图像。1CSS 边框属性(Border 和 Outline)
属性 | 描述 | CSS | border在一个声明中设置所有的边框属性。1border-bottom在一个声明中设置所有的下边框属性。1border-bottom-color设置下边框的颜色。2border-bottom-style设置下边框的样式。2border-bottom-width设置下边框的宽度。1border-color设置四条边框的颜色。1border-left在一个声明中设置所有的左边框属性。1border-left-color设置左边框的颜色。2border-left-style设置左边框的样式。2border-left-width设置左边框的宽度。1border-right在一个声明中设置所有的右边框属性。1border-right-color设置右边框的颜色。2border-right-style设置右边框的样式。2border-right-width设置右边框的宽度。1border-style设置四条边框的样式。1border-top在一个声明中设置所有的上边框属性。1border-top-color设置上边框的颜色。2border-top-style设置上边框的样式。2border-top-width设置上边框的宽度。1border-width设置四条边框的宽度。1outline在一个声明中设置所有的轮廓属性。2outline-color设置轮廓的颜色。2outline-style设置轮廓的样式。2outline-width设置轮廓的宽度。2CSS 文本属性(Text)
属性 | 描述 | CSS | color设置文本的颜色。1direction规定文本的方向 / 书写方向。2letter-spacing设置字符间距。1line-height设置行高。1text-align规定文本的水平对齐方式。1text-decoration规定添加到文本的装饰效果。1text-indent规定文本块首行的缩进。1text-shadow规定添加到文本的阴影效果。2text-transform控制文本的大小写。1unicode-bidi设置文本方向。2white-space规定如何处理元素中的空白。1word-spacing设置单词间距。1CSS 字体属性(Font)
属性 | 描述 | CSS | font在一个声明中设置所有字体属性。1font-family规定文本的字体系列。1font-size规定文本的字体尺寸。1font-size-adjust为元素规定 aspect 值。2font-stretch收缩或拉伸当前的字体系列。2font-style规定文本的字体样式。1font-variant规定文本的字体样式。1font-weight规定字体的粗细。1CSS 外边距属性(Margin)
属性 | 描述 | CSS | margin在一个声明中设置所有外边距属性。1margin-bottom设置元素的下外边距。1margin-left设置元素的左外边距。1margin-right设置元素的右外边距。1margin-top设置元素的上外边距。1CSS 内边距属性(Padding)
属性 | 描述 | CSS | padding在一个声明中设置所有内边距属性。1padding-bottom设置元素的下内边距。1padding-left设置元素的左内边距。1padding-right设置元素的右内边距。1padding-top设置元素的上内边距。1CSS 列表属性(List)
属性 | 描述 | CSS | list-style在一个声明中设置所有的列表属性。1list-style-image将图象设置为列表项标记。1list-style-position设置列表项标记的放置位置。1list-style-type设置列表项标记的类型。1marker-offset 2内容生成(Generated Content)
属性 | 描述 | CSS | content与 :before 以及 :after 伪元素配合使用,来插入生成内容。2counter-increment递增或递减一个或多个计数器。2counter-reset创建或重置一个或多个计数器。2quotes设置嵌套引用的引号类型。2CSS 尺寸属性(Dimension)
属性 | 描述 | CSS | height设置元素高度。1max-height设置元素的最大高度。2max-width设置元素的最大宽度。2min-height设置元素的最小高度。2min-width设置元素的最小宽度。2width设置元素的宽度。1CSS 定位属性(Positioning)
属性 | 描述 | CSS | bottom设置定位元素下外边距边界与其包含块下边界之间的偏移。2clear规定元素的哪一侧不允许其他浮动元素。1clip剪裁绝对定位元素。2cursor规定要显示的光标的类型(形状)。2display规定元素应该生成的框的类型。1float规定框是否应该浮动。1left设置定位元素左外边距边界与其包含块左边界之间的偏移。2overflow规定当内容溢出元素框时发生的事情。2position规定元素的定位类型。2right设置定位元素右外边距边界与其包含块右边界之间的偏移。2top设置定位元素的上外边距边界与其包含块上边界之间的偏移。2vertical-align设置元素的垂直对齐方式。1visibility规定元素是否可见。2z-index设置元素的堆叠顺序。2CSS 打印属性(Print)
属性 | 描述 | CSS | orphans设置当元素内部发生分页时必须在页面底部保留的最少行数。2page-break-after设置元素后的分页行为。2page-break-before设置元素前的分页行为。2page-break-inside设置元素内部的分页行为。2widows设置当元素内部发生分页时必须在页面顶部保留的最少行数。2CSS 表格属性(Table)
属性 | 描述 | CSS | border-collapse规定是否合并表格边框。2border-spacing规定相邻单元格边框之间的距离。2caption-side规定表格标题的位置。2empty-cells规定是否显示表格中的空单元格上的边框和背景。2table-layout设置用于表格的布局算法。2CSS 伪类(Pseudo-classes)
属性 | 描述 | CSS | :active向被激活的元素添加样式。1:focus向拥有键盘输入焦点的元素添加样式。2:hover当鼠标悬浮在元素上方时,向元素添加样式。1:link向未被访问的链接添加样式。1:visited向已被访问的链接添加样式。1:first-child向元素的第一个子元素添加样式。2:lang向带有指定 lang 属性的元素添加样式。2CSS 伪元素(Pseudo elements)
属性 | 描述 | CSS | :first-letter向文本的第一个字母添加特殊样式。1:first-line向文本的首行添加特殊样式。1:before在元素之前添加内容。2:after在元素之后添加内容。2
层叠样式表cascading style sheets
将网页中的样式单独分离出来,完全由CSS控制,增强样式复用性和扩展性。
格式:选择器{属性名:属性值;属性名:属性值;……}
CSS与HTML结合的4中方式:
1、每个HTML标签都有style属性
2、当页面中有多个标签具有相同样式时,可定义style标签封装样式以复用
<style type=”text/css”>css代码</style>
3、当多个页面使用相同样式时,可将样式单独封装为CSS文件导入
<style type=”text/css”>@import url(“1.css”);</style>
4、通过HTML头标签中的link标签链接一个CSS文件
<link rel=”stylesheet” href=”1.css” media属性可选,默认设备屏幕/>
技巧:为提高样式的复用性和可扩展性,将多个样式单独定义并封装为CSS文件,如p.css、div.css……在一个总的CSS文件中,使用import导入这些CSS文件,然后在HTML页面中用link标签将这个总的CSS文件导入即可。
优先级:就近原则 标签上设置的style属性可以覆盖其他样式
选择器:
1、标签选择器:每个HTML标签名即为一个选择器
2、类选择器:标签中的class属性指定 定义样式要加点 js引用时用className
3、ID选择器:标签的id属性,尽量保证唯一,便于JavaScript获取元素
4、扩展选择器:
a、关联选择器:标签中的标签 table div表示表格中的div区域
b、组合选择器:多个选择器 逗号分隔
c、为元素选择器:元素的状态 如超链接的默认状态、点击状态、悬停状态等
a:link a:visited a:hover a:active LVHA顺序
删除超链接默认下划线:text-decoration:none
p:first-letter p:first-line focus:IE6不支持
CSS滤镜:通过一些代码丰富了的样式
网页设计时,DIV+CSS
DIV和P标签都属于行级区域,回车效果,SPAN标签为块级区域,无回车效果
可加border、color等属性,P标签中不要嵌套DIV标签