1.css的全称:(cascading style sheets)层叠样式表
2.CSS有几种引入方式? link 和@import 有什么区别?
1.内联样式
<h1 style="color:red; font-size:20px;> </h1>
2.内部样式
<style type="text/css">
h1{
color:red;
font-size:20px;
}
</style>
3.外部样式:使用链接引入来加载页面
a:<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
b:<style>
@import url ("hello css");
@import "world.css"
</style>
4.浏览器默认样式
link 和@import 有什么区别?
link和@import的本质都是为了加载CSS文件,但是还是存在一些细微的差别
- link属性xhtml标签,而@import完全属于css提供的一种方式。link标签除了加载css以外,还可以做很多其他的事情,比如定义rss,定义rel链接属性,而@import只能加载css。
- 加载顺序的差别,当一个页面被加载的时候,link引用的css会同时被加载,而@import引用的css会被等到页面被下载完以后再加载,所以有时候浏览@import引用的css加载页面时性能较差。
- 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
- 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
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文件,例如,主域名为localhost:8080,那么就以licalhost:8080/static/css/a.css的路径去寻找a.css文件,如果没有最前面的斜线,就是在相对当前html的同级目录下以static/css/a.css去寻找a.css;
-
http://cdn.jirengu.com/kejian1/8-1.png
:8-1.png被上传到互联网上,这是它在互联网中真实准确的地址网络路径;
4.如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
- 直接把图片上传到服务器,用相对路径。
- 网上图片获得图片地址,用网络路径,本地图片可以上传到图床获得地址。
5.列出5条以上html和 css 的书写规范
html:
1.一行代码表示一个内容
2.代码缩写使用tab键
3.标签与它的属性必须小写
4.所有的标签必须合理嵌套
5.大部分标签有属性 格式:属性=“属性值”(多个属性之间用空格隔开)
css:
1.选择器{ 属性:值;} :与值之间空一个空格
2.属性值是0的省略单位
3.块内容缩写
4.ID和class用有意义的单词
5.有可能就用缩写
6.截图介绍 chrome 开发者工具的功能区
Elements 查看元素
Console 控制台,用于调试
Sources 文件资源情况
Network 网络状况
timeline 页面渲染时间