CSS基础
1.CSS的全称是什么?
CSS全程：Cascading Style Sheet（层叠样式表）
2.CSS有几种引入方式? link 和@import 有什么区别?
- 1.内联CSS（Inline CSS）
<h1 style="color:blue;">This is a Blue Heading</h1>
- 2.内部CSS（Internal CSS）在html的head中加入style标签
<style type="text/css">
h1{
color: red;
}
</style>
- 3.外部CSS（external CSS）在html中引入外部链接，要使用外部的样式表，在<head> 添加一个链接到它的HTML页面的部分
<head>
<link rel="stylesheet" href="styles.css">
</head>
-
4.导入CSS
@import url() -
5.区别
1.link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。
2.link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
3.link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
4.link支持使用JavaScript控制DOM去改变样式；而@import不支持。
3.以下这几种文件路径分别用在什么地方，代表什么意思?
| 路径 | 类别 | 场景 |
|---|---|---|
| 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 | 绝对路径 | 本地绝对路径中的a.css文件 |
| http://cdn.jirengu.com/kejian1/8-1.png | 网站路径 | 网站链接 |
绝对路径很好理解，这里我们图解一下相对路径
文件结构.png
相对路径是什么？就是相对与你当前文件位置的路径。
例如：css/a.css就是在当前目录的css文件夹下的a.css文件。
可能有人这里要问了a.css当前目录不就是css嘛？
这个没有错，但是这个路径是相对与index.html的！
因为你在html文件中引入css文件，所以相对与html文件它的当前目录是整个项目，它引入的文件路径是相对与它现在所处的文件夹 > css文件夹 > a.css
也就是css/a.css或者./css/a.css
当我在a.css中想引入b.css时，路径直接就是b.css
上面我们说了是相对与当前文件所在文件夹的路径，a.css和b.css都在同一个目录下
所以直接引入就可以了
那我还想在a.css中放一个背景图片，那它的路径怎么办
很容易(想不出来的多看看图片)
想一下a.css现在处于什么目录下，css文件夹下吧，那怎么跳出呢
使用”..“退回上一级目录，也就是从css/a.css中跳到了项目文件夹下
这时候就可以通过/imgs/a.png找到了
我们把它的路径连起来就是
../imgs/a.png
4.如果我想在js.jirengu.com上展示一个图片，需要怎么操作?
- 可以直接将图片上传到服务器，在页面使用这张图片
- 如果这个图片本来就存在网络上其他的服务器上，可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片
5.列出5条以上html和 css 的书写规范
1.语法统一使用小写
2.不使用内联样式的style元素定义样式，建议采用外部css
3.id和class使用有区分度的单词
4.有意义的单词采用 - 连接
5.块内容缩进
6.属性名：后面加一个空格
6.截图介绍 chrome 开发者工具的功能区
开发者工具.png
