CSS全称
Cascading style Sheets, 层叠样式表
CSS有几种引入方式? link 和@import 有什么区别?
1.内部引入
<style>
p{
background-color: yellow;
}
</style>
注:写在head标签里
2.内联式
<p style="border: 3px solid #fff; border-radius: 3px;">内容</p>
注:写在具体的元素标签里
3.外部引入(link, import)
<link rel="stylesheet" href="index.css">
@import url(./index.css);
注:写在head标签里
link与import区别
1.link会在页面显示之前全部加载完,import是在文件读取完之后才加载。在网络环境差的情况下,import的使用可能会出现瞬间没有样式,而后再会刷出有样式的页面。
2.@import可能低版本的浏览器会有不支持的情况。
3.使用dom控制样式时的差别。当使用js控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
4.大部分都通用的地方,用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
一般不推荐绝对路径,路径写太死,换个地方就找不到文件了
网络路径: - /static/css/a.css
- http://cdn.jirengu.com/kejian1/8-1.png
在js.jirengu.com上展示一个图片
图片上传到网络 生成图片地址 然后连接进jsbin
在本地开个服务器 ,通过locoalhost加载图片 然后连接进jsbin
列出5条以上html和 css 的书写规范
- 语法不区分大小写,建议全小写
- 不使用内联样式
- id和class的命门用有意义的单词,分隔符建议用-
- 属性值是0的时候单位不写
- 代码块内容缩进
- 属性名冒号后面加个空格