CSS 排版

CSS文字排版:

我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

body{font-family:"宋体";}

这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)

现在一般网页喜欢设置“微软雅黑”,如下代码:

body{font-family:"Microsoft Yahei";}

body{font-family:"微软雅黑";}

注意:第一种方法比第二种方法兼容性更好一些。

因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

字号、颜色

可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):

body{font-size:12px;color:#666}

粗体、斜体、下划线、删除线

p span{font-weight:bold;}/*粗体*/

p a{font-style:italic;}/*斜体*/

p a{text-decoration:underline;}/*下划线*/

.oldPrice{text-decoration:line-through;}/*删除线*/

CSS段落排版:

缩进:中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:

p{text-indent:2em;}

<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>

注意:2em的意思就是文字的2倍大小。

行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。

p{line-height:1.5em;}

<p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>

中文字间隔、字母间隔设置:

如果想在网页排版中设置文字间隔或者字母间隔就可以使用    letter-spacing 来实现,如下面代码:

h1{

letter-spacing:50px;

}

...

<h1>了不起的盖茨比</h1>

注意:这个样式使用在英文单词时,是设置字母与字母之间的间距。

单词间距设置:

如果我想设置英文单词之间的间距呢?可以使用 word-spacing 来实现。如下代码:

h1{

word-spacing:50px;

}

...

<h1>welcome to imooc!</h1>

为块状元素中的文本、图片设置居中样式可以使用text-align样式代码,如下代码可实现文本居中显示。

h1{

text-align:center;

}

<h1>了不起的盖茨比</h1>

同样可以设置居左:

h1{

text-align:left;

}

<h1>了不起的盖茨比</h1>

还可以设置居右:

h1{

text-align:right;

}

<h1>了不起的盖茨比</h1>

时间: 2024-08-06 21:42:40

CSS 排版的相关文章

用css截取字符 css排版隐藏溢出文本

方法一: <div style="width:300px; overflow:hidden;  text-overflow:ellipsis; white-space:nowrap;"> 任意长度的字符串  </div> 说明:优点是内容可以为任何HTML元素,包括超链接和图片等,在IE6中还会在结尾自动显示省略号.缺点是必须指定宽度数值,并且宽度不能是百分数,否则在IE中会被认为是字符总长的百分比. 方法二: <input type="text

【笔记-前端】div+css排版基础,以及错误记录

现在的网站对于前端的排版已经逐渐不使用<table>,而是使用div+css. 使用这种方法的最大好处就在于在维护页面时,可以只维护css而不去改动html. 可是这种方式对于初学者来说可能不好理解,所以简单描述一下使用div+css排版基础. 下图是一个使用div+css排版的示例: html和css: <html> <head> <style> body{font-size:20px;font-weight:bold;color:white;} .bac

13.1 CSS排版观念

CSS的排版是一种很新的排版理念,完全有别于传统的排版习惯.它将页面首先在整体上进行<div>标记的分块.然后对各个块进行CSS定位,最后再在各个块中添加相应的内客.利用CSS排版的页面,更新起来十分容易,甚至连页面的拓扑结构,都可以通过修改CSS属性来重新定位. 在本章中,我们将就固定宽度的网页布局进行深入的剖析,并给出一系列的实例,使读者能够自如地掌握这些布局方法. 在过去使用表格布局的时候,在设计的最开始阶段,就要确定页面的布局形式.由于使用表格来进行布局,一旦确定下来就无法再更改了,因

14.5 CSS排版与传统的表格方式排版的分析

在学习完使用CSS的布局方法之后,再来回顾一下传统的使用表格布局的方法.实际上,在十多年前,互联网刚刚开始普及的时候,网页内容非常倚单,形式也非常单调.1997年,美国设计师David Siegel出版了一本里程碑式的网页制作指导书<Creating KillerWeb Sites>(创建杀手级网站),表明使用GIF透明间隔图像和表格可以创建出“魔鬼般迷人”的网站. 此后,使用表格布局几乎成为每一个设计师必须掌握的技术,而且Macromedia公司推出的Fireworks和Adobe公司的Ph

CSS排版页面

创建CSS文件如下: 1 @charset "utf-8"; 2 /* CSS Document */ 3 *{ 4 margin:0px; 5 padding:0px; 6 border:0px; 7 } 8 #box{ 9 width:1100px; 10 height:760px; 11 margin:auto; 12 } 13 #hen 14 { 15 width:1100px; 16 height:160px; 17 background-color:#936; 18 } 1

前端学习(十二):CSS排版

进击のpython 前端学习--CSS排版 本节主要介绍网页排版中主要格式化元素属性 帮助开发者把css技术与网页排版紧密联系到一起,来更好的实现网页设计效果 字体属性 字体 在日常工作中,我们会用到word来编写内容,比如可以对我们需要设置的内容设置字体.字号.颜色等设置 那么我们在网页中使用css样式时,同样也能做相关的设置 那我们可以试着为网页中的文字设置字体为微软雅黑 body{font-family:'微软雅黑'} 这里要注意不要设置不常用的字体,比如你给我来个'菲律宾体' 因为如果用

DIV+CSS排版问题技巧总结

首先,做网页,要把这个页面区块化,而div就是页面中的块,div有很多属性,比如宽,高等,这些都是div一些特征,而css是层叠样式表,他的作用对div进行样式应用,针对不用的div,应用不同的样式,当然在静态页面中如果你当很多样式进去就闲的页面臃肿,这样对于优化,对于控制页面都不利,所以我们把css样式放在页面的外部,当然也有一些放在页面中,这么做是因为有写css样式只针对一个独特的页面来应用的,针对排版,div的,float属性很重要,这个主要就是针对div浮动的. 思路: 1. 整个网页分

css 排版 test

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <style> ._ul>li, ._dl>dd { display: inline-block; /*行内块元素*/ } &l

css排版之-标准文档流

position:static(静态定位) 当position属性定义为static时,可以将元素定义为静态位置,所谓静态位置就是各个元素在HTML文档流中应有的位置 podisition定位问题.所以当没有定义position属性时,并不说明该元素没有自己的位置,它会遵循默认显示为静态位置,在静态定位状态下无法通过坐标值(top,left,right,bottom)来改变它的位置. position:absolute(绝对定位) 当position属性定义为absolute时,元素会脱离文档流