CSS——NO.5(格式化排版)
*/
* Copyright (c) 2016,烟台大学计算机与控制工程学院
* All rights reserved.
* 文件名:text.cpp
* 作者:常轩
* 微信公众号:Worldhello
* 完成日期:2016年8月7日
* 版本号:V1.0
* 程序输入:无
* 程序输出:见运行结果
*/
文字排版--字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。
body{font-family:"宋体";}
这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
现在一般网页喜欢设置“微软雅黑”,如下代码:
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意:第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。
文字排版--字号、颜色
可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):
body{font-size:12px;color:#666}
文字排版--粗体
我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
在这里大家可以看到,如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了
文字排版--斜体
以下代码可以实现文字以斜体样式在浏览器中显示:
p a{font-style:italic;}
<p>我<a>有</a>一个梦想。</p>
文字排版--下划线
有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:
p a{text-decoration:underline;}
<p>我<a>有</a>一个梦想。</p>
文字排版--删除线
如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到:
上图中的原价上的删除线使用下面代码就可以实现:
.oldPrice{text-decoration:line-through;}
段落排版--缩进
中文文字中的段前习惯空两个文字的空白,这个特殊的样式可以用下面代码来实现:
p{text-indent:2em;}
<p>1922年的春天,一个想要成名名叫尼克卡拉威(托比?马奎尔Tobey Maguire 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
注意:2em的意思就是文字的2倍大小。
段落排版--行间距(行高)
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距(行高)属性(line-height),如下代码实现设置段落行间距为1.5倍。
p{line-height:2em;}
<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>
div{
text-align:center;
}
使用<div>(图片)</div>,可以使图片在屏幕中居中显示。
CSS——NO.5(格式化排版)的更多相关文章
- css学习の第二弹—文字格式化排版
1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...
- Web前端篇:CSS常用格式化排版、盒模型、浮动、定位、背景边框属性
目录 Web前端篇:CSS常用格式化排版.盒模型.浮动.定位.背景边框属性 1.常用格式化排版 2.CSS盒模型 3.浮动 4.定位 5.背景属性和边框属性 6.网页中规范和错误问题 7.显示方式 W ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- HTML+CSS学习笔记 (10) - CSS格式化排版
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- CSS格式化排版--排版
1.文字排版--字体:利用font-family设置字体,注意设置的字体必须是本地电脑中存在的字体. 例子:class="MicrosoftYahei"的h1标签的字体设置为 宋体 ...
- 从零开始学习html(十)CSS格式化排版——下
六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...
- 从零开始学习html(十)CSS格式化排版——上
一.文字排版--字体 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
- 了解HTML CSS格式化排版 文字排版
这里简单的写一些涉及到字体排版中常用到的属性, 大家可以学习查看, 也可以mark下以后看. font-family: "Micrsoft Yahei"; 设置字体 font-si ...
- css格式化排版
1,文字排版--字体 语法: body{font-family:"Microsoft Yahei";} 这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体 ...
随机推荐
- [Algo] 306. Check If Linked List Is Palindrome
Given a linked list, check whether it is a palindrome. Examples: Input: 1 -> 2 -> 3 -> 2 ...
- Codeforces Educational Round 81 解题报告
前置扯淡 赛前:这场\(Div2\)呀,那我写\(3\)题就行,\(D\)题尽力就好 赛中:啊啊,\(ABC\)我全过了\(pretest\),我太强了!!这把上蓝稳了 赛后:\(woc\),为啥被\ ...
- 微服务监控druid sql
参考该文档 保存druid的监控记录 把日志保存的关系数据数据库(mysql,oracle等) 或者nosql数据库(redis,芒果db等) 保存的时候可以增加微服务名称标识好知道是哪个微服务的sq ...
- HTMLTestRunner 报告框架使用
HTMLTestRunner 报告框架使用 file_path = base_path + '/Report/report.html' with open(file_path, 'wb') as f: ...
- MySQL_学习资料
https://mp.weixin.qq.com/s/qOmyaEEpVJTUMZYfomp3ug
- day35-子进程的开启
#1.异步非阻塞: import os from multiprocessing import Process def func(): print('子进程:',os.getpid()) if __n ...
- LGOJ1290 欧几里德的游戏
题目链接 P1290 and UVA10368 (双倍经验[虽然标签差距很有趣]) 题目大意 给定两个数\(n\)和\(m\),每次操作可以用较大数减去较小数的正整数倍,不可以减成负数. 先获得一个\ ...
- bzoj1076 奖励关(概率dp)(状态压缩)
BZOJ 1076 [SCOI2008]奖励关 Description 你正在玩你最喜欢的电子游戏,并且刚刚进入一个奖励关.在这个奖励关里,系统将依次随机抛出k次宝物,每次你都可以选择吃或者不吃(必须 ...
- chkconfig原理
ll /etc/rc.d 里面有运行级别对应的脚本 chkconfig --list sshd ll /etc/rc.d/rc3.d/ | grep sshd (查看3启动 里面 ...
- [LC] 61. Rotate List
Given a linked list, rotate the list to the right by k places, where k is non-negative. Example 1: I ...