CSS基础

1.CSS的全称是什么?

CSS全程：Cascading Style Sheet（层叠样式表）

2.CSS有几种引入方式? link 和@import 有什么区别?

• 1.内联CSS（Inline CSS）

This is a Blue Heading

• 2.内部CSS（Internal CSS）在html的head中加入style标签

• 3.外部CSS（external CSS）在html中引入外部链接，要使用外部的样式表，在 添加一个链接到它的HTML页面的部分

• 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