01_CSS基础.ppt

CSS 课程内容 理解CSS掌握常用的CSS样式 什么是CSS 首先看两张网页百度首页1百度首页2比较两张网页页面的内容都相同页面的布局和效果不同显然第一张网页的内容比第二张网页更好看 客户体验度更好怎么达到这样的效果呢 CSS就能完成这样的工作 什么是CSS CSS CascadingStyleSheet 可译为 层叠样式表 或 级联样式表 是一组格式设置规则 用于控制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标签的字体颜色为蓝色 margin top margin left margin bottom margin right abc padding top abc abc 50px 30px ID选择器 ID选择器定义的样式特定于网页中指定id属性的标签元素语法 样式名称 样式属性 属性值 name color blue 姓名 密码 上面的样式表示id为name的label标签的文本内容为蓝色注意 html的每一个标签元素都有id属性 但id属性在一个页面应该唯一ID选择器只对某个指定ID的标签元素有效 并且ID的值就是样式名 Class 类 选择器 类选择器定义的样式对于网页中指定class属性的标签元素有效语法 样式名称 样式属性 属性值 mycolor color blue 姓名 密码 上面的样式表示class属性为mycolor的label标签的文本内容为蓝色注意 html的每一个标签元素都有class属性 表示应用的类样式的名字 类选择器对一个HTML页面的多个标签元素都有效 伪类 伪类用于向某些选择器添加特殊的效果 常用伪类锚伪类 用来设置标签的各种状态的样式语法 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 spanlabel color red 不想给样式我的名字叫张三 上例表示 标签的文本颜色为 336699标签的子元素的文本颜色为red 样式表的分类 外部样式内部样式内联样式 内联样式 在标签中使用style属性定义该标签内容的样式属性例子abc说明几乎每个HTML标签都有style属性内联样式只对一个标签有效 内部样式 在每个网页的头部中使用标签定义例子 h1 color red 说明内部样式只对当前页面有效 外部样式 外部样式表文件 后缀为 css的文本文件 里面定义了样式外部样式的使用 在每个页面的头部使用标签引用外部样式表文件例子 说明引入外部样式文件的方