css基础总结

CSS的全称

---

层叠样式表（Cascading Style Sheets）,是一种样式表语言，用来描述HTML和XML文档的呈现。CSS描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。

CSS的引入方式

---

内联样式

（放在属性里面）

内部样式

（放在head里面）

外部样式

(放在head里面或者去掉style放在css里面)

浏览器默认样式（user agent styleshet）

link 和@import的区别

---

1. 老祖宗的差别。link 属于xhml标签，link可以放在html的任何地方。而@import属于css可以放在style内部放在html中，也可以放在css中。

   link除了可以加载css外，还可以定义rss,定义rel连接属性，而@import
   就只能加载css了。

2. 加载顺序的差别。当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面全部被加载完再被加载。

3. 兼容性的差别。由于@import是css2.1提出的所以老的浏览器不支持，@import只有在ie5以上的才能被识别。

4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

文件路径

---

1. 相对路径（文件之间的关系，相对于当前文件的路径）：

   下级目录

    css/a.css=./css/a.css
   

   同级目录

    b.css
   

   父级目录

   ../imgs/a.png
   

2. 绝对路径（本地文件服务器上找不到）
   /user/hunger/css/a.css(以/开头的根目录)

3. 网站路径
   /static/css/a.css(主域名下的文件路径，加上主域名就能访问)
   http://cdn.jirengu.com/kejian1/1-8.jig

如何在js.jirengu.com上展示一个图片

---

1. 用相对路径
2. 自己开本地服务器，自己做本地图片的链接
3. 用外链。把图片上传到微博，七牛等图床，或者qq空间获得url.

html和css的书写规范

语法不区分大小写，但建议统一使用小写。
不使用内联的style 属性定义样式。
id和class使用有意义的单词。
使用缩写。
0px写成0.
属性和属性值之间有空格。
块内容缩进。

了解chrome开发者工具。

---

功能区的了解

chrome开发工具.png

此外功能区还有：
Memory:显示页面js对象和相关联的dom节点的内存分布情况。
Application:记录网页加载的所有资源，包括存储信息、缓存信息、以及页面用到的图片、字体、脚本、样式等信息。
Security:用于检测页面的安全性。
Audits:审计面板会对页面的加载进行分析，然后给出提高页面性能的建议。

Elements

chrome开发工具02.png

DOM树

检查页面元素

• 右击页面任意一处，选择检查页面元素，查看页面对应的dom元素。
• 鼠标悬停在dom树的任意一个节点，页面会用淡蓝色的蒙版在页面上标记dom节点对应的页面。

编辑dom

可以任意修改dom树上的任意信息，比如，修改节点的类型、属性、或者改变dom节点的所属关系等。不过这些修改都是临时的，不会等到保存，当刷新页面时所有的修改都将重置。

• 双击元素标签，修改dom节点类型，比如将div改成ul。
• 双击元素属性，修改dom节点的属性，比如修改节点的id。
• 选择一个dom节点，并将其拖到目标位置，可以改变页面结构。
• 选择一个dom节点，按delete键删除。
• ctrl+z，撤回操作。

样式

chrome03.jpg

1. element,style:代表所选元素的内联样式。比如我选的是header块，如果我直接修改HTML为
   那么element,style中就会出现background:red;相反如果我在element,style块中点击任意空白处添加css样式，那么你就会在对应的元素节点上看到style属性。
2. 最后一个“+”号可以添加新的css规则。
3. 单击属性或属性值进行修改，点击空白处添加新的样式。
4. 点击色块可以打开取色器，对颜色进行可视化编辑。
5. 以inherited from....为分界，上面的样式都是作为元素本身的，下面都是继承而来的，继承的对象不止一个，可能是父元素，父元素的父元素。
6. 将鼠标停在一个选择器上的时候，可以看到这个选择器所影响的所有页面元素。
7. 点击：hov;可以强制所选元素处于某个状态，这个也能通过右击元素，选择一个状态来实现。
   点击".cls” 查看所有与当前元素直接相关的样式规则，你可以禁用或允许某个类作用于所选元素，也可以添加新的类。、

computed

• 所选元素的盒模型
• 所选元素的css样式以及值，不仅展示了最终所采用的值，也显示了被覆盖的值。
• 每个属性值所在的文件
  鼠标悬停在盒模型的margin,border,padding以及内容区域，可以在网页中看到与之对应的区域，还可以双击盒模型上的数字来修改它，如果所选元素的position属性值为absolute或者fixed的话，还可以在margin外围设置position。