网页设计与制作实例教程12-CSS基础.ppt

13.CSS基础 网页设计与制作实例教程 Cascading Style Sheet 层叠样式表 网页包括的内容和样式。 CSS就是让内容和样式分离开来，HTML只控制网页的内容，内容的样式由CSS来控制。 CSS的优点 可以更加精细的控制网页的内容。 比HTML更加丰富。 便于重用、修改 基于Web标准的网页设计方法的设计基础 CSS样式的优点： 只修改一个.css文件就可以改变页数不定的外观和格式（避免了一个一个网页的修改，大大减少了重复劳动的工作量。） 可以“随心所欲”地控制页面布局和外观； 在所有浏览器和平台之间具有较好的兼容性； 精简网页，提高下载速度（简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次））。 第一个CSS html head title第一个CSS/title style type=text/css !-- .s1 {font-size: 57px;color: green;} .s2 {color: red;} -- /style /head body p class=s1应用了s1样式,绿色，字体大小57px /p span class=s2应用了s2样式，字体为红色/span /body CSS属性与属性值 固定简化语法如下： style type=“text/css” !-- .样式名1{样式属性1:属性值;样式属性2:属性值; } .样式名2{样式属性1:属性值;样式属性2:属性值; } -- /style 常用属性 文本对齐属性(text-align) 这个属性用来设定文本的对齐方式。有以下值： left (居左，缺省值) right (居右) center (居中) justify (两端对齐) 示例代码如下： .p2 {text-align:right} 文本修饰属性(text-decoration) 这个属性主要设定文本划线的属性。有以下值： none (无，缺省值) underline?(下划线) overline (上划线) line-through (当中划线) 示例代码如下： .p2 {text-decoration: underline} 文本缩进属性(text-indent) 这个属性设定文本首行缩进。其值有以下设定方法： length (长度，可以用绝对单位(cm, mm, in, pt,?pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象宽度的百分比) 示例代码如下： .p1 {text-indent: 8mm} 行高属性(line-height) 这个属性设定每行之间的距离。其值有以下设定方法： normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt,pc)或者相对单位 (em, ex, px)) percentage (百分比，相当于父对象高度的百分比) 示例代码如下： .p1 {line-height:1cm} 颜色属性(color) 用颜色属性(color)可以改变文本的字体颜色。示例代码如下： .p1{color:gray} 字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。 normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)) 示例代码如下： .p1 {letter-spacing: 3mm} 作业1：用CSS完成下列效果 1、文字为粗体，12px，斜体，带删除线（line-through），黑体 2、文字中都是大写字母，首行缩进为30px，字符间距为5px，行高为14px，文字水平对齐方式为右对齐。 作业2 自己建一个css文件，完成下列样式的定义 （1）h1：红色，字体大小12px，bold。 （2）#f3: 幼圆，水平居中，字符间距：10px，下划线。 （3）.s1:绿色，行高：150%，首行缩进：25px。 在html中调用这个css文件中的这三个样式。 网页设计与制作实例教程 *