CSS第8篇.pptVIP

制作背景为圆角矩形的效果 样式表能实现内容与样式的分离，方便团队开发 css garden / 样式复用、方便网站的后期维护 页面的精确控制，实现精美、复杂页面 1、外观美化 2、布局、定位 如果希望部分li标签采用其他样式，怎么办？ 如果希望控制某个DIV块样式，并且要求块元素唯一，怎么办？ 小结1：CSS选择器 需求说明： 使用各类CSS选择器，实现如下的页面美化效果 超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式 2、选择器的分类3-4 超链接伪类样式 伪类选择器语法 三类应用样式的方式 内部样式表 外部样式表 行内样式 3、如何应用样式3-2 三类应用样式的方式 内部样式表 外部样式表 行内样式 三类应用样式的方式 内部样式表 外部样式表 行内样式表 4、样式的优先级3-1 各类样式有继承 各类样式的优先级 行内样式表 内部样式表 外部样式表文件 浏览器默认设置 ID选择器 类选择器 标签选择器 4、样式的优先级3-2 “日用百货”链接 4、样式的优先级3-3 购物车的样式 小结2：使用超链接伪类实现导航条 需求说明： 用提供的背景图素材，实现如下导航菜单效果 要求使用外部样式表 div-ul-li结构 制作样式表2-1 创建样式表： 1、选择“窗口” ?“CSS样式” 2、在“CSS样式”面板中，右击?新建?layout.css 3、分别新建标签选择器body的样式 4、分别新建区域限制选择器 .nav ul、.nav li、.nav li a和.nav li a:hover的样式 制作样式表2-2 两种应用外部样式表方式： 1、打开要应用样式的网页 2、在属性面板中单击“样式”下拉框 3、选择附加样式 4、选择要引入的样式文件 外部样式表 根据样式文件与网页的关联方式又分为： 链接（LINK ）：传递外部CSS样式信息，而不将其导入网页文档 导入（@import）：将外部CSS样式信息导入网页文档 6、列表属性2-1 列表（li）常用属性 list-style （列表风格） 小结4：制作圆角矩形 需求说明： 根据提供的背景素材实现 总结 CSS的基本语法是什么？有哪几类选择器？ 超链接样式有哪四类状态及对应伪类？ 应用样式有哪三类方式？优先级？ 什么是盒子模型 ？CSS样式的设置思路？ 常用的文本属性有哪些？ 常用的背景属性有哪些？ 常用的列表属性有哪些？典型应用是什么？ 数字（ol默认类型） 实心正方形 空心圆 实心圆（ul默认类型） 无风格 方式 list-style:decimal list-style:square; list-style:circle; list-style:disc; list-style:none; 语法实现 1. 刷牙 2. 洗脸 decimal ● 刷牙 ● 洗脸 disc ■ 刷牙 ■ 洗脸 square ○ 刷牙 ○ 洗脸 circle 刷牙 洗脸 none 示例 属性值 list-style属性规定的列表风格 列表属性的典型应用：导航菜单 style li{ width:150px; color:red; font:28px 隶书; list-style:none; float:left; } /style …… ul li购物车/li …… /ul 设置列表为none去掉圆点 所有html标签都有的float浮动属性，此处用于横向排列 演示案例8：列表属性 6、列表属性2-2 行距、对齐等： line-height （行高） text-align （对齐） letter-spacing （字符间距） text-decoration （文本修饰 ） white-space （空白处理 ） 7、文本属性2-1 字符间距：5px 文本修饰：带下划线 空白处理：不断行 字体、字号： font（缩写形式） font-weight（粗细） font-size（大小） font-family（字体） 字体：宋体 颜色：红色 字号：12px 对齐：左对齐 style tylie=text/css li{ font: 12px 宋体; text-align:left; line-height:28px; } .title{ letter-spacing:5px; white-space:nowrap; text-decoration:underline; } .bigFont { font-size:16px; colo