当谈到前端开发时，HTML和CSS是密不可分的。HTML（超文本标记语言）用于定义网页的结构和内容，而CSS（层叠样式表）用于定义网页的样式和布局。

CSS相关总结

CSS的作用：CSS用于控制网页的外观和布局，包括字体、颜色、大小、边距、背景、定位等。它使开发人员能够将样式应用于HTML元素，从而实现网页的美化和个性化。

CSS的语法：CSS由选择器和声明块组成。选择器用于选择要应用样式的HTML元素，而声明块包含一系列的样式规则，每个规则由属性和值组成。例如，选择器可以是元素选择器（如p表示段落）或类选择器（如.my-class表示具有特定类名的元素）。

样式规则：CSS样式规则由属性和值组成。属性定义要修改的样式属性，如color表示文本颜色，而值定义属性的具体设置，如red表示红色。可以使用分号将多个属性-值对分隔开。

CSS选择器：选择器用于选择要应用样式的HTML元素。常见的选择器包括元素选择器（如p选择所有段落）、类选择器（如.my-class选择具有特定类名的元素）、ID选择器（如#my-id选择具有特定ID的元素）和属性选择器（如[type="text"]选择具有特定属性值的元素）。

CSS盒模型：CSS盒模型描述了HTML元素在页面中的布局。它由内容区域、内边距、边框和外边距组成。开发人员可以使用CSS属性来控制盒模型的各个部分，如padding用于设置内边距，border用于设置边框样式，margin用于设置外边距。

CSS优先级：当多个CSS规则应用于同一个元素时，会根据优先级规则来确定最终的样式。优先级由选择器的特殊性和来源决定。通常，ID选择器的优先级最高，其次是类选择器和属性选择器，最后是元素选择器。内联样式具有最高的优先级。

CSS布局：CSS提供了多种布局技术，如浮动、定位、弹性布局和网格布局。这些技术允许开发人员对网页元素进行精确的定位和布局，以实现各种页面结构和响应式设计。

CSS响应式设计：响应式设计是指根据设备的屏幕大小和特性，自动调整网页的布局和样式。CSS媒体查询是实现响应式设计的关键工具，它允许开发人员根据不同的屏幕尺寸应用不同的样式。

CSS预处理器：CSS预处理器是一种扩展CSS的工具，如Sass和Less。它们提供了更强大的功能，如变量、嵌套规则、混合器和函数，以提高CSS代码的可维护性和重用性。

~~本文详细叙述部分内容~~

CSS样式表

在html页面中，可以让页面美观，大方，且升级轻松、维护方便，还可以实现结构与显示分离

CSS样式规则

1、选择器

用于指定CSS样式作用的HTML对象，花括号内是对该对象的显示样式。

选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3......属性n：属性值n}

属性值和属性值之间使用“键值对”的方式出现，用英文“.“连接，多个键值之间使用英文“；”区分。

优缺

优点：使用灵活，可以对同一个标签做不同的设置CSS样式

缺点：在同一个标签中，不能统一格式。

常用选择器

标签选择器

结构：标签名{css属性名：属性值;}

作用：通过标签名，找到页面中所有的这类标签，设置样式

注意：

标签选择器选择的是一类标签，而不是单独的一个

标签选择器无论嵌套关系多深，都能够找到对应的标签

<style>
    p{
         color: red;
     }
</style>
<body>
   <p>
      标签选择器
   </p>
</body>

类选择器

结构：.类名{css属性名：属性值;}

作用：通过类名，找到页面中所有带有这个类名的标签，设置样式

注意：

所有的标签上都有class属性，class属性的属性值成为类名

类名可以由数字、字母、下划线、中划线组成，但是不能以数字或中划线开头

一个标签中可以同时有多个类名，类名之间用空格分开

类名可以重复，一个类选择器可以同时选中多个标签

<style>
    .one{
         color: red;
     }
</style>
<body>
   <div class = "one">
      类选择器
   </div>
</body>

id选择器

结构：#id属性值{css属性名：属性值;}

作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式

注意：

所有的标签上都有id属性

id属性值类似于身份证号码，在一个页面中唯一存在不可重复

