发布时间：2025-12-09 20:18:12 浏览次数：5
| 结构 | HTML | 网页元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如颜色、大小等） |
| 行为 | JavaScript | 网页交互 |
CSS，层叠样式表（Cascading Style Sheet），给网页中的HTML标签设置样式
CSS写在一个单独的.css文件中，通过link标签在网页中引入
<link rel="stylesheet" href="文件路径">CSS写在网页的head标签中，用style标签包裹
<style>/* 写在style标签中的样式 */</style>CSS写在标签的style属性中
<标签名 style="行内样式写在这"></标签名>三种CSS样式引入方式的区别
| 外部样式 | CSS写在单独的css文件中，通过link标签引入 | 多个页面 | 项目中 |
| 内部样式 | CSS写在head头部style标签中 | 当前页面 | 案例演示中 |
| 行内样式 | CSS写在标签的style属性中 | 当前标签 | 配合js使用 |
选择器，就是选取（查找）需要设置样式元素的方式
选择器 {属性名: 属性值;}属性名和属性值合称为css属性
通过元素名称，选取（查找）相同元素，然后对相同元素设置CSS样式
<!DOCTYPE html><html><head><meta charset="utf-8"><style>p {color: red;}</style></head><body><p>我爱中国</p><p>我爱人民</p><p>我爱家乡</p></body></html>小结：
1、无论嵌套多少层，只要元素名称相同都会被找到
通过类名称，找到页面中所有带这个类名称的元素，然后对其设置CSS样式
类选择器，也有人叫class选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><style>.color-style {color: red;}</style></head><body><p class="color-style">我爱中国</p><p>我爱人民</p><p class="color-style">我爱家乡</p></body></html>小结：
1、所有元素都有class属性，class属性的属性值叫类名
2、类名由数字、字母、下划线、中划线组成，不能以数字、中划线开头
3、一个元素可以有多个类名，类名之间用空格隔开
通过元素id属性的属性值，找到页面中带这个id属性值的元素，然后对其设置CSS样式
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#one {color: red;}</style></head><body><p id="one">我爱中国</p><p id="two">我爱人民</p><p>我爱家乡</p></body></html>小结：
1、所有元素都有id属性
2、id属性值在一个页面中是唯一的
3、一个元素只能有一个id属性值
查找页面中所有的元素，然后对其设置CSS样式
<!DOCTYPE html><html><head><meta charset="utf-8"><style>* {color: red;}</style></head><body><p id="one">我爱中国</p><p id="two">我爱人民</p><p>我爱家乡</p></body></html>小结：
1、通常用于网页重置样式，不常用
根据选择器查找符合条件的元素，再根据后代选择器查找符合条件的元素，然后对其设置CSS样式
<!DOCTYPE html><html><head><meta charset="utf-8"><style>#one p {color: red;}</style></head><body><p id="one"><p>我爱中国</p><p>我爱人民</p><p>我爱家乡</p><p><p>我爱中国</p><p>我爱人民</p></p></p><p id="two"><p>我爱中国</p><p>我爱人民</p><p>我爱家乡</p><p><p>我爱中国</p><p>我爱人民</p></p></p></body></html>根据多个选择器各自查找符合条件的元素，然后对其设置CSS样式
<!DOCTYPE html><html><head><meta charset="utf-8"><style>p,h3 {color: red;}</style></head><body><p>我爱中国</p><h3>我爱人民</h3><p>我爱家乡</p></body></html>字体样式，针对文字本身样式
字体相关的CSS属性
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体风格 |
| color | 字体颜色 |
语法：
font-family: 字体1,字体2,字体3...;说明：
1、font-family属性可是设置多个属性值，用英文逗号隔开，生效顺序是从左到右。浏览器默认字体类型一般是"宋体"
2、字体类型只有一个英文单词，则不需要加上引号；字体类型是多个英文单词或中文的，则需要加上双引号
<!DOCTYPE html><html><head><meta charset="utf-8"><style>p {font-family: Arial;}h3 {font-family: monospace;}p {font-family: "新宋体";}</style></head><body><p>我爱中国</p><h3>我爱人民</h3><p>我爱家乡</p></body></html>语法：
font-size: 数字 + px说明：
1、px是像素单位，单位需要设置，否则无效
2、谷歌浏览器默认文字大小是16px
<!DOCTYPE html><html><head><meta charset="utf-8"><style>p {font-size: 18px;}p {font-size: 36px;}</style></head><body><p>我爱中国</p><p>我爱家乡</p></body></html>语法：
font-weight: normal/bold/100~900说明：
| normal | 正常（默认值） |
| bold | 较粗 |
| 100~900 | 取100~900九种数值，但部分字体没有9种粗细，设置可能不生效 |
实际开发一般会设置bold，不设置默认是normal
<!DOCTYPE html><html><head><meta charset="utf-8"><style>p {font-weight: normal;}p {font-weight: bold;}</style></head><body><p>我爱中国</p><p>我爱家乡</p></body></html>语法：
font-style: 取值说明：
| normal | 正常（默认值） |
| italic | 斜体 |
| oblique | 斜体 |
不是所有字体都有italic属性值，如果没有italic的，则用oblique
font连写
语法：
font: style weight size family;说明：
1、可以省略前两项，省略了相当于设置了默认值
不常用，作为了解
语法：
color: 颜色值说明：
color属性取值常用有两种，一种是关键字（比如red、green、blue），另外一种是16进制RGB值（#000000，#FFFFFF）
问题一：给同一个元素设置了相同的属性样式，哪个生效？
答：样式会层叠（覆盖），写在最后面的会生效。
问题二：html里面有注释，css有没有注释，如何写？
<style>/* 采用元素选择器给p元素设置css样式 */p {color: #000000; /* p元素字体颜色为黑色 */}</style>文本样式，针对段落的排版效果
文本相关CSS属性
| text-indent | 首行缩进 |
| text-align | 水平对齐 |
| text-decoration | 文本修缮 |
| text-transform | 大小写转换 |
| line-height | 行高 |
| letter-spacing | 字母间距 |
| word-spacing | 词间距 |
语法：
text-indent: 像素值说明：
缩进大小和字体大小是有关的，缩进1个字的空间等同于1个字的字体大小。
<!DOCTYPE html><html><head><meta charset="utf-8"><style>p {font-size: 14px;text-indent: 28px;}</style></head><body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>语法：
text-align: 取值说明：
text-align属性取值
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
语法：
text-decoration: 取值说明：
text-decoration属性值
| none | 去除所有的划线效果（默认值） |
| underline | 下划线 |
| line-throught | 中划线 |
| overline | 顶划线 |
语法：
text-transform: 取值说明：
text-transform属性取值
| none | 无转换（默认值） |
| uppercase | 转换为大写 |
| lowercase | 转换为小写 |
| capitalize | 只将每个英文单词首字母转换为大写 |
语法：
line-height: 取值;说明：
1、取值可以是一个固定的数值（比如24px），也可以是一个百分数（比如150%）
line-height: 150%;2、使用font-size属性和line-height属性的组合，可以让行高与字体大小之间保持一定的比例
font-size: 16px;line-height: 1.53、使用line-height属性的继承值。如果父元素的line-height属性有值，那么子元素及后代元素会继承父元素的行高
body {line-height: 1.5;}p {font-size: 16px;}行高的设置要大于字体大小的设置，才会显得好看
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {font-size: 16px;line-height: 24px;}</style></head><body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能</p></body></html>字间距
语法：
letter-spacing: 像素值说明：
letter-spacing属性用来设置两个字之间的距离，一个英文字母或汉字都是当做一个字来处理
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {letter-spacing: 10px;}</style></head><p>are you ok.你好吗？</p><body></body></html>词间距
语法：
word-spacing: 像素值;说明：
word-spacing属性用来设置英文单词之间的距离
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {word-spacing: 10px;}</style></head><p>are you ok.你好吗？</p><body></body></html>元素基本可以定义边框，边框样式由边框宽度、边框外观和边框颜色三个属性组成。
| border-width | 边框的宽度 |
| border-style | 边框的外观 |
| border-color | 边框的颜色 |
语法：
border-width: 像素值;说明：
边框border-width属性值是一个像素值
语法：
border-style: 取值;说明：
border-style取值有三个
| none | 无样式 |
| dashed | 虚线 |
| solid | 实线 |
语法：
border-color: 颜色关键字/16进制RGB值 <!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {border-width: 1px;border-style: solid;border-color: red;}</style></head><p>hello,world</p><body></body></html>语法：
border: border-width border-style border-color;案例：
p {border: 1px solid red;}元素都是盒子模型，都是有四条边的，分别是上、下、左、右。所以又可以为元素某一边边设置边框样式
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {width: 300px;height: 200px;border-top: 1px dashed darkred;border-bottom: 2px solid green;border-left: 3px solid grey;border-right: 4px dashed lightseagreen;}</style></head><p></p><body></body></html>定义列表项符号
在HTML中，无序列表和有序列表是通过标签ul、ol的type属性来定义的
<ol type="a"><li>my</li><li>your</li></ol><ul type="disc"><li>my</li><li>your</li></ul>接触了css后，得改成list-style-type属性来定义。HTML专心负责结构，CSS专心负责样式。
语法：
list-style-type: 取值;说明：
ol元素的list-style-type属性值
| decimal | 阿拉伯数字：1、2、3…（默认值） |
| lower-roman | 小写罗马数字：i、ii、iii… |
| upper-roman | 大写罗马数字：I、II、III… |
| lower-alpha | 小写英文字母：a、b、c… |
| upper-alpha | 大写英文字母：A、B、C… |
ul元素的list-style-type属性值
| disc | 实心圆●（默认值） |
| circle | 空心圆○ |
| square | 正方形■ |
去除列表项符号
随着技术和审美不断的提高，实际开发中都是直接去除列表项符号
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>ol,ul {list-style-type: none;}</style></head><body><ol><li>my</li><li>your</li></ol><ul><li>my</li><li>your</li></ul></body></html>有序列表或无序列表设置了list-style-type: none后，样式都一样了。
语法：
list-style-image: url(图片路径); <!DOCTYPE html><html><head><meta charset="utf-8" /><style>ul {list-style-image: url("small.png");}</style></head><body><ul><li>my</li><li>your</li></ul></body></html>list-style-image不能控制图片大小，实际开发中用background来替代
语法：
caption-side: 取值;说明：
caption-side属性取值
| top | 标题在顶部（默认值） |
| bottom | 标题在底部 |
语法：
border-collapse: 取值;说明：
border-collapse属性取值
| separate | 边框分开，有空隙（默认值） |
| collapse | 边框合并，无空隙 |
语法：
border-spacing: 像素值; <!DOCTYPE html><html><head><meta charset="utf-8" /><style>table,tr,th,td {border: 1px solid gray;}table {border-spacing: 10px;}</style></head><body><table><caption>学生成绩</caption><tr><th>姓名</th><th>数学</th></tr><tr><td>曹操</td><td>85</td></tr><tr><td>刘备</td><td>75</td></tr></table></body></html>语法：
width: 像素值;height: 像素值; <!DOCTYPE html><html><head><meta charset="utf-8" /><style>img {width: 40px;height: 40px;}</style></head><body><img src="small.png" alt=""></body></html>语法:
border: 1px solid red; <!DOCTYPE html><html><head><meta charset="utf-8" /><style>img {width: 40px;height: 40px;border: 1px solid red;}</style></head><body><img src="small.png" alt=""></body></html>水平对齐
语法：
text-align: 取值;说明：
text-align属性取值
| left | 左对齐（默认值） |
| center | 居中对齐 |
| right | 右对齐 |
图片的水平对齐属性设置是在图片标签的父标签上实现的
垂直对齐
语法：
vertical-align: 取值;说明：
vertical-align属性取值
| top | 顶部对齐 |
| middle | 中部对齐 |
| baseline | 基线对齐 |
| bottom | 底部对齐 |
语法：
float: 取值;说明：
float属性取值
| left | 元素向左浮动 |
| right | 元素向右浮动 |
语法：
background-color: 颜色值;说明：
颜色值有两种表示方式，一种是颜色关键字，另外一种是16进制RGB值
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {width: 200px;height: 100px;/* 背景颜色 */background-color: burlywood;}</style></head><body><p>hello,world</p></body></html>引入背景图片
语法:
background-image: url(图片路径) <!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {height: 180px;width: 180px;background-image: url("small.png");}</style></head><body><p></p></body></html>背景图片重复
语法：
background-repeat: 取值;说明：
background-repeat属性取值
| repeat | 在水平方向和垂直方向上同时平铺（默认值） |
| repeat-x | 只在水平方向（x轴）上平铺 |
| repeat-y | 只在垂直方向（y轴）上平铺 |
| no-repeat | 不平铺 |
背景图片位置
语法：
background-position: 水平距离 垂直距离通过像素值定图片位置
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {height: 180px;width: 180px;border: 1px solid red;background-image: url("small.png");background-repeat: no-repeat;background-position: 10px 30px;}</style></head><body><p></p></body></html>通过关键字定位图片位置
水平方向左left、中center、右right
垂直方向上top、中center、下bottom
通过水平方向、垂直方向组合出9种方式
<!DOCTYPE html><html><head><meta charset="utf-8" /><style>p {height: 180px;width: 180px;border: 1px solid red;background-image: url("small.png");background-repeat: no-repeat;background-position: center center;}</style></head><body><p></p></body></html>背景图片固定
语法：
background-attachment: 取值;说明：
background-attachment属性取值
| scroll | 随元素一起滚动（默认值） |
| fixed | 固定不动 |
语法：
a {}a:link {}a:visited {}a:hover{}a:active{}说明：
| a:link | a元素未访问时的样式 |
| a:visited | a元素访问后的样式 |
| a:hover | 鼠标经过a元素时的样式 |
| a:active | 鼠标点击时的样式 |
实际开发，一般设置a、a:hover样式就可以了
每一个元素都是由内容区、内边距、边框、外边距组成
| content | 内容区，可以是文本或图片 |
| padding | 内边距，用于定义内容与边框之间的距离 |
| border | 边框，用于定义元素的边框 |
| margin | 外边距，用于定义当前元素与其他元素之间的距离 |
语法：
width: 像素值;height: 像素值;overflow: 取值;说明：
overflow属性值
| visible | 默认值。内容不会被修剪，会呈现在元素框之外。 |
| hidden | 内容会被修剪，并且其余内容是不可见的。 |
| scroll | 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 |
| auto | 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 |
| inherit | 规定应该从父元素继承 overflow 属性的值。 |
如果要给行内元素设置宽高，则需要给元素设置display: inline-block属性
语法：
padding-top: 像素值;padding-right: 像素值;padding-bottom: 像素值;padding-left: 像素值; padding: 上下左右像素值;padding: 上下像素值 左右像素值;padding: 上像素值 右像素值 下像素值 左像素值; <!DOCTYPE html><html><head><meta charset="utf-8"/><style>p {border: 1px solid red;padding: 10px;}</style></head><body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>边框知识参考2.6
语法：
margin-top: 像素值;margin-right: 像素值;margin-bottom: 像素值;margin-left: 像素值; margin: 上下左右像素值;margin: 上下像素值 左右像素值;margin: 上像素值 右像素值 下像素值 左像素值; <!DOCTYPE html><html><head><meta charset="utf-8"/><style>p {border: 1px solid red;padding: 10px;margin: 10px;}</style></head><body><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p><p>舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士，孙叔敖举于海，百里奚举于市。故天将降大任于是人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为，所以动心忍性，曾益其所不能。</p></body></html>正常文档流就是我们没有使用浮动或者定位去改变的默认情况，按照从上到下，从左到右顺序的元素布局情况。
语法：
float: 取值说明：
| left | 元素向左浮动 |
| right | 元素向右浮动 |
语法：
clear: 取值;说明：
clear属性值
| left | 清除左浮动 |
| right | 清除右浮动 |
| both | 同时清除左浮动和右浮动 |
语法：
position: fixed;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值; <!DOCTYPE html><html><head><meta charset="utf-8"/><style>#s1 {position: fixed;top: 20px;left: 100px;color: red;}</style></head><body><p id="f"><p id="s1">回到顶部</p><p id="s2"><p>内容区</p>......</p></p></body></html>相对定位，指的是该元素的位置是相对于它的原始位置计算而来的
语法：
position: relative;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值; <!DOCTYPE html><html><head><meta charset="utf-8"/><style>#f p {width: 100px;height: 50px;background-color: burlywood;margin: 10px;}.s2 {position: relative;top: 5px;left: 30px;}</style></head><body><p id="f"><p class="s1">1</p><p class="s2">2</p><p class="s3">3</p></p></body></html>把元素定位到任意你想要的位置，完全脱离文档流
语法：
position: absolute;top: 像素值;bottom: 像素值;left: 像素值;right: 像素值; <!DOCTYPE html><html><head><meta charset="utf-8"/><style>#f p {width: 100px;height: 50px;background-color: burlywood;margin: 10px;}.s2 {position: absolute;top: 200px;left: 200px;}</style></head><body><p id="f"><p class="s1">1</p><p class="s2">2</p><p class="s3">3</p></p></body></html>用法：
position: static;说明：
元素position属性的默认值是static
<!DOCTYPE html><html><head><meta charset="utf-8"/><style>#f p {width: 100px;height: 50px;background-color: burlywood;margin: 10px;}.s2 {position: static;top: 200px;left: 200px;}</style></head><body><p id="f"><p class="s1">1</p><p class="s2">2</p><p class="s3">3</p></p></body></html>
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流