聊聊CSS(层叠样式表)都有哪些主要内容

前言：CSS是一种用于网页设计的语言，它可以为HTML（超文本标记语言）或XML（可扩展标记语言）等文档添加样式和布局。我们通过它可以控制元素的大小、间距、颜色等，是个强大的‘美颜工具’，它可以让我们的网页更加的美观，给用户带来更好的阅读感！

文章目录：

1. 选择器
2. 声明块
3. 属性
4. 值
5. 单位
6. 文本样式
7. 背景样式
8. 盒模型样式
9. 定位和布局样式
10. 动画和过滤样式

一、选择器

用于选择要应用样式的HTML元素

这是个比较重要的内容，我在上上上次特意写了一篇关于CSS选择器的内容，点击进入

二、声明块

由花括号('{}')包含的样式规则，每个规则由属性和值组成。简单理解：CSS声明块是由一组CSS属性以及对应的值构成的。它们通常出现在选择器中。

p{
 color:red;
 font-size:30px;

}

通过上面的例子，‘h1’是元素选择器，‘color’和‘font-size’ 是属性名，‘red’和‘30px’ 是值。这个声明块应用于所有HTML中的‘h1’元素，将‘h1’的样式设置为红色同时字体大小为30像素。

三、属性

用于定义元素的样式，如颜色、尺寸、边框等

div{
    background:red;
    border:1px solid black;
    width:100px;
    height:100px;
    


}

通过上面例子：给div盒子添加了样式背景‘background’属性、边框‘border’属性、尺寸‘width’,‘height’属性

四、值

用于指定属性的具体取值，如颜色、字体名称、像素值、百分比等

div{
    background:red;
    border:1px solid black;
    width:100px;
    height:100px;
    


}

通过上面的案例：给div盒子添加了样式，背景颜色‘red’红色、边框‘1px solid black’ 1像素黑素边框、div盒子大小高低‘100px’\‘100px’宽100高100

五、单位

表示值得度量单位，如像素(px)、百分百、em等

这里要唠嗑一下px和em的区别，前者绝对单位，表示像素值，它的大小不受其他因素影响;后者是相对单位，相对于当前元素的字体大小，比如当前元素字体大小为16px，那么‘1em’就是等于16px。

六、文本样式

文本样式，就是用于设置文本的样式，比如：字体、颜色、粗细等

• color:设置字体颜色；
• font-size:设置字体的大小；
• font-family:设置字体的类型,比如‘隶书，楷书’；
• font-weight:设置字体的粗细；
• font-style:设置字体的样式，比如‘斜体，倾斜’；
• text-decoration:设置文字修饰，比如‘下划线、删除线’；
• letter-spacing:设置字母的间距；
• word-spacing:设置单词间距；
• 等等等

七、背景样式

用于设置元素的背景，比如：颜色、图像等

• background-color：设置背景颜色；
• background-image：设置背景图片；
• background-repeat：设置背景图片的平铺方式；
• background-position：设置背景图片的位置；
• background-size：设置背景图片的尺寸；
• background-origin：设置背景图片的起点位置；
• background-clip：设置背景图片的显示范围；
• background-attachment：设置背景图片是否随页面滚动。
• 等等等

八、盒模型样式

用于设置元素的尺寸、内边距、外边距等

这个比较重点内容了，在这里多唠嗑一点：CSS盒模型描述了元素的几何布局，将元素视为一个矩形的盒子，它是由四条边界（margin、border、padding、content）组成

通过以下属性可以修改CSS盒模型样式：

• width 和 height：设置元素盒子的宽度和高度。
• margin：设置元素盒子外边框的宽度，用于控制元素与相邻元素之间的间距。
• border：设置元素盒子的边框，包括边框的样式、宽度和颜色。
• padding：设置元素盒子内边距的大小，用于控制元素内容与边框之间的空间。
• box-sizing：设置元素盒模型的计算方式，有两个可选值：content-box（默认值，盒子总宽度 = 内容宽度 + padding + border + margin）和border-box（盒子总宽度 = 内容宽度 + margin）。
• overflow：设置盒子内部内容超出盒子大小时的处理方式，可选值为visible（默认值，内容不裁剪）、hidden（内容裁剪），scroll（出现滚动条）。

我们通过上面这些属性的组合，可以实现多种不同的盒模型样式

九、定位和布局样式

用于控制元素的位置和布局，比如：浮动、定位等

定位布局样式也是个非常重要的知识点

• 盒子模型（box model）：CSS将每个元素视为一个矩形盒子，由内容区域、内边距、边框和外边距组成，通过调整这些属性来控制盒子的大小和位置。
• 浮动（float）：通过设置元素的浮动属性，使元素脱离文档流，实现文字环绕、多列布局等效果。
• 定位（position）：通过设置元素的定位属性，可以将元素定位在文档流之外，并且可以精确地控制元素的位置。
• 弹性盒子（flexbox）：一种基于flex容器和flex元素的布局模型，适用于各种屏幕尺寸和设备类型。
• 网格（grid）：一种类似于表格的布局方式，可帮助我们在网页中创建复杂的布局结构。

通过上面的这些样式，结合使用，可以实现很多很多丰富多彩的网页布局效果

十、动画和过渡样式

用于实现元素的动画和渐变效果

• 过渡（transition）：通过定义元素样式在一段时间内进行平滑的转换，实现动态效果。
• 关键帧动画（@keyframe animation）：通过定义关键帧之间的样式变化来实现动态效果，可以控制元素的旋转、缩放、移动等。
• 动画（animation）：通过定义一系列动画帧和动画间隔来实现复杂的动态效果，可以控制动画的时间、速度、方向和循环次数等。
• 变换（transform）：通过对元素进行旋转、缩放、移动、扭曲等操作，可以实现元素的变形效果。

通过上面的这些样式，结合使用，可以实现很多很多炫酷的动态效果。

总结：上面的十个CSS主要内容,方便Web开发者对 HTML 元素进行排版、布局、美化和动画等等效果的实现。如果上面有不对的，希望大佬能够指出。