CSS的全称
层叠样式表（Cascading Style Sheets）,是一种样式表语言，用来描述HTML和XML文档的呈现。CSS描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。
CSS的引入方式
内联样式
<h1 style="clolr: red"; font-size: 20px; ></h1>（放在属性里面）
内部样式
<style type="text/css">
h1{
color:red;
}
</style>
（放在head里面）
外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css" >
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>
(放在head里面或者去掉style放在css里面)
浏览器默认样式（user agent styleshet）
link 和@import的区别
-
老祖宗的差别。link 属于xhml标签，link可以放在html的任何地方。而@import属于css可以放在style内部放在html中，也可以放在css中。
link除了可以加载css外，还可以定义rss,定义rel连接属性，而@import
就只能加载css了。 -
加载顺序的差别。当一个页面被加载的时候，link引用的css会同时被加载，而@import引用的css会等到页面全部被加载完再被加载。
-
兼容性的差别。由于@import是css2.1提出的所以老的浏览器不支持，@import只有在ie5以上的才能被识别。
-
使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
文件路径
-
相对路径（文件之间的关系，相对于当前文件的路径）：
下级目录
css/a.css=./css/a.css同级目录
b.css父级目录
../imgs/a.png -
绝对路径（本地文件服务器上找不到）
/user/hunger/css/a.css(以/开头的根目录) -
网站路径
/static/css/a.css(主域名下的文件路径，加上主域名就能访问)
http://cdn.jirengu.com/kejian1/1-8.jig
如何在js.jirengu.com上展示一个图片
- 用相对路径
- 自己开本地服务器，自己做本地图片的链接
- 用外链。把图片上传到微博，七牛等图床，或者qq空间获得url.
html和css的书写规范
语法不区分大小写，但建议统一使用小写。
不使用内联的style 属性定义样式。
id和class使用有意义的单词。
使用缩写。
0px写成0.
属性和属性值之间有空格。
块内容缩进。
了解chrome开发者工具。
功能区的了解
4588809-fcd69520123dd88e.png
此外功能区还有：
Memory:显示页面js对象和相关联的dom节点的内存分布情况。
Application:记录网页加载的所有资源，包括存储信息、缓存信息、以及页面用到的图片、字体、脚本、样式等信息。
Security:用于检测页面的安全性。
Audits:审计面板会对页面的加载进行分析，然后给出提高页面性能的建议。
Elements
4588809-61414c3729cf0f68恩恩恩.png
DOM树
检查页面元素
- 右击页面任意一处，选择检查页面元素，查看页面对应的dom元素。
- 鼠标悬停在dom树的任意一个节点，页面会用淡蓝色的蒙版在页面上标记dom节点对应的页面。
编辑dom
可以任意修改dom树上的任意信息，比如，修改节点的类型、属性、或者改变dom节点的所属关系等。不过这些修改都是临时的，不会等到保存，当刷新页面时所有的修改都将重置。
- 双击元素标签，修改dom节点类型，比如将div改成ul。
- 双击元素属性，修改dom节点的属性，比如修改节点的id。
- 选择一个dom节点，并将其拖到目标位置，可以改变页面结构。
- 选择一个dom节点，按delete键删除。
- ctrl+z，撤回操作。
样式
4588809-0ff4d230245caaf0.jpg
- element,style:代表所选元素的内联样式。比如我选的是header块，如果我直接修改HTML为
<div class="header" style="background:red"></div>那么element,style中就会出现background:red;相反如果我在element,style块中点击任意空白处添加css样式，那么你就会在对应的元素节点上看到style属性。 - 最后一个“+”号可以添加新的css规则。
- 单击属性或属性值进行修改，点击空白处添加新的样式。
- 点击色块可以打开取色器，对颜色进行可视化编辑。
- 以inherited from....为分界，上面的样式都是作为元素本身的，下面都是继承而来的，继承的对象不止一个，可能是父元素，父元素的父元素。
- 将鼠标停在一个选择器上的时候，可以看到这个选择器所影响的所有页面元素。
- 点击：hov;可以强制所选元素处于某个状态，这个也能通过右击元素，选择一个状态来实现。
点击".cls” 查看所有与当前元素直接相关的样式规则，你可以禁用或允许某个类作用于所选元素，也可以添加新的类。、
computed
- 所选元素的盒模型
- 所选元素的css样式以及值，不仅展示了最终所采用的值，也显示了被覆盖的值。
- 每个属性值所在的文件
鼠标悬停在盒模型的margin,border,padding以及内容区域，可以在网页中看到与之对应的区域，还可以双击盒模型上的数字来修改它，如果所选元素的position属性值为absolute或者fixed的话，还可以在margin外围设置position。
网友评论