CSS教程

CSS

CSS简介

CSS（Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的语言。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发中。

CSS分类

内联样式表（行内样式表）

样式写到标签内部，可以控制当前标签的样式，特殊情况使用。

<p style="color:red; font-size:14px;">文字内容</p>

内部样式表

写在标签中，脱离结构，可以控制当前页面的所有标签，较为常用。

外部样式表

单独新建一个CSS文件，完全脱离结构，可以控制整个网站的所有标签，最常用。

<link rel="stylesheet" href="./css/index.css">

CSS选择器

CSS选择器是CSS规则的第一部分，它是选择HTML元素的方式。

CSS属性采取键值对的形式。“属性名：属性值；”

CSS选择器：选择标签；CSS属性：修改样式

基础选择器

类型选择器

类型选择器选择某个类型的元素，也称为标签选择器

CSS层叠性：CSS规则可以同时作用于一个元素，浏览器通过特定规则据欸的那个最终生效的样式。层叠性解决了样式冲突问题。原则：后定义的样式覆盖先前的样式。（就近原则）

类选择器

类选择器选择某1个元素或者多个元素。

注意：

1.类名自定义，不能是中文、纯数字

2.多个英文单词组成尽量使用-链接

3.命名要有意义，尽量见名知义

4.class属性可以有多类名，中间用空格隔开。例如

冬梅

id选择器

选择HTML中具有特定id属性的唯一元素。

通配符选择器

通配选择器可以选择HTML中所有的标签，进行样式修改。

* {
    margin: 0;
    padding: 0;
}

特殊情况下通过通配符清除所有元素的默认边距和填充，统一不同浏览器的默认样式。

* {
    margin: 0; /* 去除所有元素的外边距 */
    padding: 0; /* 去除所有元素的内边距 */
    box-sizing: border-box; /* 统一盒模型 */
}

水平居中对齐：

.center{
    margin: 0 auto;
} 

关系选择器

关系选择器是通过位置关系来选择目标元素（标签），可以更精准选择某些元素。

后代选择器

选择某个元素的后代元素（不限层级，包括子元素、孙元素等）。

子代选择器

选择某个元素的直接子元素（仅限一层）

兄弟选择器

分为邻接兄弟选择器、通用兄弟选择器。

分组选择器

是将不同的选择器组合到一起，使用逗号分割。也称为并集选择器。

使用场景：

1.多个元素具备相同样式。

语法：

div,
span {
    color: pink;
}

伪类和伪元素

伪类选择器

选择元素的特定状态或结构位置，符号是冒号(:)

状态伪类选择器

链接伪类

链接伪类用于根据链接的不同状态（如未访问、悬停、点击等）为其添加样式，从而提升用户体验和界面交互性。

使用场景：

1.设置链接不同状态的样式。

伪类顺序规则（LVHA顺序）：a:link -> a:visited -> a:hover -> a:active

用户行为伪类

用户以某种方式和文档交互的时候应用，这些用户行为伪类，有时叫做动态伪类。

使用场景：

1.鼠标经过元素的时候，修改样式。

2.表单获得焦点的时候

结构伪类选择器

根据元素的位置选择目标元素。

使用场景：

1.选择第1个或者最后一个或者第n个元素

表单伪类选择器

针对表单元素的状态。

使用场景：

1.表单按钮禁用的时候，调整颜色。

2.复选框选中修改样式。

伪元素选择器

选择元素的特定部分（使用双冒号::）

使用场景：

1.让表单里面的placeholder文字变颜色。

2.做很多的修饰效果。

注意：

.nav 类选择器

:hover 伪类选择器

::before 伪元素选择器

属性选择器

根据元素的属性特征来精准定位元素，从而实现更灵活的样式控制。

使用场景：

1.表单样式控制

2.图标字体控制

3.国家化语言适配等等

CSS文本样式

CSS文本样式用于控制网页中文字的外观，包括字体、颜色、对齐、间距等，主要分为两大类：

