CSS全称：Cascading Style Sheets,层叠样式表
引入方式：
-
内联样式
<h1 style="color: red; font-size: 20px;"></h1> -
内部样式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>CSS基础</h1>
- 外部样式
<!--link方式引入外部样式-->
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<!--@import方式引入外部样式-->
<style>
@import url("hello.css");
@import "world.css";
</style>
link与@import之间区别
-
@import是CSS提供的语法规则，只用于导入样式表；link是HTML提供的标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性 - 加载页面时，
@import引入的CSS将在页面加载完毕后被加载；link标签引入的CSS会同时加载 -
@import是CSS2.1才有的语法，只能被IE5+ 识别；link是HTML标签 ，无兼容性问题 - 由于 DOM 方法是基于文档的，无法使用
@import方式插入样式；相反，可以通过JS操作DOM，插入link标签来改变样式 -
link引入的样式权重大于@import引入的样式
文件路径
- 相对路径
- css/a.css 同级目录中css文件夹内的a.css文件
- ./css/a.css 当前路径下css文件夹内的a.css文件
- b.css 当前路径下的b.css文件
- ../imgs/a.png 上一级路径中imgs文件夹内的a.png文件
- 绝对路径
- /Users/hunger/project/css/a.css 根目录中绝对路径下的a.css文件
- 网站路径
- /static/css/a.css 站点中的绝对路径
- css/a.css 相对路径 同级目录中css文件夹内的a.css文件
- http://www.a.com/post/8-1.png 网络中的路径
展示图片的关键是图片所在的位置
- 图片在站点内，使用相对路径，便于维护
- 图片不在www.a.com站点内，使用网络路径，但可能会有版权的问题
书写规范
- 建议统一用小写
- 不使用内联的style属性定义样式
- id和class等属性使用有意义的单词，分隔符用-
- 属性值为0的省略单位
- 属性名冒号后一个空格
网友评论