什么是CSS?
- 层叠样式表（Cascading Style Sheets）
- CSS可以用来为网页创建样式表，通过样式表对网页进行装饰
- 层叠是将整个网页想象成一层一层的结构，层次高的将会覆盖层低的
- CSS可以为网页的各个层次设置样式
内联样式
- 将CSS样式写到元素的style属性当中
- 内联样式只对当前的元素中的内容起作用
- 内联样式不方便样式复用
- 属于结构与表现耦合，不方便后期维护
- 不推荐使用
<p style="color: rebeccapurple;font-size: 30px">锄禾日当午，汗滴禾下土</p>
内部样式
- 将CSS样式写到head标签中的style标签里
- 通过CSS选择器选中指定元素
- 可以同时为这些元素设置样式，使样式进一步复用
- 可以使表现和结构进一步分离
- 推荐的一种使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
color: rebeccapurple;
font-size: 30px;
}
</style>
</head>
<body>
<p>锄禾日当午，汗滴禾下土</p>
<p>谁之盘中餐，粒粒皆辛苦</p>
</body>
</html>
外部样式
- 编写外部CSS文件
- 通过link标签来将外部的CSS文件引入到页面中
<link rel="stylesheet" type="text/css" href="main.css"/>
- 可以完全使结构和表现分离，使样式表在不同的页面中使用，最大限度的使样式进行复用
- 将样式统一写在CSS文件中，然后通过link标签引入，可以利用浏览器的缓存，加快用户访问的速度，提高了用户体验。
- 最推荐使用
CSS的语法
CSS注释
/*这是注释*/
CSS选择器
- 通过选择器可以选中页面中指定的元素
- 将声明块中的样式应用到选择器对应的元素上
声明块
- 写在选择器后边
- 使用{}括起来
- 实际上就是一组名值对结构，一组名值对称为一个声明
- 多个声明之间使用;来隔开
- 声明的样式名和样式值之间使用 : 来连接
本文介绍了CSS（层叠样式表）的基本概念，包括内联样式、内部样式和外部样式的区别与应用。内联样式直接在元素内定义，仅影响该元素；内部样式位于head标签内的style标签中，可复用于多个元素；外部样式则通过link标签引用单独的CSS文件，实现结构与表现的完全分离，便于复用和维护。推荐使用外部样式以提高网页性能。
扫一扫
695
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
