CSS层叠样式库.ppt

Web技术基础 HTML ASPPHP CSS ActiveX JavaApplet XML 网络安全 DHTML CSS层叠样式库 Web技术基础 CSS的特点 CSS 层叠样式表 虽然CSS在网页里是和HTML在一起的 但它不算HTML 它的使用可以扩展HTML的功能 使我们可以重新定义HTML元素的显示方式通过设置CSS 我们可以做到可以随意地控制网页中字体地大小 颜色 便于统一网站的整体风格 可以方便的为网页中的各个元素设置背景颜色和图片并进行精确的定位控制 可以为网页的元素设置各种滤镜 从而产生诸如阴影 辉光 模糊等只有在图像处理软件中才能实现的效果 可以与脚本语言相结合 在网页中实现很多动态滤镜效果 缺点 不同版本 不同厂家的浏览器的支持程度不同 需要多多方面测试 CSS语法 选择符 属性 属性值 属性 属性值 声明注释语句选择符HTML标记符使用定义的类CLASSID选择符 a color 3366CC text decoration none H color red 仅仅定义了颜色 选择符 类名 属性 值 CSS语法 定义CSS样式 方法一 在头标记中 hr size 4 width 600 color red 格式 选择器 属性1 属性值 属性2 属性值 方法二 在HTML标记中格式 方法三 将CSS代码生成一个 css的文件 然后将这个文件链接到所需的页面上 对于方法一定义的样式将影响到页面中的所有选择标记方法二定义的样式只是影响当前标记方法三非常适宜同时定义多个文档 它能使多个文档同时使用相同的样式 从而减少了大量的冗余代码 可以把网站上所有页面都链接到一个CSS文件 一旦这个CSS文件修改 那么所有的页面风格也随之改变 选择器的三种形式 HTML选择器 HTML标记 H1 COLOR RED 类选择器 允许同一元素有不同样式 通过选择类实现 1 相关类选择器语法 选择器 类1 属性 值 选择器 类2 属性 值 例 我们想要一些而不是全部H2的颜色是红色H2 redone color red ThisisH2ThisisredH22 独立类选择器语法 类名 属性 值 例 blueone color blue BlueH2BlueParagraph ID选择符ID选择符其实跟独立的类选择符的功能一样 而区别在于它们的语法和用法不同 以及对于javascript操纵HTML元素有帮助语法 ID名 属性 值 例 redone color red red和元素元素是一个内联元素 它没有自己单独的意义 它的存在纯粹是应用样式 功能上与SPAN元素相似 最主要的差别在于是一个块级元素 DIV可以包含段落 标题 表格甚至其他部分 在网页中使用CSS外部文件链接CSS文件导入CSS文件 importurl sheet1 css 当样式冲突时的优先顺序局部套用 Class 在开头定义CSS样式 外部链接 import link 测试CSS语法测试网址 http jigsaw w3 org css validatorCSS瘦身 CSS属性 字体属性 说明 1 font style中的Normal指定正常字型 italic指定斜体 oblique与斜体类似 2 font weight的值可以是数值 也可以是表格中的属性值 其中normal相当于400 bold相当于700 字体属性 说明 不建议在font family中设置超过宋体 黑体之外的字体 会导致未装字体的计算机显示不正常由于中文文字的复杂性 点阵装的字体并不是全都适合于浏览器观看 因此推荐使用标准的宋体用于中文文字的显示 如果需要其他装饰性字体 应当多使用图片方式来替代纯文本的显示 说明 font weight的值可以是数值 也可以是表格中的属性值 其中normal相当于400 bold相当于700 说明 font size可以是表中的属性值 也可以是数值 在800和1024分辨率下可以设置为12px或9pt 这样的大小比较好看Pt 磅 绝对长度单位 px象素 相对长度单位 Em 是一个相对单位 用于设置当前的文字尺寸为在同一行中的其他文字尺寸的倍数字体集合声明 Font family 字体风格字体加粗字体大小字体名称 文本属性 文本属性 字距Word spacing控制英文单词字距 此属性适用英文单词或罗马文字 对于汉字没有作用 文字间距可以取负值 则单词会发生重叠 默认为0 或使用关键字normalLetter spacing控制英文字母和汉字的字距文字行控制text aline指定文字的对齐方式 left right center justifytext indent指定段落的首行缩进值为数值或百分比 line height定义行高 值为normal number length和percentage 颜色和背景属性 颜色的表示方法 使用颜色的英文名称 不建议使用 避免有些颜色名不被浏览器解析或不同的浏览器对颜色的解释差异 十六进制颜色 RRGGBB背景集合声明Background 背景颜色 背景图片 背景平铺方式 背景滚动设置 背景位置 边框属性 Border color设置边框颜色Border style设置边框样式Border width设置边框宽度 列表属性 List style image url 设置列表项标记的图像List style positionList style type设置列表标记 在很多网页设计中 对image标签的滥用导致纯修饰性的图象把页面弄乱了 好在CSS能够在页面上显示图象 而不需要让图象成为标签的一部分 实现方法是将图象作为背景添加到现有的元素中 目前渐变非常时髦 实现页面垂直渐变 先需要创建一个很高但很窄的渐变图象 然后将这个图象应用于页面的主体并让它水平平铺 body background cccurl bak jpg repeat x 因为这个渐变图象的高度是固定的 所以如果页面内容的长度超过了图象的高度 那么渐变就会突然终止 实际上 只需要再添加一个背景颜色 背景图象总是出现在背景颜色的上面 所以当图象结束时 颜色就会显示出来了 如果选择的背景颜色与渐变底部的颜色相同 那么图象和背景颜色之间的转换就看不出来了 平铺图象在某些情况下很有用 但是 在大多数情况下 希望在页面上添加不进行平铺的图象 如果图象不包含信息 是纯装饰性的 那么可能希望将图象从其余内容中分离出来 实现的方法是将图象应用为背景并不进行平铺 修饰超级链接网页默认的链接方式是这样的 未访问过的链接是蓝色文字并带蓝色的下划线 访问过的超级链接是深紫色的文字并带深紫色的下划线 利用文本属性中的Text decoration属性就可以实现对超链接