©2020-2024 ioDraw All rights reserved,
Privacy Policy
基础知识：CSS语法规则
选择器：选择器包括标签名、.class的值、#id的值等等。浏览器根据”选择器“决定受CSS样式影响的HTML元素（对应的标签）
属性：属性是你所要改变的样式名，且每一个属性都至少拥有一个值。属性与值通过冒号分开在花括号范围内。这样就组成了一个完整的样式声明。eg: div{
color : red }
多个属性声明：
如果需要定义多个样式声明，则需要用分号将每个声明分开（通常一个声明占一行，在行末添加分号即可）。虽然最后一条声明可不加分号，但是尽量在每一条声明后都添加上分号（以便之后添加其他声明）。
接下来将使用三种方式将CSS与HTML结合使用。为了可比性，三种方式均实现同一效果。
一、在标签 style 属性上设置 "key:value value ...;key:value ..."，以此来修改标签样式
格式：<标签 key:value value ...;key:value ...>内容</标签>
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> </head> <body> <!-- div标签的长度：默认占一行 span标签长度是由其封装内容的长度决定的
--> <div style="border:3px solid blue; height: 50px;color: blue;font-size:
30px">第一行</div> <div style="border:3px solid blue; height: 50px;color:
blue;font-size: 30px">第二行</div> <span style="height: 100px;border: 3px dashed
green">第一个</span> <span style="height: 100px;border: 3px dashed
green">第二个</span> </body> </html> 方式一效果图
缺点：
* 随着标签和样式的增加，代码量将变得庞大且冗余
* 可读性非常差
* CSS代码没有复用性可言
二、在 head 标签中使用 style 标签来定义各种自己想要的CSS样式
格式：选择器（标签或其它标志）{
key: value value ...;
}
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
<title>Title</title> <style type="text/css"> /*
style标签专门用来定义CSS样式样式，所以HTML注释在style标签中不起作用 */ div{ height: 50px; border: 3px
solid blue; color: blue; font-size: 30px; } span{ height: 100px; border: 3px
dashed green; } </style> </head> <body> <!-- div标签的长度：默认占一行
span标签长度是由其封装内容的长度决定的 --> <div>第一行</div> <div>第二行</div> <span>第一个</span>
<span>第二个</span> </body> </html> 方式二效果图
缺点：
* 只能在同一页面内复用CSS代码，不能在多个页面中复用CSS代码
* 不便于维护，在实际项目中的会有成百上千个页面，每一个页面都需要修改，工作量太大了
三、将CSS样式写成一个单独的CSS文件，再通过link标签将CSS文件引入HTML文件即可。
/* CSS文件 ——css1.css（与HTML放于同一目录，便于测试） */ div{ height: 50px; border: 3px solid
blue; color: blue; font-size: 30px; } span{ height: 100px; border: 3px dashed
green; } <!-- HTML文件与css1.css文件放于同一目录 --> <!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <title>Title</title> <!-- 使用link标签将CSS文件引入HTML文件
href的参数根据自己的路径决定 --> <link rel="stylesheet" type="text/css" href="css1.css">
</head> <body> <!-- div标签的宽度：默认占一行 span标签宽度：由其封装内容的宽度决定的 --> <div>第一行</div>
<div>第二行</div> <span>第一个</span> <span>第二个</span> </body> </html> 方式三效果图