1. css 的定义 , 基本语法 和 引用方式
2020-10-02 本文已影响0人
晨曦Bai
日期: 2020-10-02
1. 什么是 CSS
CSS 层叠样式表, 一种用来为结构化文档添加样式的计算机语言
结构化文档: 比如 html 文档 或者 xml 应用
样式: 比如字体,间距, 颜色,背景等
2. CSS 基本语法
css 的语法由3部分组成： 选择器， 属性，属性的取值。（selector , property, value ）
selector { property: value }
3. CSS 的 引用方式
- 行间样式: 直接在标签内部写样式
- 内部样式: 在head 的 style标签里写样式
- 外部样式: 在head 中 使用 link 标签引入样式文件
- 导入外部样式: 在 style 中用 import 导入样式文件
1. 行间样式
<p style="color:green; font-size:16px"> test example </p>
2. 内部样式
<head>
<style> // 这里也可以加上 type="text/css" , 意思是允许不支持该类型的浏览器忽略css 表单
p {
color: "green";
}
</style>
</head>
3. 外部样式
<head>
<link rel="stylesheet" href="style.css">
</head>
》style.css
p {
color: "green";
}
4. 导入外部样式
<head>
<style>
@import "style.css"
</style>
</head>
以上四种CSS引用方式的区别：
- 作用范围
行间样式是只作用于当前标签。
内部样式作用于当前文件。
外部样式可以被多个HTML文件引用。
＞ 在实际开发中最好使用外部样式。
外部样式分为link引入和@ import 引入。
- link 是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务，@import属于CSS范畴，只能加载CSS.
- Link引用CSS时，在页面载入时同时加载。@Import需要页面网页完全载入以后加载。
- Link 是XHTML标签，无兼容问题，@import是在CSS2.1提出的，低版本的浏览器不支持。
- Link 支持使用JavaScript控制DOM去改变样式，@import不支持。
