前端学习第3天：初识CSS

第三天：CSS

1.Css 样式规则：

选择器{
	声明-> 属性：属性值;
}

说明：

- 每个 `CSS `样式由选择器和声明组成，声明由属性和属性值组成，且由分号（；）结束。
- 一个属性有多个属性值得时候，属性值与属性值不分先后。

---

2.样式表的简历和优先级

### 2.1内部样式表：

​ 语法：

<style type = "style/css">
	样式
<style>

说明：style标签zuihao写在head标签内部。

2.2 内联样式（行内样式）

语法：

<标签 style = "属性：属性值；属性=：属性值；"></标签>

2.3 外部样式表

• 导入方式：

  • <link rel="stylesheet" type="text/css" href="路径" />
    

  • <style type="text/css">
    @import url(路径)；
    </style>
    

    说明：link 和 import 区别

    • link属于 XTML 标签，而 @import是 CSS 提供的一种方式。
    • 加载顺序不同：
      • link 引用的 CSS 会在页面加载时同时被加载。
      • @import 引用的 CSS 会等到页面加载完毕时才被加载。
    • 兼容性的差别：
      • link 标签无兼容性问题。
      • @import 是 CSS2.1 提出的，过旧的浏览器不支持，只有在 IE5 以上才能识别。
      • 使用 dom （document object moder 文档对象模型）控制样式是的差别：只能使用 link 。

2.4 优先级

​ 说明：

​ 内联样式表的优先级最高，内部样式表与外部样式表的优先级和书写顺序有关 书写在后面的优先级最高。（覆盖）

2.5 css 选择器

• id 选择器：

  #id名{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!-- 
  a.id选择器只能定义唯一一个标签。
  b.最大用处：创建网页的外围结构。		
  -->
  

• 类（ class ）选择器：

  .类名{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!-- 
  	可以对多个标签进行选择定义。
  -->
  

• 多类名选择器：

  <标签名 class="类名1 类名2"></标签名>
  

• 群组选择器：

  .类名1，类名2，类名3{
  	属性1：属性值；
  	属性2：属性值；
  }
  

• 通配符选择器：

  *{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!--
  	*是所有选择器中作用范围最广的，能匹配页面中全部元素。
  -->
  

• 伪类选择器

  <!-- 超链接初始状态 -->
  a:link{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!-- 超链接被访问后的状态 -->
  a:visited{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!-- 鼠标放在超链接上时，超链接的状态 -->
  a:hover{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!-- 鼠标点击超链接时，超链接的状态 -->
  a:active{
  	属性1：属性值；
  	属性2：属性值；
  }
  <!--       必须按照上面的顺序书写伪类选择器，否则样式可能失效                            -->
  

• 包含选择器

  选择器1 选择器2{
  	属性1：属性值；
  	属性2：属性值；
  }
  

2.6 权重

​ 说明：CSS 中用四位数字表示权重。

	- 标签选择器的权重：0001
	- `class` 类选择器权重：0010
	- `id` 选择器权重：0100
	- 伪类选择器权重：0010
	- 包含选择器权重：选择器的权重和
	- 内联样式权重：1000
	- 继承样式权重：0000