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

1、13.CSS基础网页设计与制作实例教程网页设计与制作实例教程Cascading Style Sheet 层叠样式表n网页包括的内容内容和和样式样式。nCSS就是让内容和样式分离开来内容和样式分离开来，HTML只控制网页的内容，内容的样式由CSS来控制。网页设计与制作实例教程CSS的优点n可以更加精细的控制网页的内容。n比HTML更加丰富。n便于重用、修改n基于Web标准的网页设计方法的设计基础网页设计与制作实例教程CSS样式的优点：n只修改一个.css文件就可以改变页数不定的外观和格式（避免了一个一个网页的修改，大大减少了重复劳动的工作量。）n可以“随心所欲”地控制页面布局和外观；n在所有浏览

2、器和平台之间具有较好的兼容性；n精简网页，提高下载速度（简化了网页的格式代码，外部的样式表还会被浏览器保存在缓存里，加快了下载显示的速度，也减少了需要上传的代码数量（因为重复设置的格式将被只保存一次）。网页设计与制作实例教程第一个CSSnnn第一个CSSnnnnnn应用了s1样式,绿色，字体大小57px n应用了s2样式，字体为红色n网页设计与制作实例教程CSS属性与属性值固定简化语法如下：网页设计与制作实例教程常用属性网页设计与制作实例教程文本对齐属性文本对齐属性(text-align)这个属性用来设定文本的对齐方式。有以下值：left (居左，缺省值) right (居右) center

3、(居中) justify (两端对齐) 示例代码如下：.p2 text-align:right 网页设计与制作实例教程文本修饰属性文本修饰属性(text-decoration)这个属性主要设定文本划线的属性。有以下值：none (无，缺省值) underline (下划线) overline (上划线) line-through (当中划线)示例代码如下：.p2 text-decoration: underline 网页设计与制作实例教程文本缩进属性文本缩进属性(text-indent)这个属性设定文本首行缩进。其值有以下设定方法：length (长度，可以用绝对单位(cm, mm, in,

4、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

5、)可以改变文本的字体颜色。示例代码如下：.p1color:gray 网页设计与制作实例教程字间距属性(letter-spacing) 这个属性用来设定字符之间的距离。normal (缺省值) length (长度，可以用绝对单位(cm, mm, in, pt, pc)或者相对单位 (em, ex, px)示例代码如下：.p1 letter-spacing: 3mm 网页设计与制作实例教程作业1：用CSS完成下列效果n1、文字为粗体，12px，斜体，带删除线（line-through），黑体n2、文字中都是大写字母，首行缩进为30px，字符间距为5px，行高为14px，文字水平对齐方式为右对齐。网页设计与制作实例教程作业2n自己建一个css文件，完成下列样式的定义（1）h1：红色，字体大小12px，bold。