《常州网页制作培训CSS样式表基础知识教程-东方博宜课件》由会员分享，可在线阅读，更多相关《常州网页制作培训CSS样式表基础知识教程-东方博宜课件（43页珍藏版）》请在金锄头文库上搜索。
1、DIV+CSS,样式表简介,一、样式表简介,这是标题：微软操作系统首选12种浏览器名单曝光,样式表简介,这是段落：12月17日消息，微软,这是样式：,1.内嵌样式表 2.内部样式表 3.链入外部样式表 4.导入外部样式表 导入样式表写在样式表的第一行！,二、样式表分类,样式表的继承性（层叠） 出现这种情况：,样式表分类,外部样式表：左对齐，蓝色,内部样式表：居中，灰色,内嵌样式表：右对齐，紫色,？,后来居上，最近原则！,3.1 基本语法 CSS的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）。基本格式如下：selector proper
2、ty: value （选择符 属性：值） 选择符是可以是多种形式，一般是你要定义样式的HTML标记，例如body、p、table，你可以通过此方法定义它的属性和值，属性和值要用冒号隔开：body color: black,三、基本语法,3.2 选择符的分类 1.类型选择符 body font-size:12px; p color:blue; 指对网页中已有的标签类型作为名称的选择符，如上表示：body标签内的所有文字大小为12px;段落内的文字颜色为蓝色。,选择符分类,2.群组选择符h4,p,span font-size:12px; 表示页面所有的h4,p,span标签内文字都为12px大小，
3、即对一组对象进行相同的样式指定，每个标签之间用逗号分隔开来。,选择符分类,3.包含选择符 table a font-size: 12px 在表格内的链接改变了样式，文字大小为12象素，而表格外的链接的文字仍为默认大小。,选择符分类,4.ID选择符 id是对页面中的唯一元素进行样式定义，这个样式在页面中只使用一次、即id不重复.#myDivfont-size:12px;,选择符分类,5.类选择符 或者写成： .center text-align: center这个标题是居中排列的,选择符分类,6.组合选择符 使用id或class，同时也使用标签来进行组合h1#cont表示id为cont的h1标签
4、h1 .cont表示所有class为cont的h1标签 p.right text-align: right p.center text-align: center然后用不在不同的段落里，只要在HTML标记里加入你定义的class参数：这个段落向右对齐的,选择符分类,7.伪类选择符 常见为a标签a:link a:visited a:active a:hover,选择符分类,8.通配选择符 *color:blue; 表示所有对象的字体都为蓝色。,选择符分类,3.3 CSS的属性和值,3.3.1 字体属性 字体属性主要包括：字体族科、字体风格、字体加粗、字体大小。 Font-family:用一个指定
5、的字体名或一个种类的字体族科。 Font-size:字体显示的大小。 Font-style:设定字体风格。 Font-weight:以bold为值可以使字体加粗。,1.Font-family 可以使用一个指定的字体名或一个种类的字体族科。很明显定义一个指定的字体名不如定义一个种类的字体族科。当浏览器解析执行的时候，会控制族科中所列的字体顺序从前到后选择字体，当客户机中没有第一种字体的时候会默认使用第二种字体显示，依此类推。,字体族科,2.Font-size 用来修改字体显示的大小，尺寸既有绝对的也有相对的。后面跟的尺寸单位有：厘米，像素，磅等，最常用的是pt点,1pt=1/72英寸。另外还有其
6、他一些值，例如：xx-small | x-small | small | medium | large | x-large | xx-large,字体大小,3.Font-style 字体风格以三种方法中的一种来定义显示的字体。 Normal:普通文字 Italic:斜体文字 Oblique:倾斜的文字，在中文文字上使用与italic并无明显区别。英文上比Italic更倾斜,字体风格,4.Font-weight 用来说明字体的加粗，当它是设为绝对时，bolder和lighter值将相对地成比例增长，另外还有normal, bold，还可以直接设置一个100-900之间的任意值。 Value：10
7、0-900之间 Normal：普通文字 Bold：加粗 Bolder：特粗 Lighter：加细,字体加粗,3.3.2 文本属性,CSS文本属性主要包括字母间隔、文字修饰、文本排列、文本缩近、行高等。 Letter-spacing：定义一个附加在字符之间的间隔数量 Text-decoration：文本修饰属性允许通过五个属性中的一个来修饰文本。 Text-align：设置文本的水平对齐方式。 Text-indent：文字的首行缩进。 Line-height：行高属性接受一个控制文本基线之间的间隔值。,1.Letter-spacing 定义一个附加在字符之间的间隔数量，该值必须符合长度格式，允许
8、使用负值。一个设为0的值会阻止文字的调整。,字母间隔,2.Text-decoration 可以为文字添加下划线、上划线、中划线或者闪动效果。当需要同时在代码中写上两种属性的时候，在属性中间加上空格就可以了。 Underline：下划线 Overline：上划线 Line-through：中划线 Blink：闪烁，只适用于NetScape浏览器 None：无任何修饰,文字修饰,3.Text-align 文本排列属性可以使元素文本排列整齐。这个属性的功能类似于HTML的段、标题和部分的align属性：center, left, right。 Left：左对齐。 Center：居中对齐。 Right
9、：右对齐。 Justify：两端对齐。,文本排列,4.Text-indent 可以应用于块级元素（P，H1等）定义该元素第一行可以接受的缩进数量。该值必须是一个长度或一个百分比，若为百分比则视上级元素的宽度而定。通用的文本缩进用法是用于段的缩进。,文本缩进,5.Line-height 可以接受一个控制文本基线之间的间隔值。当为百分数时，行高有元素字体大小的量与该数字相乘所得，百分比的值相对于元素字体的大小而定，不允许使用负值。,行间距,3.3.3 颜色和背景属性,CSS的颜色属性允许网页制作者指定一个元素的颜色，背景属性允许控制背景。 color：定义颜色 background-color：设
10、定一个元素的背景颜色 background-image：设定一个元素的背景图片 background-repeat：指定背景图片如何重复 background-position：设置水平和垂直方向的位置 background-attachment:设置背景图片是否滚动,1.颜色,Color 颜色属性允许网页制作者指定一个元素的颜色 value：可以是英文单词，也可以是RGB,2.背景颜色和背景图象,Background-color 设定一个元素的背景颜色 value：可以是英文单词，也可以是RGB Background-image 设定一个元素的背景图象 语法结构： background-im
11、age: url(相对地址),3.背景附件,background-attachment 背景附件属性决定指定的背景图象是跟随内容滚动，还是被看作油画固定不动。 value：scroll | fixed 默认的属性值为scroll,4.背景图象重复,background-repeat 设置一个被指定的背景图象如何被重复。 Repeat-x：横向重复 Repeat-y：纵向重复 Repeat：横向纵向重复 No-repeat：不重复,5.背景位置,background-position 背景图象位置属性指定背景图象在页面中的位置。 Value：百分比|长度 | top | center | bot
12、tom | left | center | right 长度和百分比的组合是允许的，负值也行。例如，10% -2cm是允许的。,6.边界,margin-top: 上边界 margin-right:右边界 margin-bottom:下边界 margin-left:左边界 margin: Value：长度 | 百分比 | auto,7.补白,padding-top: 上补白 padding-right: 右补白 padding-bottom: 下补白 padding-left: 左补白 padding: 补白 Value： | ,8.边框宽度,border-top-width: 上边框宽度 bo
13、rder-right-width: 右边框宽度 border-bottom-width: 下边框宽度 border-left-width: 左边框宽度 border-width: 边框宽度 Value：thin | medium | thick | ,9.边框风格（样式）,border-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset1,4 边框样式属性用于设置一个元素 边框的样式。这个属性必须用于指定可见的边框。 可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下
14、和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。,10.边框颜色,border-color:1,4 边框颜色属性设置一个元素的边框颜色。可以使用一到四个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等。,11.边框,border-top: 上边框 border-right: 右边框 border-bottom: 下边框 border-left: 左边框 border: 边框 Value：|,3.3.4 块属性,在格式化页面对象时，CSS将所有对象
15、都放置在一个容器里面，这个容器称为区块。 包括的属性： width | height | float | clear | padding | margin,1.宽度,width: | | auto 默认值为auto 每个块级或替换元素都可以用一个长度或auto值来指定其宽度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 宽度属性的初始值为auto，即为该元素的原有宽度(有就是元素自己的宽度，例如一个图象的宽度)。百分比参考上级元素的宽度。不允许使用负的长度值。 这个属性能用作给出一些INPUT元素的
16、公共长度，好象SUBMIT和RESET按钮:,2.高度,height: | auto 每个块级或替换元素都可以用一个长度或auto值来指定其高度。(替换元素仅指一些已知原有尺寸的元素。HTML替换元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT.) 高度属性的初始值为auto，即为该元素的原有高度(有就是元素自己的高度，例如一个图象的高度)。不允许使用负的长度值。,3.漂浮,float: left | right | none 默认值是none 漂浮属性允许网页制作者将文本环绕在一个元素的周围. 这同HTML3.2中IMG元素的ALIGN=left和ALIGN=right一样，但CSS1允许所有对象漂浮，而不像HTML3.2那样仅仅允许图象和表格。,样式表的优点 1、表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中，HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。 2、提高页面浏览速度 对于同一个页面视觉效果，采用CSS布局的页面容量要比TABLE编码的页面文件容量小得多，
