动手理解...
CSS的全称是什么?
- 指层叠样式表Cascading Style Sheet
- 层叠指的是样式的优先级,当产生冲突时以优先级高的为准。
- 开发者样式>读者样式>浏览器样式(除非使用!important标记 )
- id选择符>(伪)类选择符>元素选择符
- 权重相同时取后面定义的样式
CSS有几种引入方式?
内嵌样式:<pre>
<p style="border:1px solid black;display:inline">nihao</p>
</pre>内部样式:
<pre>```
<head>
<style>*{margin:0}</style>
</head>
- 链入外部样式:
<pre>```<link type=“text/css” rel=“stylesheet” href=“index.css”>```</pre>
- 导入样式:
<pre>```@ import url()```</pre>
---
### ink 和@import 有什么区别?
- 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可以控制的。
---
### 以下这几种文件路径分别用在什么地方,代表什么意思?
`css/a.css`
相对定位_当前目录下的CSS下的a.css文件
`./css/a.css`
相对定位_相对于css/a.css
`b.css`
指定当前目录的b文件
`../imgs/a.png`
相对定位_指定当前父目录下的imgs下的a.png照片(..等于返回)
`/Users/hunger/project/css/a.css`
绝对定位_本地
`/static/css/a.css`
相对定位_网络相对路径
`http://cdn.jirengu.com/kejian1/8-1.png`
网络路径_在该域名下找到该图.
如果我想在js.jirengu.com上展示一个图片,需要怎么操作?
引用网络图片路径:`![](网络图片地址)`
如果在自己网站:可使用绝对路径或相对路径使用自己网站上存放的图片..
---
### html和 css 的书写规范
1. 使用小写
2. 文件名用英文单词,多个单词用驼峰命名法。
3. css 尽量使用外部链接样式(link)
4. 根据新建样式的适用范围分为三级:全站级、产品级、页面级。
5. 尽量通过继承和层叠重用已有样式。
6. 不要轻易改动全站级CSS。改动后,要经过全面测试。
7. 兼容多个浏览器时,将标准属性写在底部。
8. 书写顺序
<pre>`.header {
/* 显示属性 */
display || visibility
list-style
position top || right || bottom || left
z-index
clear
float
/* 自身属性 */
width max-width || min-width
height max-height || min-height
overflow || clip
margin
padding
outline
border
background
/* 文本属性 */
color
font
text-overflow
text-align
text-indent
line-height
white-space
vertical-align
cursor
content
};`</pre>
---
### chrome 开发者工具的功能区
![这图不容易啊](http://upload-images.jianshu.io/upload_images/4007920-101911e3d76d9da1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
有几个按钮可能已经改名了(前天刚从官网下载的chrome最新版)
具体是哪个位置哪个键改的键更新了名,我已经在图里标明;
【Timeline】键 可能已经改为:【Memory】(查了下功能是一致的,应该没错)
【Timeline】键 现在显示为【Performance】;
[参考Elements、Console、Sources面板:地址](http://www.cnblogs.com/charliechu/p/5948448.html)
[参考Network面板:地址](http://www.cnblogs.com/charliechu/p/5981346.html)
[参考Timeline面板:地址](http://www.cnblogs.com/charliechu/p/5992177.html)
[参考Profiles面板:地址](http://www.cnblogs.com/charliechu/p/6003713.html)
[参考Application、Security、Audits面板:地址](http://www.cnblogs.com/charliechu/p/6021141.html)