1、第 8 章,CSS样式,网页设计基础,本章目标,掌握CSS的基本语法掌握CSS选择器有哪些及如何应用样式使用CSS属性美化网页文本和字体样式背景样式列表样式超链接样式,制作背景为圆角矩形的效果,本章任务,本章任务,制作时尚彩妆网,本章任务,制作办公用品网页,样式表能实现内容与样式的分离，方便团队开发 css garden http:/ 选择器（即修饰对象） 对象的属性1: 属性值1; 对象的属性2: 属性值2; ,li color: red; font-size: 30px; font-family: 隶书;,选择器,样式规则,1、CSS基本语法,标签选择器, li color:red; fo
2、nt-size:28px; font-family:隶书; 家用电器 ,标签选择器：用于修饰同类HTML标签的共性风格,2、选择器的分类3-1, .bluecolor:blue; 家用电器各类书籍手机数码日用百货,如果希望部分li标签采用其他样式，怎么办？,类选择器(class)：定义某类样式让多个HTML元素共享。,定义样式，注意类名有点号,应用类样式，其他元素也可以使用,2、选择器的分类3-2,#menu width: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 ）激活选定状态（a:active ）
4、,可以分别设置链接的四种状态的样式,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、确定页面所有链接样式是否相同，否则分开定义区域限制选择器/派生选择器：2、先定义四个状态共有样式，再
5、分别定义其他状态,2、再单独定义某个状态特有的样式,导航版块的链接样式一般和页面样式不同，需单独定义,“父级元素+空格+子元素” 属性:属性值; ,三类应用样式的方式内部样式表 外部样式表 行内样式,3、如何应用样式3-1, . /样式定义 /HTML内容,HTML和CSS在同一文件，方便开发时修改，样式和内容分离不够彻底，不利于页面复用,3、如何应用样式3-2,如果希望一个网站中多个页面的样式保持一致， 如何解决？,使用外部样式表可以解决,把这些样式从标签中提取出来，放在一个单独的文件里，然后和每张网页关联。,三类应用样式的方式内部样式表 外部样式表 行内样式,.nav li apaddin
6、g:8px 10px;. /CSS样式定义,/HTML内容,分别定义*.css和*.html文件，样式和内容彻底分离，多个网页可共享同一CSS,3、如何应用样式3-2,三类应用样式的方式内部样式表 外部样式表 行内样式表, 日用百货,单独定义某个元素的样式，灵活方便。但因为内容与样式混写在一起，应尽量少用或不用,3、如何应用样式3-3,各类样式有继承各类样式的优先级行内样式表 内部样式表 外部样式表文件 浏览器默认设置ID选择器 类选择器 标签选择器,“近者优先”原则,4、样式的优先级3-1,4、样式的优先级3-2,“日用百货”链接, .nav ul li a:linkcolor:blue;
7、家用电器 手机数码 日用百货 ,内部样式表,外部样式表,行内样式表,红色,蓝色,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.css3、分别新建标签选择器body的样式4、分别新建区域限制选择器 .nav ul、.nav li、.nav li a和.nav li a:hover的样
9、式,制作样式表2-2,两种应用外部样式表方式：1、打开要应用样式的网页2、在属性面板中单击“样式”下拉框3、选择附加样式4、选择要引入的样式文件,1、选择附加样式表,2、选择样式文件,3、选择附加方式,4、单击确定,外部样式表,根据样式文件与网页的关联方式又分为：链接（LINK ）：传递外部CSS样式信息，而不将其导入网页文档导入（import）：将外部CSS样式信息导入网页文档,引入的样式文件, import url(css/layout.css);,引入样式表文件,背景属性：background （缩写形式）background-color（背景色 ）background-image（背景
10、图 ）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属性规定的列表风格,列表属性的典型应用：导航菜单, li width:150px; c
11、olor: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（缩写形式）font-weight（粗细） font-size（大小） fo
12、nt-family（字体）,字体：宋体颜色：红色字号：12px对齐：左对齐,li font: 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空白处理：不换行文本修饰：带下滑线,大字体样式：字号：16px颜色：红色,font字体样式的缩写形式,7、文本属性2-2,小结3：时尚彩妆网,知识要点：使用“表格”按钮插入表格效果。使用“CSS样式”设置翻转效果的链接，如下图。,小结4：制作圆角矩形,需求说明：根据提供的背景素材实现,顶部,中部,底部,小结5：办公用品网页,知识要点：使用“Alpha滤镜”制作图片半透明效果，如下图。,总结,CSS的基本语法是什么？有哪几类选择器？超链接样式有哪四类状态及对应伪类？应用样式有哪三类方式？优先级？什么是盒子模型 ？CSS样式的设置思路？常用的文本属性有哪些？常用的背景属性有哪些？常用的列表属性有哪些？典型应用是什么？,
