中国式汽车零部件与汽车配套关系
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
创建基础页面
?创建一个基本的网页
设置文字的字体
?在HTML中，设置文字的字体需要通过 <font> 标记的face属性。 ?而在CSS中，则使用font-family 属性。针对上 述网页，在样式部分增加对 <p>标记的样式设置 如下： h1{
font-family: 黑体; } p{
font-family: Arial, Times New Roman; }
字号单位可以是像素，也可以是 em，1em=16px
设置文字装饰效果
text-decoration 属性设置
设置值 none underline
说明 正常显示 为文字加下划线
line-through
为文字加删除线
overline blink
为文字加顶线 文字闪烁，仅部分浏览器支持
设置段落首行缩进
p.one{ text-transform:capiຫໍສະໝຸດ Baidualize; }
/*
单词首字母大写 */
p.two{ text-transform:uppercase; } /* 全部大写 */
p.three{ text-transform:lowercase; }
/*
全部小写 */
控制文字的大小
p{ font-family: Arial, Times New Roman; font-size:12px; }
设置文字的加粗效果
?然而遗憾的是，实际上大多数操作系统和浏览
器还不能很好地实现非常精细的文字加粗设置，
通常只能设置“正常”和“加粗”两种粗细，分
别如下。
font-weight:normal
/*正常*/
font-weight:bold
/*加粗*/
转换英文字母大小写
? 例如下面 3个文字段落分别可以实现单词的首字母 大写、所有字母大写和所有字母小写。
课堂练习
制作网页背景图像效果 步骤 1、打开网页素材。 2、添加样式表并设置背景图 像的效果。
文本样式的控制
1 创建基础页面 2 设置文字的字体 3 设置文字的倾斜效果 4 设置文字的加粗效果 5 转换英文字母大小写 6 控制文字的大小 7 设置文字装饰效果 8 设置段落首行缩进 9 设置字词间距 10 设置段落内部的文字行高 11 设置段落之间的距离 12 控制文本的水平位置 13 设置文字与背景的颜色
单元目标
?背景样式的控制 ?文本样式的控制 ?图像样式的控制 ?网页中的导航 ?超级链接的控制 ?鼠标指针的控制 ?列表的控制 ?表格的控制 ?表单元素的控制
属性
颜色 文本属性
边框属性
定位属性 (position)
常用的样式属性
CSS名称
color font-size font-family text-align border-style border-width border-color top left width height z-index
设置文字的倾斜效果
?CSS中的font-style属性正是用来控制字体 倾斜的，它可以设置为“正常”、“意大 利体”和“倾斜”3种样式，分别如下： font-style:normal; font-style:italic; font-style:oblique;
设置文字的倾斜效果
?正常字体与“意大利体”，及“倾斜体” 的对比
背景图像平铺
? 在默认情况下，图像会自动向水平和竖直两个方 向平铺。
? 如果不希望平铺，或者只希望沿着一个方向平铺， 可以使用background-repeat 属性来控制。该属 性可以设置为以下 4种之一：
? repeat ：沿水平和竖直两个方向平铺，这也是默 认值。
? no-repeat ：不平铺，即只显示一次。 ? repeat-x ：只沿水平方向平铺。 ? repeat-y ：只沿竖直方向平铺。
说明
字体大小 字体 文本对齐 边框样式 边框宽度 边框颜色 顶部边距（上边距） 左边距 宽度 高度 z 轴索引号，用于层
背景样式的控制
1 背景颜色 2 背景图像 3 背景图像平铺
背景颜色
? 在HTML 中，设置网页的背 景颜色利用的是 <body>标 记中的 bgcolor 属性，而在 CSS中不但可以设置网页的 背景颜色，还可以设置文字 的背景颜色。
?Text-indent 属性是以 各种长度为属性值，为 了缩进两个字的距离。
?例如，对网页代码的 p2 段落进行如下设置： #p2{ text-indent:2em; }
设置段落首行缩进
?这里再举一个不太常用 的例子，如果希望首行 不是缩进，而是凸出一 定距离，也称为“悬挂 缩进”，请看如下代码： #p2{ padding-left:2em; text-indent:-2em; }
设置段落内部的文字行高
? 在HTML 中是无法控制段落中行与行之间的距离 的。
?在CSS中，使用line-height 可以控制行的高度， 通过它就可以调整行与行之间的距离。
设置值
说明
长度 倍数
数值，可以使用前面所介绍的尺度 单位
font-size 的设置值的倍数
百分比
相对于 font-size 的百分比
?在CSS中，网页元素的背景 颜色使用 backgroundcolor属性来设置，属性值 为某种颜色。
背景图像
?设置背景图像，使用background-image 属性实现。
?仍然以上面的实例为基础，在CSS样式部 分，增加如下样式代码： body{ background-image:url(bg.gif); }
设置字词间距
?在CSS中，可以通过 letter-spacing 和wordspacing 这两个属性分别控制字母间距和单词间 距。例如下面的代码： #p1{ font-style:italic; text-transform:capitalize; word-spacing:10px; letter-spacing:-1px; }
设置段落之间的距离
?下面介绍如何控制段落之间的距离。 ?例如为<p>标记增加一条 CSS样式，目的是给两
个段落分别增加 1像素粗细的红色实线边框，代码 如下： p{ border:1px red solid; margin:5px 0px; }
控制文本的水平位置
?text-align 属性设置