CSS（静态网页资源三大件2）

CSS

01CSS概述

1.概念

【1】Cascading Style Sheets 层叠样式表
【2】层叠：多个样式可以作用在同一个html的元素上，同时生效
【3】样式：设置的格式

2.好处：

【1】功能强大
【2】将内容展示和样式控制分离
（1）降低耦合度。解耦
（2）让分工协作更容易
（3）提高开发效率

02CSS的使用：CSS与html结合方式

1.内联样式

【1】在标签内使用style属性指定css代码
【2】如：

<div style="color:red;">hello css</div>

2.内部样式

【1】在head标签内，定义style标签，style标签的标签体内容就是css代码
【2】如：

<style>
div{
  color:blue;
}			
</style>

<div>hello css</div>

3.外部样式

【1】定义css资源文件。
【2】在head标签内，定义link标签，引入外部的资源文件
【3】如：

a.css文件：
div{
  color:green;
}				

<link rel="stylesheet" href="css/a.css">

<div>hello css</div>
<div>hello css</div>

Tips：
【1】1,2,3种方式 css作用范围越来越大
【2】1方式不常用，后期常用2,3
【3】3种格式可以写为：

<style>
  @import "css/a.css";
</style>

03CSS的语法

【1】格式：

选择器 {
  属性名1:属性值1;
  属性名2:属性值2;
  ...
}

【2】选择器:筛选具有相似特征的元素

Tips：
每一对属性需要使用；隔开，最后一对属性可以不加

04选择器：筛选具有相似特征的元素

1.基础选择器

【1】id选择器：选择具体的id属性值的元素
（1）建议在一个html页面中id值唯一
（2）语法：

#id属性值{}

【2】元素选择器：选择具有相同标签名称的元素
（1）语法：

标签名称{}
div{}

Tips：
id选择器优先级高于元素选择器

【3】类选择器：选择具有相同的class属性值的元素
（1）语法

.class属性值{}

（2）多个标签可以使用同一个class
Tips：
类选择器选择器优先级高于元素选择器

2.扩展选择器

【1】选择所有元素：

*{}

【2】并集选择器：

选择器1,选择器2{}

【3】子选择器：筛选选择器1元素下的选择器2元素

选择器1 选择器2{}

【4】父选择器：筛选选择器2的父元素选择器1

 选择器1 > 选择器2{}

【5】 属性选择器：选择元素名称，属性名=属性值的元

元素名称[属性名="属性值"]{}

【6】伪类选择器：选择一些元素具有的状态

元素:状态{}

• 如： < a >
• 状态：
  （1）link：初始化的状态
  （2）visited：被访问过的状态
  （3）active：正在访问状态
  （4）hover：鼠标悬浮状态

05属性

1. 字体、文本

【1】font-size：字体大小
【2】color：文本颜色
【3】text-align：对其方式
【4】line-height：行高

2. 背景

【1】background：设置背景 ，复合属性

3. 边框

【1】border：设置边框，复合属性

border: 1px solid red;

4. 尺寸

【1】width：宽度
【2】height：高度

5. 盒子模型：控制布局

【1】margin：外边距
【2】padding：内边距
（1）默认情况下内边距会影响整个盒子的大小
（2）box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小
【3】float：浮动
（1）left
（2）right

静态网页三大件+框架：
HTML静态网页资源三大件1
CSS静态网页资源三大件2
JavaScript静态网页资源三大件3
Bootstrap三大件的开发框架