零基础学前端-传统前端开发（第三期-CSS介绍与应用）
接着上期内容中学到的HTML，接下来继续CSS的学习
还是上期说到的理解：HTML像PPT里的模板一样，而CSS像是PPT里模板基础上的一般样式美化一样
CSS可以指定已有的html内容调整颜色，字体，大小，间距，边框等样式
我们先来了解CSS引用的方法（类似于你word文档里怎么改字体）
一，CSS引用
内联样式 ：
直接在 HTML 元素的标签中使用 style 属性。例如：
<p style="color: red; font-size: 14px;">这是一个段落</p>这种方式优点是简单直接，缺点是样式和内容混杂在一起，不利于维护。
内部样式表 ：
在 HTML 的 <head> 部分使用 <style> 标签。例如：
<style>p { color: blue; font - size: 16px; }</style>这种方式将样式定义在一个地方，优点是可以应用于整个页面，写起来方便，但不适合大型网站。
但是把内部样式和内部样式表放一起会怎么样呢
可以看到，内部样式的优先级大于内部样式表
外部样式表 ：
将样式定义在一个单独的.css 文件中，然后通过 HTML 的 <link> 标签引入。例如：
HTML 文件中：<link rel="stylesheet" type="text/css" href="styles.css">styles.css 文件中：p {color: green;font-size: 18px;}这种方式便于维护和共享样式，适合大型网站，但是对于新手来说很不友好，需要经常分析
那么优先级怎么样呢
可以看到，优先级顺序为内部样式>内部样式表>外部样式表
以上就是CSS引用样式的方法，切记，并非某一个引用方式就是最好的，需要更具自己的情况酌情使用
了解CSS的引用方式后，可以发现，CSS引用在一些特定情况，比如我需要用内部样式美化，但是用到引用的地方太多，用内联样式的话太复杂，用外部样式表的话不值得为一个标签美化再新建一个文件
这时候就要用到CSS的新功能
二，CSS选择器
介绍：就好像去超市买东西一样，有很多东西，他们被整齐地分类摆放，就像HTML页面中的各个元素一样。CSS选择器的作用，就像是你在超市里挑选商品的方式。
你可以指定某一个元素，而不必一个一个通过引用样式的方式来美化
元素选择器
用于选择 HTML 元素类型。
p {color: black;}这会选中网页上所有的<p>元素，并将其颜色设置为黑色。
类选择器
用于选择具有特定类的 HTML 元素。在 HTML 元素中通过class属性指定类名，在 CSS 中使用“.”加类名来选择。
HTML：<div class="box">内容</div>CSS：.box {background - color: yellow;}这会选中所有 class 属性值为“box”的元素，并将其背景颜色设置为黄色。
ID 选择器
用于选择具有特定 ID 的 HTML 元素。在 HTML 元素中通过id属性指定 ID 名，在 CSS 中使用“#”加 ID 名来选择
HTML：<p id="para1">段落内容</p>CSS：#para1 {font - weight: bold;}这会选中 id 为“para1”的<p>元素，并将其字体加粗。
通配符选择器
用“*”表示，会选中页面上的所有元素
* {margin: 0;padding: 0;}这会将所有元素的外边距和内边距都设置为 0，常用于重置样式的初始状态
但是在实际使用中，我们会遇到类似于间距不够，或者需要指定某一块区域颜色的情况就要用到CSS的下一个内容了
三，CSS盒子模型
每个 HTML 元素都可以看作是一个矩形的盒子，CSS 盒模型包括内容（content）、边框（border）、内边距（padding）、外边距（margin）。
内容：元素实际的内容区域。
内边距：元素内容与边框之间的空间。
边框：围绕在元素内容和内边距周围的边框。
外边距：元素与相邻元素之间的空白区域。
理解起来比较抽象，换一个说法来理解：
盒子本身（内容区）
比喻：想象盒子里面装着一个礼物，这个礼物就代表盒子的内容区。比如一个HTML元素中的文字、图片等，这些就是盒子的内容，就像礼物的本体一样，是盒子里面最重要的部分。
作用：内容区是盒子模型的核心，它规定了实际内容的大小和范围，是盒子模型的基础部分。
填充（内边距）
比喻：在装礼物的盒子内部，通常会有一些填充物，比如海绵、棉花等，用来保护礼物，让礼物在盒子里不会晃动。这些填充物就相当于CSS盒子模型中的内边距（padding）。
作用：内边距可以让内容区与盒子的边界保持一定的空间，使内容不会紧贴盒子边缘，从而让盒子看起来更美观、更。舒适比如，如果你把文字直接贴在盒子的边缘，可能会显得很拥挤，而通过设置内边距，就可以为文字留出一些空间，让文字看起来更舒服。
边框（border）
比喻：盒子的外层通常有一层硬纸板或者塑料边框，用来保护礼物。CSS盒子模型中的边框（border）就相当于盒子的这层硬纸板，它把内边距和内容区包裹起来，形成一个完整的盒子轮廓。
作用：边框可以清晰地界定盒子的范围，让盒子的边界更加明确。你可以给边框设置不同的颜色、宽度和样式，比如实线、虚线等，这样可以让盒子的外观更加多样化，就像给盒子装饰一样。
外边距（margin）
比喻：当你把装好礼物的盒子放在桌子上或者柜子里的时候，盒子和桌子边缘或者其他盒子之间会有一些空隙，这些空隙就相当于CSS盒子模型中的外边距（margin）。外边距的作用是让盒子之间或者盒子与页面边缘之间保持一定的距离。
作用：通过设置外边距，可以避免盒子之间相互重叠或者贴得太近，从而让页面布局更加合理、清晰。比如，如果你有多个盒子并排放在一起，没有设置外边距的话，它们可能会紧紧地贴在一起，看起来很混乱；而设置了适当的外边距之后，每个盒子之间就会有一定的间隔，看起来就会更加整齐、美观。
总结一下，CSS盒子模型就像一个包装好的礼物盒子，内容区是盒子里面的礼物，内边距是盒子内部的填充物，边框是盒子的硬纸板边缘，外边距是盒子与其他物体之间的空隙。这四部分共同构成了一个完整的盒子，让HTML页面中的元素能够更加合理地布局和显示
以下是盒子模型的属性标签
内边距（padding）：padding: 20px;（四边内边距都为 20 像素）padding - top: 10px;（设置顶部内边距）padding - right: 15px;（设置右侧内边距）padding - bottom: 5px;（设置底部内边距）padding - left: 20px;（设置左侧内边距）边框（border）：border: 2px solid black;（边框宽度为 2 像素，样式为实线，颜色为黑色）border - top - width: 3px;（设置顶部边框宽度）border - right - style: dashed;（设置右侧边框为虚线）border - bottom - color: red;（设置底部边框颜色为红色）border - left: 1px solid green;（可以同时设置左侧边框的宽度、样式和颜色）外边距（margin）：margin: 30px;（四边外边距都为 30 像素）margin - top: 10px;（设置顶部外边距）margin - right: 15px;（设置右侧外边距）margin - bottom: 5px;（设置底部外边距）margin - left: 20px;（设置左侧外边距）
四，CSS布局方式
浮动（float）布局
float属性可以使元素向左或向右浮动，常用于创建多列布局。取值为 left（向左浮动）、right（向右浮动）、none（默认值，不浮动）。例如：.float - box {float: left;width: 200px;height: 200px;background - color: lightblue;}这会使具有类“float - box”的元素向左浮动，宽度为 200 像素，高度为 200 像素，背景颜色为浅蓝色。清除浮动：当子元素浮动后，父元素可能会出现高度塌陷的问题，需要使用清除浮动的方法。常见的清除浮动方法有：clear: both;属性，用于清除元素前面的浮动。例如在需要清除浮动的元素上添加style="clear: both;"。
定位（position）布局
position属性用于定位元素，有以下几种取值：relative（相对定位） ：元素相对于其正常位置进行定位。例如：.relative - box {position: relative;left: 30px;top: 20px;}这会使元素在原来的位置基础上，向左移动 30 像素，向上移动 20 像素。absolute（绝对定位） ：元素相对于最近的已定位的祖先元素进行定位。如果元素没有已定位的祖先元素，则相对于初始包含块（通常是浏览器窗口）定位。例如：.absolute - box {position: absolute;left: 100px;top: 50px;background - color: pink;}这会使元素距离浏览器窗口左边缘 100 像素，上边缘 50 像素的位置进行定位，背景颜色为粉色。fixed（固定定位） ：元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。例如：.fixed - box {position: fixed;right: 20px;bottom: 30px;background - color: orange;}这会使元素始终在浏览器窗口右下角附近显示，距离右边缘 20 像素，底边缘 30 像素，背景颜色为橙色。
弹性布局（flexbox）
是一种一维布局方式，可以轻松地对子元素进行对齐、排列和分配额外空间。首先将父元素设置为display: flex;。例如：.flex - container {display: flex;}然后可以使用以下属性对子元素进行布局：主轴对齐（justify - content） ：用于在主轴（默认是水平方向）上对齐子元素。可选值有 flex - start（左对齐）、flex - end（右对齐）、center（居中对齐）、space - between（两端对齐，子元素之间的间隔相等）、space - around（子元素周围都有相等的间隔）。例如：.flex - container {justify - content: space - between;}交叉轴对齐（align - items） ：用于在交叉轴（默认是垂直方向）上对齐子元素。可选值有 flex - start（顶部对齐）、flex - end（底部对齐）、center（居中对齐）、stretch（拉伸以填满容器）。例如：.flex - container {align - items: center;}还可以通过为子元素设置flex - grow（设置子元素的扩展比例）、flex - shrink（设置子元素的收缩比例）、flex - basis（设置子元素在分配多余空间之前的初始主轴大小）等属性来控制子元素的大小和分布。
以下内容就是很常见的用于美化字体的标签类型了，就不过多赘述了，就由各位朋友自行尝试
CSS设置字体属性（样式）
字体属性font - family：设置字体系列，例如：font - family: Arial, sans - serif;（指定字体为 Arial，如果没有 Arial，则使用默认的无衬线字体）常见的字体系列还有宋体（SimSun）、黑体（SimHei）等。font - size：设置字体大小，单位可以是像素（px）、百分比（%）、相对长度单位（em、rem）等。例如：font - size: 16px;（设置字体大小为 16 像素）font - size: 1.2em;（设置字体大小相对于父元素字体大小的 1.2 倍）font - weight：设置字体粗细，常见的值有 normal（正常）和 bold（粗体）。也可以使用数字 100 - 900 来表示不同的粗细程度，例如：font - weight: bold;（设置字体为粗体）font - weight: 300;（设置字体相对较细）文字样式color：设置文字颜色，例如：color: blue;（设置文字颜色为蓝色）color: #ff0000;（使用十六进制颜色代码设置红色）color: rgb(0, 128, 0);（使用 rgb 颜色模式设置绿色）text - align：设置文字对齐方式，可选值有 left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）。例如：text - align: center;（使元素内的文字居中对齐）text - decoration：设置文字装饰，常见的值有 none（无装饰）、underline（下划线）、overline（上划线）、line - through（删除线）。例如：text - decoration: underline;（给文字添加下划线）line - height：设置行高，例如：line - height: 1.5;（设置行高为字体大小的 1.5 倍，用于改善文本的可读性）背景和边框样式
背景background - color：设置元素的背景颜色。例如：background - color: lightgray;（设置背景颜色为浅灰色）background - image：设置元素的背景图片。例如：background - image: url('image.jpg');（使用图片文件作为背景）background - repeat：设置背景图片的重复方式。取值有 repeat（默认，背景图片在水平和垂直方向上都重复）、repeat - x（背景图片在水平方向上重复）、repeat - y（背景图片在垂直方向上重复）、no - repeat（背景图片不重复）。例如：background - repeat: no - repeat;（背景图片只显示一次）background - position：设置背景图片的位置。可以使用关键字（如 left、center、right、top、bottom）或坐标值（如 10px 20px）。例如：background - position: center;（使背景图片在元素中居中显示）background - position: 50% 50%;（使背景图片的中心点位于元素的中心）可以使用background属性综合设置背景的各种属性，例如：background: lightblue url('image.jpg') no - repeat center;（设置背景颜色为浅蓝色，背景图片为 image.jpg，图片不重复，在元素中心显示）边框样式（除了前面提到的基本边框设置外，还有更多样式）border - radius：设置边框的圆角半径，用于创建圆角矩形。例如：border - radius: 10px;（设置四个角的圆角半径都为 10 像素）border - top - left - radius: 20px;（单独设置左上角的圆角半径为 20 像素）box - shadow：为元素添加阴影。其语法为box - shadow: h - offset v - offset blur - radius spread - radius color;。例如：box - shadow: 5px 5px 5px 0px gray;（元素在右侧和下方各偏移 5 像素的位置添加灰色阴影，模糊半径为 5 像素，阴影不扩展）本期内容比较多，结合上一期HTML介绍与应用就是基本的网站排版与样式的教学，学会后即可做一个简单的模仿网站，这个我之后单独发一篇，传统前端虽然很基础，相比于市场上主流的利用开源框架制作的网站毫无竞争力，但是还是那句话：
基础不牢，地动山摇。
继续走，总会走完的