《常州网页制作培训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编码的页面文件容量小得多,