第六讲CSS标准演示文稿.PPTVIP

　CSS样式表 CSS标准 定义 CSS(Cascading Style Sheet)即层叠样式表，用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。 传统HTML的缺陷 维护困难 标记不足 网页过“胖” 定位困难　　　　　　　　　　　　　　　　 06-01 06-02 核心的变化： 即：原来由HTML同时承担的“内容”和“表现”双重任务，现在分离了，内容仍然由HTML负责，而表现形式则是通过style标记中的CSS代码负责。 CSS核心基础 构造CSS规则 基本CSS选择器 在HTML中使用CSS的方法 构造CSS规则 生活中描述一个人： 张飞{ 身高：185cm; 体重：105kg; 性别：男； 性格：暴躁； 民族：汉族； } 2级标题的属性表： 　 2级标题{ 字体：宋体; 大小：15px; 颜色：红色; 装饰：下划线; } 2级标题属性表： H2{ font-family：”宋体”; font-size：15px; color：red; text-decoration：underline; } 2级标题的属性表： 　 2级标题{ 字体：宋体; 大小：15px; 颜色：红色; 装饰：下划线; } CSS基本组成部分： “对象”：即CSS要设置的目标； “属性”：即指定对该对象的哪个方面进行设置 “值”：即给出要设置的具体“值”； 基本CSS选择器 “标签”选择器 “类”选择器 ID选择器 选择器定义： 在CSS的３个组成部分中，“对象”指定了对哪些 网页元素进行设置，因此它有一个专门的名称— 选择器(selector); 标签选择器 CSS标签选择器：即声明哪些标记采用哪种CSS样式。因此，每种标记的名称都可以作为相应的标记选择器的名称。 { } color：red; font-size: 25px; h1 选择器 属性 属性值 属性 属性值 声明 声明 CSS语言对所有属性和值都有相对严格的要求。如果声明的属性在CSS规范中没有，或者某个属性的值不符合该属性的要求，都不能使该CSS语句生效。 head-height：48px; /*非法属性*/ color：ultraviolet;　　　/*非法值*/ 类别选择器 标签选择器对页面中所有相同标记适用，如p标记，若希望个别p不同，则需引入类别选择器。 类别选择器的名称可由用户自定义(任意字母和数字的组合)，属性和值跟前者一样。 { } color：green; font-size: 20px; .class 类别选择器 属性 属性值 属性 属性值 声明 声明 类别名称 例07-01 html head titleclass选择器/title style type=text/css .red{ color:red; /* 红色 */ font-size:18px; /* 文字大小 */ 　　} .green{ color:green; /* 绿色 */ font-size:20px; /* 文字大小 */ 　　　} /style /head body p class=redclass选择器1/p p class=greenclass选择器2/p h3 class=greenh3同样适用/h3 /body /html 类别选择器没有定义字体 粗细，故HTML标记采用 了自身默认的显示方式 Class=“red”指明该文本使用的CSS样式名 与标记配合 使用多个class ID选择器 ID选择器只能在HTML页面中使用一次，其针对性更强。 { } color：yellow; font-size: 30px; #id ID选择器 属性 属性值 属性 属性值 声明 声明 例07-04 在HTML中使用CSS的方法 行内样式 内嵌式 链接式 导入样式 行内样式： 最直接的使用方法 直接对HTML标记使用style属性 然后将CSS代码直接写在其中 特点 为每个标记设置style属性 各个样式之间互不影响 后期维护成本很高，不推荐使用 例07-05 内嵌样式： 即将CSS写在head/head之间 并且用style和/style标记进行声明 特点： 所有CSS代码部分集中在同一个区域 方便后期维护 仅适用于对特殊页面设置单独的样式风格 例06 链接式： 使用频率最高，最为实用的方法 在head/head标记之间加上 link href=“*.css” type=“text/css” rel=“stylesheet” CSS代码与HTML代码完全分离 实现了页面框架HTML代码与美工CSS代码的完全分离 同一个CSS文件可以被不同的HTML链接使用 在HT