[其它语言学习]CSS语法.ppt

传统HTML的缺点 （1）维护困难。 （2）标记不足。 （3）网页过“胖”。 （4）定位困难。 08-04 html head titleclass选择器/title style type=text/css .red{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ } .green{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ } /style /head body p class=redclass选择器1/p p class=greenclass选择器2/p h3 class=greenh3同样适用/h3 /body /html html head titleclass选择器与标记选择器/title style type=text/css p{ /* 标记选择器 */ color:blue; font-size:18px; } .special{ /* 类别选择器 */ color:red; /* 红色 */ font-size:23px; /* 文字大小 */ } /style /head body pclass选择器与标记选择器1/p pclass选择器与标记选择器2/p pclass选择器与标记选择器3/p p class=specialclass选择器与标记选择器4/p pclass选择器与标记选择器5/p pclass选择器与标记选择器6/p /body /html html head title同时使用两个class/title style type=text/css .blue{ color:blue; /* 颜色 */ } .big{ font-size:22px; /* 字体大小 */ } /style /head body h4一种都不使用/h4 h4 class=blue两种class，只使用blue/h4 h4 class=big两种class，只使用big /h4 h4 class=blue big两种class，同时blue和big/h4 h4一种都不使用/h4 /body /html html head titleID选择器/title style type=text/css #bold{ font-weight:bold; /* 粗体 */ } #green{ font-size:30px; /* 字体大小 */ color:#009900; /* 颜色 */ } /style /head body p id=blodID选择器1/p p id=greenID选择器2/p p id=greenID选择器3/p p id=bold greenID选择器4/p /body /html ID选择器在HTMl页面中使用一次！ Id=“bold green”是错误语法，注意和class选择器区分！ 当head中存在多个style标记时，不同引用方式的优先级由先后顺序决定。 复合选择器 “交集”选择器 “并集”选择器 后代选择器 “交集”选择器 html head title选择器. class/title style type=text/css p{ /* 标记选择器 */ color:blue; } p.special{ /* 标记、类别选择器 */ color:red; /* 红色 */ } .special{ /* 类别选择器 */ color:green; } /style /head body pclass选择器与标记选择器1/p h3class选择器与标记选择器2/h3 p class=specialclass选择器与标记选择器4/p h3 class=special class选择器与标记选择器5/h3 /body /html “并集”选择器 html head title并集选择器/title style type=text/css H1,h2,h3,h4,h5,p{ color:blue; font-size:15px } h2.special, special,#one{ text-decoration:underline; } /style /head body h1示例文字h1 /h1 h2 class=“special” 示例文字h2/h2 h3示例文字h3 /h3 h4示例文字h4/h4 h5示例文字h5/h