8.3.5CSS（第一课时）（课件）-高一《电子商务基础》同步教学（高等教育出版社）

8.3.5什么是CSS 电子商务网站的建设 8.3.5网页制作的提高 CSS是什么？ css是层叠样式表，用来表现HTML和XML等文件样式的计算机语言。不仅可以用来修饰静态网页，还可以和各种语言脚本进行配合，对动态网页中的格式进行修改。 8.3.5网页制作的提高 css解释 层叠样式表(英文全称：CascadingStyleSheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。css可以用来修饰静态的网页，还可以和各种语言脚本进行配合，对动态网页中的格式进行修改。 8.3.5网页制作的提高 css的发展 随着HTML的发展，为了满足设计者对于网页的需求，于是便诞生了css样式。1994年哈坤·利提出了CSS的最初建议，并在同年w3c组织成立，w3c的小组成员全力以赴的研发css标准，这样css就开始走上了正轨。经过了两年左右时间的努力，在1996年年底，css终于完成了初稿，同年12月，层叠样式表的第一份正式标准（CascadingstyleSheetsLevel1）完成。又经过一年的讨论之后，在1998年5月出版了css规范的第二版。 8.3.5网页制作的提高 css语言特点 CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。它具有丰富的样式定义、易于使用和修改、多页面应用、层叠、页面压缩等特点。 总的来说，css能够和其他脚本语言进行一定的配合，丰富了HTML网页的内容和样式，让我们能够在现在看见各种炫酷的网页 8.3.5网页制作的提高 css规则是由两部分组成 : 选择器 以及 一条或多条声明. selector { declaration1 , declaration2 ......} 选择器通常是一个html元素, 每条属性是一个属性和一个值组成.属性和值用:号分开.例如 : h1{ color:red ; font-size:14px ; } 8.3.5网页制作的提高 css派生选择器: 是指多个元素标签在一起作用的css样式 , 后代选择器 , 子元素选择器 , 相邻兄弟选择器 (全部都有,谁先谁后, 必须有顺序 ) 后代选择器 : 例如 h1 em { color : red ;} <h1> This is a <em>heading</em></h1> 其中的heading式样不同, 因为是 h1 与em的共同作用. 子元素选择器 : h1 >strong { color : red ;} 注意此处的 > 号 , 表示在 h1内部的所有的 strong标签内部的式样, 请看如下例子 <h1> This is a <strong> very </strong> important</h1> --> 此时的 very满足式样规则 ( 中间再有别的标签也不要紧 ) <h1>This is a<em>really<strong>very</strong></em>important</h1> -->此时不满足如上规则 h1>strong, 因为在strong外层还有一个em标签. 即 必须strong直接跟着h1. ( 有顺序的 ) 8.3.5网页制作的提高 id选择器: 可以为标有特定 id 的 HTML 元素指定特定的样式 . 以 # 号定义 . #red { color : red ; } #blue { color : blue ; } <p id = "red"> 这个段落是红的</p> <p id= "green">这个段落是绿的</p> , 可以组合使用 , #sidebar p { color : red ;} 此时 在标记了 id = "sidebar" 元素内部的 p 就会有特殊的意义, 跟别的 段落 p 就会不同 . 类选择器 : .center {text -align : center ; } <h1class="center"> this is a center </h1> 类选择器是以 . 点开头定义的, 同样可以组合使用, 例如 .center p { color : red ; }其意义就是class是center的元素内的所有的段落 p 都和别的段落 p 不一样 . 8.3.5网页制作的提高 css属性选择器: 对带有指定属性的 HTML 元素设置式样, [title] { color : blue ;} 这样的话, 对于所有带 title 属性的 html 元素都会 设置相应样式 , 还可以设置 : [title = W