文字和图像的排版
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS图像样式
CSS中英文字母大小写是通过text-transform属性控制的。如 text-transform : capitalize; text-transform : uppercase; text-transform : lowercase;
文字的排版
CSS文字样式
文字的装饰效果
CSS中文字的装饰效果是通过text-decoration属性控制的。如
font-weight: normal; font-weight: bold; CSS中文字倾斜是通过font-style属性控制的。如 font-style: normal; font-style: oblique font-style: italic;
文字的排版
CSS文字样式
文字加粗、倾斜与大小写
css中的vertical-align属性只适用表格单元格中对象竖直 方向的对齐属性，而对于一般的块级元素如div等都不起作用。
捷克的设计师给出一个比较完善的解决方案，用嵌套的三层 div加以实现。代码
图像的排版
CSS图像样式
基本设置 背景图像 标题的图像替换 CSS图像阴影
源自文库
图像的排版
商业网页设计与制作
第五讲 文字和图像的排版
文字的排版
CSS文字样式
准备网页 设置字体 文字大小 行高 文字颜色与背景颜色 文字加粗、倾斜与大小写 文字的装饰效果 文字的水平对齐方式 文字布局 段落的垂直对齐方式
文字的排版
CSS文字样式
准备网页(无样式）
<body> <h1>Head Line</h1> <p class="p1">he Internet Society mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. </p> <p class="p2"><span class="first Letter">T</Span>he Internet Society’s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society’s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.</p>
text-decoration: underline;
/* 下划线*/
text-decoration: overline;
/* 顶划线*/
text-decoration: line-through; /* 删除线*/
text-decoration: blink;
/* 闪烁*/
文字的排版
CSS文字样式
文字的排版
CSS文字样式
行高 CSS中文本行的行高是通过line-height属性控制的。如
line-height :18px; line-height :1.5; 请思考；对于文本字大小是12px的文本行来说，两种 表示有什么不同？要实现首字母下沉，请问用哪种方式设 置行高？
文字的排版
CSS文字样式
</body>
文字的排版
CSS文字样式
设置字体 CSS中字体是通过font-family属性控制的。如
font-family: Arial,”Times New Roman”;
font-family属性可以同时声明多种字体，字体间用逗号 分隔开。另外一些字体的名称中间会有空格出现，这时需 要用双引号将其引起来。
文字的水平对齐方式 CSS文字的水平对齐方式是通过text-align属性控制的。如
text-align: center; CSS中段首缩进是通过text-indent属性控制的。如
text-indent: 2em
文字的排版
CSS文字样式
文字布局 课堂练习；
文字的排版
CSS文字样式
段落的垂直对齐方式
文字的排版
CSS文字样式
文字大小 CSS中文字大小是通过font-size属性控制的。如
font-size:12px; 长度单位PX，表示在浏览器上的1个像素的大小，这 个是跟浏览器的分辨率有关，是个相对单位。 长度单位em和ex，也是相对单位。1em相对表示的 是其父元素中字母m的标准宽度， 1ex相对表示的是其父 元素中字母x的标准高度。当父元素的文字大小变化时， 使用这两个单位的子元素的大小会同比例变化。
文字颜色与背景颜色 CSS文字颜色是通过color属性控制的。如
color: blue; color: #0000ff; color: #00f; color: rgb(0,0,255); CSS背景颜色是通过background-color属性控制的。
文字的排版
CSS文字样式
文字加粗、倾斜与大小写 CSS中文字加粗是通过font-weight属性控制的。如
CSS中英文字母大小写是通过text-transform属性控制的。如 text-transform : capitalize; text-transform : uppercase; text-transform : lowercase;
文字的排版
CSS文字样式
文字的装饰效果
CSS中文字的装饰效果是通过text-decoration属性控制的。如
font-weight: normal; font-weight: bold; CSS中文字倾斜是通过font-style属性控制的。如 font-style: normal; font-style: oblique font-style: italic;
文字的排版
CSS文字样式
文字加粗、倾斜与大小写
css中的vertical-align属性只适用表格单元格中对象竖直 方向的对齐属性，而对于一般的块级元素如div等都不起作用。
捷克的设计师给出一个比较完善的解决方案，用嵌套的三层 div加以实现。代码
图像的排版
CSS图像样式
基本设置 背景图像 标题的图像替换 CSS图像阴影
源自文库
图像的排版
商业网页设计与制作
第五讲 文字和图像的排版
文字的排版
CSS文字样式
准备网页 设置字体 文字大小 行高 文字颜色与背景颜色 文字加粗、倾斜与大小写 文字的装饰效果 文字的水平对齐方式 文字布局 段落的垂直对齐方式
文字的排版
CSS文字样式
准备网页(无样式）
<body> <h1>Head Line</h1> <p class="p1">he Internet Society mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. </p> <p class="p2"><span class="first Letter">T</Span>he Internet Society’s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society’s mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.</p>
text-decoration: underline;
/* 下划线*/
text-decoration: overline;
/* 顶划线*/
text-decoration: line-through; /* 删除线*/
text-decoration: blink;
/* 闪烁*/
文字的排版
CSS文字样式
文字的排版
CSS文字样式
行高 CSS中文本行的行高是通过line-height属性控制的。如
line-height :18px; line-height :1.5; 请思考；对于文本字大小是12px的文本行来说，两种 表示有什么不同？要实现首字母下沉，请问用哪种方式设 置行高？
文字的排版
CSS文字样式
</body>
文字的排版
CSS文字样式
设置字体 CSS中字体是通过font-family属性控制的。如
font-family: Arial,”Times New Roman”;
font-family属性可以同时声明多种字体，字体间用逗号 分隔开。另外一些字体的名称中间会有空格出现，这时需 要用双引号将其引起来。
文字的水平对齐方式 CSS文字的水平对齐方式是通过text-align属性控制的。如
text-align: center; CSS中段首缩进是通过text-indent属性控制的。如
text-indent: 2em
文字的排版
CSS文字样式
文字布局 课堂练习；
文字的排版
CSS文字样式
段落的垂直对齐方式
文字的排版
CSS文字样式
文字大小 CSS中文字大小是通过font-size属性控制的。如
font-size:12px; 长度单位PX，表示在浏览器上的1个像素的大小，这 个是跟浏览器的分辨率有关，是个相对单位。 长度单位em和ex，也是相对单位。1em相对表示的 是其父元素中字母m的标准宽度， 1ex相对表示的是其父 元素中字母x的标准高度。当父元素的文字大小变化时， 使用这两个单位的子元素的大小会同比例变化。
文字颜色与背景颜色 CSS文字颜色是通过color属性控制的。如
color: blue; color: #0000ff; color: #00f; color: rgb(0,0,255); CSS背景颜色是通过background-color属性控制的。
文字的排版
CSS文字样式
文字加粗、倾斜与大小写 CSS中文字加粗是通过font-weight属性控制的。如