Lecture4PageSectionsandtheCSSBoxModel

Lecture4网页区域和CSS盒子模型WebProgrammingSchoolofComputerScienceandEngineering,SouthChinaUniversityofTechnologyWeb2.0Programming–PageSectionsandtheCSSBoxModel2/40January10,2020SouthChinaUniversityofTechnology概述更多CSS知识样式化网页区域布局介绍Web2.0Programming–PageSectionsandtheCSSBoxModel3/40January10,2020SouthChinaUniversityofTechnologyHTML的id属性允许你给网页上任一个元素分配一个唯一的ID每个ID必须唯一；在网页中只能定义一次pSpatulaCity!SpatulaCity!/ppid=missionOurmissionistoprovidethemostspectacularspatulasandsplurgeonourspecialsuntilourcustomersqesplode/qwithsplendor!/pHTMLSpatulaCity!SpatulaCity!Ourmissionistoprovidethemostspectacularspatulasandsplurgeonourspecialsuntilourcustomersesplodewithsplendor!outputWeb2.0Programming–PageSectionsandtheCSSBoxModel4/40January10,2020SouthChinaUniversityofTechnology链接到Web网页的某个区域一个链接目标可以以#开头，以ID名称结束浏览器会加载指定页面，并跳转到给定ID的元素处pVisitahref=“=#missionViewourMissionStatement/a/pHTMLVisittextpad.comtogettheTextPadeditor.ViewourMissionStatementoutputWeb2.0Programming–PageSectionsandtheCSSBoxModel5/40January10,2020SouthChinaUniversityofTechnologyCSSID选择器仅对拥有ID为mission的段落应用样式规则元素也可被明确地指定为p#mission{…}#mission{font-style:italic;font-family:Garamond,CenturyGothic,serif;}HTMLSpatulaCity!SpatulaCity!Ourmissionistoprovidethemostspectacularspatulasandsplurgeonourspecialsuntilourcustomersesplodewithsplendor!outputWeb2.0Programming–PageSectionsandtheCSSBoxModel6/40January10,2020SouthChinaUniversityofTechnologyHTML的类(class)属性使用类，可以选定一组元素并为该组元素应用样式规则不同于id,一个class名称可以在网页中被多次使用pclass=shoutSpatulaCity!SpatulaCity!/ppclass=specialSeeourspectacularspatulaspecials!/ppclass=specialTodayonly:satisfactionguaranteed./pHTMLSpatulaCity!SpatulaCity!Seeourspectacularspatulaspecials!Todayonly:satisfactionguaranteed.outputWeb2.0Programming–PageSectionsandtheCSSBoxModel7/40January10,2020SouthChinaUniversityofTechnologyCSS类选择器（classselector）为拥有任何类为special的元素或者类为shout的p元素应用相应的样式规则Web2.0Programming–PageSectionsandtheCSSBoxModel8/40January10,2020SouthChinaUniversityofTechnology多重类属性一个元素可以拥有多个类属性(用空格分隔开)Web2.0Programming–PageSectionsandtheCSSBoxModel9/40January10,2020SouthChinaUniversityofTechnologyCSS伪类类描述:active向被激活或被选择的元素添加样式:focus向拥有键盘输入焦点的元素添加样式:hover当鼠标悬浮在元素上方时，向元素添加样式:link向未被访问的链接添加样式:visited向已被访问的链接添加样式:first-letter向元素中的文本的首字母添加样式:first-line向元素中的文本的第一行添加样式:first-child向元素的第一个子元素添加样式Web2.0Programming–PageSectionsandtheCSSBoxModel10/40January10,2020SouthChinaUniversityofTechnology概述更多CSS知识样式化网页区域布局介绍Web2.0Programming–PageSectionsandtheCSSBoxModel11/40January10,2020SouthChinaUniversityofTechnology网页区域化的目的为了对网页中的单个元素,组元素,文本区域添加样式为了创造更复杂的网页布局(后来)Web2.0Programming–PageSectionsandtheCSSBoxModel12/40January10,2020SouthChinaUniversityofTechnology网页区域:div一个用来指示网页中某个逻辑区域的标签默认没有显示外观，但你可以为其添加样式Web2.0Programming–PageSectionsandtheCSSBoxModel13/40January10,2020SouthChinaUniversityofTechnology内联区域:span没有显示的外观，但你可以为其添加样式或者ID，应用在span里面的文本可是,我们何时要使用div,span,何时使用p,h1呢?Web2.0Programming–PageSectionsandtheCSSBoxModel14/40January10,2020SouthChinaUniversityofTechnologyCSS上下文选择器只有当网页中的选择器2(selector2)在选择器1(selector1)里面时应用给定的属性(properties)selector1selector2{properties}CSSselector1selector2{properties}CSS只有当网页中的选择器2(selector2)直接被选择1(selector1)包含时应用给定的属性(properties)(选择器2的标签紧随选择器1的标签，中间不夹带其它标签)Web2.0Programming–PageSectionsandtheCSSBoxModel15/40January10,2020SouthChinaUniversityofTechnology上下文选择器示例Web2.0Programming–PageSectionsandtheCSSBoxModel16/40January10,2020SouthChinaUniversityofTechnology更多复合示例Web2.0Programming–PageSectionsandtheCSSBoxModel17/40January10,2020SouthChinaUniversityofTechnologyCSS层叠浏览器的样式表优先级最低.用户的样式表优先于浏览器的样式表.网页制作者的样式表优先于用户跟浏览器的样式表.(X)HTML的样式属性优先级高于任何定义在样式表中的样式规则.在一个样式表中，当发生冲突时，指定最详细明确的样式规则生效.Web2.0Programming–PageSectionsandtheCSSBoxModel18/40January10,2020SouthChinaUniversityofTechnology选择器特征值CSS选择器的特征值是形如abcd的四位数对于变量a，如果该样式采用(X)HTML样式属性指定的话，记为1，否则记为0。统计出选择器中ID属性的个数，把值赋给b。把选择器中属性的个数，伪类的个数，类名的个数求和，结果赋给c.统计选择器中元素名的个数，将其值赋给d.忽略伪元素.当两个样式规则拥有同样的特征值，后一个出现的起作用最后，带有!important的样式规则拥有最高优先级Web2.0Programming–PageSectionsandtheCSSBoxModel19/40January10,2020SouthChinaUniversityofTechnology选择器特征值选择器选择器类型特征值*UniversalSelector0000(a=0,b=0,c=0,d=0)li元素名0001(a=0,b=0,c=0,d=1)ulli元素名0002(a=0,b=0,c=0,d=2)divh1+p元素名0003(a=0,b=0,c=0,d=3)input[type=’text’]元素名+属性0011(a=0,b=0,c=1,d=1).someclass类名0010(a=0,b=0,c=1,d=0)div.someclass元素名+类名0011(a=0,b=0,c=1,d=1)div.someclass.someother元素名+类名+类名0021(a=0,b=0,c=2,d=1)#someidID名0100(a=0,b=1,c=0,d=0)div#someid元素名+ID名0101(a=0,b=1,c=0,d=1)style(attribute)样式(属性)1000(a=1,b=0,c=0,d=0)Web2.0Programming–PageSectionsandtheCSSBoxModel20/40January10,2020SouthChinaUniversityofTechnologyCSS继承许多CSS规则的属性可以被相应规则的孩子元素继承，但有的却不可以。可以被继承的属性类型:text,color,andfont不可以被继承的属性类型:border,margin,padding对于具体应用，所有的直接或继承的样式规则的作用是一样的如果你不记得一个属性是否可继承,最好通过测试来验证下,而不是通过Google搜索和W3-School的教程Web2.0Programming–PageSectionsandtheCSSBoxModel21/40January10,2020SouthChinaUniversityofTechnology概述更多CSS知识样式化网页区域布局介绍Web2.