Day05 CSS 学习笔记HTML 负责页面结构，CSS 负责页面效果。 CSS 的样式是作用在 HTML 标签上的。

1 CSS 的基本语法

1.1 HTML 和 CSS 的关系

HTML 负责页面结构，CSS 负责页面效果。

CSS 的样式是作用在 HTML 标签上的。

1.2 HTML 元素树

HTML 标签 也可以称之为 HTML 元素。

根据 HTML 元素不同的位置关系，可以使用以下概念来进行描述：

父元素： 包裹某个元素的元素就是该元素的父元素。

**祖先元素：**一个元素的父元素以及父元素的父元素一直往上直到根元素统称为该元素的祖先元素。

子元素： A 是 B 的父元素， B 就是 A 的子元素。

后代元素： 一个元素的子元素以及子元素的子元素，凡是包含在元素内，统称为该元素的后代元素。

兄弟元素： 具有相同父元素的元素互为兄弟元素。

1.3 在 HTML 中使用 CSS

① 行内式

在 HTML 标签内容直接设置 style 属性，style 属性值中写 css 代码

<div sytle="css代码..."></div>

② 内联式

在 style 标签内写 css 代码， style 标签可以放在任意位置，建议放在 head 内。

<head>
    <style>
        	css 代码 ...
    </style>
</head>

③ 外链式

css 写在独立的 css 文件中，在 html 中使用 link 与 css 文件关联。link 标签建议写在 head 内。

<link rel="stylesheet" href="css 文件的地址">

1.4 CSS 基本语法结构

① 内联式和外链式的语法结构

选择器 {
	CSS属性名：值;
	CSS属性名：值;
	CSS属性名：值;
	CSS属性名：值;
}

选择器： 指定要设置样式的元素。

声明块： 选择器后面 {} 包裹的就是声明块，通过声明块设置 css 样式，声明块由多条声明组成。

声明： 一条声明就设置一 css 样式，声明由 css属性名和它的值组成。每条声明的后面一定加 ;。

② 行内式的语法结构

<div style="css属性名:值; css属性名:值; css属性名:值;"></div>

③ HTML 属性和 CSS 属性

 <img width="200" src="1.jpg" alt="美女">
 <img style="width:300px;" src="2.jpg" alt="美女">

1.5 CSS 的层叠性

层叠性： 不同地方对某个元素样式的设置，都会作用在一起。

不同地方如果设置了不同的 css 属性，都会作用在元素上；但是如果不同地方设置了相同的css属性，后面的覆盖前面的（选择器相同）。

1.6 CSS 注释

/*  这是 CSS 的注释 */

/*
    这是CSS的注释
    这是CSS的注释
*/

1.7 CSS 长度单位

CSS 中设置长度，必须加单位，否则样式无效。

① px 像素

width: 100px;
height: 100px;
font-size: 16px;

② em

em 是默认字体大小的倍数；

width: 10em;
height: 10em;
font-size: 2em;

③ % 百分比

如果以百分比为单位设置宽高，参照父元素的宽高。

如果以百分比为单位设置字体大小，参照默认字体大小（类似于 em）。

width: 50%;
height: 40%;
font-size: 120%;

1.8 CSS 颜色设置方式

① 使用颜色名 colorName 设置颜色

background-color: red;
color: green;

常见的颜色名：

red、orange、yellow、green、cyan、blue、purple、pink、gray、white、black 等

② rgb 方式设置颜色

r 表示红色、g表示绿色、b 表示蓝色，这三种颜色是计算机三原色，使用三原色可以调配出任何一种计算机可以表示的颜色。

/* 使用 0~255 之间的数字表示一种颜色 */
background-color: rgb(255, 100, 200);
background-color: rgb(255, 0, 0); /*红*/
background-color: rgb(0, 0, 0); /*黑色*/

/*使用百分比表示一种颜色*/
background-color: rgb(80%, 76%, 12%);
background-color: rgb(100%, 100%, 100%); /*白色*/
background-color; rgb(10%, 10%, 10%); /*灰色*/

三种颜色全是 255 或者 100%，结果是白色；

三种颜色全是 0 或者 0%，结果是黑色；

三种颜色都一样，结果是灰色，数值或百分比越大，灰色越浅。

③ 十六进制方式设置颜色

#rrggbb

分别使用两个16进制的数字表示一个颜色，原理同 rgb 一模一样。

如果表示一个颜色的两个数字是相同的，且三个颜色各自都相同，可以简写为三个 16 进制数字。

background-color: #abcdef;

background-color: #ff9900;
background-color: #f90;

background-color: #cccccc;
background-color: #ccc;

background-color: #ffb0aa;  /*无法简写*/

2 CSS 基本选择器

2.1 四种基本选择器

① 标签名选择器

标签名 {
    声明语句;
    声明语句;
    声明语句;
}

② ID 名选择器

#ID名 {
    声明语句;
    声明语句;
    声明语句;
}

注意：

元素的 ID 名是不能重复的！必须唯一！

③ 类名选择器

.类名 {
    声明语句;
    声明语句;
    声明语句;   
}

注意：

不同的元素可以具有相同的类名。

一个元素可以具有多个类名。

④ 全局选择器

* {
    声明语句;
    声明语句;
    声明语句;   
}

全局选择器可以选择到所有的元素。

2.2 基本选择器之间的优先级

ID名选择器 > 类名选择器 > 标签名选择器 > 全局选择器

如果多个选择器都可以选择到一个元素，所有样式都会作用在该元素上；如果有相同的样式设置，哪一个生效，安装如下规则：

看选择器优先级，优先级最高高生效。

如果两个选择器优先级相同，后面的覆盖前面的。

Day05 CSS 学习笔记