尚硅谷web前端——css(一）

CSS（一）

一、CSS简介

1、使用css来修改元素的样式

• 内联样式（行内样式）：标签内部通过style属性设置
  
  缺点：维护麻烦，尽量少用
• 将样式编写到head中的style标签里，这样就可以重复使用
  缺点：只能对当前页面起作用，不能跨页面使用
  
• 外部样式表：将css样式编写到外部css文件，用Link引入
  2、基本语法：二、选择器

1、元素选择器：

• 作用：根据标签名来选中指定的元素
• 语法：标签名{ } e.g.p{ }
• 缺点：所有的该元素标签都会被修改

2、id选择器：

• 作用：根据元素的id属性选中一个元素
• 语法：#id属性值{ } e.g #box{ }
• 缺点：id是唯一，不可重复

3、类选择器：

• 作用：根据元素的class属性选中一组元素
• 语法：class属性值{ }

4、通配选择器：

• 作用：选中页面的所有元素
• 语法：#{ }

5、交集选择器：

• 作用：选择同时符合多个条件的元素
• 语法：选择器1，选择器2.……选择器n{ }
• 注意：若交集选择器中有元素选择器，则以元素选择器开头

6、选择器分组（并集选择器）：

• 作用：同时选择多个选择器对应的元素
• 语法：选择器1，选择器2……选择器n{ }

7、关系选择器：

子元素选择器：

• 作用：选中指定父元素的指定子元素
• 语法：父元素>子元素
• e.g. div.box >span{ }

后代元素选择器：

• 作用：选中元素内指定后代元素
• 语法：祖先 后代
• e.g div span{ }

兄弟元素选择器：

• 选择下一个：前一个+后一个 e.g. p+span{ } 选择器紧挨着的
• 选择接下来所有：前一个~ 元素标签 e.g p~span{ }

8、属性选择器：

• 【属性名】 选择含有指定属性的元素
• 【属性名^属性值】选择以指定值开头的元素
• 【属性名=属性值】选择含有指定属性和属性值的元素
• 【属性名$=属性值】选择属性值以指定值结尾的元素
• 【属性名~=属性值】选择实行值中含有某值的元素

9、伪类选择器（不存在的类，特殊类）：

• 作用：描述一个元素的特殊状态 如：第一个子元素，被点击的元素，鼠标移入时的元素
• 伪类一般情况下都以’:'开头
• ：first-child第一个子元素
• : last-child最后一个子元素
• ：nth-child(n) 第N个子元素
• 以上伪类都是根据所有子元素进行排序
• :first-of-type……在同类元素中进行排序
• .not( )否定伪类，将符合条件的元素从选择器中去除， e.g. ul>li：not(:nth-child(3))

10、超链接的伪类

• ：link表示没访问过的链接（正常的链接）
• ：visited表示访问过的链接
• 由于隐私问题，visited伪类只能修改链接的颜色
• ：hover表示鼠标移入的状态
• ：active 表示鼠标点击的状态

11、伪元素选择器

• 语法：使用：：开头
• ：：first-letter 表示第一个字母
• ：：first-line表示第一行
• ：：selection 表示选中的内容，可修改选中内容的样式
• ：：before 元素开始位置
• ：：after元素结束位置
• before 和after 必须结合content属性