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 | 网站路径 | 网站链接 |
绝对路径很好理解,这里我们图解一下相对路径
相对路径是什么?就是相对与你当前文件位置的路径。
例如: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.属性名:后面加一个空格