第3章 CSS3基础（23）（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 3 章 CSS3基础 1 第 3 章　CSS3基础 知识要点 （1）理解CSS技术在网页制作过程中所起的重要作用 （2）掌握三种在网页中使用CSS样式的方法，并对比各自的优劣 （3）掌握HTML标记符、ID、class、虚类和分组等5种选择器的用法 （4）掌握CSS的颜色和背景属性、字体属性、文本属性的用法 本章目标 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 CSS（Cascading Style Sheet，层叠样式表）是一种格式化网页的标准方式，它扩展了 HTML 的功能，使网页设计者能够以更有效的方式设置网页格式。 1．什么是CSS http://www.csszengarden.com <html> <head><title>使用 html 方式</title></head> <body> <h1 align="center"><u>一级标题</u></h1> <p>…其他正文…</p> <h1 align="center"><u>一级标题</u></h1> </body> </html> 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 <html> <head><title>使用 css 方式</title> <style> h1 {text-align:center; border-bottom:1px solid black;} </style> </head> <body> <h1>一级标题</h1> <p>…其他正文…</p> <h1>一级标题</h1> </body> </html> 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 2．CSS的优势 简化格式设置 01 一次定义，多次使用 增强可维护能力 一处定义，全局使用 02 加强视觉表现力 03 有更多的视觉效果设置 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 3．样式定义的语法 1 第 3 章　CSS3基础 （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 第 3 章　CSS3基础 （1）CSS概念与3种样式表 5．3种样式表 站点样式表 01 为整个网站设置统一的风格 页内样式表 为单个网页设置独特的风格 02 行内样式表 03 为个别标记符设置特定效果 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 站点样式表 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 页内样式表 <html> <head> <style> body{background-color:aliceblue;} h1{text-align:center;color:darkred;} </style> </head> <body>...</body> </html> 1 第 3 章　CSS3基础 （1）CSS概念与3种样式表 行内样式表 <h1 style=”text-align:center;color:darkred;”> 标题1文字 </h1> 注意：仅在测试时使用。 1 第 3 章　CSS3基础 （2）5种选择器 1．样式定义的语法 1 第 3 章　CSS3基础 （2）5种选择器 2．5种选择器 01 HTML标记符选择器 02 id选择器（id与#idname） 03 class选择器（class与.classname） 05 分组选择器 04 虚类选择器 a:link a:visited a:hover a:active (LoVeHAte) 1 第 3 章　CSS3基础 （2）5种选择器 HTML标记符选择器&分组 id选择器 #container { width: 46em; margin: 0 auto; border: 1px solid #000000; } 1 第 3 章　CSS3基础 （2）5种选择器 class选择器 虚类选择器 1 第 3 章　CSS3基础 （3）3类基本属性 1．颜色与背景属性 color background-color background-image(url(URL)) background-attachment(scroll/fixed) background-repeat(no-repeat/repeat/repeat_x…) background-position(x,y) background（以上5个属性的任意组合） 1 第 3 章　CSS3基础 （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'>) 1 第 3 章　CSS3基础 （3）3类基本属性 3．文本属性 line-height (2em/200%/2) text-align(left/right/center/justify) text-decoration(none/underline/overline) text-indent (2em) 1 第 3 章　CSS3基础 （4）综合实例 1．首页 1 第 3 章　CSS3基础 （4）综合实例 2．二级页面-动画 1 第 3 章　CSS3基础 （4）综合实例 3．二级页面-科幻 1 第 3 章　CSS3基础 （4）综合实例 4．三级页面-哪吒 1 第 3 章　CSS3基础 THANKS 1 第 3 章　CSS3基础 $$