1、CSS全称是什么?
CSS全称是Cascading Style Sheets,意思是层叠样式表,我们如果新建一个css文件,有的win电脑可以显示这是一个”层叠样式表文件“。
2、CSS有几种引入方式?link和@import有什么区别?
引入方式:
- 行内样式,例如
<div style="color:#f00; width:300px; height:300px;"></div>
; -
内部样式(内联样式),例如
- 外部样式,即在文档的head中引入一个外部文件,例如
<link rel="stylesheet" href="style.css">
,除此之外,我们也可以这样声明
link和@import有什么区别
- link是HTML的语法,link标签不只是可以引入css,但是@import是CSS的语法,它只能够引入CSS用;link可以在HTML文档头部直接写,但是@import要写在HTML文档中就必须要包裹在一对
<style></style>
标签中才能够生效。 - @import可以在CSS文件中直接声明引入其他CSS文件,但是link标签在CSS文件中是不生效的。
- 加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁,当css被加载出来之后会突然出现样式,很怪异),网速慢的时候还挺明显。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。但是现在看这个问题可以忽略因为国内现在基本可以忽略IE6的用户了
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
3、以下几种文件路径分别用在什么地方?代表什么意思?
- css/a.css
- ./css/a.css
- b.css
- ../imgs/a.png
- /Users/hunger/project/css/a.css
- static/css/a.css
- http://cdn.jirengu.com/kejian1/8-1.png
答案
1234是相对路径,最为常见
- 1:和HTML文件同级的CSS文件夹下的a.css文件
- 2:HTML文件的上一级的CSS文件夹中的a.css
- 3:和HTML文件同级的b.css
- 4:HTML文件的上一级的imgs文件夹下的a.png(图片)
5为绝对路径,不常见 - 这个是文件的物理路径,从根目录开始一级一级找到目前这个文件,即Users文件夹下的hunger文件夹下的project文件夹下的CSS文件夹下的a.css
67为网站路径 - 6:网站中的相对路径
- 7:这个是网络资源文件,引入的话需要有网络才能访问到这个文件。
4、如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
网络图片需要获取到URL然后可以使用这个路径进行上传;
或是直接将图片上传至服务器,使用相对路径找到这个图片引用即可。
5、html和css规范
- 不大小写混排,建议都使用小写,符合行业习惯
- HTML中嵌套时使用缩进,一般是4个空格或两个空格,这样层级关系更加明显,能增加可读性,易于维护
- HTML中每个元素的id和class名称需要有意义,尽量使用英文单词来命名
-
css文件中对每个标签或class的属性定义的时候清晰明了,例如按照下面的格式来写
但是不要按照下列格式来写,不清晰不容易维护
- 在没有特殊情况下,不要使用行内样式,非常不易维护,可读性比较差。
- 使用link引入css样式而不是用@import来引入样式
- 对于属性的定义,确保全部使用双引号,绝不要使用单引号。
- 不要在自闭合(self-closing)元素的尾部添加斜线 -- HTML5 规范中明确说明这是可选的。
- css文件中,避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。
- 为了代码的易读性,在每个声明块的左花括号前添加一个空格。声明块的右花括号应当单独成行。