01_CSS基础.pptVIP

CSS 课程内容 理解CSS 掌握常用的CSS样式 什么是CSS 首先看两张网页 百度首页1 百度首页2 比较两张网页 页面的内容都相同 页面的布局和效果不同 显然第一张网页的内容比第二张网页更好看，客户体验度更好 怎么达到这样的效果呢? CSS就能完成这样的工作 什么是CSS CSS(Cascading Style Sheet): 可译为“层叠样式表”或“级联样式表”)是一组格式设置规则，用于控制Web页面的外观。 通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离 。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部。 CSS的特点 网页表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 提高页面浏览速度 对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。 易于维护和改版 你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。 使用CSS布局更符合现在的W3C标准. CSS基本语法 CSS由三部分组成: 选择器 属性 值 CSS基本语法: 选择器 { 属性1 : 值1; 属性2 : 值2; …; } 选择器的分类 标签选择器 id选择器 class选择器 标签选择器 标签选择器的样式特定于给出具体标签 语法: html标签 { 样式属性 : 属性值; } div {color : blue;} 表示页面的所有div标签的字体颜色为蓝色 ID选择器 ID选择器定义的样式特定于网页中指定id属性的标签元素 语法 #样式名称 { 样式属性 : 属性值; } … #name {color : blue;} … p id=“name”姓名:/p p id=“pwd”密码/p … 上面的样式表示id为name的label标签的文本内容为蓝色 注意: html的每一个标签元素都有id属性,但id属性在一个页面应该唯一 ID选择器只对某个指定ID的标签元素有效, 并且ID的值就是样式名 Class(类)选择器 类选择器定义的样式对于网页中指定class属性的标签元素有效 语法 . 样式名称 { 样式属性 : 属性值; } … .mycolor {color : blue;} … label class=“mycolor”姓名:/label label class=“mycolor”密码:/label … 上面的样式表示class属性为mycolor的label标签的文本内容为蓝色 注意: html的每一个标签元素都有class属性(表示应用的类样式的名字) 类选择器对一个HTML页面的多个标签元素都有效 伪类 伪类用于向某些选择器添加特殊的效果。 常用伪类 锚伪类: 用来设置a标签的各种状态的样式 语法: a: 状态 {样式…} 例子 a:link {color: #FF0000} /* 未访问的链接 */ a:visited {color: #00FF00} /* 已访问的链接 */ a:hover {color: #FF00FF} /* 鼠标移动到链接上 */ a:active {color: #0000FF} /* 选定的链接 */ CSS的分组 可以对选择器进行分组，这样，被分组的选择器就可以分享相同的样式 语法： 用逗号分隔多个CSS选择器 例子： h1,h2,h3 { color: green; } #id1,#id2,#id3 {…} 对所有的标题元素进行了分组。所有的标题元素都是绿色的 派生选择器 派生选择器允许你根据文档的上下文关系来确定某个标签的样式 语法： 父选择器 子选择器{样式} 例子 !-- 样式定义 -- … span {color: #336699;} span label {color:red;} … !-- 网页部分源码 -- … label不想给样式/label span我的名字叫label张三/label/span … 上例表示:span标签的文本颜色为#336699 span标签的子元素label的文本颜色为red 样式表的分类 外部样式 内部样式 内联样式 内联样式 在标签中使用style属性定义该标签内容的样式属性 例子 label style=“color:red”abc/label 说明 几乎每个HTML标签都有style属性 内联样式只对一个标签有效 内部样式 在每个网页的头部中使用st