CSS知识点

1.选择器

1.1 标签选择器

作用：是为了页面中某一类标签指定统一的CSS样式

1.2 类选择器

• 可以单独选一个或者几个标签
• 结构需要用class属性来调用，类选择器以一个点.来表示
• 口诀：样式点定义，结构类调用

1.3 id选择器

CSS中id选择器以“#”来定义

注意：id属性在HTML中只能出现一次

1.4 通配符选择器

CSS中通配符选择器以“*”定义，表示选取页面所有的元素

2.CSS文本属性

2.1 color

用于定义文本的颜色

2.2 text-decoration

可以给文本添加上划线、下划线和删除线

属性值	描述
none	默认，没有装饰线
underline	下划线
overline	上划线
line-through	删除线

2.3 line-height

line-height属性值可以行间的距离，其中行间距包括上间距、文本高度和下间距

想让文字垂直居中可以让line-height=height

3.CSS字体属性

3.1 font-size

用来设置字体大小

3.2 font-weight

用来设置字体的粗细

属性值	描述
normal	默认值
bold	定义加粗的字符
bolder	定义特粗的字符
lighter	定义更细的字符

3.3 font-style

设置文字样式

属性	描述
normal	默认值
italic	会显示 斜体 的字体样式

3.4 font-family

设置文本的字体系列,可以把多个字体名称作为一个"回退"系统来保存。如果浏览器不支持第一个字体，则会尝试下一个

•  如果字体名称包含空格，它必须加上引号
•  每个值用逗号分开

字体属性符合写法

顺序：文字样式 文字粗细 文字大小 字体

注意：不需要设置的属性可以省略(取默认值)，但必须保留font-size 和font-family属性，否则 font 属性将不起作用 

4.CSS复合选择器

常用的复合选择器主要有：后代选择器、子选择器、并集选择器、伪类选择器

4.1 后代选择器

后代选择器又称为包含选择器，可以选择父元素里面的子元素

其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就称为外层标签的后代

例 元素1 元素2 { 

                             样式声明

                          }

4.2 子选择器

子元素选择器只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素

元素2必须是亲儿子，其孙子、重孙之类都不归他管

例  元素1> 元素2 { 

                             样式声明

                          }

4.3 并集选择器

并集选择器通常用于集体声明

并集选择器是各选择器通过英文逗号连接而成

元素1 ,元素2 { 

                             样式声明

                          }

4.4 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素

4.1.1 链接伪类选择器

:link	a:link	选择所有未访问链接
:visited	a:visted	选择所有访问过的链接
:active	a:active	选择活动链接
:hover	a:hover	选择鼠标在链接上面时

4.2.2 focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况<input>类表单元素才能获取，因此这个选择器也主要针对表单元素

4.2.3 兄弟选择器（也是伪类选择器的一种）

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字，一个关键字，或者一个公式

5.CSS背景

5.1 background-color

背景颜色，一般情况下默认的是transparent（透明）

5.2 background-image

描述了元素的背景图像

例 background-image：url(    )

5.3 background-position

可以改变图片在背景中的位置

参数：X坐标 Y坐标

可以使用方位名词或精确单位

5.4 background-repeat

参数值	说明
repeat	背景图像在纵向和横向上平铺
no-repeat	背景图像不平铺
repeat-x	背景图像在横向上平铺
repeat-y	背景图像在纵向上平铺

6.css命名规则

• 见名知意
• 命名和文件命名最好用下划线
• 不要写太多的嵌套（不要超过三层嵌套）
• 多使用class，少使用id