《css第8篇》由会员分享，可在线阅读，更多相关《css第8篇（38页珍藏版）》请在金锄头文库上搜索。
1、第 8 章,CSS样式,网页设计基础,本章目标,掌握CSS的基本语法掌握CSS选择器有哪些及如何应用样式使用CSS属性美化网页 文本和字体样式 背景样式 列表样式 超链接样式,制作背景为圆角矩形的效果,本章任务,本章任务,制作时尚彩妆网,本章任务,制作办公用品网页,样式表能实现内容与样式的分离，方便团队开发css garden http:/ 2、布局、定位,选择器（即修饰对象）对象的属性1: 属性值1;对象的属性2: 属性值2;,li color: red; font-size: 30px; font-family: 隶书; ,选择器,样式规则,1、CSS基本语法,标签选择器,licolor:
2、red; font-size:28px;font-family:隶书; 家用电器 ,标签选择器：用于修饰同类HTML标签的共性风格,2、选择器的分类3-1,.bluecolor:blue; 家用电器各类书籍手机数码日用百货,如果希望部分li标签采用其他样式，怎么办？,类选择器(class)：定义某类样式让多个HTML元素共享。,定义样式，注意类名有点号,应用类样式，其他元素也可以使用,2、选择器的分类3-2, #menuwidth:200px; background:#ccc;font:bold 14px 宋体; 家用电器,ID选择器：用于修饰某个指定的页面元素或区块。,如果希望控制某个DIV
3、块样式，并且要求块元素唯一，怎么办？,2、选择器的分类3-3,小结1：CSS选择器,需求说明： 使用各类CSS选择器，实现如下的页面美化效果,div块： 总宽度200px，背景灰色#ccc,商品类别： 字体为橘色（#ff7300）， 加粗、宋体、 大小为14px,其余商品： 字体为灰色（#636362）， 大小为12px,div-ul-li组织结构,超链接样式的特殊性 文本或图像加上链接，将失去原样式而继承链接的样式,超链接样式的特点,加超链接后，文本/图片样式的变化,超链接样式的四种状态 未访问状态（a:link ） 已访问状态（a:visited ） 鼠标移上状态（a:hover ） 激活
4、选定状态（a:active ）,可以分别设置链接的四种状态的样式,2、选择器的分类3-4,超链接伪类样式伪类选择器语法,所谓伪类，根据标签处于某种状态时的特征来修饰样式,标签名:伪类名 属性:属性值; ,2、选择器的分类3-5,.nav li a padding:8px 15px;color:#333;font-size:13px; .nav li a:hover color:#ff7300;font-size:20px; 家用电器手机数码 ,1、先定义共有样式：表示.nav类下标签中的链接样式,设置超链接样式的步骤： 1、确定页面所有链接样式是否相同，否则分开定义 区域限制选择器/派生选择器
5、： 2、先定义四个状态共有样式，再分别定义其他状态,2、再单独定义某个状态特有的样式,导航版块的链接样式一般和页面样式不同，需单独定义,“父级元素+空格+子元素” 属性:属性值; ,三类应用样式的方式 内部样式表 外部样式表 行内样式,3、如何应用样式3-1, /样式定义 /HTML内容 ,HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用,3、如何应用样式3-2,如果希望一个网站中多个页面的样式保持一致，如何解决？,使用外部样式表可以解决,把这些样式从标签中提取出来，放在一个单独的文件里，然后和每张网页关联。,三类应用样式的方式 内部样式表 外部样式表 行内样
6、式,.nav li apadding:8px 10px; /CSS样式定义,/HTML内容 ,分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS,3、如何应用样式3-2,三类应用样式的方式 内部样式表 外部样式表 行内样式表,日用百货 ,单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用,3、如何应用样式3-3,各类样式有继承各类样式的优先级行内样式表 内部样式表 外部样式表文件 浏览器默认设置ID选择器 类选择器 标签选择器,“近者优先”原则,4、样式的优先级3-1,4、样式的优先级3-2,“日用百货”链接,.nav ul li a
7、:linkcolor:blue; 家用电器手机数码 日用百货 ,内部样式表,外部样式表,行内样式表,红色,蓝色,4、样式的优先级3-3,购物车的样式,#nav_id width:300px; background: #ccc; .nav height:100px; background: red; div border:5px solid green; background: blue; 购物车,ID选择器,类选择器,标签选择器,不冲突的样式： 边框5px、绿色实线、宽和高分别为300PX和100PX,同时应用ID、class、标签三类选择器,灰色背景,小结2：使用超链接伪类实现导航条,需求说
8、明： 用提供的背景图素材，实现如下导航菜单效果 要求使用外部样式表 div-ul-li结构,链接无下划线（text-decoration）、字体为浅黑色，鼠标悬停，显示菜单的投影背景（background）、字体变大,宽：84px 行高：24px 字体大小：13px 字体粗细：加粗,显示页面的背景图片：h_bg.jpg、不重复、水平和垂直位置坐标为24px和-88px,制作样式表2-1,创建样式表： 1、选择“窗口” “CSS样式” 2、在“CSS样式”面板中，右击新建layout.css 3、分别新建标签选择器body的样式 4、分别新建区域限制选择器.nav ul、.nav li、.nav
9、 li a和.nav li a:hover的样式,制作样式表2-2,两种应用外部样式表方式： 1、打开要应用样式的网页 2、在属性面板中单击“样式”下拉框 3、选择附加样式 4、选择要引入的样式文件,1、选择附加样式表,2、选择样式文件,3、选择附加方式,4、单击确定,外部样式表,根据样式文件与网页的关联方式又分为：链接（LINK ）：传递外部CSS样式信息，而不将其导入网页文档导入（import）：将外部CSS样式信息导入网页文档,引入的样式文件,import url(“css/layout.css“);,引入样式表文件,背景属性： background （缩写形式） background-
10、color（背景色 ） background-image（背景图 ） background-repeat（背景图重复方式 ） background-position（位置坐标、偏移量）,四类平铺效果,5、背景属性2-1,div background:url(images/bg.jpg) no-repeat; background-position: -70px -60px ,背景出现的水平和垂直位置坐标，实现各种偏移效果,设置背景图片、不重复平铺,各种偏移效果,5、背景属性2-2,6、列表属性2-1,列表（li）常用属性 list-style （列表风格）,list-style属性规定的列表风
11、格,列表属性的典型应用：导航菜单,liwidth:150px;color:red;font:28px 隶书;list-style:none;float:left; 购物车 ,设置列表为none去掉圆点,所有html标签都有的float浮动属性，此处用于横向排列,6、列表属性2-2,行距、对齐等： line-height （行高） text-align （对齐） letter-spacing （字符间距） text-decoration （文本修饰 ） white-space （空白处理 ）,7、文本属性2-1,字符间距：5px 文本修饰：带下划线 空白处理：不断行,字体、字号： font（缩写
12、形式） font-weight（粗细） font-size（大小） font-family（字体）,字体：宋体 颜色：红色 字号：12px 对齐：左对齐, lifont: 12px 宋体;text-align:left;line-height:28px; .title letter-spacing:5px;white-space:nowrap;text-decoration:underline; .bigFont font-size:16px;color:red; ,所有的默认样式： 字体、字号：宋体，12px 对齐方式：左对齐 行高：28px,首行标题样式： 字符间距：5px 空白处理：不换
13、行 文本修饰：带下滑线,大字体样式： 字号：16px 颜色：红色,font字体样式的缩写形式,7、文本属性2-2,小结3：时尚彩妆网,知识要点：使用“表格”按钮插入表格效果。使用“CSS样式”设置翻转效果的链接，如下图。,小结4：制作圆角矩形,需求说明： 根据提供的背景素材实现,顶部,中部,底部,小结5：办公用品网页,知识要点：使用“Alpha滤镜”制作图片半透明效果，如下图。,总结,CSS的基本语法是什么？有哪几类选择器？ 超链接样式有哪四类状态及对应伪类？应用样式有哪三类方式？优先级？什么是盒子模型 ？CSS样式的设置思路？常用的文本属性有哪些？ 常用的背景属性有哪些？ 常用的列表属性有哪些？典型应用是什么？,