字体样式：使用哪种字体，字体大小、字体粗体、斜体等等。

文本布局：文本对齐、行高、字间距、首行缩进等。

注意：文字是无法直接通过CSS来更改样式的，必须要用适合的标签来包裹它们，本质是修改标签样式，里面文字跟随样式变化。

字体颜色color

最常见的颜色指定方式，使用关键字、十六进制和rgb()值。学习可以用关键字，开发用十六进制，特殊情况用rgb。

• 关键字：这些颜色通常不会在生产环境的网站中使用，主要学习使用。比如red、green、blue、pink等。

  • 十六进制：这个是开发最常用的。实际开发中，我们从设计稿直接复制即可。比如：红色#ff0000或者#f00。

  • rgb格式：rgb()函数接受三个参数，分别表示颜色的红、绿和蓝。也是设计稿复制的。比如红色rgb(255,0,0)。

  • 另有rgba(255,0,0,0)文字透明。最后一个数值取值0~1，0完全透明，1完全不透明。

  字体族font-family

给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。

body {
    font-family: Arial, Helvetica, sans-serif;
}

属性值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体。

字体大小

font-size可以设置字体大小。

单位是：像素px。CSS像素是CSS中用于定义长度、尺寸的单位（简写为px）。

p {
    font-size: 16px;
}

注意：不同浏览器默认字体大小不一样，谷歌默认16px，建议给body标签统一指定大小，做到浏览器统一。

字体风格

font-style用来打开和关闭文本italic（斜体）。

属性值：

• normal：将文本设置为普通字体（将存在的斜体关闭）。
• italic：如果当前字体的斜体版本可用，那么文本设置为斜体版本。

p {
    font-style: italic; /* 设置斜体样式 */
}

最常见：让em或者i标签取消默认倾斜

em {
    font-style: normal; /* 让em取消斜体 */
}

字体粗体

font-weight设置文字的粗体大小。

属性值：

• normal：正常粗细
• bold：加粗

其他值受属性影响基本不用。

数字属性值（常用）：

• 400：正常粗细
• 700：加粗

取值范围100~900之间，常用就是400和700.

使用场景：

1.很多标题是不要加粗的，此时可以用CSS取消加粗。

2.部分大批量文字可以利用CSS加粗。

字体装饰text-decoration

设置/取消字体上的文本装饰。

使用场景：

1.最常见设置链接下划线，比如取消下划线等。

2.特殊情况添加删除线。

属性值：

• none：取消文本装饰
• underline：下划线
• overline：上划线
• line-through：穿过文本的线

文本对齐text-align

控制文本在它所在的块级盒子内如何水平对齐。

使用场景：

1.文本/图片在盒子水平对齐。

2.文章文字两端对齐。

属性值：

• left：文本左对齐
• right：文本右对齐
• center：文本水平居中对齐
• justify：自动改变字间距，两端对齐

首行缩进text-indent

设置块级元素中文本行前面空格（缩进）的长度。

使用场景：

1.段落首行缩进2个字的效果。

2.logo隐藏文字效果

属性值：

• 数字

  常见单位是em，相对单位，本元素的文字大小。1em等于当前元素的字体大小，如果当前元素没有大小，则按照父元素文字大小。

文本字符间距letter-spacing

用于设置文本字符的间距。

使用场景：

1.调整字与字之间距离，用户体验更好。

属性值：

• 数字。

  p {
      letter-spacing: 2px;
  }

行高line-height

设置文本每行之间的高。

使用场景：

1.设置多行文本之间的上下间距。

2.让单行文本垂直居中。

属性值：

• 数字px

• 数字不带单位（当前字体大小的倍数）

  p {
      line-height: 1.5;
  }

font简写

font简写属性在一个声明中设置多个字体属性。

使用场景：

1.给整个页面设置相关字体样式

语法：

font:font-style font-weight font-size/line-height font-family;

• 其中font-size和font-family是必须写
• 其他可以省略，默认显示。
• 属性有严格的书写顺序。

CSS继承性

