继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

学习《HTML+CSS基础课程》的笔记---第十篇:CSS格式化排版

bzz
关注TA
已关注
手记 18
粉丝 62
获赞 255

1.文字排版------字体

为网页中的文字设置字体为宋体:body{font-family:"宋体";}

为网页中的文字设置字体为微软雅黑:body{font-family:"Microsoft Yahei";}

2.文字排版------字号、颜色

设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):body{font-size:12px;color:#666}

3.文字排版------粗体

使用下面代码实现设置文字以粗体样式显示出来:p span{font-weight:bold;}

4.文字排版------斜体
以下代码可以实现文字以斜体样式在浏览器中显示:p a{font-style:italic;}

5.文字排版------下划线

下面代码可将文字设为下划线样式:p a{text-decoration:underline;}

6.文字排版------删除线

某些文字上的删除线使用以下代码就可实现:.oldPrice{text-decoration:line-through;}

7.段落排版------缩进

中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:p{text-indent:2em;}

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

8.段落排版------行间距(行高)

如下代码实现设置段落行间距为1.5倍:p{line-height:1.5em;}

9.段落排版------中文字间距、字母间距

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

10.段落排版------单词间距

如果想设置英文单词之间的间距,可以使用 word-spacing来实现。如下代码:h1{word-spacing:50px;}

11.段落排版------对齐

为块状元素中的文本、图片设置居中样式,可用如下代码:h1{text-align:center;};同样可以设置居左:h1{text-align:left;};还可以设置居右:h1{text-align:right;}

打开App,阅读手记
8人推荐
发表评论
随时随地看视频慕课网APP