文字和图像的排版分析

合集下载

相关主题

文字排版设计欣赏

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

文字的排版
CSS文字样式
文字大小 CSS中文字大小是通过font-size属性控制的。如
font-size:12px; 长度单位PX，表示在浏览器上的1个像素的大小，这个是跟浏览器的分辨率有关，是个相对单位。长度单位em和ex，也是相对单位。1em相对表示的是其父元素中字母m的标准宽度， 1ex相对表示的是其父元素中字母x的标准高度。当父元素的文字大小变化时，使用这两个单位的子元素的大小会同比例变化。
Байду номын сангаасSS文字样式
文字的装饰效果
CSS中文字的装饰效果是通过text-decoration属性控制的。如
text-decoration: underline;
/* 下划线*/
text-decoration: overline;
/* 顶划线*/
text-decoration: line-through; /* 删除线*/
</body>
文字的排版
CSS文字样式
设置字体 CSS中字体是通过font-family属性控制的。如
font-family: Arial,”Times New Roman”;
font-family属性可以同时声明多种字体，字体间用逗号分隔开。另外一些字体的名称中间会有空格出现，这时需要用双引号将其引起来。
文字的排版
CSS文字样式
行高 CSS中文本行的行高是通过line-height属性控制的。如
line-height :18px; line-height :1.5; 请思考；对于文本字大小是12px的文本行来说，两种表示有什么不同？要实现首字母下沉，请问用哪种方式设置行高？
文字的排版
图像的排版
CSS图像样式
基本设置背景图像标题的图像替换 CSS图像阴影
文字加粗、倾斜与大小写 CSS中文字加粗是通过font-weight属性控制的。如
font-weight: normal; font-weight: bold; CSS中文字倾斜是通过font-style属性控制的。如 font-style: normal; font-style: oblique font-style: italic;
文字的排版
CSS文字样式
文字布局课堂练习；
文字的排版
CSS文字样式
段落的垂直对齐方式
css中的vertical-align属性只适用表格单元格中对象竖直方向的对齐属性，而对于一般的块级元素如div等都不起作用。
捷克的设计师给出一个比较完善的解决方案，用嵌套的三层 div加以实现。代码
文字的排版
CSS文字样式
文字加粗、倾斜与大小写
CSS中英文字母大小写是通过text-transform属性控制的。如 text-transform : capitalize; text-transform : uppercase; text-transform : lowercase;
文字的排版
<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>
商业网页设计与制作
第五讲文字和图像的排版
文字的排版
CSS文字样式
准备网页设置字体文字大小行高文字颜色与背景颜色文字加粗、倾斜与大小写文字的装饰效果文字的水平对齐方式文字布局段落的垂直对齐方式
文字的排版
CSS文字样式
准备网页(无样式）
CSS文字样式
文字颜色与背景颜色 CSS文字颜色是通过color属性控制的。如
color: blue; color: #0000ff; color: #00f; color: rgb(0,0,255); CSS背景颜色是通过background-color属性控制的。
文字的排版
CSS文字样式
text-decoration: blink;
/* 闪烁*/
文字的排版
CSS文字样式
文字的水平对齐方式 CSS文字的水平对齐方式是通过text-align属性控制的。如
text-align: center; CSS中段首缩进是通过text-indent属性控制的。如
text-indent: 2em