css样式常用文字排版

css用于规范网页字体颜色、大小字号、字形等属性,使用户更好的浏览网页内容。

网页中最能传递思想和最常用的就是文字元素,文字既是网页的基础也是网页的主体。在文字上为了达到某些效果可以使用css添加一些样式属性来完成文字的排版。

网页中常常用到css来设置网页字体类型,如宋体、楷书、隶书等来改变网页显示文字的字体类型。

body{font-family:”宋体“;}

虽然我们可以在网页设计中给网页设置不同的字体,可是不设置了什么类型的字体用户都能看得到的,还必须要用户的电脑上也安装了相对应的字体才会显示设计者设置的字体否则浏览器会显示默认的字体,所以我们最好设置比较常用到的字体。

如现在网页比较常设置到的”微软雅黑“:

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

body{font-family:”Microsoft Yahei“;}

虽然是设置同一种字体,但是第二种方式比第一种方式的兼容性更高。

因为这种body{font-family:”Microsoft Yahei“;}字体更加美观和在客户端更安全的显示出来,而且一般的电脑都会安装Microsoft Yahei字体。


在设置网页输入的字体之后,还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线等方式来为网页中需要特殊效果来标明的文字设置不一样的样式。

如给<p>标签内的<span>标签设置粗体:

p span {font-weight:bold;}

<p>标签里面<span>标签里面的内容全部为粗体。</span></p>

font-weight:设置字体加粗、font-size:设置字体字号、color:设置字体颜色。

font-style:italic设置斜体文字、text-decoration:underline设置下划线。

text-decoration:line-through;设置删除线。


除了给文字设置一些效果外,我们其实还可以使用样式给每段文字在整体布局上也设置一些属性。

我们在输入文字的时候习惯性在每一段段落的前面留2个空格使文章的阅读感更好,可是给每一段段落都分别添加空格太麻烦。现在可以使用样式设置每一段段落前自动添加2个空格。

{text-indent:2em;}设置文章段落前添加空格,2em的意思是文字的2倍大小。

{line-height:2em;}line-height:属性设置段落内容行高间距。

{letter-spacing:20px;}设置文字和字母之间的间隔间距。

{text-align:center;}设置对齐属性,center属性值居中对齐。可以是标题、段落、div板块。

网页内文字是表达网页内容的基础也是主题,合理的文字排版会使用户更加方便的阅读和了解网页内容。

所以css样式对文字的排版很重要,在网页中是经常用到的需要掌握和熟悉。

发表评论