一个标签上只能有一个id属性值

一个id选择器只能选中一个标签

<style>
    #one{
         color: red;
     }
</style>
<body>
   <div id = "one">
      id选择器
   </div>
</body>

通配符选择器

结构：*{css属性名：属性值;}

作用：找到页面中所有的标签，设置样式

注意：

开发中应用极少，只有特殊的情况下才会使用

在小页面中可能会用于去除页面中默认的margin和padding

<style>
    #{
         color: red;
     }
</style>
<body>
   <div>
      通配符选择器
   </div>
</body>

复合选择器

交集选择器

语法：选择器1选择器2选择器3...{css样式}

作用：选中页面中同时满足多个选择器的标签紧挨着的

注意：

之间没有任何东西隔开，紧挨着的

如果有标签选择器，标签选择器必须放在前面

<style>
    p.one{
         color: red;
     }
</style>
<body>
   <p class = "one">
       这个元素会被应用样式
   </p>
   <div>
       这个元素不会被应用样式
   </div>
</body>

并集选择器

语法：选择器1,选择器2,选择器3...{css样式}

作用：同时选中多组标签，设置相同的样式

注意：

选择器之间用，隔开

可以是基础选择器或者复合选择器

每组选择器通常一行写一个，提高代码的可读性

<style>
    p,div{
         color: red;
     }
</style>
<body>
   <p>
       这个元素会被应用样式
   </p>
   <div>
       这个元素也会被应用样式
   </div>
</body>

属性选择器

语法	用法
[属性]	选中含有指定属性的元素
[属性=属性值]	选中含有指定属性和指定属性值的元素
[属性^=属性值]	选中含有指定属性和指定属性值开头的元素
[属性$=属性值]	选中含有指定属性和指定属性值结尾的元素
[属性*=属性值]	选中指定属性名和含有指定属性值的元素

关系选择器

语法	用法
父亲>儿子	儿子单个选择
祖先后代	后代全部选择
兄+弟	相邻兄弟选择
兄~弟	全部兄弟选择

2、引入CSS样式表

行内式

行内式通常也被称为内联式，是通过标签的style属性来设置元素的样式，语法格式：

<标签名 style="属性1：属性1：属性值1；属性2：属性值2；......属性n：属性值n">
 
       内容
 
</标签名>

内嵌式

将CSS代码集中写在HTML文档中，这个CSS样式代码在头部标签中，并且使用语法格式：

 <head>
 
     <style type="text/css">
 
     选择器{属性1：属性值1；属性2：属性值2；属性3：属性值3......属性n：属性值n}
 
     </style>
 
</head>

链入式

链入式就是将所有的样式放在一个或者多个以上以.css为扩展名的外部样式表文件中，通过文件引入HTML文档中，基本语法格式：

<head>
 
    <link rel="stylesheet" type="text/css" href="css文件路径">
 
</head>

3、CSS文本外观属性

color

此属性用于定义文本颜色，其取值方式有三种：预定义的颜色、采用十六进制定义、RGB代码

letter-spacing

用于定义字间距，就是字符与字符之间的空白，其属性值可以为不同的单位数值，允许为负数，默认为normal，正数是增加间距，负数是减少间距。

word-spacing

用于定义英文单词之间的间距，对中文字符无效，取值方式与上面的letter-spacing一样

line-height

用于设置行间距，其属性值有3种单位，分别是px,em,%

text-align

设置文本内容水平对齐方式，相当于html中的align对齐属性

text-transform

可以控制英文字符大小写，其属性值如下：
1. none：不转换
1. capitalize：首字母大写
1. uppercase：全部字符转换为大写
1. lowercase：全部字符转换为小写

text-decoration

控制文本的下划线，属性值如下：
1. none：没有装饰，默认值
1. underline：下划线
1. overline：上划线
1. line-through：删除线

CSS是一种用于控制网页样式和布局的标记语言。它通过选择器和样式规则来定义网页元素的外观和行为。CSS具有丰富的特性和布局技术，使开发人员能够创建出各种各样的网页设计。了解和掌握CSS对于前端开发人员来说至关重要。

CSS部分语法浅析|青训营