一直认为自己已经掌握了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的东西好多哦!好难记住呀,有人可以分享经验吗?