第3章CSS3基础
知识要点（1）理解CSS技术在网页制作过程中所起的重要作用（2）掌握三种在网页中使用CSS样式的方法，并对比各自的优劣（3）掌握HTML标记符、ID、class、虚类和分组等5种选择器的用法（4）掌握CSS的颜色和背景属性、字体属性、文本属性的用法本章目标
（1）CSS概念与3种样式表CSS（CascadingStyleSheet，层叠样式表）是一种格式化网页的标准方式，它扩展了HTML的功能，使网页设计者能够以更有效的方式设置网页格式。1．什么是CSShtmlheadtitle使用html方式/title/headbodyh1align=centeru一级标题/u/h1p…其他正文…/ph1align=centeru一级标题/u/h1/body/html
（1）CSS概念与3种样式表htmlheadtitle使用css方式/titlestyleh1{text-align:center;border-bottom:1pxsolidblack;}/style/headbodyh1一级标题/h1p…其他正文…/ph1一级标题/h1/body/html
（1）CSS概念与3种样式表2．CSS的优势简化格式设置01一次定义，多次使用增强可维护能力一处定义，全局使用02加强视觉表现力03有更多的视觉效果设置
（1）CSS概念与3种样式表3．样式定义的语法
（1）CSS概念与3种样式表4．CSS属性单位%、px、em长度单位颜色名#rrggbb（十六进制，0~f）rgb(r,g,b)（十进制，0~255）rgb(r%,g%,b%)（百分比，0~100）rgba(r,g,b,a)（十进制，0~255和0~1）0：完全透明1：完全不透明颜色单位
（1）CSS概念与3种样式表5．3种样式表站点样式表01为整个网站设置统一的风格页内样式表为单个网页设置独特的风格02行内样式表03为个别标记符设置特定效果
（1）CSS概念与3种样式表站点样式表
（1）CSS概念与3种样式表页内样式表htmlheadstylebody{background-color:aliceblue;}h1{text-align:center;color:darkred;}/style/headbody.../body/html
（1）CSS概念与3种样式表行内样式表h1
style=”text-align:center;color:darkred;”标题1文字/h1注意：仅在测试时使用。
（2）5种选择器1．样式定义的语法
（2）5种选择器2．5种选择器01HTML标记符选择器02id选择器（id与#idname）03class选择器（class与.classname）05分组选择器04虚类选择器a:linka:visiteda:hovera:active(LoVeHAte)
（2）5种选择器HTML标记符选择器分组id选择器#container{ width:46em; margin:0auto; border:1pxsolid#000000;}
（2）5种选择器class选择器虚类选择器
（3）3类基本属性1．颜色与背景属性colorbackground-colorbackground-image(url(URL))background-attachment(scroll/fixed)background-repeat(no-repeat/repeat/repeat_x…)background-position(x,y)background（以上5个属性的任意组合）
（3）3类基本属性2．字体属性font-family，取值为字体名称font-style(normal/italic/oblique)font-weight(normal/bold/bolder/lighter/100/…)font-size(绝对大小/相对大小/长度值/百分比)font([font-style||font-variant||font-weight]?font-size[/line-height]?font-family)
（3）3类基本属性3．文本属性line-height(2em/200%/2)text-align(left/right/center/justify)text-decoration(none/underline/overline)text-indent(2em)
（4）综合实例1．首页
（4）综合实例2．二级页面-动画
（4）综合实例3．二级页面-科幻
（4）综合实例4．三级页面-哪吒
THANK