子元素自动继承父元素的某些CSS样式属性。

• 主要继承跟文字相关的样式属性，比如字体、颜色、文本对齐等。
• 但是子元素定义自己样式，会优先自己样式。

Xmind

快捷键：

• tab：下一级
• enter：同一级

CSS三大特性

浏览器通过优先级来判断哪些属性值与一个元素最为相关。优先级是基于不同种类选择器组成的匹配规则。

原则：

1.优先级相等的时候，CSS中最后的那个声明的样式将会被应用到元素上。（层叠遵循就近原则）

2.其余判断哪个选择器权重高，优先执行哪个样式。

3.权重是4位一组，是分开的层级，不能进位。

注意：继承的权重是0

（1）继承性

子元素继承父元素样式，主要是跟文字相关的样式继承。

（2）层叠性

后面样式会覆盖前面样式，主要解决样式冲突问题。但是要看选择器权重来确定优先级。

（3）优先级

优先级由选择器的权重决定，权重高的规则覆盖权重低的规则。

盒子模型

所有的元素都被一个个的“盒子”包围着，学会盒子模型可以实现准确布局、处理元素排列的关键。

在CSS中，我们有几种类型的盒子，一般分为区块盒子(block boxes)和行内盒子(inline boxes)

边框

border属性用于设置盒子边框。

使用场景：

1.设置盒子四条或者单独边框。

属性值：

border：边框粗细 边框样式 边框颜色；

• 边框由三部分属性值组成，中间必须空格隔开。
• 三部分属性值没有先后顺序。

边框样式的取值有：dotted点状边框；dashed虚线边框；solid实线边框

边框不同线条具有不同风格–使用场景：

1.四个边框不同。

2.底部一条线做分割线。

属性：

根据方位名词。top bottom left right

• border-top：1px solid pink;
• border-bottom：1px solid pink;
• border-left：1px solid pink;
• border-right：1px solid pink;

圆角边框

border-radius允许你设置元素的外边框圆角。

使用场景：

1.盒子设置圆角更好看。

2.盒子或者图片设置为圆形。

属性：

border-radius: 属性值;

• 数字/百分比

.button {
    border-radius: 10px;
}

胶囊按钮：设置圆角为“宽度或者高度”的一半，就可以实现。

圆形：正方形设置圆角为高度“一半”或者“50%”。

内边距

内边距（padding）位于边框和内容区域之间。

使用场景：

1.让盒子内容和边框保留一定距离，更美观。

内边距(padding)多个值用空格隔开。顺时针记忆。

外边距

外边距（margin）是盒子周围一圈看不到的空间，它会把其他元素推离盒子。

使用场景：

1.让元素与元素保留一定距离，更美观。

注意：

1.行内元素左右外边距生效，上下外边距无效。

2.行内元素设置宽度和高度也无效。

技巧：

区块元素可以利用margin实现水平居中。

• 块级盒子必须有宽度。
• 只需要设置左右外边距为auto就可以。

区块元素上下外边距会出现折叠（合并）情况。

• 并列关系（兄弟）的区块元素。
• 两个上下外边距将合并为一个外边距，其大小等于最大的单个外边距。

注意：这个是浏览器的特性，我们只设置一个盒子外边距即可。

区块元素上下外边距会出现塌陷情况。

• 嵌套关系（父子）的区块元素。
• 给子盒子设置上下外边距会让父盒子塌陷移动。

解决方案：

1.给父盒子添加边框。（父盒子本身有边框则不会出现问题）

2.给父盒子添加上内边距

3.给父盒子添加：overflow: hidden；属性

尺寸计算

在CSS盒子模型的默认定义里，除了宽度和高度增加盒子大小之外，padding和border都会让盒子变大。这样我们在计算盒子大小的时候都会带来困扰。

box-sizing用于定义元素的盒模型计算方式，控制元素的width和height是否包含padding和border。

语法：

box-sizing：属性值；

box-sizing: border-box;

