1. css样式表的三种使用方式
- 行内式
- 内嵌式（内部样式）
- 外链式
2. css选择器的种类
-
标签选择器
-
类选择器
-
层级选择器（后代选择器）
-
id选择器
-
组选择器
-
伪类选择器
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=M, initial-scale=1.0"> <title>Document</title> <!-- CSS样式 --> <style type="text/css"> /* 标签选择器 */ p { color: red; } /* 类选择器 */ .blue { color: blue; } /* 层级选择器 */ div h6 { background-color: yellow; } /* id选择器 */ #h1L { color: yellowgreen; } /* 组选择器 */ .blue,.h4L { height: 100px; } /* 伪类选择器 */ .lClass:hover{ background-color: aqua; } </style> </head> <body> <div> <p>标签选择器</p> <h3 class="blue">类选择器、组选择器</h3> <h4 class="h4L">组选择器</h4> </div> <div> <h6>层级选择器</h6> <h1 id="h1L">id选择器</h1> </div> <div> <label class="lClass">伪类选择器</label> </div> </body> </html>
3. 常用布局样式属性
- width：内容宽度
- height：内容高度
- background：设置背景色或者背景图片
background : gold; background : url(*.*); - border：设置元素四周的边框
- padding：设置元素包含的内容和边框之间的距离
- margin：设置元素和外界的距离
- float：设置浮动，浮动可以让元素排列在一行
4. 常用文本的样式属性
- color：设置文字的颜色
- font-size：设置文字的大小
- font-family：设置文字的字体
- font-weight：设置文字是否加粗
- line-height：设置文字的行高，设置行高可以垂直方向居中
- text-decoration：设置文字的下划线
- text-align：设置文字水平对齐方式
- text-indent：设置文字首行缩进
5. 元素溢出
- 当子元素（标签）的尺寸超过父元素（标签）的尺寸时，此时需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来完成。
- overflow的设置项：
- visible：默认值，显示子标签溢出部分
- hidden：隐藏子标签溢出部分
- auto：如果子标签溢出，则可以滚动查看其余部分内容
- overflow的设置项：
6. css显示特性
- display属性
- none：元素隐藏且不占用位置
- inline：元素以行内元素显示，无法设置行高，若要设置行高可以使用浮动float代替display属性实现相应效果
- block：元素以块元素显示
7. 盒子模型
- 把html页面的元素看成一个矩形盒子，矩形盒子是由内容（content）、内边距（padding）、边框（border）、外边距（margin）四部分组成。
- 外边框不影响盒子的大小
