样式在网页中的应用.pps

第四章样式在网页中的应用 4 1样式概述 4 2在网页中添加样式 4 3CSS样式属性 4 1样式概述 样式是用来控制网页外观的一组格式属性 在网页中使用CSS来实现样式控制 一 CSS简介CSS CascadingStyleSheets 译作 层叠样式表 是用于 增强 控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 CSS可以用来一次对多个网页的所有样式进行控制 CSS样式表可以同时链接多个网页 当样式表更新或被修改之后 所有应用了该样式表的文档都会被自动更新 网页设计最初是用HTML标记来定义页面文档及格式 例如标题 段落 表格 链接等 但这些标记不能满足更多的文档样式需求 为了解决这个问题 在1997年W3C颁布HTML4标准的同时也公布了有关样式表的第一个标准CSS1 自CSS1的版本之后 又在1998年5月发布了CSS2版本 样式表得到了更多的充实 目前采用的是CSS2 0 二 CSS样式语法和类型1 CSS基本语法CSS的定义是由三个部分构成 选择符 selector 属性 properties 和属性的取值 value 基本格式如下 selector property value 选择符 属性 值 选择符可以是多种形式 一般是要定义样式的HTML标记 例如body p table 可以通过此方法定义它的属性和值 属性和值要用冒号隔开 body background color CCCCCC 选择符body是指页面主体部分 background color是控制背景颜色的属性 此例的效果是使页面中的背景为灰色 定义HTML标记样式 2 选择符组可以把相同属性和值的选择符组合起来书写 用逗号将选择符分开 这样可以减少样式重复定义 h1 h2 h3 h4 h5 h6 color 666666 这个组里包括所有的标题元素 每个标题元素的文字都为灰色 定义选择符组样式 3 包含选择符可以单独对某种元素包含关系定义的样式表 元素1里包含元素2 这种方式只对在元素1里的元素2定义 对单独的元素1或元素2无定义 例如 tablea font size 12px 在表格内的链接改变了样式 文字大小为12像素 而表格外的链接的文字仍为默认大小 定义包含选择符样式 4 类选择符用类选择符能够把相同的元素分类定义不同的样式 定义类选择符时 在自定类的名称前面加一个点号 假如想要两个不同的段落 一个段落向右对齐 一个段落居中 可以先定义两个类 p right text align right p center text align center 定义类选择符样式 然后用不在不同的段落里 只要在HTML标记里加入定义的class参数 这个段落向右对齐的这个段落是居中排列的注意 类的名称可以是任意英文单词或以英文开头与数字的组合 一般以其功能和效果简要命名 类选择符还有一种用法 在选择符中省略HTML标记名 这样可以把几个不同的元素定义成相同的样式 center text align center 定义 center的类选择符为文字居中排列 这样的类可以被应用到任何元素上 定义省略HTML标记名的类选择符样式 下面使h1元素 标题1 和p元素 段落 都归为 center 类 这使两个元素的样式都跟随 center 这个类选择符 这个标题是居中排列的这个段落也是居中排列的注意 这种省略HTML标记的类选择符是最常用的CSS方法 使用这种方法 我们可以很方便的在任意元素上套用预先定义好的类样式 5 id选择符在HTML页面中id参数指定了某个单一元素 id选择符是用来对这个单一元素定义单独的样式 id选择符的应用和类选择符类似 只要把class换成id即可 定义id选择符要在id名称前加上一个 号 和类选择符相同 定义id选择符的属性也有两种方法 下面这个例子 id属性将匹配所有id text 的元素 text font family 宋体 font size 14px line height 150 color 000000 字体为宋休 字号为14像素 行高为150 颜色为黑色 定义id选择符样式 下面这个例子 id属性只匹配id text 的段落元素 p text font family 宋体 font size 14px line height 150 color 000000 注意 id选择符局限性很大 只能单独定义某个元素的样式 一般只在特殊情况下使用 6 样式表的层叠性层叠性就是继承性 样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的元素 事实上 所有在元素中嵌套的元素都会继承外层元素指定的属性值 有时会把很多层嵌套的样式叠加在一起 除非另外更改 例如在div标记中嵌套p标记 div font family 宋体 font size 14px 这个段落的文字为宋休 字号为14像素 p元素里的内容会继承div定义的属性 另外 当样式表继承遇到冲突时 总是以最后定义的样式为准 如果上例中定义了的文字大小 div font family 宋体 font size 14px p font size 16px 这个段落的文字为16像素我们可以看到段落里的文字字体是 宋体 是继承div属性的 而文字大小是后面定义的 不同的选择符定义相同的元素时 要考虑到不同的选择符之间的优先级 ID选择符 类选择符和HTML标记选择符 因为ID选择符是最后加上元素上的 所以优先级最高 其次是类选择符 最后是HTML标记选择符 7 CSS注释可以在CSS中插入注释来说明代码的意思 注释有利于或别人以后编辑和更改代码时理解代码的含义 在浏览器中 注释是不显示的 CSS注释以 开头 以 结尾 如下 定义段落样式表 p text align center 文本居中排列 color black 文字为黑色 font family arial 字体为arial 8 伪类伪类可以看做是一种特殊的类选择符 是能被支持CSS的浏览器自动所识别的特殊选择符 它的最大的用处就是可以对链接在不同状态下定义不同的样式效果 1 语法伪类的语法是在原有的语法里加上一个伪类 pseudo class selector pseudo class property value 选择符 伪类 属性 值 伪类和类不同 是CSS已经定义好的 不能象类选择符一样随意用别的名字 根据上面的语法可以解释为对象 选择符 在某个特殊状态下 伪类 的样式 类选择符及其他选择符也同样可以和伪类混用 selector class pseudo class property value 选择符 类 伪类 属性 值 2 锚的伪类最常用的是4种a 锚 元素的伪类 它表示动态链接在4种不同的状态 link visited active hover 未访问的链接 已访问的链接 激活链接和鼠标停留在链接上 把它们分别定义不同的效果 a link color FF0000 text decoration none 未访问的链接 a visited color 00FF00 text decoration none 已访问的链接 a hover color FF00FF text decoration underline 鼠标在链接上 a active color 0000FF text decoration underline 激活链接 注意 有时这个链接访问前鼠标指向链接时有效果 而链接访问后鼠标再次指向链接时却无效果了 这是因为把a hover放在了a visited的前面 这样的话由于后面的优先级高 当访问链接后就忽略了a hover的效果 所以根据叠层顺序 在定义这些链接样式时 一定要按照a link a visited a hover a actived的顺序书写 定义锚的伪类样式 返回本章首页 4 2在网页中添加样式 一 添加样式表的方法页面中添加样式表的方法有 链入外部样式表 内部样式表 导入外部样式表和内联样式 1 链入外部样式表链入外部样式表是把样式表保存为一个样式表文件 然后在页面中用标记链接到这个样式表文件 这个标记必须放到页面的区内 如下 上面这个例子表示浏览器从mystyle css文件中以文档格式读出定义的样式表 rel stylesheet 是指在页面中使用这个外部的样式表 type text css 是指文件的类型是样式表文本 href mystyle css 是文件所在的位置 一个外部样式表文件可以应用于多个页面 当改变这个样式表文件时 所有页面的样式都随之而改变 在制作大量相同样式页面的网站时 非常有用 不仅减少了重复的工作量 而且有利于以后的修改 编辑 浏览时也减少了重复下载代码 2 内部样式表内部样式表是把样式表放到页面的区里 这些定义的样式就应用到页面中了 样式表是用标记插入的 从下例中可以看出标记的用法 3 导入外部样式表导入外部样式表是指在内部样式表的里导入一个外部样式表 导入时用 import 看下面这个实例 例中 import mystyle css 表示导入mystyle css样式表 注意使用时外部样式表的路径 方法和链入样式表的方法很相似 但导入外部样式表输入方式更有优势 实质上它相当于存在内部样式表中的 注意 导入外部样式表必须在样式表的开始部分 在其他内部样式表上面 4 内联样式内联样式是混合在HTML标记里使用的 用这种方法 可以很简单的对某个元素单独定义样式 内联样式的使用是直接将在HTML标记里加入style参数 而style参数的内容就是CSS的属性和值 如下例 这是一个段落 这个段落颜色为黑色 左边距为20象素 注意 style参数可以应用于任意body内的元素 5 多重样式表的叠加如果在同一个选择器上使用几个不同的样式表时 这个属性值将会叠加几个样式表 遇到冲突的地方会以最后定义的为准 注意 依照后定义的优先 所以优先级最高的是内联样式 内部样式表 链入的外部样式表和内部样式表之间是最后定义的优先级高 最后为导入外部样式表 二 样式表使用1 class属性class属性用于指定元素属于何种样式的类 2 id属性用于给单一元素指定单独的样式 3 style属性使用style属性可采用内联样式很简单的对某个元素单独定义样式 4 div元素div元素在样式表中作为一个选择符使用 而且它也能接受style class和id属性 div division 部分 的简称 作为一个块级元素 div可以包含段落 标题 表格甚至其它部分 div是指块文字 像你要定义一块文字可以用到它 另外做层的时候也经用到它 它就是让一块东西集成为一个集合 div标签可以以类或ID附加css样式1 类 2 ID 返回本章首页 4 3CSS样式属性 一 CSS2盒模型自从1996年CSS1的推出 W3C组织就建议把所有网页上的对象都放在一个盒 box 中 设计师可以通过创建定义来控制这个盒的属性 这些对象包括段落 列表 标题 图片以及层 盒模型主要定义四个区域 内容 content 边框距 padding 边框 border 和边距 margin margin是指盒的边框以外留的空白 用于页边距或者与其它盒制造一个间距 margin是透明元素 不能定义颜色 padding是指盒的边框到盒的内容之间的空白 是透明元素 不能定义颜色 border是指盒的边框 background是定义盒的背景 分2级定义 先定义图片背景 其次定义背景色 如果没有背景图片可以只定义背景色 width是定义盒的宽度 要注意的是 这个宽度仅仅指内容的宽度 不包含margin border和padding 二 CSS属性介绍1 类型面板类型面板主要是对文字的字体 大小 颜色 效果等基本样式进行设置 2 背景面板背景面板主要是对元素的背景进行设置 包括背景颜色 背景图像 背景图像的控制 一般是对body 页面 table 表格 div 区块 的设置 3 区块面板主要是设置对象文本的文字间距 对齐方式 上标 下标 排列方式 首行缩进等 文本对齐 确定元素在上层容器元素内如何排列对齐 4 方框面板用于将网页中的块元素都看作是包在一个盒子中 主要设置对象的边界 间距 高度 宽度 和漂浮方式等 CSS布局 5 边框面板主要针对盒子边框的 可以设置对象边框的宽度 颜色及样式 6 列表面板可以设置列表项样式 列表项图片 和位置 7 定位面板相当于对象放在一个层里来定位 它对应于HTML的div标记 你可以把定义看作为一个CSS定义的层 8 扩展面板 分页 在打印的时候强迫在样式控制的对象前后换页 光标 当光标滑过样式控制的对象时改变光标的图像 滤镜 给由样式控制的对象应用特效 包括模糊和倒置等 返回本章首页