CSS 简介 CSS
CSS - 网络美容师
CSS是Cascading Style Sheets（级联样式表）的缩写，有时也称为CSS样式表或级联样式表，CSS也是一种标记语言。
CSS主要用于设置HTML页面中的文字内容（字体、大小、对齐方式等）、图片的外观（宽高、边框样式、边距等）以及布局和外观显示页面的样式。
使用场景：美化网页、布局页面
HTML的局限性：只注重内容的语义，无法美化网站
CSS最大的价值：HTML注重结构呈现，样式交给CSS，即结构（HTML）和样式（CSS）分离
CSS 语法规范
CSS 规则由两个主要部分组成：选择器和一个或多个声明
选择器{属性:值 属性:值}
大部分 CSS 都写在头顶上
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style><span class="token style language-css">
/* 选择器{样式} */
/* 给谁改样式{改什么样式} */
p {
color:red;
/* 修改了文字大小为12像素 */
font-size:12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
选择器是一个HTML标签，用于指定CSS样式css3内部格式，大括号是为对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是指在指定对象上设置的样式属性
属性和属性值之间使用英文“:”
使用英文“;” 区分多个键名称对
CSS代码风格
非强制规范，但符合实际开发编写形式
风格格式写作紧凑格式
h3 {color:deeppink;font-size:20px;}
扩展格式
强烈推荐，看起来不错，更直观
h3 {
color:deeppink;
font-size:20px;
}
风格案例
大写和小写字母都可以执行，但大写字母更好看，也更方便。 会有一些特殊情况。
空白规范
属性值上方，冒号旁边，留一个空格
选择器（标签）和花括号之间留有空格
h3 {
color: deeppink;
font-size: 20px;
}
CSS选择器的作用 CSS选择器
选择器（selector）就是根据不同的需求选择不同的标签。 这就是选择器的作用。 简单来说就是用来选择标签→选择标签并修改属性。
选择器类
选择器分为两类：基本选择器和复合选择器。
基本选择器由单个选择器组成css3内部格式，包括：标签选择器、类选择器、id选择器和转义选择器
标签选择器
是指以HTML标签名作为选择器，按标签名进行分类，为页面中的某类标签指定统一的CSS样式。
标签名 {
属性1：属性1;
属性2：属性2;
属性3：属性3;
}
功能：选择某一类型的所有标签
优点：可以快速、统一地为页面上的同类型标签设置标签
缺点：无法设计差异化样式，只能选择当前所有标签
类选择器
您可以单独选择一个或多个标签，您可以使用类选择器
.类名 {
属性1：属性1；
……
}
该结构需要使用class属性来调用class类的含义（开发中最常用）
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* red为我们自己定义的类名字,使用".";长名称或词组可以使用中横线来为选择器命名 ；不要使用纯数字、中文等命名，尽量使用英文字母来表示；命令一定要有意义，让别人一眼知道其意义*/
.box {
width:100px;
height:100px;
}
.pink {
color:pink;
}
.red {
background-color:red;
}
.green {
background-color:green;
}
</style>
</head>
<body>
<ul>
<li class="pink">123</li>
1234</li>
<li>123456</li>
</ul>
<div class="red box">红色</div>
<div class="green box">绿色</div>
<div class="red box">红色</div>
</body>
</html>
多个类名
将多个类名分配给一个标签，以达到更多选择的目的。 这些类名可以选择这个标签。
如何使用多个类名
<标签 class="类名 类名"></标签>
在class属性中写入多个类名
多个类名必须用空格分隔
多种类名使用场景
你可以区分一些元素，比如颜色和字体，你会有更多的选择机会。
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定样式。
HTML元素使用id属性来设置id选择器，CSS中的id选择器是用“#”定义的
#id名{
属性1：属性值1；
}
id 选择器只能被调用一次。 id 选择器通常用于页面上的唯一元素，并且通常与 JavaScript 一起使用。
通配符选择器
在CSS中，通配符选择器使用“*”，这意味着所有标签的样式都会改变。
* {
属性1:属性1；
……
}
不需要调用通配符选择器，样式会自动应用于所有元素。
CSS 字体属性
CSS 字体属性用于定义字体系列、大小、粗细和文本样式
字体系列 字体系列
CSS 使用 font-family 属性来定义文本的字体系列
p {font-family:"微软雅黑";}
div{font-family:Arial,"Microsoft Yahei","微软雅黑";}
英文中各种字体必须用冒号分隔；
一般来说，如果有一个字体由多个以空格分隔的短语组成，则添加破折号
尽量使用系统默认的字体，以确保它们可以在任何用户的浏览器中正确显示。
您可以在上面添加多种字体。 系统执行时，会先执行第一个字体。 如果不执行第二种字体，
字体大小
CSS 使用 font-size 属性来定义字体大小
选择器 {
font-size:数字px;
}
px（像素）大小是我们网页最常用的正文
title标签需要单独指定文字大小
字体粗细
选择器{
font-weight：数字；/normal； /bold
}
实际开发中，更建议标明数字的粗细
文本样式 font-style
选择器{
font-style: normal; 默认值，浏览器会显示标准的字体样式
font-style：italic; 浏览器会显示斜体的字体样式
}
字体复合样式
font属性可以结合上面的文字样式来写，这样可以节省更多的代码
选择器{
font:font-style font-weight font-size/line-height fong-family; #格式要求是这样，不能随意更改，并且各个属性中间要有空格分开
}
不需要设置的属性可以省略（取默认值）但font-size和font-family属性必须保留，否则font属性不起作用
CSS 文本属性
CSS Text 属性定义文本的外观
文字的颜色
color属性用于定义文本的颜色
选择器 {
color： 颜色;
}
表示提示：预定义颜色值，十六进制：必须有#如#FF0000，RGB编码：rgb(255,0,0)或rgb(100%,0%,0%)
开发中最常用的是十六进制
对齐文本 text-align
text-align属性用于设置元素中文本内容的水平对齐方式
选择器{
text-align:center; #居中对齐/left; #左对齐（默认值）/right； #右对齐
}
装饰文字 text-decoration
添加到文本上的装饰可以给文本添加逗号、删除线、上划线等
选择器{
text-decoration:underline
}
属性值说明
没有任何
默认，无装饰线（最常用）
强调
强调。 链接a带有逗号（常用）
上划线
上划线（很少使用）
直通
删除线（不常用）
您可以使用它来取消超链接的暂停符号。
文本装饰：无；
文本缩进 文本缩进
通常缩进段落的第一行
选择器{
text-indent:数字px； / 数字em；
}
em是相对单位，表示文字的大小，如果是2em，表示两个文字大小当前缩进之间的距离
如果当前元素没有设置大小，则将基于父元素的 1 文本大小
行距 行高
用于设置行间距（行高）来控制文本行之间的距离
选择器 {
line-height : 数字px;
}
线宽是指：上宽度、文字高度、下宽度→文字高度不会改变，均匀分布到上下宽度
CSS的导入形式
根据CSS样式的书写位置，CSS样式表可以分为三类：
内部样式表（嵌入样式表）
内部样式表（嵌入样式表）指的是html页面内部，它提取所有CSS代码并将它们放在单个标签中
<style>
div {
color: red;
font-size: 12px;
}
</style>
标签理论上可以放置在 HTML 文档中的任何位置，但通常放置在文档的标签中。 他们可以方便地控制整个页面元素的样式设置。 代码结构清晰，但没有实现结构和样式的分离。CSS是使用内部样式设置的，通常也称为内联导入
内联样式表
内联样式表（inline stylesheet）是在元素标签内部的style属性中设置CSS样式，适合改变简单的样式
<div style="color:red;font-size:12px;">
青春不常在，抓紧谈恋爱
</div>
外部样式表
实际开发的是外部样式表，适用于样式较多的情况。核心是：在CSS文件中单独提及样式，然后将CSS文件引入到HTML页面中使用
引入外部样式表分为两步：
1、新建一个样式文件，后缀为.css，并将所有CSS代码加载到该文件中
2.在HTML页面中，使用标签导入此文件
Emmet句型快速生成HTML结构句型
① 生成标签直接输入标签名称按tab键
②如果要生成多个相同的标签，只需添加*即可。 例如div*可以快速生成3个div
③如果有父子关系的标签，可以使用>如ul>li。
④ 如果有兄弟情的标签，就用+即可，如div+p
⑤ 如果生成的文件是类名或者id名，就写.demo或者#two tab即可。
⑥如果生成的div类名是有序的，可以使用自增符号$
⑦如果要在生成的标签内写入内容，可以使用{}来表达。
快速生成CSS风格的句子
CSS基本上可以缩写
例如w200可以通过按tab生成width:200px。
快速低格式代码
VScode 快速低格式代码：shift+alt+f 或右键低格式文档
我们还可以在保存页面时设置手动低级代码：
1. 文件→首选项→设置
2.搜索emmet.include
3.settings.json下的users中添加以下语句：
"editor.formatOnType": true,
"editor.formatOnSave": true
复合选择器
在CSS中，选择器按照类型可以分为基本选择器和复合选择器。 复合选择器建立在基本选择器的基础上，通过组合基本选择器生成。
复合选择器可以更准确、更高效地选择目标元素（标签）
复合选择器是由两个或多个基本选择器通过不同的方法组合而成。
常用的复合选择器包括：后代选择器、子选择器、联合选择器、伪装选择器等。
后代选择器
后代选择器也称为包含选择器。 它可以选择父元素上方的子元素。 书写方法是将内标写在上面，内标写在旁边，中间用空格隔开。 当标签嵌套时，内部标签是 该标签成为内部标签的后代
元素1 元素2{样式声明}
子选择器
子元素选择器（child selector）只能选择一个元素最近的一级子元素。 简单理解，就是选择弟弟元素。
元素1>元素2{样式声明}
联合选择器
联合选择器可以选择多组标签并同时为它们定义相同的样式。 通常用于集体申报。
联合选择器由各个选择器通过英文冒号（,）组成。 任何类型的选择器都可以用作联合选择器的一部分。
元素1,元素2{样式声明}
伪类选择器
伪类选择器用于为各个选择器添加特效，例如为链接添加特效，或者选择第 1 个或第 n 个元素。
编写伪类选择器最大的特点就是用逗号(:)表示，如：hover、:first-child
伪类选择器有很多种：如链接伪类、结构伪类等。
链接伪类选择器
a:link /*选择所有未被访问的链接*/
a:visited /*选择所有已被访问的链接*/
a:hover /*选择鼠标指针位于其上的链接*/
a:active /*选择活动链接（鼠标按下未弹起的链接）*/
链接伪类选择器注意事项
为了保证有效性，按照LVHA的顺序写入访问过的主动悬停的链接
由于链接在浏览器中有默认的样式，因此在实际工作中我们需要为链接指定单独的样式。
在实践中写作
/* a是标签选择器 所有的链接 */
a {
color:gray;
}
/* :hover是链接伪类选择器 鼠标经过*/
a：hover{
color:red; /*鼠标经过的时候，由原来的灰色变成了红*/
}
焦点伪类选择器
:focus 伪类选择器用于选择聚焦的表单元素。
焦点是光标，一般可以通过表单元素获取，所以这个选择器主要针对表单元素。
input：focus{
background-color:yellow;
}
元素显示模式 什么是元素的显示模式
功能：网页上有很多标签。 不同类型的标签用在不同的地方。 了解它们的特点可以更好地布局我们的网页。
元素显示模式是元素（标签）的显示方法。例如
自己占一行，比如一行可以放多少个
HTML元素通常分为两种类型：块元素和行内元素。
块元素特性
1.拥有一条线路
2.高度、宽度、外间距、内间距均可控制
3.默认长度为容器（父级长度）100%
4.它是一个容器和袋子，里面可以放置块元素或者行内元素。
注意
文本元素不能使用块元素
标签主要用来存储文本，所以
块级元素不能放在里面，尤其是
同样，~等都是文本块级标签，里面不能放置其他块级元素。
行内元素
标签是最典型的内联元素，有些地方也将内联元素称为内联元素
行内元素的特点：
1、相邻行的元素在一行，一行可以显示多个
2、直接设置高度和宽度无效
3.默认长度为自身内容的长度
4. 行内元素只能容纳文本或其他行内元素
内联块元素
内联元素中有几个特殊的标签 -
,,,它们同时具有块元素和行内元素的特性，有的资料称其为行内块元素
特征：
在具有相邻行内元素（行内块）的行上，但它们之间会有空格，并且一行可以显示多个（行内元素）特征
默认长度是其自身内容的长度
高度、行高、外行距、内行距均可控制
元素显示模式转换
特殊情况下，我们需要元素模式的转换，简单理解：一种模式的元素需要另一种模式的特征
例如，如果要缩小链接的触发范围
转换为块元素：display:block;
转换为内联元素：display: inline;
将其替换为内联块元素：display: inline-block;
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
a {
width: 120px;
height: 120px;
background: pink;
/* 将a变为快元素 */
display:block;
}
div {
/* 将div变为行内元素 */
display:inline;
}
span {
width: 100px;
height: 120px;
background: skyblue;
/* 将span变为行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">进行</a>
<a href="#
发表评论