Web前端学习—基础篇(10)_CSS的语法、CSS的三大引入方式分别是什么、样式优先级
前端学习——基础篇
四、CSS 学习
CSS即层叠样式表(cascading style sheets)
用于美化web页面的外观
4.1、css语法
- 组成
选择器{ 属性名1: 属性值; 属性名2: 属性值; }
声明语句1 ; 声明语句2 - css注释
/* css注释内容 */
4.2、css引入方式
4.2.1、行间样式
- 位置：开始标签内部
- 语法：使用style属性
<div style="width: 100px; height: 100px; background-color: red"></div>
-
应用场景
适用于单个HTML标签设置特殊样式 -
特点
优点：比较直观
缺点：相同样式多次定义，造成代码冗余，难于修改，作用范围小，代码不能复用，尽量不用； 结构和表现不分离
4.2.2、内部样式
- 位置：在head标签内部
- 语法：使用style标签对
<head>
<style type="text/css">
选择器{ 属性:属性值; }
</style>
</head>
- 应用场景：
适用于单个HTML文档设置特殊样式 - 特点
相对于行间样式来说，代码可以复用，作用范围比行间样式大；
结构和表现处于半分离状态
4.2.3、外部样式
- 位置：放在外部的css文件中，在head标签内部使用link标签引入
- 语法：
<head>
<link rel="stylesheet" href="css文件路径" type="text/css">
</head>
- 新建一个css文件夹，并在文件夹内新建一个后缀名为.css的文件
- 在css文件中，输入： @charset "utf-8";
- 回到HTML文件，在head标签内使用link标签引入外部css文件
- 应用场景
适用于多个HTML文档具有相同样式时 - 特点
便于修改、维护，适用范围广，可以复用
实现了结构和表现彻底分离
4.2.4、样式引入方式优先级
- 内部样式和外部样式就近原则
- 行间样式优于内部和外部
