第10章 CSS基础课件.pptVIP

第10章 CSS基础;font-size color;10.3 第一个CSS;核心要点 CSS的概念 基本语法 常用字体属性;10.1 CSS简介;10.2 CSS的优点;10.3 第一个CSS; 在HTML内部定义了CSS样式，CSS样式的定义在HTML的头部，定义的固定简化语法如下： style type=“text/css” 样式名1{样式属性1：属性值；样式属性2：属性值；} 样式名2{样式属性1：属性值；样式属性2：属性值；} /style 【注意事项】P93;如何通过列表的方法展现表格效果？ 去掉列表项目符号 添加边框 设置宽度和高度 设置文本的对齐 设置文本大小 ;去掉列表项目符号 添加边框 设置宽度和高度 设置文本的对齐 设置文本大小;10.4 常用属性;【说明】 标签本身的显示效果已经不能满足页面显示的需要，CSS作用在具体的HTML标签上 。 HTML文件中，在head中定义CSS样式，在style中编写CSS样式，在body中应用CSS样式。 一般来说，单独占一行的文字可以采用p，h*等标签；一行中的部分文字可以采用span、strong、em等标签；列举并列的内容采用ul、li等标签。 !-- -- html的注释标记，在这里是跨越的意思，当浏览器不支持css语法时，会自动越过此标记。/* …… */ 为CSS的注释标记。 不同的属性之间用;分隔开，需要注意的是，一定要用半角的分号，不能用全角的分号。;10.5 CSS选择器;标签选择器 标签选择器的名字必须是已有的标签，它重新定义了HTML标签的显示样式，所以它不需要被调用，网页中的相应标签就会自动按照重新定义后的HTML标签进行显示。 ;ID选择器 ID选择器多应用在DIV+CSS的设计方法中，经常和DIV标签配合使用。;实例10-5;Class（类）选择器 类选择器允许重复使用，其命名必须以“.”开头 定义： 调用：;实例10-8;【实例说明】布局层次的盒子可以用ID选择器，内容层次的盒子可以使用类选择器，没有严格的区别，但ID选择器在网页中只能使用一次，类选择器在网页中可以重复多次使用。 图片不能正确显示的原因： 路径 文件名包含汉字或特殊字符 扩展名;小结： ;复合样式;style type=text/css p,h2{ padding:0px; margin:0px;} #box { width: 415px; border: 1px solid #CCC; padding: 10px;} #box h2 { font-size: 18px; line-height: 33px; } #box p { color: #727171; text-indent: 2em; font-size: 12px; line-height: 21px;} #box a { font-size: 12px; color: #BA2636; text-decoration: none;} /style;练习;练习;标签选择器 重新定义HTML标签的显示样式，名字必须是已有的HTML标签。li{ } ID选择器 一般用来修饰盒子，不用来修饰具体的内容，在一个网页中按照规范只能使用一次。#box{} Class（类）选择器 类的命名以.开头，在head中定义，在body中应用，具体应用到标签上。 定义.aa{} 应用p class=aa ;10.6 CSS的位置;10.6 CSS的位置;内嵌样式;内部样式表;外部样式表 ;加入外部CSS样式 链接link link href=font.css rel=stylesheet type=text/css / 导入import style type=text/css @import url(font.css); /style;CSS的位置;练习;10.7 css伪类;;10.8 层叠;对于名称相同的样式，样式的优先级从高到低依次是内嵌，内部/外部，浏览器默认。 内部CSS和外部CSS没有优先级的先后，后定义的样式覆盖前面定义的样式。这是层叠。 但如果前面定义的样式中的属性没有被覆盖，那么网页中的实际显示样式会既包括前面定义的没有被覆盖的属性，又包括后面定义的样式属性，这就是继???。;;习题：;练习：;练习：; 虽然绝大多数代码都能够使用Dreamweaver自动生成，但在必要时候需要手工修改代码，为了学习和调试的需要，能够读懂和修改CSS代码是必须的！！！