1、BENET3.0第二学期课程,Css基础,Css基本语法-标记选择器,标记选择器：h1 color: red; font-size: 25px; ,2,Css基本语法-id选择器,id选择器在同一个html文件内，id不允许重复，因此id属性一般用来定义比较特殊的元素，例如页面内用来控制版面布局的模块的定义。 例如：北大青鸟昌平校区对应的css为#header color:yellow;font-size:30px,3,Css基本语法-类别选择器,类选择器和id选择器很像,是通过为html元素添加class属性而生效的,可应用在内的任何元素上,不过类选择器是可以重复的。 例如：北大青鸟昌平校区
2、对应的css为.header color:yellow;font-size:30px,4,通配选择器,在很多计算机语言里，通常用英文的“*”号代表所有的元素，因此通配选择器定义的规则会应用在所有元素上。因此一般在css的开始时定义。 如: *margin:0;padding:0;，这样定义是把所有的元素的边距（margin）和补白（padding）定义为0，以清除浏览器的默认样式。通配选择器也可以定义某元素下的所有元素，例如：divbackground-color:blue,定义的所有后代元素的背景都为蓝色。,5,包含选择器,例1： Css：div emcolor:blue; 网页代码：北大青
3、鸟例2: Css：div p a /*中的p中的a */ 网页代码：北大青鸟昌平校区,6,7,Css样式,css样式有以下四种： 外部样式，内部样式，行内样式，导入样式。1、外部样式：这种形式是把css单独写到一个css文件内，然后在源代码中以link方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。,内部样式,例如：h2 color:#f00;这种形式是内部样式表，它是以和结尾，写在源代码的head标签内。这样的样式表只能针对本页有效。不能作用于其它页面。,8,行内样式,内部样式这种在标签内以style标记的为行内样式，行内样式只针对标签内的元素有效，因其没有和内
4、容相分离，所以不建议使用。,9,导入样式,import url(“/css/global.css“)链接样式是以import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以import url(“/css/global.css“)的形式链接全局样式，这样就使代码达到很好的重用性。,10,css优先级,css优先级 1、id优先级高于class 2、后面的样式覆盖前面的 3、指定的高于继承 4、行内样式高于内部或外部样式 总结：单一的(id)
5、高于共用的(class)，有指定的用指定的，无指定则继承离它最近的,11,常用css,CSS 背景属性（Background） Background：在一个声明中设置所有的背景属性。 background-attachment：设置背景图像是否固定或者随着页面的其余部分滚动。 background-color：设置元素的背景颜色。 background-image：设置元素的背景图像。 background-position：设置背景图像的开始位置。 background-repeat：设置是否及如何重复背景图像。 例如：background-image：url（images/a.jpg）设置
6、元素的背景图像。,12,常用css,CSS 边框属性（Border 和 Outline） Border：在一个声明中设置所有的边框属性。 border-bottom：在一个声明中设置所有的下边框属性。 border-bottom-color：设置下边框的颜色。 border-bottom-style：设置下边框的样式。 border-bottom-width：设置下边框的宽度。 border-color：设置四条边框的颜色。 Outline：在一个声明中设置所有的轮廓属性。 outline-color：设置轮廓的颜色。 outline-style：设置轮廓的样式。 outline-width：
7、设置轮廓的宽度。,13,常用css,CSS 文本属性（Text） Color：设置文本的颜色。 letter-spacing：设置字符间距。 line-height：设置行高。 text-align：规定文本的水平对齐方式。 text-decoration：规定添加到文本的装饰效果。 word-spacing：设置单词间距。 text-indent：规定文本块首行的缩进。 text-shadow：规定添加到文本的阴影效果。,14,常用css,CSS 字体属性（Font） font-style：规定文本的字体样式。 font-variant：规定文本的字体样式。 font-weight：规定字体
8、的粗细。 Font：在一个声明中设置所有字体属性。 font-family：规定文本的字体系列。 font-size：规定文本的字体尺寸。,15,常用css,CSS 外边距属性（Margin） Margin：在一个声明中设置所有外边距属性。 margin-bottom：设置元素的下外边距。 margin-left：设置元素的左外边距。 margin-right：设置元素的右外边距。 margin-top：设置元素的上外边距。,16,常用css,CSS 内边距属性（Padding） Padding：在一个声明中设置所有内边距属性。 padding-bottom：设置元素的下内边距。 paddin
9、g-left：设置元素的左内边距。 padding-right：设置元素的右内边距。 padding-top：设置元素的上内边距。,17,常用css,CSS 列表属性（List） list-style：在一个声明中设置所有的列表属性。 list-style-image：将图象设置为列表项标记。 list-style-position：设置列表项标记的放置位置。 list-style-type：设置列表项标记的类型。 CSS 尺寸属性（Dimension） Height：设置元素高度。 max-height：设置元素的最大高度。 max-width：设置元素的最大宽度。 min-height：设
10、置元素的最小高度。 min-width：设置元素的最小宽度。 Width：设置元素的宽度。,18,常用css属性,CSS 定位属性（Positioning） Clear：规定元素的哪一侧不允许其他浮动元素。 Clip：剪裁绝对定位元素。 Display：规定元素应该生成的框的类型。 Float：规定框是否应该浮动。 Left：设置定位元素左外边距边界与其包含块左边界之间的偏移 Overflow：规定当内容溢出元素框时发生的事情。 Position：规定元素的定位类型。 vertical-align：设置元素的垂直对齐方式。 Visibility：规定元素是否可见。 z-index：设置元素的堆叠顺序。,19,常用css属性,CSS 伪类（Pseudo-classes） :active：向被激活的元素添加样式。 :hover：当鼠标悬浮在元素上方时，向元素添加样式。 :link：向未被访问的链接添加样式。 :visited：向已被访问的链接添加样式。,20,
