CSS基础
2017-07-30 本文已影响21人
DeeJay_Y
一. CSS的全称是什么?
CSS的全称是Cascading Style Sheets，层叠样式表。
二.CSS有几种引入方式? link 和@import 有什么区别?
-
浏览器默认样式
即 user agent stylesheet -
内联样式
<h1 style="color: red; font-size: 20px;"></h1> -
内部样式
<style type="text/css">
h1 {
color: red;
font-size: 20px;
}
</style>
<h1>hello,deejay!</h1>
- 外部样式
- <link>标签 (一般建议放到<head>标签中)
<head>
<link rel="stylesheet" href="index.css" type="text/css">
</head>
- @import
<style>
@import url("hello.css");
@import "world.css";
</style>
- <link>和@import的区别
- 本质区别
<link>标签本质上就是一个HTML标签，跟普通的<h1>,<p>等一样，而@import是一种css语法，是css的语法，而不属于HTML。 - 用法区别
@import是要放到<style>标签中或者外部css文件中的。而<link>标签可以放到html的任何地方。 - 加载顺序区别
<link>标签引用的CSS文件在网页加载同时就会加载，而@import引入的CSS文件会等到页面被加载完成后才开始加载。 - 兼容性区别
@import在是相对较新的属性（在CSS2.1），对于IE5以下的浏览器不支持。 - DOM操作区别
用@import引入的样式不可以通过DOM去改变。<link>标签的可以。
三.以下这几种文件路径分别用在什么地方，代表什么意思?
-
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
绝对路径，以/开头的表示要引入的css文件在本地的绝对路径。 -
/static/css/a.css
网站路径，表示在主域名下的CSS文件的路径。
四.如果我想在js.jirengu.com上展示一个图片，需要怎么操作？
- 先将本地图片上传到某个地方例如微博微信等，生成一个线上的地址，然后进行引用。
五.列出5条以上html和 css 的书写规范
- 语法不区分大小写，但是建议统一小写。
- 不使用内联的style属性定义样式。
- id和class使用有意义的单词，分隔符建议使用-，不建议使用下划线。
- 属性值是0的省略单位。
- 块内容缩进。
- 属性名冒号后面添加一个空格。
六.对Chrome开发者工具的了解
开发者调试工具
在element区域中，可以看到页面中所有的元素，并且可以操作相应的元素。在style区域中可以看到页面元素应用的样式，element.style是元素的内联样式。inherited from ...是代表从父元素继承过来的样式。同时也可以操作css样式来改变页面元素样式。
开发者调试工具
