css样式表
大家好，又见面了，我是你们的朋友全栈君。
一、css初识
1、概念：css（cascading style sheets），通常称为css样式表或层叠样式表（级联样式表）。
2、作用：①主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的
布局和外观显示样式；（让网页更加丰富多彩，布局更加灵活）
②css以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同
的样式；（让HTML专注做结构，样式交给css）
二、css样式表（书写位置）
1、行内式（内联样式）
⑴概念：称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。（实际上任何HTML标签都拥有style属性，用来设置行内式）
⑵基本语法格式：<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标签名>
如：<div style=”color:red;font-size:12px;”>青春不常在</div>
⑶注意：①style其实就是标签的属性；
②样式属性和值中间是“：”；
③多组属性值之间用“；“隔开；
④只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余。
⑷缺点：没有实现样式和结构相分离。
三、内部样式表（内嵌样式表）
1、概念：是将css代码集中写在HTML文档的head头部标签中，并且用style标签定义。
2、基本语法格式：
<head>
<style type=”text/css”>
选择器（选择的标签） {
属性1：属性值1；
属性2：属性值2；
属性3：属性值3
}
</style>
</head>
如：<style>
div {
color: red;
fond-size: 12px；
}
</style>
3、注意：①style标签一般位于head标签中，当然理论上它可以放在HTML文档的任何地方；
② type=”text/css”在html5中可以省略；
③只能控制当前的页面。
4、缺点：没有彻底分离。
四、外部样式表（外链式）
1、概念：称链入式，是将所有的样式放在一个或多个以“.css”为拓展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。
2、基本语法格式：
<head>
<link rel=”stylesheet” type=”text/css” href=”css文件路径”/>
</head>
3、注意：①link是个单标签；
②link标签需要放在head头部标签中，并且指定link标签的三个属性。
4、
属性 | 作用 |
|---|---|
rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为”stylesheet”，表示被链接的文档是一个样式表文件。 |
type | 定义所链接文档的类型，在这里需要指定为”text/css” ，表示链接的外部文件为css样式表，可以省略。 |
href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。 |
五、总结
1、
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
行内样式表 | 书写方便，权重高 | 没有实现样式和结构相分离 | 较少 | 控制一个标签（少） |
内壁样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
2、代码风格-样式书写：
①紧凑格式：h3 { color：deeppink；font-size：20px；}
②展开格式：（推荐）
h3 {
color：deeppink；
font-size：20px；
}
3、代码大小写：样式选择器、属性名、属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/154596.html原文链接：https://javaforall.cn
腾讯云开发者
