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)四部分组成。
- 外边框不影响盒子的大小