本系列文章的绝大多数内容都来自 w3cschool, 再次感谢。
前一篇介绍了CSS的基础语法,这一篇简单介绍一下CSS样式。本文只是简单说明CSS可以设置哪些样式,都能实现什么功能,至于这些属性的使用细节,本文不做介绍,请一定要再查资料。比如,下面会介绍background-attachment可以设置背景是否滚动,它有fixed, scroll, inherit三个可选值,但实际上,任何版本的ie浏览器都不支持inherit这个值。
1. CSS背景
- background-color为元素设置背景色
- background-image可以设置背景图像
- background-repeat可以实现页面上对背景图像进行平铺
- background-position 改变图像在背景中的位置
- background-attachment设置背景是否滚动
2. CSS文本
- text-indent 可以实现文本缩进
- text-align 影响一个元素中的文本行互相之间的对齐方式
- word-spacing可以改变字(单词)之间的标准间隔
- text-transform处理文本的大小写
- text-decoration提供了一些有趣的功能:none,underline,overline,line-through,blink,inherit
- white-space会影响到用户代理对源文档中的空格、换行和 tab 字符的处理
- direction影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
3. CSS字体
- font-family可以指定某种字体系列或者字体,可继承
- font-size设置字体尺寸
- font-style设置字体风格
- font-variant以小型大写字体或者正常字体显示文本
- font-weight设置字体的粗细
- font-stretch对字体进行水平拉伸,但是CSS2.1已经删除了该属性
4. CSS列表
- list-style-type 修改用于列表项的标志类型
- list-style-image 用于为列表项设置图片
- list-style-position设置列表中列表项标识的位置
- list-style是对上述三个属性的合写,顺序随意,至少一个属性值
5. CSS表格
- border设置表格边框宽度,颜色和线型
- border-collapse 设置是否将表格边框折叠为单一边框
- width 和 height 定义表格的宽度和高度
- text-align 设置水平对齐方式
- vertical-align 设置垂直对齐方式
- td 和 th 元素的 padding 属性可以控制单元格中内容与边框的距离
- border-spacing 设置分隔单元格的边框的距离
- caption-side设置表格标题的位置
- empty-cells设置显示表格中的空单元格
- table-layout设置显示单元格,行,列的算法
- background-color设置表格背景色
- color设置表格内文本的背景色
6. 轮廓
- outline-color 设置轮廓线颜色
- outline-style 设置轮廓的样式
- outline-width 设置轮廓的宽度
- outline 同时设置以上三个属性