互联网软件开发与应用chap

第7章CSS编程技术 主讲 狼哥Email 1107095361 QQ 1107095361 知新 CSS样式简介HTML中使用样式的方法行内样式 style属性的使用内嵌样式 样式块外部样式 独立样式文件样式选择符组选择符CLASS选择符ID选择符常用的CSS属性定位相关属性 设置属性h1 font size 18px color 6600CC h1改变了样式h2未改变样式 3 1什么是CSS样式 CSS CascadingStyleSheet 一种样式定义语言 为HTML中的标记定义样式 CSS的作用 针对页面中的对象的风格喝样式进行定义 使得HTML各个标记的属性更具有一般性喝通用性 CSS概述 CSS功能与特点 示例显然 如果页面中有很多标签的样式需要去控制 而且这些样式可能会经常改变 使用这种方法就非常麻烦 CSS概述 使用CSS优势 可以实现网页结构与格式分离 对网页布局 字体 背景和其它图文效果实现更加精确的控制 更好的易用性和扩展性 可以单独以一个文件的形式出现 总之 CSS在当前的网页设计中已经成为不可缺少的技术 小至去除链接文字的下划线 大致实现复杂的视觉和动态效果 网络中有大量的CSS代码 初学者可多参考别人CSS实现网页样式的方法 CSS样式定义 CSS样式语法规则 Selector property1 value1 Selector property1 value1 property2 value2 其中 Selector 选择符 表示要定义样式的类型 选择符可以包括HTML标签符 用户自主义类class或用户自定义ID 属性 property 表示由CSS标准定义的样式属性 属性值 value 为样式属性的值 CSS样式定义 CSS样式语法规则 关于样式表的语法 要注意以下几个问题 属性必须要包含在 号之中 属性和属性值之间用 分隔 当有多个属性时 用 进行区分 在书写属性时属性之间使用空格换行等 并不影响属性的显示 如果一个属性有几个值 则每个属性值之间用空格分隔开 BODY margin left 0px margin top 0px margin right 0px margin bottom 0px backgroundcolor ff0000 background repeat repeat x 根据样式代码的位置 分为三种 行内样式 内置样式单 标记的style属性 适用于单个元素的内容内嵌样式 嵌入式样式单 style样式块 适用于整个文档的主体外部样式 外部式样式单 独立样式文件 可以应用在多个文档的主体中 3 3HTML中使用CSS的方法 注意 在使用时 内置样式表优先于文档样式表 而文档样式表又优先于外部样式表 在出现冲突的情况下 低层次的样式表具有使用上的优先权 3 3 1行内样式 Style属性的使用 单价 3999剩余时间 成交结束新旧程度 全新所在地 北京宝贝数量 5件浏览量 220次另送价值50元的充电器套装 一个充电器 两节充电电池 如果希望某段文字和其他段落的文字显示风格不一样 可采用 行内样式 行内样式使用标记的style属性定义 行内样式格式 应用样式的内容 正文 标题1 属性以 名 值 对的形式出现 名与值之间以冒号 分隔 各对之间以分号 分隔 内嵌样式div background color CCCCFF color 0000FF span font size 16px color FF0000 3 3 3内嵌样式 style样式块 ASP及其应用机械工业出版社未用样式XML及其应用机械工业出版社 行内样式局限于某个标签 若希望本网页内的所有同类标签都采用统一样式 应采用内嵌样式 内嵌样式一般在标记内嵌入标记 3 3 2外部样式 独立样式文件 样式文件P 不管是行内样式还是内嵌样式都只能为一个Html页面服务 若要使样式控制多个HTML文件 则采用外部样式 外部样式是将样式放在独立的文件中 即样式表文件 通常以css作为类型名 在使用该样式的HTML中通过标记来链接外部样式表文件 链接外部样式表的步骤 使用LINK 链接 标签 语法 第一步 创建样式表文件newstyle css 第二步 把样式文件和网页关联 样式文件 newstyle cssP 第三步 浏览查看各网页 3 2CSS样式选择符 样式选择器 CSS样式选择符浏览器在解析标记时 会根据标记名或标记中的class属性或id属性到样式表中选择样式 因此样式表中的这些标记或属性名又称为CSS的样式选择符 样式选择符的种类标记选择符 如以前使用的div span p等组选择符CLASS类选择符ID选择符 组选择符 将样式规则同时应用于多个标记 则可以将多个选择符用逗号 隔开再定义样式规则 如 文件3 4 cssspan p h1 color red font size 16px 文件3 3 html组选择器H1标题H2标题P段落span标记 myinput border 1pxsolid border color D4BFFF color 2A00FF 用户名密码 应用类选择符 class 类名 类选择器的定义格式为 类名 样式规则 类选择符 标记选择符为特定标记定义样式 而class选择符可以独立于某个具体标记定义 标记在选择样式时可以使用class属性 在定义class选择符时 选择符名前要加圆点 标识 title color blue font size 24px span err color red font size 16px ID选择符测试P标记中err选择符不起作用SPAN标记中err选择符起作用 应用ID选择器 id ID名 ID选择符 与class选择符应用范围类似 在定义是ID选择符用井号 标识 可通过联合定义来使用 即在ID选择符的前面附加标记符 如 span err color red 表示有被span使用时选择符err才有效 ID选择符一般定义 ID选择符联合定义 CSS样式定义 ID样式符与类样式符对照 类选择符可以重复使用 且可以用在任意元素上 使用任意次 HTML内id属性是唯一的 拥有id的元素才会应用该样式 ID选择符的优先权高于类选择符 伪类定义超链接样式A hover 鼠标悬停时的样式属性A visited 链接地址已被访问过时的样式属性A link 对象在未被访问前的样式属性A active 在鼠标点击与释放之间时的样式属性伪对象选择符 first letter 补充 特殊的选择器 伪类与伪对象 伪类示例 A 设置超链接不带下划线 color blue text decoration none 文本修饰 无 A hover 鼠标在超链接上方停留时 带下划线 color red text decoration underline 文本修饰 下划线 HEAD 俺是超链接 移过来我就显示下划线 特殊的伪类 A代表超链接 hover代表鼠标悬停 CSS属性是控制网页样式的基本元素 CSS涉及的属性极其庞大 包括颜色 尺寸 位置等 可以使用Dreamweaver中的CSS规则定义创建CSS样式规则 CSS属性具有继承 层叠等特性 CSS属性 表4 1样式表可以设置的属性 CSS属性 1属性单位长度单位 cm mm em 当前字体中m宽度 ex 当前字体中x宽度 In Pt px CSS属性 1属性单位百分比单位 一个百分比值中有可选的正号 或负号 后跟一个数字 最后为百分号 例如p line height 200 表示该段文字的调试为标准行高的2倍 CSS属性 1属性单位颜色单位 颜色名称 十六进制 RRGGBB 十分制GRB x y z 百分比RGB 100 0 0 Red Yellow 996633 RBG 255 0 0 RGB 100 0 0 CSS属性 2字体属性font family属性 设置html元素的字体列表 可设置多个值 浏览器由前向后低效选择字体 h3 font family times p font family courier p sansserif font family sans serif CSS属性 2字体属性font style属性 用来设置指定元素的显示字形样式 属性值有normal 普通 默认值 italic 斜体 oblique 倾斜 h1 font style italic h2 font style normal p font style oblique CSS属性 2字体属性font size属性 用来控制字体显示的大小 h1 font size 150 h2 font size 130 p font size 100 size a font size 30px size b font size 30pt CSS属性 2字体属性font variant属性 字型异体 具有nomal与small caps两种取值 在正常与小型大写字母之间切换 p normal font variant normal p small font variant small caps CSS属性 2字体属性font weight属性 设置字体的粗细 属性取值可为normal bold bolder light lighter 100 200 900 100至900依次从最细渐变到最粗 p normal font weight normal p thick font weight bold p thicker font weight 900 CSS属性 2字体属性font属性 字体设置的一种简略写法 设置时可以省略某些属性 应按以下顺序出现 font wight font variant font style font size font family p font italicsmall caps90022pxarial CSS属性 3文本属性字间距letter spacing属性 属性值可为具体长度 且可以为负值 h1 letter spacing 3px h4 letter spacing 0 5cm CSS属性 3文本属性词间距word spacing属性 设置文本中单词 字 间的距离 p normal word spacing normal p length word spacing 1 5cm CSS属性 3文本属性行间距line height属性 控制标记符中文本行高 其取值可以是数字 长度或百分比 normal为默认值 如取值为数字 则表示行高为当前字体调试的倍数 例如 下例可表示20pt的行高 div font size 10pt line height 2 CSS属性 3文本属性文本修饰text decoration 文本修饰属性 包括none underline overline line through blink等值 P171 h1 text decoration overline h2 text decoration line through h3 text decoration underline a text decoration none CSS属性 3文本属性text align vertical align 水平对齐 垂直对齐 text align取值为left right center justify 默认值为left verticle align的取值为baseline sub super top text top middle bottom text bottom baseline为默认值 CSS属性 3文本属性文字转换text transform属性 用来设置文本格式转换 取值有none 默许值 capitalize 首字母大写 uppercase 字母大写 lowercase 字母小写 p uppercase text transform uppercase p lowercase text transform lowercase p capitalize text transform capitalize CSS属性 3文本属性文字缩进text indent属性 首行缩进 取值可以为数值或都百分比 默认值为0 表示无缩进 p text indent 1cm CSS属性 4颜色和背景颜色可按名称 十六进制 RRGGBB 十分制GRB x y z 百分比RGB 100 0 0 h1 color 00ff00 h2 color dda0dd p color rgb 0 0 255 CSS属性 4颜色和背景背景 背景可以设置背景颜色background color和背景图案background image属性 Background color span highlight background color red CSS属性 4颜色和背景当同时设置background color和background image时 背景图案优先显示 背景图案的显示形式可通过background repeat background attachment background position等属性设置 body background image url images eg background3 jpg background repeat repeat CSS属性 4颜色和背景background repeat属性 设置图片重复显示方式 取值为repeat 沿纵 横两个方向重复 默认 repeat x repeat y no repeat background attachment控制指定的背景图案是否跟随内容一起滚动 取值为scroll 默认 fixed 默认值为scroll background position用于设置指定背景图案的最初位置 body background 00ff00url images eg background3 jpg no repeatfixedcenter CSS属性 5边框属性边界属性 margin left margin right margin top margin bottom分别设置页面元素左 右 上 下边界的宽度 取值可以为长度 百分比或auto 使用margin可以同时设置四个方向的边界宽度 p margin margin 2cm4cm3cm4cm CSS属性 5边框属性边框属性边框宽度 border left width border right width border top width border bottom width分别用来设置左 右 上 下4个边框的宽度 取值可以是thin medium thick length medium border width可以同时设置四个方向的边框宽度 CSS属性 5边框属性边框颜色 border left color border right color border top color border bottom color分别用来设置左 右 上 下4个边框的颜色 border color可以同时设置四个方向的边框颜色 CSS属性 5边框属性边框样式 border left style border right style border top style border bottom style分别用来设置左 右 上 下4个边框的样式 取值可以为none dotted dashed solid double groove ridge inset outset 默认值为none border style可以同时设置四个方向的边框样式 如果仅指定一个值 则四个边都采用同样的样式 如果指定了2个或3个值 则没有指定样式的边框采用其对边的样式 CSS属性 5边框属性边框的所有属性可以使用border属性完成 并且宽度 颜色和样式没有顺序要求 p margin margin 2cm4cm3cm4cm CSS属性 5边框属性填充属性 padding left padding right padding top padding bottom属性用于设置左 右 上 下填充区的宽度 也可使用paddding属性同时设置四个方向的填充宽度 td test1 padding 1 5cm td test2 padding 0 5cm2 5cm CSS属性 6浮动属性CSS浮动属性允许网页制作者将文本浮动在一个元素的周围 float属性 将元素的内容浮动到页面的左边缘或右边缘 取值为left right none 默认值为none clear属性 指定一个元素是否允许有元素漂浮在它的旁边 取值为none left right both 默认值none span font family 楷体 gb2312 font size 20pt float left ss clear left 漂浮属性允许网页制作者将文本环绕在一个元素的周围 清除属性指定一个元素是否允许有元素漂浮在它的旁边 漂浮属性允许网页制作者将文本环绕在一个元素的周围 清除属性指定一个元素是否允许有元素漂浮在它的旁边 CSS属性 7定位属性定位属性用于控制元素在页面上的位置 实现页面内元素之间的重叠 position属性 元素在页面的定位方式 值可以是static 按html格式规则正常定位 relative 定位在于页面前一个元素的末端位置 absolute 定位在框架或浏览器窗口本身左上角的绝对位置 默认值为static CSS属性 7定位属性top和left属性 规定某个元素与其他元素之间的距离 按像素来设定元素位置往下或往右的距离 p position absolute top 20px 段落的顶部边缘设置到距离窗口顶部边缘的下方20像素 p position absolute top 20px 段落的顶部边缘设置到距离窗口顶部边缘的上方20像素 CSS属性 7定位属性示例 s1 position absolute top 20px left 30px z index 1 width 400 font size 40pt color blue s2 position absolute top 23px left 33px z index 2 width 450 font size 40pt color yellow s3 position absolute top 26px left 36px z index 3 width 400 font size 40pt color red CSS属性 7定位属性z index属性 解决元素的重叠问题 相当于某些编辑软件中 层 的概念 取值为大于等于 1的自然数 当图片作为背景时 可使用值