有时在想...如果有超能力的话...
动手理解...
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 开发者工具的功能区
有几个按钮可能已经改名了（前天刚从官网下载的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)
网友评论