搜索
2015css3目录1.css的特点2.css的定义3.css的使用方式4.css的选择器5.模型概述6.css应用实例css定义css:层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。css特点采用css技术，可以有效地对网页布局、字体、颜色、背景和其它效果实现更加精确的控制为什么要引入css技术？1.把样式添加到html中，是为了解决内容与表现分离的问题2.外部样式表极大提高工作效率3.外部样式表通常存储在css文件中4.多个样式定义可层叠为一（优先级高低--优先级最高的）css的四种书写方式1.外部样式2.内部样式3.行内样式4.导入样式（可以忽略，只做了解）加载css样式方法1.外部样式linkhref=layout.cssrel=stylesheettype=text/css/这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。加载css样式方法2.内部样式styleh2{color:#f00;}/style这种形式是内部样式表，它是以style和/style结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。加载css样式方法3.行内样式pstyle=font-size:18px;行内样式/p这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。加载css样式方法4.导入样式styletype=text/css@importurl(/css/global.css);/style链接样式是以@importurl标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@importurl(/css/global.css)的形式链接全局样式，这样就使代码达到很好的重用性。css的使用方式规则样式选择符{属性1:值1;属性2:值2;属性3:值3;属性4:值4;......}selector{key1:value1;key2:value2;key3:value3;....}选择符通常是您需要改变样式的html元素提示：请使用花括号来包围声明,html标签不区分大小写，class名字是区分大小写的。css选择器1.派生选择器（标签）lip{}pspan{}lip表示上下文关系，中间用空格隔开为什么要使用派生选择器？通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理使用派生选择器，我们可以使HTML代码变的更加整洁。css选择器2.类、伪类在css中，类选择器以一个点号显示：.center{text-align:center;}——俗称class名字li我是第一行/liliclass=center我是第二行/li注意：类名称的第一个字符不能使用数字。css选择器2.类、伪类类也可以被用作派生选择器.centerp{text-align:center;}lispan2015/3/5/spanp我是一段文字，不居中/p/liliclass=centerspan2015/3/5/spanp我是一段文字,居中显示/p/li*不管是类，还是类的派生选择器，在html页面中可以被重复指定，并生效。css选择器2.类、伪类css伪类用于向某些选择器添加特殊的效果语法：selector：pseudo-class{key：value；}a:link{}未访问的链接a:visited{}已访问的链接a:hover{}鼠标移动到链接上a:active{}选定的链接提示：1.在css定义中，a:hover必须被置于a:link和a:visited之后，才是有效的。2.在css定义中个，a：active必须被置于a:hover之后3.伪类名称对大小写不敏感3.ID选择器ID选择器是以“#”最为开头的一种类#center{text-align:center;}liid=center我居中显示/li用法基本原理同类、类派生选择器，但与类不同的是，ID在页面中是唯一的，不可重复指定。4.继承，重写根据css，子集元素从父元素继承属性，但是它并不总是按此方式工作，通过css继承，子元素将继承最高级元素所拥有的属性（这些子元素诸如p，td，ul，ol，li，dt，dd）。body{font-size:14px;color:#999;}css可以吧之前定义的样式，以重写的形式将旧样式强制转换成新的样式.first{color:#ccc;font-size:14px;font-weight:900;}.second{color:#999;font-size:16px;}liclass=firstsecond我有多种样式/li重写只对相同的属性有效，不同的属性依旧使用的是继承的方式显示。框模型概述内边距.边框和外边距都是可选的。默认值是零css优先级id优先级高于class后面的样式覆盖前面的指定的高于继承行内样式高于内部或外部样式总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的css都有哪些css参考手册参考手册小实例见html谢谢！