第四讲 CSS样式表.pptVIP

第四章 CSS样式表 为什么需要CSS样式表 样式表能实现内容与样式的分离，方便团队开发 程序员写代码 美工做样式 内容与样式和谐统一的完整网页 什么是CSS样式表 CSS 指层叠样式表（Cascading Style Sheets），层叠的意思是：多重样式定义被层叠为一。 在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 样式表的基本语法 样式表的基本结构 STYLE type=text/css P {color:red; font-size:30px; font-family:隶书;} …… /STYLE 声明文档样式表结束 文档样式表开始，类型为CSS样式 样式规则 选择器 样式规则 P {color:red; font-size:30px; font-family:隶书;} 属性 属性的值 STYLE type=text/css .red { color:red; font-family:隶书; font-size:24px; } …… /STYLE 样式表的基本语法 如果希望其他的标签也能采用P标签的样式，怎么办？ 其他标签和P标签应该采用相同的样式，所以要为它们定义一个共享样式。 类选择器(class) .类名 样式规则 样式表的基本语法 HEAD TITLE样式规则/TITLE STYLE type=text/css .red { color:red; font-family:隶书; } /STYLE /HEAD BODY H2 class=red静夜思/H2 /BODY CLASS类选择器 为类选择器定义的样式规则 应用类选择器 class＝”类名“ 常用的样式属性 文本属性 文本属性 说 明 font-size 字体大小 font-family 字体类型 font-style 字体样式 color 设置或检索文本的颜色 text-align 文本对齐 使用font-size、font-family、 color实现 宋体，字体大小12px 字体大小16px 要实现如下图所示的文本样式，该如何编写？ 常用的样式属性 方框属性 margin-right 右边界 margin-left 左边界 margin-top 上边界 margin-bottom 下边界 margin border padding border-width 边框的宽度 padding-left 左填充 padding-bottom 下填充 常用的样式属性 属 性 CSS名称 说 明 边界属性 margin-top 设置对象的上边距 margin-right 设置对象的右边距 margin-bottom 设置对象的下边距 margin-left 设置对象的左边距 边框属性 border-style 设置边框的样式 border-width 设置边框的宽度 border-color 设置边框的颜色 填充属性 padding-top 设置内容与上边框之间的距离 padding-right 设置内容与右边框之间的距离 padding-bottom 设置内容与下边框之间的距离 padding-left 设置内容与左边框之间的距离 方框属性 常用的样式属性 要实现下图所示的效果，该如何编写样式规则？ 线宽2px、虚线框样式dashed、颜色为red 使用background、border-right-width、border-right-color、border-right-style、padding-top和padding-left来实现 行的背景色为yellow 常用的样式属性 STYLE type=text/css .tableBorder { border-right-width: 3px; border-right-color:red; border-right-style:dashed; padding-top:20px; padding-left:10px; } TR { background-color:yellow; } TABLE TR TD class=tableBorder手机冲值/TD TD class=tableBorder电子彩票/TD /TR …… 设置单元格右边框宽度为3像素 设置单元格右边框为虚线框 设置单元格里文字与左边框的距离为10像素 表格行的背景色