CSS简介

CSS

CSS用于修饰装饰网页的美观度，CSS叫做层叠样式表。

• CSS的引入

方式	用法
行内样式	在标签内通过"style"属性实现
内嵌样式	通过"style"标签实现
外联样式	通过"link"标签引入外面的"**.css"文件
导入样式
属性	含义
color	颜色
font-size	字号
font-family	字体
font-weight	字体粗细（默认：normal）
line-height	子的行高

• 行内样式

• 内嵌样式（"style"属性写在head标签内）
  
• 外链样式
  首先创建一个"**.css"文件，其次通过"link"标签将其引入。
  

• 导入样式
  通过"style"标签，然后通过@impory url(“css路径”)将css文件进行导入。
  注意：这四种引入方式遵循就近原则（距离修饰标签的距离），因此行内标签的优先级是最高的，因为距离所要修饰的标签最近。
• 基本选择器

选择器	功能
标签选择器	根据标签名称设置对应样式
ID选择器	通过获取标签里的ID属性去设置对应的样式 （#+“id值”）
类选择器	通过获取标签里的class属性去设置对应的样式（.+“”）
通配符选择器	通过*设置对应的样式

• 标签选择器
  
• ID选择器（id属性值要写英文）
  
• 类选择器
  
• 通配符选择器
  优先级：ID选择器>类选择器>标签选择器>通配符选择器
• 包含选择器

选择器	功能
子代选择器	获取某个标签的第一级子标签
后代选择器	获取某个标签的所有子标签
分组选择器	也称逗号选择器，可设定多个标签，使用逗号进行分割

• 子代选择器
  
• 后代选择器
  

• 分组选择器
  

• 属性选择器

这个先略过哈，过会再写。

• 伪类选择器
  伪类：同一个标签，在不同的状态下，有不同的样式；通过冒号表示；最早的时候主要是用来渲染a标签不同状态下的不同样式。

状态	选择器
超链接点击之前	:link
超链接点击之后	:visited
鼠标悬停于超链接时	:hover
超链接激活时	:active

执行效果就不再展示了（运行时记得清空内存）
注意：对于a标签的四种状态顺序是一定的：即a:link a:visited a:hover a:active
另外：在"hover"里可以增加其他属性：

• 伪元素选择器

选择器	作用
::after	在每个p元素之后插入内容
::before	在每个p元素之前插入内容
::first-letter	选择每个p标签的首字母
::first-line	选择每个p标签的首行

注意：在使用before和after选择器的时候，一定要给上content属性。

• 常见样式

• 基本语法
  选择器
  {
  属性：属性的取值；
  属性：属性的取值；
  …：…；
  }

• 样式的特点
  1.继承性：网页中子元素将继承父元素的样式
  

2.层叠性：网页中如果子元素和父元素设置了同样的样式，则子元素的样式会覆盖掉父元素中的样式。