web - CSS笔记

CSS 笔记

1 CSS 基本语法

1.1 HTML 和 CSS 的关系

CSS 样式作用在 HTML 元素上

1.2 HTML 元素树

根据 HTML 元素的书写位置，描述元素与元素之间的关系：

父元素
祖先元素
子元素
后代元素
兄弟元素

1.3 在 HTML 中使用 CSS

① 行内式

给 HTML 元素设置 style 属性，把 CSS 代码写在 style 属性的值里面。

<p style="color:red;width:200px;"></p>

② 内联式

把 CSS 代码写 style 标签中，style 标签建议放在 head 中。

<style>
    p {
        width: 200px;
        height: 300px;
    }
</style>

③ 外链式

把 CSS 代码写在独立 CSS 文件中，再在 html 文件中使用 link 关联 css 文件。

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

1.4 CSS 基本语法结构

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

选择器 {
    CSS属性: 值;
    CSS属性: 值;
    CSS属性: 值;
    CSS属性: 值;
}

/*紧凑写法*/
选择器 {CSS属性: 值; CSS属性: 值; CSS属性: 值; CSS属性: 值;}

选择器： 用于选择到要设置样式的元素。

声明块： 选择器后面的大括号，称之为一个声明块。声明块由一条一条的声明组成。

声明： 一条声明就是一个样式；声明必须用分号结尾； 声明由CSS属性和该属性的值组成。

② 行内式的语法结构

<标签名 style="CSS属性:值; CSS属性:值; CSS属性:值; "></标签名>

③ HTML 属性 和 CSS 属性

<!-- 使用 HTML 元素的属性设置宽高 -->
<img src="小乐入狱图.jpg" alt="小乐入狱" width="400" height="300">

<hr>

<!-- 使用 CSS 设置img元素宽高 -->
<img src="小乐入狱图.jpg" alt="小乐入狱" style="width: 400px; height: 300px;">

1.5 CSS 的层叠性

使用不用选择器，使用不同设置方式（内嵌、行内、外链）对某个元素所设置的样式，最终都会作用在元素上，这种特性就是 CSS 的层叠性。

1.6 CSS 注释

/* 这就是 CSS 的注释 */

/*
CSS 多行注释
CSS 多行注释
CSS 多行注释
CSS 多行注释
*/

1.7 CSS 中的长度单位

① px 像素

px 是最常用的 CSS 长度单位！

② em 元素字体大小的倍数

如果元素设置过 font-size，就安装font-size的设置；如果元素没有设置过 font-size，按照默认字体大小。

③ % 百分比

使用百分比设置宽参照父元素宽；使用百分比设置高参照父元素高；使用百分比设置字体大小参照默认字体大小（同 em）。

1.8 CSS 中的颜色设置方式

① 使用颜色名

使用颜色的英文名表示颜色：

 background-color: red;
background-color: green;
background-color: orange;
background-color: yellow;
background-color: cyan;
background-color: blue;
background-color: purple;

② rgb 方式

r  red    红色 取值范围：0~255 或者 0%~100%
g  green  绿色 取值范围：0~255 或者 0%~100%
b  blue   蓝色 取值范围：0~255 或者 0%~100%

rgb(0~255， 0~255， 0~255)
rgb(0%~100%， 0%~100%， 0%~100%)

注意：

如果三个颜色的数值是一样的，是灰色；数值越小灰色越深，数值为0是黑色；数值越大灰色越浅，数值为 255 是白色。

③ 十六进制方式

1. 十六进制方式表示颜色原理与 rgb 方式一样
2. 使用两个十六进制的数字表示一个颜色，rgb共需要三组6个十六进制的数字
3. 每组的取值范围是 00 ~ ff    十六进制表示的 ff 等于十进制表示的 255
4. 十六进制可以简写为使用3个十六进制数字表示颜色，简写条件：表示每组颜色的两个数字是一样，且三组颜色每组的两个数都相同

#rrggbb;
#rgb;

 background-color: #a134bf;
background-color: #00bb00;
background-color: #0000ff;
background-color: #ff00ff;
background-color: #afafaf;

/* 十六进制表示方式 简写 */
background-color: #f90;   /* #ff9900 */
background-color: #aaf199; /* 无法简写 */
background-color: #ccc;  /* #cccccc */

2 CSS 基本选择器

2.1 四种基本选择器

① 标签名选择器

标签名选择器也叫元素名选择器：

标签名 {
    
}

② 类名选择器

<p class="item"></p>
<p class="item active"></p>

.类名 {
    
}

注意：

不同的元素可以设置相同的类名； 一个元素可以设置多个类名。

③ ID 选择器

#ID名 {
    
}

注意：

元素的ID名必须是唯一的。

④ 全局选择器

* {
    
}

全局选择器能够选择所有的元素！

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

style行内式  > ID选择器 > 类名选择器 > 标签名选择器 > 全局选择器

注意： 选择器优先级一致，后面的覆盖前面的！

3 盒子模型

3.1 盒子模型显示模式

① 块级（block）元素

显示模式为块级的元素称之为块级元素， 特点如下：

