前端学习——基础篇
四、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、样式引入方式优先级
- 内部样式和外部样式就近原则
- 行间样式优于内部和外部