css基础知识快速入门

《css基础知识快速入门》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、前端开发基础知识By小叉2011.12.01新浪微博：@技术宅小叉个人网站：http://ciaoca.cn前端开发基础知识打好基石，才能攀得更高By小叉2011.12.01新浪微博：@技术宅小叉个人网站：http://ciaoca.cn知识要点1.盒模型6.标签&语义2.选择器7.块元素&行内元素3.布局8.HTML5简单应用4.CSSReset9.图片优化5.CSS优化1.盒模型元素实际占用尺寸=width(height)+padding+border+margin2.选择器2.1CSS1定

2、义的选择器元素选择器伪类选择器EE:linkE:visitedID选择器E:active#idE:hover类选择器E:focusE.class伪元素包含选择器E:first-linkEF(中间有一个空格)E:first-letter2.选择器2.2CSS2.1增加的选择器通配选择器伪类选择器*(星号)E:lang(fr)子包含选择器结构伪类选择器E>FE:first-child相邻兄弟选择器属性选择器E+FE[foo]E[foo="bar"]伪元素E[foo~="bar"]E:beforeE[

3、foo

4、="bar"]E:after2.选择器2.3优先级名称代码示例权重元素内联样式属性style=""1,0,0,0ID选择器#id0,1,0,0class选择器.class属性选择器[type=“text"]0,0,1,0伪类:hover元素h10,0,0,1伪元素:first-child其他选择器*(通用选择器)、>(子包含选择器)0,0,0,0!importantcolor:#f00!important;最高2.选择器2.3优先级名称代码示例权重元素内联样式属性style=""1000

5、ID选择器#id100class选择器.class属性选择器[type=“text"]10伪类:hover元素h11伪元素:first-child其他选择器*(通用选择器)、>(子包含选择器)0!importantcolor:#f00!important;最高※同级后来居上2.选择器2.3优先级.listli的优先级更高，所以浏览器会显示.listli设置的样式3.布局3.1浮动(float)none不浮动(默认值)left左浮动right右浮动3.布局3.1浮动(float)不浮动