7.19

最新推荐文章于 2024-09-30 22:47:32 发布

原创最新推荐文章于 2024-09-30 22:47:32 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

本文详细介绍了CSS的基础知识，包括语法规范、代码风格，从标签选择器、类选择器、ID选择器到复合选择器，再到字体、文本属性和引入方式。深入探讨了背景设置和元素显示模式，以及Emmet语法在快速开发中的应用。

CSS

一、CSS简介

1.语法规范

<style>

/* 选择器{样式} */

p {color: red;font-size: 12px;}

</style>

2.代码风格

（1）紧凑格式

（2）展开格式

二、基础选择器

1.选择器的作用

选择器（选择符）就是根据不同雪球把不同的标签选出来这就是选择器的作用。

2.标签选择器

标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

作用：标签选择器可以把某一类标签全部选择出来，比如有<div>标签和所有的<span>标签。

优点：能快速为页面中同类型的标签统一设置样式。

缺点：不能设置差异化样式，只能选择全部的当前标签。

3.类选择器

用于差异化不同标签的样式，单独选一个或几个标签。

类选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号表示。

注意：

类选择器使用“.”进行标识，后面紧跟类名（自定义，自己命名）

不要用纯数字、中午等命名，尽量使用英文字母

长名称或词组可以使用横线来为选择器命名

命名要有意义

4.类选择器的特殊使用——多类名

把标签元素相同样式放到一个分类里

多个类名中间必须用空格分开

节省代码量，便于修改

5.id选择器

id 选择器可以为标由特定 id 的HTML 元素指定特定样式

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#”来定义

id 属性只能在每个 HTML 文档中出现一次(只能调用一次)

6.通配符选择器

用 “ * ” 定义，表示选取页面中所有元素（标签）

通配符不需要调用

特殊情况使用，权重低于类选择器

7.基础选择器总结

三、CSS字体属性

1. font-family 设置字体系列

各种字体之间必须使用英文状态下的逗号隔开

如果有空格隔开的多个单词组成的字体加引号

尽量使用系统默认字体，保证在任何浏览器中都能正确显示

2.font-size 设置字体大小

px（像素）大小是网页最常用单位

谷歌浏览器默认文字大小为 16px

不同浏览器默认显示文字大小不一致，要确认一个明确值

可以给 body 指定整个页面文字大小

标题需要单独指定大小

3.font-weight设置字体粗细

normal 默认值400 bold 加粗700 number 不加单位

4.font-style设置字体样式

normal 默认值 italic 斜体

5.字体复合属性

使用 font 属性时，必须按照语法格式中的顺序书写，各个属性以空格隔开；

不需要设置的属性可以省略，但必须保留 font-size font-family 属性，否则 font 属性不起作用；

顺序：font-style font-weigth font-size/line-height font-family

6.字体属性总结

四、CSS文本属性

CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

1.文本颜色color

表示方法：

2.文本对齐text-align

left 默认左对齐

right 右对齐

center 居中

3.文本装饰text-decoration

4.文本缩进text-indent

通常是段落的首行缩进，用2em表示

5.行间距line-height

line-height: 25px;

</style>

6.文本属性总结

四、CSS的引入方式

1.内部样式表

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

(1)<style> 标签理论上可以放在 HTML 文档的任何地方，但一般放在 <head> 标签中

(2)通过此种方式，可以方便的控制当前整个页面中的元素样式表

(3)代码结构清晰，单并没有实现结构样式分离

(4)是常用样式表

2.行内样式表

行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式，适合修改简单样式。

style其实就是标签的属性；

在双引号中间，写法要符合CSS规范；

可以控制当前的标签设置样式；

3.外部样式表

核心是把样式单独写到 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用

引入外部样式表分为两步：

（1）新建一个后缀名为 .css 的样式文件，把所有代码都放入此文件中

(2)在 HTML 页面中，使用 <link> 标签引入这个文件

4.引入方式总结

五、Emmet语法

1.快速生成HTML结构语法

2.快速生成CSS样式

3.快速格式化代码

Vscode 快捷键：Shift + Alt +F

六、CSS复合选择器

1.简介：复合选择器是建立在基础选择器之上，对基础组合器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素

复合选择器是由多个基础选择器通过不同的方式组合而成

常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器

2.后代选择器

后代选择器又称为包含选择器，可以选择父元素里的子元素，写法为：外层标签在前，内层标签在后，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

语法：元素1 元素2 {样式声明} /*选择元素1里面的所有元素2*

元素 1 与元素 2 中间用空格隔开
元素 1是父级，元素 2 是子级，最终选择元素 2
元素 1 和元素 2 可以是任意基础选择器

3.子选择器

子选择器只能选择作为某元素的最近一级子元素。

语法：元素1>元素2（样式声明）

元素 1 和元素 2 中间用>大于号隔开

元素 1 是父级，元素 2 是子级，最终选择的是元素 2

元素 2 必须是亲儿子（最近一级）

4.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。

并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分

语法：元素1，元素2 { 样式声明 }

元素 1 和元素 2 中间用,逗号隔开

并集选择器通常用于集体声明

任何形式的选择器都可以作为并集选择器的一部分

5.伪类选择器

伪类选择器用于向某些选择器添加特殊效果，最大特点是用:冒号表示，主要有链接伪类、结构伪类等。

5.1链接伪类

a:link 选择所有未被访问的链接

a:visited 选择所有已被访问的链接

a:hover 选择鼠标指针位于其上的链接

a:active 选择活动链接（鼠标按下未弹起）

注意:

务必按照 LVHA 的顺序声明，否则不生效

<a> 链接在浏览器中具有默认样式，所以我们需要给链接单独指定样式

在实际开发中大多只使用

5.2 focus 伪类

focus 伪类选择器用于选取获得焦点的表单元素

焦点就是光标，一般情况 <input> 类表单元素才能获取，因此这个选择器主要针对表单元素来说

6.复合选择器总结

七、CSS元素显示模式

元素显示模式转换：

转换为块元素：display:block

转换为行内元素：display:inline

转换为行内块：display:linline-block

例:

八、CSS背景

通过 CSS 背景属性，可以给页面元素添加背景样式

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等

例: