课前提问CSS是什么?有什么作用？有HTML，为什么还要使用CSS？CSS样式规则的组成是什么样的？HTML网页中加入CSS的方法有哪些？分别有什么特点？CSS选择器是什么？CSS选择器有哪些类型？超链接有关的伪类有哪些？如何定义它们的样式？div和span作用是什么？有什么区别？CSS文本修饰属性有哪些？CSS的继承性CSS的继承性CSS具有两个特性：层叠性和继承性。CSS的继承性是指如果子元素定义的样式没有和父元素定义的样式发生冲突，那么子元素将继承父元素的样式风格，并可以在父元素样式的基础上再加以修改，自己定义新的样式，而子元素的样式风格不会影响父元素。如：
body{text-align:center;}p{font-size:24px;text-decoration:underline;}em{color:#FF0000;}.right{text-align:right;}电子商务教研
电子商务教研室练习:测试效果要善于利用CSS继承性CSS的继承贯穿整个CSS
设计
领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计
的始终，每个标记都遵循着CSS继承的概念。可以利用这种巧妙的继承关系，大大缩减代码的编写量，并提高可读性，尤其在页面内容很多且关系复杂的情况下。例如，如果网页中大部分文字的字体大小都是12px，我们可以对body或td标记定义样式为12像素。这样由于其他标记都是body的子标记，会继承这一样式，就不需要对这么多子标记去定义样式了，有些特殊的地方如果字体大小要求是14px，我们可以再利用类选择器或id选择器单独定义。并不是所有的CSS属性都具有继承性需要注意的是并不是所有的CSS属性都具有继承性，一般是CSS的文本属性具有继承性，而其他属性（如背景属性、盒子属性等）则不具有继承性。具有继承性的属性：color,font-类，text-indent,text-align,text-decoration,line-height,letter-spacing,border-collapse等无继承性的属性：text-decoration:none,所有背景属性，所有盒子属性,布局属性等CSS的层叠性CSS的层叠性CSS具有两个特性：层叠性和继承性。层叠性是指当有多个选择器都作用于同一元素时，即多个选择器的作用范围发生了重叠，CSS怎样处理？CSS的处理原则是：1）如果多个选择器定义的规则不发生冲突，则元素将应用所有选择器定义的样式，即效果累加。如：CSS的层叠性－未冲突p{/*标记选择器*/color:blue;font-size:18px;}.special{/*类别选择器*/font-weight:bold;}/*粗体*/#underline{text-decoration:underline;}/*有下划线*/标记选择器1
标记选择器2
受到标记、类两种选择器作用受到标记、类和id三种选择器作用CSS的层叠性－发生冲突2）如果多个选择器定义的规则发生了冲突，则CSS按选择器的优先级让元素应用优先级高的选择器定义的样式。CSS规定选择器的优先级从高到低为：行内样式>ID样式>类别样式>标记样式。总的原则是：越特殊的样式，优先级越高。如：选择器的优先级p{/*标记选择器*/color:blue;font-style:italic;}.green{/*类选择器*/color:green;}.purple{color:purple;}#red{/*ID选择器*/color:red;}这是第1行文本
这是第2行文本这是第3行文本这是第4行文本这是第5行文本!important的用途可以通过!important强制改变选择器的优先级，则优先级为!important>行内样式>ID样式>类别样式>标记样式另外，如果在同一个选择器中定义了两条相冲突的规则，则以后一条为准。如果为某一条添加了!important，那么IE6总是以后一条为准，不认!important。而Firefox/IE7以定义了!important的为准#box{color:red!important;/*Firefox执行这一条*/color:blue;/*IE6执行这一条*/}选择器的组合选择器的组合每个选择器都有它的作用范围，基本的选择器的作用范围都是一个单独的集合，如标记选择器的作用范围是具有该标记的所有元素的集合，类选择器的作用范围是自定义的某一类元素的集合，有时我们希望对几种选择器的作用范围取交集、并集、子集后对选中的元素再定义样式，这时就要用到复合选择器了，它是通过对几种基本选择器的组合，实现更强、更方便的选择功能。复合选择器复合选择器就是两个或多个基本选择器，通过不同方式组合而成的选择器。主要有:交集选择器并集选择器（组合选择器）后代选择器（关联选择器）1交集选择器交集选择器是由两个选择器直接连接构成，其结果是选中两者各自作用范围的交集。其中第一个必须是标记选择器，第二个必须是类选择器或id选择器。例如：h1.class；p#intro。这两个选择器之间不能有空格。h1.class1color:green;font-size:20px;{}标记名属性值属性值声明声明类别名交集选择器的作用范围交集选择器将选中同时满足前后二者定义的元素，也就是前者定义的标记类型，并且指定了后者的类别或id的元素。它的作用范围如图所示：h1h1.class.class交集选择器举例例如由于所有的表单控件都是input标记，如果设置input标记选择器的样式，那么所有的表单控件都会受影响，如果只希望某个表单控件（如提交按钮）受影响，则可用交集选择器input.red{……}input.red{color:#FF0000;}对于上例IE7、Firefox还支持属性选择器可不创建red类，直接写input[type=‘submit’]2并集选择器（组合选择器）所谓并集选择器就是对多个选择器进行集体声明，多个选择器之间用“,”隔开。如果某些选择器定义的样式完全相同，或者部分相同，这时便可以利用并集选择器同时声明风格完全相同或部分相同的样式。如h2,.class{…}其选择范围如图所示：h2.classh2,.class并集选择器举例h1,h2,h3,p{font-size:12px;color:purple;}h2.special,.special,#one{text-decoration:underline;}示例文字h1
示例文字h2示例文字h3
示例文字h4示例文字p1通配选择符如果要对网页中所有的元素进行集体声明可使用通配选择符**{/*全局声明*/color:purple;/*文字颜色*/font-size:15px;/*字体大小*/}h2.special,.special,#one{/*集体声明*/text-decoration:underline;/*下划线*/}3后代选择器（关联选择器）在CSS选择器中，还可以通过嵌套的方式，对特殊位置的html元素进行控制，例如当与之间包含……元素时，就可以使用后代选择器选中出现在a元素中的b元素。a为父元素，b为子元素。后代选择器的写法是把外层的标记写在前面，内层的标记写在后面，之间用空格隔开。其选择范围如图所示：ab{…}aab后代选择器a{font-size:16px;color:red;}ab{color:mediumpurple;}这是b标记中的文字
这是a标记中的b标记后代选择器和其他所有CSS选择器一样，后代选择器会继承父元素的没有冲突的样式。后代选择器定义的具有继承性的样式同样也能被其子元素继承。例如在上例中，b元素内又包含了span元素，那么span元素也将显示为淡紫色。这说明子元素（span）继承了父元素（ab）的颜色样式后代选择器举例后代选择器的使用非常广泛，实际上不仅标记选择器可以用这种方式组合，类选择器和ID选择器也都可以进行嵌套，而且后代选择器还能够进行多层嵌套。例如：.specialb{color :red}#menuli{padding :06px ;}td.top.ban1strong{font-size :16px ;}#menua:hoverb经验：选择器的嵌套在CSS的编写中可以大大减少对class或id的声明。因此在构建页面html框架时通常只给外层标记（父标记）定义class或id，内层标记（子标记）能通过嵌套表示的则利用这种方式，而不需要再定义新的class或id。练习：页面不同部分显示CSS样式的优先级总图!important样式行内样式id选择器类选择器复合选择器标记选择器浏览器对标记预定义的样式继承的样式低高优先级4.复合选择器的优先级复合选择器的优先级比组成它的单个选择器的优先级都要高。我们知道基本选择器的优先级是“ID选择器>类选择器>标记选择器”，所以不妨设ID选择器的优先级权重是100，类选择器的优先级权重是10，标记选择器的优先级权重是1，那么复合选择器的优先级就是组成它的各个选择器权重值的和。h1{color:red;}/*权重=1*/pem{color:blue;}/*权重=2*/.warning{color:yellow;}/*权重=10*/p.noteem.dark{color:gray;}/*权重=22*/#main{color:black;}/*权重=100*/当权重值一样时，会采用“层叠原则”，一般后定义的会被应用复合选择器优先级计算例题#aaulli{color:red}.aa{color:blue}复杂选择器名称的分解如果一个复杂的选择器名称中既有逗号，也有空格，也有.号，和：号，怎么将其分解呢？像四则运算中的先乘除，后加减一样，CSS选择器分解的原则是：先逗号，接着空格，再冒号，最后点号。例如：#menua.class:hoverb,.specialb.class{…}就可先分解为：（#menua.class:hoverb），（.specialb.class）这样就分解成了两个三层包含选择器，其中左边包含选择器的中间是一个定义了类名的a标记的伪类选择器。CSS样式的总体设计原则定义标记选择器最省事，它不需在元素的html标记里添加class或id属性，因此初学者最喜欢定义标记选择器或由标记选择器组成的后代选择器。但有些标记（如a标记）在网页文档的各部分都出现得很多，它们在各部分的样式风格往往不一样。例如导航条内的a标记就要求和文档其他地方的a标记样式不同，我们当然可以将导航条内的各个a标记定义为一个类，但这就要将导航条内的各个a标记都添加一个class属性，实际上，可以将导航条内a标记的父标记（如ul）添加一个id属性（#menu），然后用包含选择器（#menua）就可以选中导航条内的各个a标记了。CSS样式的总体设计原则2对于几个不同的选择器，如果它们有一些共同的样式声明，就可以先用并集选择器对它们先集体声明，然后再单独定义某些选择器的特殊样式。CSS2.1新增加的选择器简介CSS2.1新增加的选择器简介CSS2.1标准在1.0的基础上增加了一些新的选择器，这些选择器不能被IE6浏览器支持，但是其他浏览器如IE7、Firefox3、Safari4等均对它们提供支持。考虑到目前越来越多的电脑安装了IE7等新型浏览器，因此我们有必要知道这些新选择器，它们能给CSS设计带来方便，而且对我们以后学习jQuery的选择器是很有帮助的。1.子选择器子选择器用于选中元素的直接后代（即儿子），它的定义符号是大于号（>）body>p{color:green;}
这一段文字是绿色
这一段文字是绿色
测试:子选择器使用子选择器招数（Hack）对IE5-6/Win隐藏透明的背景PNG图象。html>body{ background-image:(bg.png)}p>b{color:red}2相邻选择器相邻（adjacent-sibling）选择器的定义符号是加号（+），相邻选择器将选中紧跟在它后面的一个兄弟元素（这两个元素具有共同的父元素）h2+p{color:red;}
下面哪些文字是红色的呢
这一段文字是红色
这一段文字不是红色
下面有文字是红色的吗
这一段文字不是红色
下面哪些文字是红色的呢
这一段文字不是红色
这一段文字是红色
这一段文字不是的
3属性选择器（1）匹配属性a[name]{color:purple;}img[border]{border-color:gray;}[special]{color:red;}（2）匹配属性和值input[type="submit"]{background:purple;}（3）匹配单个属性值h2[class~="two"]{color:red;}
文字是红色4新增加的伪类选择器（1）:focus用于定义元素获得焦点时的样式（2）:first-child:first-child伪类选择器用于匹配它的父元素的第一个子元素，也就是说这个元素是它父元素的第一个儿子，而不管它的父元素是哪个。p:first-child{font-weight:bold;}这一段文字是粗体
下面哪些文字是粗体的呢
这一段文字不是粗体
……5.伪对象选择器（1）:first-letter:first-letter用于选中元素内容的首字符。例如：p:first-letter{font-size:2em;float:left;}它可以选中段落p中的第一个字母或中文字符。（2）:first-line:first-line用于选中元素中的首行文本。例如：p:first-line{font-weight:bold;letter-spacing:0.3em;}5.伪对象选择器（3）:before和:afterp:before,p:after{content:"--";color:red;}看这一段文字的左右
这一段文字左右
CSS所有的选择器类型总结CSS的盒子模型CSS的盒子模型盒子模型是CSS的基石之一，它指定元素如何显示以及（在某种程度上）如何相互交互页面上的每个元素都被浏览器看成是一个矩形的盒子，这个盒子由元素的内容、填充、边框和边界组成。网页就是由许多个盒子通过不同的排列方式（上下排列，并列排列，嵌套排列）堆积而成。CSS的盒子模型CSS的盒子模型每个HTML元素都可以看作是一个装了东西的盒子盒子里面的内容到盒子的边框之间的距离即填充(padding),盒子本身有边框(border),而盒子边框外和其它盒子之间，还有边界(magin),如图所示默认情况下盒子的边框是无，背景色是透明，所以我们在默认情况下看不到盒子contentpadding-toppadding-bottompadding-leftpadding-rightborder-topborder-bottomborder-rightborder-leftmargin-rightmargin-leftmargin-topmargin-bottomwidthheight元素盒子大小的计算一个元素实际宽度=左边界＋左边框＋左填充＋内容宽度＋右填充＋右边框＋右边界IEquirk模式下盒子的宽度当将文档声明DOCTYPE删除后，IE6对网页的解释会进入quirk（怪异）模式，此时盒子的宽度等于左边界＋宽度＋右边界因此当使用了盒子属性后切忌删除DOCTYPECSS盒子模型计算题如果盒子里面嵌套有盒子，且两个盒子都有边框，那么两个盒子边框之间的距离等于外面盒子的填充值＋里面盒子的边界值Padding(外）+Margin（里）#box1{background-color:#ddd;margin:15px;padding:5px;}#box2{color:black;background-color:#aaa;margin:20px;padding:10px0px10px10px;width:100px;}body{border:1pxdotted#FF0000}这是里面的盒子 边框border属性盒子模型的margin和padding属性比较简单，只能设置宽度值，最多分别对上、右、下、左设置宽度值。而边框border则可以设置宽度、颜色和样式。分别是border-width（宽度）、border-color（颜色）和border-style（样式）其中border-style属性可以将边框设置为实线（solid）、虚线（dashed）、点划线（dotted）、双线（double）等效果边框border属性边框border属性有个有趣的特点，即两条交汇的边框之间是一个斜角，我们可以通过为边框设置不同的颜色，再利用这个斜角，制作出像三角形一样的效果内容填充padding属性填充padding属性，也称为盒子的内边距。就是盒子边框到内容之间的距离，和表格的填充属性（cellpadding）比较相似。如果填充属性为0，则盒子的边框会紧挨着内容，这样通常不美观。当对盒子设置了背景颜色或背景图像后，那么背景会覆盖padding和内容组成的范围，并且默认情况下背景图像是以padding的左上角为基准点在盒子中平铺的盒子模型的特性边界值margin可为负，填充padding不可为负边框border默认值为0，即不显示行内元素，如a，定义上下边界不影响行高对盒子模型的思考边框是实的，我们可以看到实实在在的边框，而填充和边界都是虚的，我们只能看到他们对元素的影响盒子模型中只能设置两类颜色，即边框颜色和背景颜色盒子模型可设置三类距离，即边界距离margin，填充距离padding和边框值border属性值的简写形式 方法是按照规定的顺序，给出2个、3个或者4个属性值，它们的含义将有所区别，具体含义如下：如果给出2个属性值，前者表示上下边框的属性，后者表示左右边框的属性；如果给出3个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；如果给出4个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。各种元素盒子属性的默认值大部分html元素的盒子属性(margin,padding)默认值都为0；有少数html元素的(margin,padding)浏览器默认值不为0，例如：body，p，ul，li，form标记等，因此我们有时有必要先设置它们的这些属性为0。Input元素的边框属性默认不为0，我们可以设置为0达到美化表单中输入框和按钮的目的。CSS属性的值和单位CSS属性的值和html属性值的比较值是对属性的具体描述，而单位是值的基础。没有单位，浏览器将不知道一个边框是10厘米还是10象素。CSS中较复杂的值和单位有颜色取值和长度单位。注意：HTML的属性的值一般不要写单位，这是因为html属性的取值可用的单位很少，要么是象素，要么是百分比颜色的值CSS中定义颜色的值可使用命名颜色、RGB颜色和16进制颜色三种方法a.命名颜色：p{color:red;}其中“red”就是命名颜色，能够被CSS识别的颜色名大约有140种。（参看CSS样式表中文手册附录）。b.RGB颜色：显示器的成像原理是红、绿、蓝三色光的叠加形成各种各样的色彩，因此，通过设定RGB三色的值来描述颜色也是最直接的方法。格式如下所示：td{color:rgb(139,31,185);}td{color:rgb(12%,201,50%);}其值可以取0~255之间的整数，也可以是0%~100%的百分数，不过Firefox浏览器不支持百分数值。c.16进制颜色16进制颜色的使用最普遍，其原理同样是RGB色，不过将RGB颜色的数值转换成了16进制的数字，并用更加简单的方式写出来——#RRGGBB，如#ffcc33。其参数取值范围为：00－FF（对应十进制仍为0－255），如果每个参数各自在两位上的数值相同，那么该值也可缩写成“#RGB”的方式。例如，#ffcc33可以缩写为#fc3。CSS长度单位为了正确显示网页中的元素，许多CSS属性都依赖于长度。所有长度都可以为正数或者负数加上一个单位来表示，而长度单位大致可分为三类：绝对单位、相对单位和百分比。绝对单位绝对单位很简单，包括英寸（in）、厘米（cm）、毫米（mm）、磅（pt）和pica（pc）。由于同一个长度在不同的显示器或者相同显示器不同的分辨率中显示并不相同，不会按显示器的比例去显示。所以绝对单位很少用。相对单位顾名思义，相对单位的长短取决于某个参照物，如屏幕的分辨率，字体高度等。有3种相对长度单位，元素的字体高度（em）、字母x的高度（ex）和象素（px）。em就是元素原来给定的字体font-size的值，如果元素原来给定的font-size值是14px，那么1em就是14px。ex是以字体中小写x字母为基准的单位，不同的字体有不同的x高度，因此即使font-size相同而字体不同的话，1ex的高度也会不同。象素px：象素指显示器按分辨率分割得到的小点，因为显示器由于分辨率或大小不同，象素点的大小是不同的，所以象素也是相对单位。目前大多数设计者都倾向于使用象素作为单位。百分比百分比显得非常简单，也可看成是一个相对量。如：td{font-size:12px;line-height:160%;}/*设定段落的行高为字体高度的160%*/hr{width:80%}/*线段长度是相对于浏览器窗口的80%*/
浙公网安备 33021202002483