实际开发中，虽然默认是第一个值，但是我们更提倡使用border-box，可以直接让所有标签修改。

盒子背景

background用于设置元素背景相关属性，包括背景颜色、背景图片、背景位置、背景重复方式等。

使用场景：

1.给盒子添加背景图片，更加精美。

2.给列表添加相同的小图标，装饰效果。

3.给页面添加大的背景图片，展示更震撼。

4.纯CSS实现背景渐变效果。

背景复合写法：

background: 颜色 图片 重复 固定 位置/尺寸；

顺序无关

背景渐变

在CSS中，可以通过linear-gradient（线性渐变）和radial-gradient（径向渐变）为元素添加渐变背景。

使用场景：

1.文字底色渐变甚至动画，更吸引用户。

2.盒子添加更美观。

使用技巧：

1.实际开发，UI设计稿可以直接复制即可。

2.可以利用trae图片自动生成。

盒子阴影

CSS box-shadow属性用于在元素的框架上添加阴影效果。

使用场景：

1.盒子添加阴影，效果更立体。

2.鼠标经过元素显示阴影，更加突出元素。

语法：

box-shadow：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色；

• 多个属性用空格隔开
• x轴偏移量和y轴偏移量是必须要写，其余可以省略采取默认值。
• 默认是外阴影，如果改为内阴影要写inset

.nav li {
    box-shadow: 0 15px 30px rgba(0,0,0,1);
}

过渡

过渡效果（transition）用于在元素的属性值发生变化时，平滑地过渡（而不是瞬间切换）。

场景：

1.鼠标经过图片放大。

2.表单获得焦点，输入框变宽。

语法：

transition：过渡属性 过渡时间；

• 属性值中间空格隔开。
• 过渡属性如果都要变化可以写all
• 过渡时间单位是秒s，比如0.2s等

input:hover {
    transition: all 0.3s;
}

样式初始化

浏览器对HTML元素有默认样式（如margin、padding、font-size），不同浏览器的默认样式可能不一致，导致跨浏览器兼容性问题。

初始化的核心目的：

• 统一浏览器默认样式，消除差异。
• 减少后续开发中的冗余代码。
• 提高代码的可维护性。

字体图标

字体图标（Icon Fonts）是一种将图标以字体形式嵌入网页的技术，允许开发者像使用文字一样通过CSS控制图标的样式（如颜色、大小、阴影等）。

使用场景：

1.导航菜单图标。

2.按钮操作图标。

3.结合动画效果。

优势：

1.矢量缩放：无损放大缩小

2.样式灵活：通过CSS直接修改颜色、大小、阴影等属性。

3.减少HTTP请求：一个字体文件可包含多个图标，比多张图片更高效。

4.兼容性好：支持所有现代浏览器，甚至部分旧版浏览器。

字体图标要么设计师提供，要么去字体库下载。

使用字体图标的步骤：

（1）下载字体图标文件

去官网或者设计师准备字体图标文件，保存到项目目录下。

（2）引入html文件中

根据提供的压缩包，引入CSS文件（link方式）

（3）使用字体图标

一般情况下，我们通过标签调用类名选择对应字体图标。根据实际需求，调整字体样式，比如颜色、大小、位置等。

精灵图

CSS精灵图（CSS Sprites）是将多个小图标或图像合并到一张大图中，通过调整background-position属性来显示特定部分的图像技术。

使用场景：

1.导航菜单图标。

2.按钮操作图标。

3.复杂彩色小图标更适合精灵图。

优势：

1.减少HTTP请求：多个小图标合并为一张图片，只需一次请求。

2.提升性能：减少网络开销，尤其适合移动端或低带宽场景。

3.统一管理：方便维护图标集，避免文件分散。

注意：通过合理使用CSS精灵图，可以有效优化网页性能。对于复杂场景（如高清屏适配），建议结合SVG或字体图标使用。

原理：

1.给盒子添加背景图片。

2.通过背景定位（background-position）移动位置对齐。

3.注意网页的坐标不同，大多数都是负值。