美文网首页CSS学习笔记
前端开发学习笔记(六)- Css 文字排版

前端开发学习笔记(六)- Css 文字排版

作者: Showtime_ST | 来源:发表于2017-01-10 11:58 被阅读0次

一.文字排版--字体

我们可以使用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;}

相关文章

  • 前端开发学习笔记(六)- Css 文字排版

    一.文字排版--字体 我们可以使用CSS样式为网页中的文字设置字体,字号,颜色等样式属性。这里注意不要设置不常用的...

  • web前端入门基础

    web前端基础笔记 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了...

  • 2018-01-04

    Web学习笔记--从最基础的开始 一、web前端开发语言: HTML、 CSS 、JavaScript HTML:...

  • 收集前端学习资料

    前端的一些学习资源 html和css代码规范 前端知识体系 前端网址大全 学习CSS布局 通用 CSS 笔记、建议...

  • html&CSS(一)

    本文主要是起笔记的作用,内容来自慕课网. 认识HTML、CSS、JavaScript 学习web前端开发基础技术需...

  • CSS格式化排版

    CSS格式化排版 (1)文字排版 文字排版--字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式...

  • web开发的一些资源干货

    前端库——前端开发,CSS3动画特效等。 CSS入门教程——本指南适合 CSS 的初学者 学习CSS布局——如果你...

  • Web前端基础三剑客学习知识分享

    Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML、CSS、JavaScript。除此之外还要...

  • Web前端开发基础三剑客学习知识分享

    Web前端开发基础知识学习路线分享,前端开发入门学习三大基础:HTML、CSS、JavaScript。除此之外还要...

  • 如何能提高CSS编写技巧 提高Web前端开发效率

    如何能提高CSS编写技巧?怎么学好Web前端开发?很多人在学习Web前端时,刚开始都会学习HTML和CSS,HTM...

网友评论

    本文标题:前端开发学习笔记(六)- Css 文字排版

    本文链接:https://www.haomeiwen.com/subject/exykbttx.html