1. 块级元素独占一行。
2. 块级元素可以设置宽高。

② 行内（inline）元素

显示模式为行内的元素称之为行内元素， 特点如下：

1. 行内元素不会独占一行。
2. 行内元素无法设置宽度。

③ 行内块（inline-block）元素

显示模式为行内块的元素称之为行内块级元素， 特点如下：

1. 行内块元素不会独占一行。
2. 行内块元素可以设置宽高。

3.2 HTML 元素的默认显示模式

① 行内元素

文本标签、a 标签、span 标签、label 标签

em strong sub sup del ins a span label

② 块级元素

格式排版标签、列表标签、表格（除了 td和th）、form、option

h1~h6  p  hr  br  pre  div   ul li ol dl dt dd  table caption thead tbody tfoot tr form option

③ 行内块元素

图片标签、th和td标签、表单控件（input、select、textarea、button）、iframe

img th td input select textarea button iframe

3.3 修改元素的显示模式

通过给元素设置 CSS 属性display 设置元素的显示模式，display 属性可以设置的值如下：

block		设置为块级显示模式
inline		设置为行内显示模式
inine-block 设置为行内块显示模式
none		隐藏元素

4 常用 CSS 属性

4.1 字体属性

属性名	作用	属性值
font-family	设置字体族科	字体名称、字体列表
font-size	设置字体大小	使用长度表示
font-weight	设置字体粗细	normal： 正常。 bold： 粗体字。 **lighter：**细体字。 100 ~ 900 的整百的数字，100300表示细体字，<br>400、500表示正常粗细，600900表示粗体字。
font-style	设置斜体字	normal： 正常，默认值。 italic： 斜体字。
font	复合属性	多个值，多个值之间使用空格隔开。

① 字体族科 font-family

/* 设置单个的字体族科 */
font-family: "Microsoft YaHei";

/* 设置字体列表 */
/* 可以设置一个或多个字体族科，如果客户电脑上没有前面的字体，可以使用后面指定的字体，多个字体族科使用逗号隔开  */
font-family: "Microsoft YaHei", "黑体", sans-serif;

注意：

所设置的字体族科，必须客户电脑山安装了该字体，才会生效！！！

字体可以分为衬线字体和非衬线字体两大类：

衬线字体： serif ，笔画粗细不一致，如：宋体、楷体、仿宋 等

非衬线字体： sans-serif，笔画粗细一致，如：微软雅黑、黑体、思源黑体、兰亭黑体等

② font 复合属性

1、 font 是 font-family、font-size、font-weight、font-style 的复合属性
2、 font 的属性值可以写多个（子属性的值），多个值之间使用空格隔开
3. 多个值的顺序要求： 后面两个值必须是字体大小和字体族科，且至少有这两个值； 字体大小前面可以设置粗细、斜体且粗细和斜体没有顺序要求

/* font 复合属性最少可以设置字体大小和字体族科 */
font: 20px "宋体","楷体",serif;
/* 设置字体加粗 字体大小 字体族科 */
font: 700 20px "宋体","楷体",serif;
/* 设置字体斜体、字体大小 字体族科 */
font: italic 20px "宋体","楷体",serif;
/* 设置字体加粗、字体斜体、字体大小 字体族科 */
font: italic 700 20px "宋体","楷体",serif;

4.2 文字颜色

属性名	作用	属性值
color	设置文字颜色	颜色

4.3 文本属性

属性名	作用	属性值
letter-spacing	设置字母间距	长度
word-spacing	设置单词间距	长度
text-decoration	文本修饰	**none：**无修饰效果。 **underline：**下划线。 **overline：**上划线。 **line-through：**删除线。
text-indent	首行缩进	长度
text-align	设置文本在元素中的水平对齐方式	left： 靠左对齐。 **right：**靠右对齐。 center： 居中对齐。
vertical-align	设置沿基线的对齐方式	baseline： 沿基线对齐。 **top：**沿顶线对齐。 **bottom：**沿底线对齐。 **middle：**沿中线对齐。 设置长度，表示与基线的距离，允许正负值。
line-height	设置行高	长度

① vertical-align

vertical-align 的使用场景？
1. 用于给行内元素或者行内块元素设置与同行文本的对齐方式（该属性一定要设置到行内或行内块元素）
2. 设置单元格中内容垂直对齐方式。

② line-height

什么是行高？
1. 上一行文本的中线与下一行文本的中线之间的距离就是行高。
2. 行高不是行距（行距是上一行的底线与下一行顶线的距离）； 设置行高会对行距产生影响


如何设置文本内容在元素中垂直居中？
1. 设置元素的行高与元素的高度一致。
2. 此种方式值适合元素中只有一行文本内容的情况。

/*  line-height 可以复合 font 属性中  */
/* font 复合属性写在后面会覆盖 line-height */
 font: 20px/100px "翩翩体-简";

总结

总结：
1. CSS中的长度单位
2. CSS中的颜色设置方式
3. CSS中四种基本选择器
4. 盒子模型的显示模式
5. 字体属性、文字颜色
6. 文本属性