HTML网页设计 翁高飞、王鹏 chapter3新.pptVIP

* * * * * * * * * * * * * * * * * * 灵活控制网页中文字的字体、颜色、大小、间距、风格及位置。 随意设置一个文本块的行高、缩进，并可以为其加入三维效果的边框。 更方便地为网页中的任何元素设置不同的背景颜色和背景图片。 精确控制网页中各元素的位置。 可以与脚本语言相结合，使网页中的元素产生各种动态效果。 Company Logo CSS样式表的功能 Company Logo * CSS样式表示例 html head title行内样式表示例/title /head body p style=font-family:华文彩云;font-size:36px桂林山水甲天下 p桂林山水甲天下 /body /html 先看看以下示例 两段文本都采用了同一标签p，但显示的样式不一样，显然是代码片段中的字体、字体大小等规定了第一段的显示样式 Company Logo CSS基本语法（1） 选择器 { 样式属性：属性值 ; 样式属性：取值 ; } 选择器可以是多种形式的 例如要定义HTML标记中H2的样式，代码如下： H2 { font-family : 黑体 ; font-size:24px ; } 选择器 字体属性为黑体 字体大小为24px Company Logo CSS基本语法（2） html headtitle样式表示例/title style type=text/css H1{font-family:Arial;font-size:24px;} P{font-family:黑体;color:limegreen;} /style/head body H1这是应用了样式的H1元素 H2这是H2元素，它没有应用样式 p这是应用了样式的P元素 /body /html style/style表示样式标签 type=text/css表示类型是样式表文本 属性 CSS名称 说明 字体属性 font-family 设置或检索文本的字体 Font-size 设置或检索文本字体的大小 Font-style 设置或检索文本的字体样式，即字体风格，主要设置字体是否为斜体。取值范围： normal | italic | oblique Font-weight 用于设置字体的粗细，取值范围： Normal | bold | bolder | lighter | number 颜色及背景属性 Color 设置文本的颜色 Background-color 设置背景颜色 background-image 设置元素的背景图象 文本属性 Text-align 设置文本的对齐方式，如：左对齐、右对齐、居中对齐、两端对齐 Text-indent 设置文本第一行的缩进量，取值可以是一个长度或一个百分比 Vertical-align 设置文本的纵向位置 Company Logo CSS样式表常见的属性 边框属性 Border-style 设置边框的样式 Border-width 设置边框的宽度 Border-color 设置边框的颜色 Border-left 设置左边框的属性 尺寸及定位属性 Width 设置元素的宽度 Height 设置元素的高度 Left 定位元素的左边距 Top 定位元素的顶边距 Position 设定浏览器如何来定位元素， absolute表示绝对定位，需要同时使用left、right、top、bottom等属性进行绝对定位 z-index 设置层的层叠先后顺序和覆盖关系 Company Logo CSS样式表常见的属性 Company Logo CSS样式表分类 根据样式代码的位置，分为三类： 行内样式 内嵌样式 外部样式 在最后一个声明后面加上一个分号 (;) 是一个好习惯 Company Logo 行内样式 您如果希望某段文字和其他段落的文字显示风格不一样，那么请采用“行内样式”。行内样式使用元素标签的 STYLE 属性定义。 html head title行内样式表示例/title /head body p style=font-family:华文彩云;庐山美景——小天池/p p style=font-weight:bold小天池位于庐山牯岭北面，池中之水置于高山而终年不溢不涸。池后山脊上，屹立着一座白塔似的喇嘛塔。塔建于1936年。小天池山对面还有一怪石，远望似一雄鹰伸颈欲鸣。/p /body /html Company Logo * 内嵌样式 HTML HEAD TITLE应用样式/TITLE STYLE TYPE=text/css P { font-size:20px; color:blue; text-align:center