19-谢文姬-2.16-学习笔记

CSS引入方式

CSS样式表

可分为三大类：行内样式表（行内式）、内部样式表（嵌入式）、外部样式表（链接式）。

内部样式表

内部样式表是写到HTML页面内部。是将所有的CSS代码抽取出来，单独放到一个< style>标签中。

行内样式表

行内样式表是在元素标签内部的< style>属性中设定的CSS样式。适合于修改简单样式。
例： < div style=“color: red; font-size: 12px;”> 你好 < div />

外部样式表

外部样式表是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。（实际开发中都是外部样式表，适用于样式较多的情况）
引入外部样式表的步骤：

1. 新建一个后缀名为：.css的样式文件（只需写样式），把所有CSS代码都放入此文件中。
2. 在HTML文件中，使用< link>标签引入这个文件。
   例：< link rel=“stylesheet” href=“css文件路径”>

因此，制作页面分为两步：

1. 搭建HTML结构页面
2. 修改CSS样式

总结：

Emmet语法

快速生成HTML结构语法：
快速生成CSS标签：采用缩写方式即可。 如：text-align： center；(只需输入tac，按下Tab键即可）

CSS符合选择器

CSS符合选择器是建立在基础选择器之上的，对基础选择器进行组合形成的。
常用复合选择器：后代选择器、子选择器、并集选择器、伪类选择器。

后代选择器

又称包含选择器，可以选择父元素里的子元素。
语法： 元素1 元素2 {样式声明}（表示选择元素1里的所有元素2(后代元素)）
例： ul li {样式声明} 即：选择ul标签里的所有li标签元素。
注意：

子元素选择器

子元素选择器又叫子选择器，只选择最近一级子元素。
语法： 元素1>元素2 {样式声明}（表示选择元素1里面的所有直接后代(子元素)元素2）

并集选择器

并集选择器是可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。
是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
元素1，元素2 {样式声明}（表示选择元素1和元素2）
例： ul，div {样式声明} 即：选择ul和div标签元素。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。用冒号(：)表示，如：hover，：first-child。
伪类选择器有链接伪类、结构伪类、表格伪类等。

链接伪类选择器

使用场景：
注意：

• 为确保生效，要按照LVHA的顺序声明：（:link，:visited，:hover，:active）
• 因a链接在浏览器中有默认样式，所以要给链接单独指定样式。

:focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素。焦点就是光标，一般情况< input>类表单元素才能获取。
语法：
input：focus {
background-color：yellow;
}

CSS的元素显示模式

元素显示模式就是元素（标签）以什么方式进行显示。比如< div>自己独占一行，比如一行可以放多个< span>
HTML元素一般分为块元素和行内元素两种类型。

块元素

特点：
注意：

行内元素

常见的行内元素有：< a>、< strong>、< b>、< em>、< i>、< del>、< s>、< ins>、< u>、< span>等，其中< span>标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
特点：
注意：

行内块元素

在行内元素中有几个特殊的标签----< img />、< input />、< td>等他们同时具有块元素和行内元素的特点，有些资料会称他们为行内块元素。
特点：

元素显示模式的转换

特殊情况下，我们需要元素模式的转换，简单理解为：一个模式的元素需要另一种模式的特性。比如想要增加链接< a>的触发范围。

• 转换为块元素：display：block;
• 转换为行内元素：display：inline;
• 转换为行内块元素：display：inline-block;

若想要单行文字垂直居中，只需文字行高等于块级元素的高度即可