CSS 样式和选择器

1 概述

1. CSS是 Cascading Style Sheets 层叠样式表。层叠的意思就是，多个样式可以作用在同一个 html 元素上，同时生效。
2. 有点
   1. 功能强大
   2. 将内容展示和样式控制分离
      1. 降低耦合度，解耦
      2. 让分工协作更容易
      3. 提高开发效率

2 CSS的使用

2.1 内联样式

• 当特殊的样式需要应用到个别元素时，就可以使用内联样式。

  <!-- 在标签内使用 style 属性指定 css 代码 -->
  <div style="color:red;">hello css</div>
  

2.2 内部样式

1. 当单个文件需要特别样式时，就可以使用内部样式表。

   <!-- 在 head 标签内，定义 style 标签，style 标签的标签体内容就是 css 代码 -->
   <style>
       div{
           color:blue;
          }
    </style>
    <div>hello css</div>
   

2. 语法

   选择器 {
       属性名1: 属性值1;
       属性名2: 属性值2;    
   	...
   }
   <!-- 选择器：筛选具有相似特征的元素 -->
   <!-- 注意：每一对属性需要使用 `；`隔开，最后一对属性可以不加(但为了格式统一尽量加上) -->
   

2.3 外部样式

• 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。

<!-- 先定义css资源文件，然后在head标签内，使用 link 标签引入外部的资源文件 -->
<!-- mystyle.css 文件内容如下 -->
div{
    color:green;
}
<!-- html 文件内容如下 -->
<link rel="stylesheet" href="css/mystyle.css">
<div>hello css</div>
<div>hello css</div>

• 注：内联样式、内部样式、外部样式这三种方式，CSS 的作用范围越来越大；内联样式不太常用，内部样式和外部样式比较常用。

3 选择器

3.1 基础选择器

类型	介绍	语法
id选择器	选择具体的id属性值的元素，建议在一个html页面中id值唯一	#id属性值{}
类选择器	选择具有相同的class属性值的元素	class属性值{}
元素选择器	选择具有相同标签名称的元素	标签名称{}

注：id选择器优先级高于元素选择器，类选择器选择器优先级高于元素选择器。

3.2 扩展选择器

类型	介绍	语法
选择所有元素		*{}
并集选择器		* 选择器1,选择器2{}
子选择器	筛选选择器1元素下的选择器2元素	选择器1 选择器2{}
父选择器	筛选选择器2的父元素选择器1	选择器1 > 选择器2{}
属性选择器	选择元素名称，属性名=属性值的元素	元素名称[属性名=“属性值”]{}
伪类选择器	选择一些元素具有的状态	元素:状态{}

4 属性

类型	属性
字体、文本	font-size 、color text-align 、 line-heigth
背景	background
边框	border
尺寸	width、height
盒子模型	margin(外边距) padding(内边距) float(浮动)
order
尺寸	width、height
盒子模型	margin(外边距) padding(内边距) float(浮动)