1. CSS的全称是什么?
CSS就是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Style Sheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
2. CSS有几种引入方式? link 和@import 有什么区别?
有4种引入方式
<p style="color: red;font-size: 16px;">这是一个内联样式或者说行内样式</p>
ps:尽量不要使用行内样式
这通常是个很糟糕的书写方式,它只能改变当前标签的样式,如果想要多个 <div>
拥有相同的样式,你不得不重复地为每个<div>
添加相同的样式,如果想要修改一种样式,又不得不修改所有的 style 中的代码。很显然,内联方式引入 CSS 代码会导致 HTML 代码变得冗长,且使得网页难以维护。
<style>
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 18px;
color: black;
}
</style>这是一个内部样式
嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中,所以会使得代码比较集中,当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效,所以当多个页面需要引入相同的 CSS 代码时,这样写会导致代码冗余,也不利于维护。
<head> <link rel="stylesheet" type="text/css" href="index.css"> </head>
这是一个外部样式
这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式,所有的 CSS 代码只存在于单独的 CSS 文件中,所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中,CSS 文件会在第一次加载时引入,以后切换页面时只需加载 HTML 文件即可。
<style> @import url("hello.css"); @import "world.css"; </style>
使用 CSS 规则引入外部 CSS 文件
区别
本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别
差别1:老祖宗的差别。link属于XHTML标签,而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。
差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下载一边浏览梦之都网页时,就会出现上述问题)。
差别3:兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
差别4:使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
差别5:@import可以在css中再次引入其他样式表,比如可以创建一个主样式表,在主样式表中再引入其他的样式表,这样更利于修改和扩展.
ps:这样做有一个缺点,会对网站服务器产生过多的HTTP请求,以前是一个文件,而现在却是两个或更多文件了,服务器的压力增大,浏览量大的网站还是谨慎使用。有兴趣的可以观察一下像新浪等网站的首页或栏目首页代码,他们总会把css或js直接写在html里,而不用外部文件。
大致就这几种差别了,从上面的分析来看,还是使用link标签比较好。
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
绝对路径
根目录下的Users文件夹下hunger文件夹下project文件夹下css文件夹中的a.css文件 -
/static/css/a.css
绝对路径 根目录下的static文件夹下css中的a.css文件 -
http://cdn.jirengu.com/kejian1/8-1.png
网路路径
ps:
如果是../
开头, 就是相对路径
如果是/
开头就是绝对路径
4.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
如果这个图片本来就存在网络线上,可以直接使用图片的网络绝对路径链接的方式在页面上添加url引用这张图片
如果图片在本地,可将图片上传到极简图床,生成一个线上网址,或将图片文件存于本地服务器,开启本地服务即可使用。
5.列出5条以上html和 css 的书写规范
HTML规范
id class建议单词全字母小写,单词间以 -分隔。同项目必须保持风格一致。
HTML 标签的使用应该遵循标签的语义。
禁止 img的 src取值为空。延迟加载的图片也要增加默认的 src
使用 button元素时必须指明 type 属性值。
在 CSS 可以实现相同需求的情况下不得使用表格进行布局
CSS规范
属性名与之后的 :之间不允许包含空格, :与 属性值之间必须包含空格
选择器的嵌套层级应不大于 3级,位置靠后的限定条件应尽可能精确
在可以使用缩写的情况下,尽量使用属性缩写
尽量不使用 !important声明。
将 z-inde 进行分层,对文档流外绝对定位元素的视觉层级关系进行管理
6. display:none和visibility:hidden的区别
display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,
就当他从来不存在。
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。