几个问题

有时在想...如果有超能力的话...

动手理解...


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)


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,803评论 19 139
  • • HTML、XML、XHTML 有什么区别 HTML,超文本标记语言,是语法较为松散的、不严格的web语言;XM...
    饥人谷_溯彬阅读 1,589评论 0 1
  • 关于问题的答案都是找到的比较正确的,仅起到参考作用,关于问题100%面试题... 就这样 1.doctype有什么...
    myfocus阅读 3,599评论 1 1
  • 佛说 四大皆空才是佛门弟子 而人呱呱坠地之时 便落入了红尘 红尘有什么 有七情六欲 百味陈杂 有人恋有人厌 释迦摩...
    斓若阅读 1,855评论 0 1

友情链接更多精彩内容