失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > html图片与文字的排版6 前端开发学习笔记(六)- Css 文字排版

html图片与文字的排版6 前端开发学习笔记(六)- Css 文字排版

时间:2020-05-25 14:30:27

相关推荐

html图片与文字的排版6 前端开发学习笔记(六)- Css 文字排版

一.文字排版--字体

我们可以使用CSS样式为网页中的文字设置字体,字号,颜色等样式属性。这里注意不要设置不常用的字体,因为如果用户本电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体.)现在一般网页喜欢设置“微软雅黑”.

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

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

P:第一种方法比第二种方法兼容性好一些。因为这种字体既美观又可以在客户端安全的显示出来。

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

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

p span{font-weight:bold;}

我们还可以使用CSS样式来改变文字的样式:粗体,斜体,下划线,删除线。上面代码可以实现设置文字以粗体样式显示出来。

p a{font-style :italic};

上面代码可以实现文字以斜体样式在浏览器中显示.

p a{text-decoration:underline;}

有些情况下想为文字设置下划线样式,这样可以在视觉上强调文字。上面代码实现了文字下划线样式

p a{text-decoration:line-through;}

删除线样式

二.段落排版

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

p{text-ident:2em};2em的意思就是文字的2倍大小

行间距(行高):line-height

p{line-height:1.5em};

中文字间:letter-spacing

h1{letter-spacing:50px;}这个样式使用在英文单词时,是设置字母与字母之间的间距

字母间距:word-spacing

h1{word-spacing:50px;}设置英文单词之间的间距

对齐:text-align 为块元素中的文本,图片设置样式

h1{text-align:center;}

如果觉得《html图片与文字的排版6 前端开发学习笔记(六)- Css 文字排版》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。