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">
样式引入方式的优先级
- 行间样式优于内部样式和外部样式
- 内部样式和外部样式遵循就近原则