CSS 全称 Cascading Style Sheets层叠样式表作用就是美化HTML页面——给HTML标签设置颜色、大小、间距、布局等让单调的标签变得更美观、更有层次感。HTML是页面的“骨架”CSS就是页面的“皮肤”。一、CSS的引入方式1、行内样式内联样式直接在HTML标签内通过style属性写CSS优先级最高缺点仅作用于当前标签适合快速测试或单独设置某个标签的样式。!-- 示例给段落设置红色、20px字体 -- p stylecolor: red; font-size: 20px;这是内联样式的段落/p2、内部样式表在HTML文件的head标签内用style标签包裹CSS代码作用于当前整个HTML页面适合页面样式较少的情况。!DOCTYPE html html langzh-CN head meta charsetUTF-8 title内部样式表示例/title !-- 内部样式表 -- style /* 注释这里写CSS代码注释不会被浏览器解析 */ p { color: blue; font-size: 18px; line-height: 1.5; /* 行高让文字更易读 */ } h1 { color: #333; text-align: center; /* 文字居中 */ } /style /head body h1内部样式表测试/h1 p这是内部样式表设置的段落样式/p /body /html3、外部样式表推荐使用创建单独.css文件将所有CSS写在这个文件中然后在HTML页面中通过link标签引用作用于多个HTML页面适合大型项目。1、创建文件style.css名可自定义必须有后缀2、在创建的文件中写CSS代码3、在HTML的head中引入CSS文件/* style.css 文件内容 */ p { color: green; font-size: 16px; margin: 10px 0; /* 上下边距10px左右边距0 */ } .box { width: 200px; height: 200px; background-color: #f5f5f5; /* 浅灰色背景 */ }!-- HTML文件中引入外部CSS -- head meta charsetUTF-8 title外部样式表示例/title !-- 引入外部CSShref是CSS文件的路径 -- link relstylesheet hrefstyle.css /head body p这是外部样式表设置的段落/p div classbox这是一个盒子/div /body /html优先级内联样式 内部样式表 外部样式表后续会讲优先级的详细规则这里先记住这个基础顺序。二、CSS基础语法核心规则核心结构选择器声明块选择器 { 属性1: 值1; 属性2: 值2; /* 更多属性... */ }选择器指定要美化的HTML标签比如p、h1、.box等声明块用{}包裹里面是一组「属性: 值」对每个属性和值之间用:分隔每组之间用;分隔p { color: red; /* 文字颜色 */ font-size: 16px; /* 字体大小 */ }三、核心选择器1. 元素选择器标签选择器直接用HTML标签名作为选择器选中页面中所有该标签作用范围最广。/* 选中所有h1标签 */ h1 { color: #333; font-weight: 600; /* 字体粗细 */ } /* 选中所有div标签 */ div { width: 100px; height: 100px; }2. 类选择器最常用用.类名作为选择器需要先在HTML标签中用class属性定义类名一个类可以用于多个标签一个标签也可以用于多个类。类名间用空格分隔!-- HTML标签定义类名 -- div classbox盒子1/div div classbox red盒子2多个类/div p classbox段落也可以用box类/p/* 类选择器选中所有class为box的标签 */ .box { width: 150px; height: 150px; border: 1px solid #ccc; /* 灰色边框 */ } /* 选中class为red的标签 */ .red { background-color: red; color: white; }3. ID选择器用# ID名作为选择器需要在HTML标签中用id属性定义ID一个ID只能作用于一个标签唯一标识适合选中单个特定标签。!-- ID唯一不能重复 -- div idheader页面头部/div#header { height: 80px; background-color: #333; color: white; line-height: 80px; /* 垂直居中 */ }4. 通配符选择器用*表示选中页面中所有标签常用于重置页面默认样式清除浏览器自带的边距、内边距等。/* 重置所有标签的默认边距和内边距 */ * { margin: 0; padding: 0; box-sizing: border-box; /* 重要盒模型重置后续讲解 */ }注意通配符选择器优先级最低且会作用于所有标签尽量避免过度使用可能影响性能。5. 后代选择器用空格分隔两个选择器选中“第一个选择器下的所有后代标签”适合精准选中嵌套标签。div classnav a href#首页/a a href#关于我们/a div a href#联系我们/a /div /div四、CSS常用基础属性1. 文字相关属性p { font-size: 16px; /* 字体大小默认16px */ color: #333; /* 文字颜色十六进制、rgb、英文都可以 */ font-weight: 400; /* 字体粗细400正常700加粗 */ font-family: Microsoft YaHei, sans-serif; /* 字体类型优先微软雅黑没有则用无衬线字体 */ line-height: 1.5; /* 行高建议设置为字体大小的1.5-1.8倍更易读 */ text-align: left; /* 文字对齐left左对齐、center居中、right右对齐 */ text-decoration: none; /* 取消下划线常用于a标签underline下划线、line-through删除线 */ }颜色值的3种常用表示方式英文单词red、blue、green简单但颜色有限十六进制#ff0000红色、#333333深灰色、#f5f5f5浅灰色最常用前两位红、中间两位绿、后两位蓝RGB/RGBArgb(255,0,0)红色、rgba(255,0,0,0.5)红色0.5是透明度0-1之间。2. 盒子相关属性布局基础所有HTML标签都可以看作一个“盒子”盒子由「内容区、内边距、边框、外边距」组成盒模型相关属性如下.box { width: 200px; /* 盒子宽度内容区宽度 */ height: 200px; /* 盒子高度内容区高度 */ padding: 10px; /* 内边距盒子内容区与边框的距离上下左右都是10px */ border: 1px solid #ccc; /* 边框1px宽、实线、灰色 */ margin: 20px; /* 外边距盒子与其他盒子的距离上下左右都是20px */ background-color: #f5f5f5; /* 盒子背景色 */ border-radius: 5px; /* 圆角数值越大圆角越明显 */ box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 阴影可选增加层次感 */ }注意默认情况下盒子的width/height只包含内容区加上padding和border后盒子的实际宽度会变大。如果想让width/height包含padding和border需要设置box-sizing: border-box;前面通配符重置中已包含。3. 背景相关属性.bg { background-color: #f5f5f5; /* 背景色 */ background-image: url(bg.jpg); /* 背景图片url是图片路径 */ background-repeat: no-repeat; /* 背景图片不重复repeat重复默认、repeat-x水平重复、repeat-y垂直重复 */ background-position: center; /* 背景图片居中也可以用像素如10px 20px或方位词left top */ background-size: cover; /* 背景图片覆盖整个盒子保持比例可能会裁剪 */ }简写方式推荐.bg { background: #f5f5f5 url(bg.jpg) no-repeat center/cover; /* 顺序背景色 → 背景图片 → 重复方式 → 位置/大小用/分隔 */ }五、CSS层叠与优先级CSS的“层叠”指的是多个样式规则可以作用于同一个标签当样式冲突时会按照“优先级”来决定哪个样式生效。1. 优先级规则从高到低!important 声明在属性值后加上!important可以强制提升该属性的优先级最高慎用会破坏正常的优先级顺序内联样式style属性ID选择器#id类选择器.class、伪类选择器、属性选择器元素选择器标签选择器通配符选择器*。/* 示例优先级对比 */ #box { color: red; /* ID选择器 */ } .box { color: blue !important; /* 类选择器 !important优先级最高 */ } p { color: green; /* 元素选择器优先级最低 */ }p idbox classbox stylecolor: purple;这段文字是什么颜色/p答案蓝色因为 .box 加上了 !important优先级最高即使有内联样式和ID选择器也会生效2. 层叠规则补充优先级相同的情况下后面写的样式会覆盖前面写的样式继承性子标签会继承父标签的部分样式如文字颜色、字体大小等但不是所有样式都能继承如边框、边距等不能继承。