前面的文章也说过了，CSS主要能够起到网页美化的作用，并且与html一样，不是一门编程语言，它只要起到标记的作用，这篇主要介绍CSS的主要功能和个人理解。
作为CSS，想修改网页中的部分，无非是网页中的字体样式、文本样式、列表样式、盒模型、页面布局。想要简单了解CSS，我觉得需要首先先熟悉了CSS能够修改哪些内容以及怎样的语句修改页面布局。
字体大小font-size属性和字体样式font-style属性
要想知道怎样修改字体大小，首先需要了解字体的大小单位都有什么 1、绝对单位
- 英寸（in）1in=2.54cm
- 厘米（cm）
- 毫米（mm）
- 磅（pt）
- pica（pc）12点活字印刷领域使用较多
2、相对单位
- em 表示元素的字体高度，它能根据字体的font-size属性来确定单位的大小
- ex 在实际使用中，浏览器将通过em的值除以2得到ex的值
- px 像素值
- 百分比，通过他的上一级元素来确定
font-size属性
系统用于设置文本字体的大小，其值可以是绝对或者相对值。绝对值将文本设置为指定的大小，不允许用户在所有的浏览器中改变文本的大小；相对值是相对于周围的元素来设置大小，允许用户在浏览器中
font-size:绝对大小（相对大小）关键字
font-style属性
font-style:normal | italic | oblique
语法说明：
- norma：表示不使用斜体，是默认属性
- italic：表示使用斜体显示文字
- oblique：表示使用倾斜字体显示
字体系列font-family属性和字体变体font-variant属性
font-family:字体1,字体2,字体3,...,字体n
属性值为多个字体名称时用,分割，浏览器会依次查找字体。如果字体中存在空格就必须要用双引号将字体括起来！
font-variant:normal | small-caps
- normal:表示是正常的字体，是font-variant的默认属性，主要是英文
- samll-caps表示使用小型的大写字母字体
字体粗细font-weight属性和字体font属性
font-weight:normal | bold | bolder | lighter | 100 | 200 |...|900
- noraml:表示正常的字体
- bold：表示标准的粗体
- bolder：表示特粗体
- lighter：表示细体
- 整数：取值为100,200,300...来表示粗细程度，100为最细、400等价于normal、700等价于bold
font:font-style font-weight font-varoant font-size/line-height font-family
利用font可以一次完成多个字体属性的设置，两个属性值必须使用空格间隔开，前三个属性排序不分前后，默认值为normal，设置时必须先设置大小再设置字体系列。
CSS文本样式
字符间距letter-spacing属性
letter-spacing:normal | 长度单位
normal表示默认间距，长度一般为正数，也可以使用负数，取决于浏览器是否支持。word-spacing属性主要针对英语单词，letter-spacing属性对中文、英文字符串均起作用。
行距line-height属性
line-height:noraml | length
normal表示正常行高，length可以是百分比也可以是数字，其是基于字体的高度尺寸。
首行缩进text-indent属性
text-indent:长度单位 | 百分比单位
长度单位可以使用绝对单位和相对单位，也可以使用百分比单位。
字符装饰text-decoration
text-decoration:none（文字无装饰） | underline（文字加下划线） | overline（文字加上划线） | line-through（文字加删除线）
英文大小写转换text-transform属性
text-transform:capitalize | uppercase | lowercase | none
capitalize:将每个单词的第一个字母转换为大写，其余不转换
uppercase:转换为大写 lowercase:转换为小写
none:不转换
水平对齐text-align属性与垂直对齐vertical-align属性
（水平对齐）text-align:left（默认值） | right | center | justify(两端对齐)
（垂直对齐）vertical-align:top | bottom | text-top | text-bottom
垂直对齐的部分语法说明：
- text-top：把元素的顶端与父元素字体的顶端对齐
- text-bottom：把元素的底端与父元素字体的底端对齐
CSS颜色与背景
网页设计颜色的值很重要，尽可能知道常用的颜色对应的十六进制数
(74条消息) RGB颜色与颜色名称对照表_IT技术学习的博客-CSDN博客
颜色color属性
color:rgb(r%,g%,b%) | rgb(r,g,b) | #ffffff | #3fe | colorname(red,blue...)
背景background属性
background-image:url("图像文件名")（表示图像的相对或绝对路径，在同一路径下则可以直接用图像问价名称） | none（表示不用图像作为背景）
background-repeat属性
background-repeat:repeat | no-repeat | repeat-x | repeat-y
语法说明：
- repeat：使用背景图像完全填充元素大小的空间
- no-repeat：不使用北京图片完全填充元素
- repeat-x：使用背景图像在水平方向从左到右填充元素大小的空间
- repeat-y：使用背景图像在垂直方向从上到下填充元素大小的空间
background-attachment属性
background-attachment：scroll | fixed
语法说明：
- scroll：表示在文字页面滚动时，背景附件一起滚动
- fixed：表示在文字页面滚动时，背景附件不滚动
background-position属性
background-position：参数1参数2
语法说明：图像的位置设置需要两个参数，并且需要用空格分隔，第一个为水平位置，第二个为竖直位置，参数值可以是如left|right|top|bottom的单词，也可以是x%y%的百分数。
CSS盒模型
在网页设计中，每个元素都是长方形的盒子，便产生了特定的盒子模型，其中，重要的概念有边界（margin）、边框（border）、填充/内边界（padding）、内容（content）。
边界属性设置
margin-(top | right | bottom | left):长度单位 |百分比单位|auto
语法说明：
设置边界需要设置四个参数值，按顺序分别是“上，右，下，左”顺时针的四个边。如果只设置一个数，则表示四个边界均相同，如果设置两个参数值，那么第一个表示上下两个边，第二个数字表示左右，如果设置三个数第二个数为左右两个边。
边框属性
语法说明：
- none：定义无边框
- hidden：与none相同，应用于表示例外，用于解决边框冲突
- dotted：定义点状边框
- dashed：定义虚线
- solid：定义实现
- double：定义双实线。双线的宽度相当于border-width的值
- groove：定义3D凹槽边框
- ridge：定义山脊状边框
- inset：定义使页面沉入感边框
- outset：定义使页面浮出感边框
padding设置
padding:长度 | 百分比
也可以设置四个值，与边框类似，单位可以是长度单位也可以是百分比。
上面只是对于该课程的基础的总结，接下来需要深入理解掉CSS的知识点。并且通过代码的实践来加深印象，争取独立写出代码！！！
总结
CSS（层叠样式表）是一种用于描述网页外观和布局的语言，它可以对 HTML 元素添加样式，例如字体、颜色、大小、位置、背景等。 下面是一些学习 CSS 的步骤：
- 了解 HTML 和 CSS 的关联性：HTML 和 CSS 是密不可分的，它们共同构成了网页的基础。在学习 CSS 之前，建议先学习一些 HTML，了解 HTML 元素的基本结构和属性。
- 学习 CSS 的基础知识：学习 CSS 的基础知识，包括选择器、属性和值等。可以通过阅读书籍、文章、教程等来学习。
- 练习实战：可以通过练习实战来加深对 CSS 的理解和掌握，例如设计一个简单的网页，或者修改已有的网页样式等。
- 学习 CSS 框架：CSS 框架是一些现成的 CSS 样式，可以帮助开发者快速构建网页。常用的 CSS 框架有 Bootstrap、Foundation 等，可以通过学习这些框架来加深对 CSS 的理解和掌握。
- 学习 CSS 预处理器：CSS 预处理器是一些工具，可以将 CSS 代码编写成 JavaScript 代码，然后由编译器编译成 CSS 代码。常用的 CSS 预处理器有 Sass、LESS 等，可以通过学习这些预处理器来提高 CSS 的编写效率和代码质量。
CSS 与 HTML 的关联性是非常密切的，它们共同构成了网页的基础。在使用 CSS 时，需要了解 HTML 元素的基本结构和属性，才能对其进行样式的设置。同时，HTML 元素也可以作为 CSS 选择器的一部分，用来指定样式的设置。因此，学习 CSS 和 HTML 是相互促进的过程，建议在学习 CSS 之前先学习一些 HTML。
CSS是怎样工作的
CSS（层叠样式表）是一种用于描述网页外观和布局的语言，它可以对 HTML 元素添加样式，例如字体、颜色、大小、位置、背景等。 CSS 工作的原理是通过选择器和属性来指定样式。选择器用于指定要设置样式的 HTML 元素，属性用于指定要设置的样式。例如，可以使用以下代码来设置段落的字体为 Arial：
css
Copy code
p {
font-family: Arial;
}
在这个代码中，p 是选择器，用于指定要设置样式的 HTML 元素是段落（<p>）。font-family 是属性，用于指定要设置的样式是字体为 Arial。 CSS 还支持类选择器和 ID 选择器，可以用来指定样式的应用范围。类选择器可以用于指定样式的应用范围为多个 HTML 元素，例如：
css
Copy code
.button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
在这个代码中，.button 是类选择器，用于指定样式的应用范围为所有添加了 .button 类名的 HTML 元素。可以在 HTML 中使用以下代码来添加类选择器：
php
Copy code
<button class="button">Click me</button>
ID 选择器用于指定样式的应用范围为单个 HTML 元素，例如：
css
Copy code
#header {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}
在这个代码中，#header 是 ID 选择器，用于指定样式的应用范围为所有添加了 #header ID 的 HTML 元素。可以在 HTML 中使用以下代码来添加 ID 选择器：
php
Copy code
<header id="header">Header</header>
通过使用 CSS，开发者可以轻松地指定网页的样式和布局，从而提高网页的可读性和可用性。
CSS（层叠样式表）是一种用于描述网页外观和布局的语言，它可以对 HTML 元素添加样式，例如字体、颜色、大小、位置、背景等。在前端开发中，CSS 的作用是：
- 描述网页的外观和布局：CSS 可以对 HTML 元素添加样式，例如字体、颜色、大小、位置、背景等，从而描述网页的外观和布局。
- 提高网页的可读性和可用性：通过使用 CSS，开发者可以指定网页的字体、颜色、大小等样式，从而提高网页的可读性和可用性。
- 简化网页的维护和更新：CSS 可以将网页的样式和布局分离出来，从而简化网页的维护和更新。例如，如果需要修改网页的样式，只需要修改 CSS 文件即可，而不需要修改 HTML 文件。
- 支持响应式设计：CSS 可以支持响应式设计，从而使网页在不同设备上都能够自适应显示。例如，可以使用 CSS 的媒体查询语法来指定不同设备上的样式。
- 支持动画和过渡效果：CSS 可以支持动画和过渡效果，从而使网页更加生动和有趣。例如，可以使用 CSS 的动画语法来指定元素的运动轨迹和变化速度等。 总之，CSS 在前端开发中起着非常重要的作用，它可以帮助开发者更好地描述网页的外观和布局，提高网页的可读性和可用性，简化网页的维护和更新，支持响应式设计和动画效果等。
总而言之 CSS（层叠样式表）是一种用于描述网页外观和布局的语言，它可以对 HTML 元素添加样式，例如字体、颜色、大小、位置、背景等。CSS 可以在以下场景中发挥作用：
- Web 设计：CSS 可以用于描述网页的外观和布局，从而帮助设计师设计出更加美观和有吸引力的网页。
- Web 开发：CSS 可以用于简化网页的维护和更新，从而帮助开发者更快地完成网页的开发和维护工作。
- 响应式设计：CSS 可以用于支持响应式设计，从而使网页在不同设备上都能够自适应显示。
- 动画和过渡效果：CSS 可以用于支持动画和过渡效果，从而使网页更加生动和有趣。
- 游戏开发：CSS 可以用于简化游戏的开发和维护工作，从而帮助开发者更快地完成游戏的开发和维护工作。
- 移动应用开发：CSS 可以用于简化移动应用的开发和维护工作，从而帮助开发者更快地完成移动应用的开发和维护工作。
总之，CSS 可以在 Web 设计、Web 开发、响应式设计、动画和过渡效果、游戏开发和移动应用开发等场景中发挥作用。
