CSS-cascading style sheet
层叠样式表或级联样式表。为HTML页面文本内容、图片外形、版本的布局等外观样式的设置
实现了页面内容和样式的彻底分离，提高工作效率
1、css语法
- 组成：选择器{属性名称：属性值；}
属性名称：属性值——声明语句，多个声明语句之间分别用分好隔开，属性名称和属性值之间用冒号隔开 - 注释——ctrl+/ shift+alt+a
/* CSS注释 */
2、CSS特点
- 可以取代之前——部分必须使用专门图像处理软件实现的图片特效功能
- 利于管理样式，方便排版简化管理成本
- 便于统一风格
- 几乎所有浏览器都支持
3、css样式的引入方式
-
行间样式——内联式
- 位置：放在开始标签内部
- 语法：使用style属性
<div style="width: 100px; height: 100px; background-color: red;"></div> width属性：元素的宽度，属性值单位px像素
height属性：元素的高度，属性值单位px像素
background-color属性：背景颜色，属性值可以设置关键词 red红色- 应用场景
适用于单个元素需要有特殊样式 - 优缺点：
比较直观、相同样式需要重复定义，造成代码冗余、作用范围比较小，大量使用不利于后期维护，代码不能复用，结构和表现不分离
-
内部样式——嵌入式
- 位置：放在head标签内部
- 语法：使用style标签对
<head> <style type="text/css"></style> </head>- 应用场景
适用于单个HTMl文档需要特殊样式 - 优缺点
- 相对于行间样式，作用范围较大，代码可以服用；结构和表现半分离
-
外部样式——外链式
- 将在外部新建的css文件，在head标签中通过link标签引入
- 语法：
<link href="css文件路径" rel="stylesheet" type="text/css"> rel属性：当前文档和被链接文档之间的关系，只有stylesheet得到所有浏览器支持，表示外部文件类型是css文件 - 应用场景
适用于多个HTML文档拥有相同样式 - 优缺点
便于修改、维护，使用范围广，代码可以服用。结构和表现彻底分离 - 书写步骤
- 1）新建一个css文件夹，在文件夹中新建一个后缀名为.css文件
- 2）在外部的.css文件夹中设置编码方式
@charset "utf-8" ``` - 3）在html文档中，head标签内部，写link标签引入外部样式
<link rel="stylesheet" href="css/*.css">
样式引入方式的优先级
- 行间样式优于内部样式和外部样式
- 内部样式和外部样式遵循就近原则