CSS 的基本使用
1. 作用：控制 HTML 文档的显示。
2. 方法：在控制文档显示之前，首先应在需要显示的 HTML 文档中引入 CSS 样式单，HTML 提供了以下四种引入方式：
| 使用内联样式 （优先级 最高） | 将样式内联定义到具体的 HTML 元素上，通常用于精确控制一个 HTML 元素的表现。 直接对 HTML标签使用 style 属性 |
| 使用内部样式定义 （优先级 次之） | 在 HTML 文档头定义样式单部分来实现，在这种方式下，每批 CSS 样式只控制一份 HTML 文档。 <head></head>之间定义的 <style> … </style> |
| 链接外部样式文件 （优先级 最低） | 将样式文件彻底与 HTML 文档分离，样式文档需要额外引入。在这种方式下，一份样式可控制多份文档 <link type="text/css" rel="stylesheet" herf="外部样式文件"> |
| 导入外部样式文件 （优先级 第三） | 这种方式与第三种方式类似，只是使用 @import 来引入外部样式表文件 在<style>和</style>之间使用 @import “样式文件” @import url("样式文件 |
3. CSS 选择器
- 作用：选择器决定该央视定义对哪些元素起作用
- 方法：
| 标签选择器 | E{……} |
| 类选择器 | E.classValue{} |
| ID 选择器 | [E]#idValue{} |
| 选择器组合 | E1, E2{} |
| 选择器嵌套 | Selector1 Selector1 |
- 常用属性
字体和文本相关属性
| fort-family | 字体，逗号分割 |
| font-siza | 字体大小 |
| font-style | 文本的字体样式：normal、italic、oblique |
| font-weight | 字体的粗细：normal、bold、自定义 |
文本的属性
| color | 文本颜色 |
| letter-spacing | 字符间距 |
| line-height | 文本行高 |
| text-align | 文本的对齐方式：left、right、center |
| text-decoration | 文本的装饰效果：overline、underline、line-through |
| text-indent | 文本的首行缩进 |
| text-transform | 文本的大小写：uppercase、lowercase、capitalize |
| word-spacing | 设置单词间距 |
边框属性
| border | 在一个声明中设置所有边框属性 |
| border-width | 设置四条边框的宽度 |
| border-style | 设置四条边框的样式：dotted、solid、double、dashed |
| border-color | 设置四条边框的颜色 |
| border-left | 在一个声明中设置所有左边框属性，对应 border-right、border-top、border-bottom |
| border-left-color | 设置左边框颜色 |
| border-left-style | 设置左边框样式 |
| border-left-width | 设置左边框宽度 |
背景属性
| background | 在一个声明中设置所有的背景属性 |
| background-attachment | 设置背景图片是否固定或者随着页面的其余部分滚动：fixed、scroll |
| background-color | 设置元素的背景颜色 |
| background-image | 设置元素的背景图像：url、none |
| background-position | 设置背景图像的开始位置：top、left |
| background-repeat | 设置是否及如何重复背景图像：repeat、repeat-x、repeat-y、no-repeat |
列表的相关属性
| list-style | 在一个声明中设置所有的列表属性 |
| list-style-image | 在图像设置为列表项标记。主要有URL值 |
| list-style-position | 设置列表项标记的放置位置：outside、inside |
| list-style-type | 设置列表项标记的类型：disc、circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-latin、upper-latin、armenian、georgian、none |
表格属性
| border-collapse | 设置是否把表格边框合并为单一的边框 |
| border-spacing | 设置分隔单元边框的距离 |
| border-side | 设置表格标题的位置 |
| empty-cells | 设置表格中的空单元格：hide、show |
伪类别属性（超链接）
| a:link | 超链接的普通样式 |
| a:visited | 被点击过的超链接样式 |
| a:hover | 鼠标指针经过超链接上时的样式 |
| a:active | 在超链接上单击时，即“当前激活”时超链接的样式 |
CSS 定位 与 DIV 布局
1. CSS 盒子模型
- 盒子：任何元素都可以看做一个盒子，可以调整盒子的边框和距离参数来调节盒子的位置
- 边界margin -> 边框 border -> （填充padding） -> 内容 content
- 盒子的宽度 = content + padding + border + margin
- 属性：
- border：color、width、style
- padding（顺时针，上、右、下、左）：padding-top、padding-bottom、padding-left、padding-right
- margin：元素与元素之间的距离，行级标签是二者之和，块级是两者之间的最大值
2. CSS 元素定位
- float：left、right、none；加了float后，该元素不再属于父元素
- clear：left、right、both；清除对 float 的影响
- position：指定块的位置，即块相对其父块的位置和相对它自身应该在的位置；当为absolute时，子块已经不从属于父块，其左边框设置的距离时相对页面 body 的距离，而不是父块的距离
- z-index：用于调整定位时重叠块的上下位置，越大越在上面
3111
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
