CSS教程学习笔记

一直认为自己已经掌握了HTML/CSS/JavaScript三剑客，但孔子说：

温故而知新

最近温故了一下三剑客，在此将CSS的温故笔记做个记录。

• 优先级
  内联样式>内部样式>外部样式>浏览器默认样式
  优先级顺序
  下列是一份优先级逐级增加的选择器列表：
  通用选择器（*）
  元素(类型)选择器
  类选择器
  属性选择器
  伪类
  ID 选择器
  内联样式
  !important 规则例外
  一些经验法则：
  Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
  Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  Never 永远不要在全站范围的 css 上使用 !important
  Never 永远不要在你的插件中使用 !important

• 列表
  上一篇HTML教程学习笔记中讲到，可以通过给<ol>标签添加type属性来指定列表序号，比如type="A"那么列表的序号就是A,B,C...
  如果type="I"，那么列表的序号就是Ⅰ,Ⅱ,Ⅲ,Ⅳ...
  CSS也可以控制列表的序号：

<style>
.a{ list-style-type:upper-roman;}
.b{ list-style-type:lower-alpha;}
</style>
<ol class="a">
    <li>Cat</li>
    <li>Dog</li>
    <li>Pig</li>
</ol>
<ol class="b">
    <li>Cat</li>
    <li>Dog</li>
    <li>Pig</li>
</ol>

运行结果：

运行结果

PS：元素和类名作为组合选择器时，元素和类名之间不能有空格。

• 盒模型
  只说一个点，就是width的值指content的宽度，不包括padding、border和margin，不考虑早期IE的怪异盒模型。

• 一般属性值有1~4个的
  例如padding、margin等，
  1个值——四边都一样
  2个值——上下、左右
  3个值——上、左右、下
  4个值——上、右、下、左

• display:none和visibility:hidden
  都可以隐藏元素，但后者仍然占据空间，会影响页面布局。

• absolute
  与文档流无关，可以产生重叠

• 媒体类型
  为不同媒体设置不同样式

• 属性选择器
  第一次知道还有属性选择器

[title]
{
    color:blue;
}

表示所有含title属性的元素变为蓝色。

• background-image
  该属性的值可以有多张图片，不同的图片之间用逗号分隔，还可以指定不同的图片处于容器的不同位置。

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
    padding: 15px;
}

也可以写成：

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
    padding: 15px;
}

• background-origin
  前面我们了解到盒子模型，该属性的属性值有三种，分别是content-box/padding-box/border-box。background-clip的属性值也有上面三种。

天哪，CSS的东西好多哦！好难记住呀，有人可以分享经验吗？