英文全称:Cascading Style Sheet
翻译: 层叠样式表
引入 CSS 的目的: 达到结构与样式的分离(html4.0.1 开始结构与样式分离)
引入 CSS的好处:
通过 html 的标准属性 style 引入 css 样式
css 样式语法格式 样式:样式值
多个样式之间使用分号隔开
<ul type="square" style="color:red;">
<li><span style="color:black;font-size:large;font-weight:bold;">阿萨的加减 法撒的撒发射点</span></li>
<li><span style="color:black;">爱上了对方和</span></li>
<li><span style="color:black;">阿斯蒂芬撒地方撒旦富士达范德萨发撒</span></li>
<li><span style="color:black;">阿斯顿发射点发撒撒反对发射点发</span></li>
<li><span style="color:black;">在徐州宣传宣传v现</span></li>
<li><span style="color:black;">芦荟胶微软微软</span></li>
<li><span style="color:black;;font-weight:bold;">啊手动阀啊手动阀手动阀手动阀 </span></li>
</ul>
行内样式优化了:标签嵌套过多,而且使用了废弃标签的问题;使用行内式的契机;浏览器的调试、代码调试时可以使用
但是行内式,维护起来也是很麻烦,修改时也需要修改多个地方;而且并没有达到结构与样式的分离,程序耦合性较高;当样式过多时,浏览器渲染需要大量的时间,这样加载页面的速度会大大降低,不利于用户体验.
在 head 标签中,使用 style 标签引入 css 样式
html 代码
<style type="text/css">
/* 在style标签内，通过css语法来书写样式文本 */
/* 需要匹配指定的元素，然后再去书写样式 */
/* 书写格式：选择符{样式:样式值;}*/
/* id选择符 #id名 */
#list2 {
/* 设置文本的颜色未红色 */
color: red;
}
/* 后代选择符 祖先 后代 */
#list2 span {
color: blue;
}
/* 类选择符 .class的值 */
.ftb {
/* 设置字体加粗效果 */
font-weight: bold;
}
.fsl {
/* 设置字体大小 */
font-size: large;
}
</style>
</head>
<body>
<ul type="square" id="list2">
<li><span class="ftb fsl">阿萨的加减法撒的撒发射点</span></li>
<li><span>爱上了对方和</span></li>
<li><span>阿斯蒂芬撒地方撒旦富士达范德萨发撒</span></li>
<li><span>阿斯顿发射点发撒撒反对发射点发</span></li>
<li><span>在徐州宣传宣传v现</span></li>
<li><span>芦荟胶微软微软</span></li>
<li><span class="ftb">啊手动阀啊手动阀手动阀手动阀</span></li>
</ul>
</body>
嵌入式优化了:
维护成本降低,修改一个地方即可;
样式与结构呈现分离,耦合性相对降低很多;
在一些小案例中,不需要写过多的样式,可以使用嵌入式
嵌入式存在的问题:
当样式过多时,浏览器渲染需要大量的时间,这样加载页面的速度就会大大降低,不利于用户体验(因为虽然结构与样式分离,但是 css 样式还是嵌入在 html 文件中,浏览器渲染时,是从上往下一次渲染的,那么如果样式过渡,加载需要大量时间,这个时候还没有解析到 html 结构,那么打开浏览器后,一段时间内可能呈现空白效果,短暂时间过后,显示正常);
它的结构与样式的分离并不是完全的分离,css 和 html 还是具有一定的耦合性.
在 头部 head 标签中,使用 link 标签引入外部独立的 css 样式文件
<!-- 使用link标签，引入外部独立的CSS文件 -->
<link type="text/css" rel="stylesheet" href="./css/style.css">
链接式的好处:
在头部 head 标签内,在 style 标签内,使用 @import 导入外部独立得样式
和外链式唯一得区别就是引入方式不同,引入方式代码如下:
<!-- 导入式，导入外部独立的CSS文件 -->
<style>
@import url(./css/style.css);
</style>
导入式一般情况下我们不建议使用,因为它和嵌入式一样,影响页面得加载速度.它在加载时,是一个串行下载,从上往下依次渲染,需要把样式渲染完,才可以继续往下执行,呈现页面效果,也是先闪一下,然后再正常,用户体验较差