《CSS那些事儿》读书笔记
2012-05-16 13:32 臭小子1983 阅读(207) 评论(0) 编辑 收藏 举报一、css
一、css的简写
高效的css写法中的一条就是使用简写。通过简写可以让你的CSS文件更小,更易读。而了解CSS属性简写也是前端开发工程师的基本功之一。今天我们系统地总结一下CSS属性的缩写。
1、色彩缩写
颜色的表现形式有没4种:
1、十六进制: color:#ccc; 2、RGB:color:rgb(255, 255, 0); 3、颜色名称:color:red
色彩的缩写最简单,在色彩值用16进制的时候,如果每种颜色的值相同,就可以写成一个:
可以简写为
所有用到16进制色彩值的地方都可以使用简写,比如background-color、border-color、text-shadow、box-shadow等。
2、单位值的省略
如:width:0px 可以简写成 width:0; 省去单位px
3、盒子大小
这里主要用于两个属性:margin和padding,我们以margin为例,padding与之相同。盒子有上下左右四个方向,每个方向都有个外边距:
这四个值可以缩写到一起:
缩写的顺序是上->右->下->左。顺时针的方向。相对的边的值相同,则可以省掉:
4、边框(border)
border是个比较灵活的属性,它有border-width、border-style、border-color三个子属性。
它可以按照width、style和color的顺序简写:
有的时候,border可以写的更简单些,有些值可以省掉,但是请注意哪些是必须的,你也可以测试一下:
通过上面的代码可以了解到,border默认的宽度是3px,默认的色彩是black——黑色。默认的颜色是该规则中的color属性的值,而color默认是黑色的(多谢 @birdstudio 的提醒 )。border的缩写中border-style是必须的。
同时,还可以对每条边采用缩写:
还可以对每个属性采用缩写:
5、outline
outline类似border,不同的是border会影响盒模型,而outline不会。
可以缩写为:
同样,outline的简写中,outline-style也是必须的,另外两个值则可选,默认值和border相同。
6、背景(background)
background是最常用的简写之一,它包含以下属性:
background的简写可以大大的提高css的效率:
background的简写也有些默认值:
background属性的值不会继承,你可以只声明其中的一个,其它的值会被应用默认的。
7、font
font简写也是使用最多的一个,它也是书写高效的CSS的方法之一。
font包含以下属性:
font的各个属性也都有默认值,记住这些默认值相对来说比较重要:
事实上,font的简写是这些简写中最需要小心的一个,稍有疏忽就会造成一些意想不到的后果,所以,很多人并不赞成使用font缩写。
不过这里正好有个小手册,相信会让你更好的理解font的简写:
font-family: "Microsoft YaHei"
8、列表样式
有序列表(ol)及无序列表(ul)
可能大家用的最多的一条关于列表的属性就是:
它会清除所有默认的列表样式,比如数字或者圆点。
list-style也有三个属性:
list-style的默认属性如下:
需要注意的是,如果list-tyle中定义了图片,那么图片的优先级要比list-style-type高,比如:
这个例子中,如果img.gif存在,则不会显示前面设置的circle符号。
PS:其实list-style-type有很多种很有用的样式,感兴趣的同学可以参考一下:https://developer.mozilla.org/en/CSS/list-style-type
9、css3 border-radius(圆角半径)
border-radius是css3中新加入的属性,用来实现圆角边框。这个属性目前不好的一点儿是,各个浏览器对它的支持不同,IE尚不支持,Gecko(firefox)和webkit(safari/chrome)等需分别使用私有前缀-moz-和-webkit-。更让人纠结的是,如果单个角的border-radius属性的写法在这两个浏览器的差异更大,你要书写大量的私有属性:
呃,是不是你已经看的眼花了?这只是要实现左上角不是圆角,其它三个角都是圆角的情况。所以对于border-radius,神飞强烈建议使用缩写:
这样就简单了很多。PS:不幸的是,最新的Safari(4.0.5)还不支持这种缩写… (thanks @fireyy)
就总结这么多,还有其它的可以缩写的属性吗?欢迎大家提出一起讨论。
二、css选择符
1、通配选择符:* 用来对页面所有元素应用样式
1 *{ 2 margin: 0; 3 padding: 0; 4 }
2、类选择符:.
1 .myContent{ 2 font-size: 18px; 3 font-weight: bold; 4 }
3、包含选择符:也叫派生选择符或后代选择器
例如:p标签里的strong标签定义样式
1 p strong{ 2 color:#f00; 3 font-size: 18px; 4 }
4、子选择符:“ > ”符号
1 <style> 2 p > strong{ 3 color:#f00; 4 font-size: 18px; 5 } 6 </style> 7 8 <p> 9 <strong>ddddd</strong> // 匹配 10 <div> 11 <strong>sssss</strong> // 不匹配 12 </div> 13 </p>
5、相邻选择符: “ + ” 符号 IE6不支持相邻选择符
1 <style> 2 p + strong{ 3 color:#f00; 4 font-size: 18px; 5 } 6 </style> 7 8 9 <p> 10 <strong>aaaa</strong> 11 <div> 12 <strong>bbbb</strong> 13 </div> 14 </p> 15 <strong>cccc</strong> // 匹配
三、属性选择符
1、E[attr]:匹配属性
2、E[attr="value"]:匹配属性等于这个值
3、E[attr ~= "value"]:
4、E[attr |= "value"]:
四、id选择符
#gId{ color: red; } <div id="gId"></div>
五、选择符的组合关系
p.myContent { font-size: 18px; }
1 <style> 2 .myContent{ font-size:12px; } 3 p.myContent{ font-size:18px; } 4 </style> 5 6 <div class="myContent">aaaaa</div> // 12px 7 <p class="myContent"> 8 bbbbb // 18px; 9 </p>
六、伪类与伪对象
选择符:伪类{属性: 属性值}
1 <style> 2 a:link {color:red;} /* 默认颜色 */ 3 a:visited { color:blue; } /* 链接默认颜色 */ 4 a:hover { color: green;} /* 鼠标移上去的颜色 */ 5 a:active { color: black; } /* */ 6 </style>
伪对象:选择符:伪对象 { 属性:属性值; }
1 <style> 2 p:before {content:"4月1" } 3 p:after { content: "小心" } 4 </style>
七、选择符之间的关系
1、选择符的覆盖
1 <style> 2 p{ color: #0000ff; } 3 p{ color: #ff0000; } /* 会被执行 */ 4 </style>
2、选择符Z的继承
如:body中定义了文字大小,后代元素都将继承body中的样式
1 <style> 2 body{ font-size: 12px } 3 p{ color:#ccc; } 4 </style>
八、选择符的权重值优先级别
优先顺序为:
1、标有!important关键字声明的属性
2、HTML中的css样式
3、css样式
权重值:
1、内联样式style属性:权值为1000
2、id选择符:权值为100
3、类,伪类、属性选择符:权值为10
4、标签选择符、伪元素:如div p,权值为1
5、其它优先符:通配符选择器等,优先级为0
九、css引入到HTML页面中
一般为分为3种类别:
1、直接写到元素中,称为行间样式
2、将样式写在<style></style>标签之内,称为内嵌样式表
3、通过<link>外链css样式,称为外联样式表
4、@import关键字导入外部的css样式文件,称为导入样式表
十、样式表的规划与管理
复杂一点将css样式文件夹分为两个部分:1、页面全局定义及处理页面基本布局的css样式文件夹 2、处理细节方面的样式文件
三、页面布局
一、什么是DOCTYPE
DOCTYPE是Document type(文档类型)的缩写
1、STRICT:严格类型,在此情况下使用需要xhtml标签,避免添过多无意义的标签属性,页面避免使用标签属性,而选择css样式表
2、Transitional:过渡类型,可以适当地添加标签属性用于页面的表现,目前使用最普遍的类型
3、Frameset:在使用HTML框架将浏览器分割成多个窗口
二、IE浏览器在两种渲染方式:怪异模式和标准模式
1、标准模式:Standard中浏览器根据规范表现页面.
2、怪异模式:比较宽松的向后兼容的方式显示,通常模拟老式浏览器(ie4和Netscape4)的行为以防止老站点无法工作.
怎么样触发怪异模式:
1、没写DOCTYPE,这个最常见;
2、加XML声明,可在ie6下触发
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE ...>
3、在XML声明和XHTML的DOCTYPE之间加入HTML注释,可在ie7下触发 <?xml version="1.0" encoding="utf-8"?>
<!-- keep IE7 in quirks mode -->
<!DOCTYPE ...>
4、<!--->放在<!DOCTYPE前面
5、写了DOCTYPE,但不在文档的第一行,实验证明,在DOCTYPE之前有任何非空字符都会触发IE6的怪异模式,在IE7下,DOCTYPE之前有XML的文档声明并不触发,但是在DOCTYPE和XML文档声明之间有任何非空字符仍然会触发。
所以,为了不触发怪异模式,要保证DOCTYPE写在整个html文档的第一行。
怎么样触发怪异模式:
1、怪异模式:
内容宽=设置宽-padding-border
可视宽度=设置宽
2、标准盒模型:
内容宽=设置宽;
可视宽=设置宽+padding+border
四、二列和三列布局
一、固定列布局:列的宽度都是固定的值
1 <style> 2 *{ margin:0; padding:0; } 3 #header, #footer{ width:960px; height:30px; background-color:#e8e8e8; } 4 .container { width:960px;} 5 .mainBox { float:left; width:680px; color:#fff; background-color:#333; } 6 .sideBox { float:left; width:280px; color:#fff; background-color:#999; } 7 #footer { clear:both; } /* 清除左右浮动 */ 8 </style> 9 10 <div id="header">头部信息</div> 11 <div class="container"> 12 <div class="mainBox">中新社北京11月29日电 (记者 陶社兰)中国空军新闻发言人申进科空军上校29日在北京表示,当天,中国空军识别查证了进入中国东海防空识别区的外国军机,实现了对防空识别区内空中目标的常态化有效监控。 13 14 据申进科介绍,29日上午,中国空军组织苏-30、歼-11等主战飞机紧急起飞,查证美国P-3、EP-3侦察机2批2架,识别进入中国东海防空识别区的日本E-767、P-3、F-15等3型飞机7批10架。 15 16 “中国空军执行东海防空识别区空中巡逻任务以来,与海军有关部队一道,忠实履行使命任务,对进入防空识别区的外国军机进行了全程监视、及时识别,并判明其类别。”他说。</div> 17 <div class="sideBox">侧边栏</div> 18 </div> 19 <div id="footer">底部信息</div>
二、等高列布局:两个列的高度都是相等的。有两种方式: 1、背景模拟 2、负边距实现
1、背景模拟:将父层的背景为background图片,子元素的高度变化背景也跟着加高
2、负边距:通过内外边距来实现
1 <style> 2 *{ margin:0; padding:0; } 3 #header, #footer{ width:960px; height:30px; background-color:#e8e8e8; } 4 .container { width:960px; overflow:hidden;} 5 .mainBox { float:left; width:680px; color:#fff; background-color:#333; } 6 .sideBox { float:left; width:280px; color:#fff; background-color:#999; } 7 .mainBox, .sideBox { color:#ff0000; margin-bottom:-9999px; padding-bottom:9999px; } /* 负边距主要利用了内外补丁特性实现了等高 */ 8 #footer { clear:both; } /* 清除左右浮动 */ 9 </style> 10 11 <div id="header">头部信息</div> 12 <div class="container"> 13 <div class="mainBox">中新社北京11月29日电 (记者 陶社兰)中国空军新闻发言人申进科空军上校29日在北京表示,当天,中国空军识别查证了进入中国东海防空识别区的外国军机,实现了对防空识别区内空中目标的常态化有效监控。 14 15 据申进科介绍,29日上午,中国空军组织苏-30、歼-11等主战飞机紧急起飞,查证美国P-3、EP-3侦察机2批2架,识别进入中国东海防空识别区的日本E-767、P-3、F-15等3型飞机7批10架。 16 17 “中国空军执行东海防空识别区空中巡逻任务以来,与海军有关部队一道,忠实履行使命任务,对进入防空识别区的外国军机进行了全程监视、及时识别,并判明其类别。”他说。</div> 18 <div class="sideBox">侧边栏</div> 19 </div> 20 <div id="footer">底部信息</div>
三、一列固定一列自适应:
自适应宽度的值不能设置为100%;设置为auto,并且居左为侧栏的宽度.
1 <style> 2 *{ margin:0; padding:0; } 3 #header, #footer{ height:30px; background-color:#e8e8e8; } 4 .container { overflow:hidden;} 5 .mainBox { color:#fff; background-color:#333; margin-left:280px; width:auto; } 6 .sideBox { float:left; width:280px; color:#fff; background-color:#999; } 7 .mainBox, .sideBox { color:#ff0000; margin-bottom:-9999px; padding-bottom:9999px; } 8 #footer { clear:both; } /* 清除左右浮动 */ 9 </style> 10 11 <div id="header">头部信息</div> 12 <div class="container"> 13 <div class="sideBox">侧边栏</div> 14 <div class="mainBox"> 15 <p>中新社北京11月29日电 (记者 陶社兰)中国空军新闻发言人申进科空军上校29日在北京表示,当天,中国空军识别查证了进入中国东海防空识别区的外国军机,实现了对防空识别区内空中目标的常态化有效监控。</p> 16 <p>据申进科介绍,29日上午,中国空军组织苏-30、歼-11等主战飞机紧急起飞,查证美国P-3、EP-3侦察机2批2架,识别进入中国东海防空识别区的日本E-767、P-3、F-15等3型飞机7批10架。</p> 17 <p>"中国空军执行东海防空识别区空中巡逻任务以来,与海军有关部队一道,忠实履行使命任务,对进入防空识别区的外国军机进行了全程监视、及时识别,并判明其类别。”他说。</p> 18 </div> 19 </div> 20 <div id="footer">底部信息</div>
注:盒模宽度的默认值为auto,如果遇上了浮动float,最终的宽度将受到改变,盒模的宽度不再等同于浏览器窗口所显示的大小,而是随着模盒中的内容而产生了变化.
四、三列布局:中间列自适应
1 <style> 2 *{ margin:0; padding:0; } 3 #header, #footer{ height:30px; background-color:#e8e8e8; } 4 .container { overflow:hidden;} 5 .mainBox { color:#fff; background-color:#333; margin-left:280px; margin-right:280px; width:auto; } 6 .sideLeftBox,.sideRightBox { width:280px; color:#fff; background-color:#999; } 7 .sideLeftBox { float:left; } 8 .sideRightBox { float:right; } 9 .mainBox, .sideLeftBox, .sideRightBox{ color:#ff0000; margin-bottom:-9999px; padding-bottom:9999px; } 10 #footer { clear:both; } /* 清除左右浮动 */ 11 </style> 12 13 <div id="header">头部信息</div> 14 <div class="container"> 15 <div class="sideLeftBox">侧边栏</div> 16 <div class="sideRightBox">侧边栏</div> 17 <div class="mainBox"> 18 <p>中新社北京11月29日电 (记者 陶社兰)中国空军新闻发言人申进科空军上校29日在北京表示,当天,中国空军识别查证了进入中国东海防空识别区的外国军机,实现了对防空识别区内空中目标的常态化有效监控。</p> 19 <p>据申进科介绍,29日上午,中国空军组织苏-30、歼-11等主战飞机紧急起飞,查证美国P-3、EP-3侦察机2批2架,识别进入中国东海防空识别区的日本E-767、P-3、F-15等3型飞机7批10架。</p> 20 <p>"中国空军执行东海防空识别区空中巡逻任务以来,与海军有关部队一道,忠实履行使命任务,对进入防空识别区的外国军机进行了全程监视、及时识别,并判明其类别。”他说。</p> 21 </div> 22 </div> 23 <div id="footer">底部信息</div>
五、让模盒上、下、左、右居中
1 <style> 2 body{ margin:0; } 3 .box { width:200px; height:200px; background-color:red; position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; } 4 </style> 5 6 <div class="box"></div>
六、文本润色
一、文字基本样式:
1、字体设置:font-family:"宋体";
2、字形改变:font-size:
3、字体加粗:font-weight:bold;
4、字体倾斜:font-sylte:italic;
5、字体颜色:color:#ooooff;
二、段落:
1、首行缩进:text-index:2em;
2、行高调整:line-height:
三、特殊效果:
1、首字下沉:p:first-letter
2、首行文字样式:p:first-line
3、文字隐藏截取:overflow:hidden; // 隐藏超出的段落的内容
4、将文字推到容器之外: text-index:-9999px;
5、设置元素不可见,但空间位置还保留:visibility:hiddle
6、元素不可见,空间也不保留:display:none;
四、文字链接
:link:设置a中的内容的未被访问前的样式
:visited:被访问过后的样式
:hover:鼠标经过悬停时的样式
:active:鼠标点击,但未释放的样式