CSS格式化排版--排版
1、文字排版--字体：利用font-family设置字体，注意设置的字体必须是本地电脑中存在的字体。
例子：class="MicrosoftYahei"的h1标签的字体设置为 宋体 ，效果如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
.MicrosoftYahei{
font-family: "宋体";
}
h1{
font-size: 20px;
}
</style>
</head>
<body>
<h1>默认字体</h1>
<h1 class="MicrosoftYahei">默认字体</h1>
<h1 class="MicrosoftYahei">微软雅黑</h1>
</body>
</html>
2、文字排版--字号、颜色：设置字号用font-size，设置颜色用color。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
h1{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>默认字体</h1>
<h2 >默认字体</h2>
</body>
</html>
3、文字排版--粗体、斜体：粗体用font-weight: bold，斜体用font-style: italic。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
.bold{
font-weight: bold;
}
.italic{
font-style: italic;
}
</style>
</head>
<body>
<span>我们来看看<a class="bold">粗体</a>是怎么样的</span>
<br>
<span>我们来看看<a class="italic">斜体</a>是怎么样的</span>
</body>
</html>
4、文字排版--下划线、删除线：下划线用text-decoration: underline，删除线用text-decoration: line-through。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
.old{
text-decoration: underline;
}
.new{
text-decoration: line-through;
}
</style>
</head>
<body>
<p>原价:<span class="old">200</span></p>
<p>甩卖价:<span class="new">20</span></p>
</body>
</html>
5、段落排版--缩进：用text-indent: 2em，表示缩进2个字，也就是4个字符。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
.p2{
text-indent: 2em;
}
</style>
</head>
<body>
<p class="p1">小兔子乖乖</p>
<p class="p2">把门开开</p>
</body>
</html>
6、段落排版--行间距：用line-height: 1.5em，设置为1.5倍行间距，也可以设置为具体的px值。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
.p2{
line-height: 1.5em;
}
.p4{
line-height: 200px;
}
</style>
</head>
<body>
<p class="p1">小兔子乖乖</p>
<p class="p2">把门开开</p>
<p class="p3">小兔子乖乖</p>
<p class="p4">把门开开</p>
</body>
</html>
7、段落排版--文字间距，字母间距：文字间距用word-spacing: 20px，字母间距用letter-spacing: 20px。
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
span{
letter-spacing: 20px;
}
.p1{
word-spacing: 20px;
}
</style>
</head>
<body>
<span>I love you!</span>
<p>happy birthday</p>
<p class="p1">happy birthday</p>
</body>
</html>
8、段落排版--对齐：让段落的内容进行对齐，用text-align: center。
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>CSS字体</title>
<style type="text/css">
p{
text-align: center;
}
</style>
</head>
<body>
<p>一山还有一山高</p>
</body>
</html>
CSS格式化排版--排版的更多相关文章
- Bootstrap全局CSS样式之排版
Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...
- div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出
今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...
- HTML CSS + DIV实现排版布局
HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...
- 通过HTML及CSS模拟报纸排版总结
任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...
- CSS格式化 CSS代码压缩工具
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- HTML+CSS学习笔记 (10) - CSS格式化排版
文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...
- 从零开始学习html（十）CSS格式化排版——下
六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...
- 从零开始学习html（十）CSS格式化排版——上
一.文字排版--字体 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...
随机推荐
- 剑指offer编程题Java实现——面试题9斐波那契数列
题目:写一个函数,输入n,求斐波那契数列的第n项. package Solution; /** * 剑指offer面试题9:斐波那契数列 * 题目:写一个函数,输入n,求斐波那契数列的第n项. * 0 ...
- 如何正确的使用Ubuntu以及安装常用的渗透工具集.
文章来源i春秋 入坑Ubuntu半年多了 记得一开始学的时候基本一星期重装三四次=-= 尴尬了 觉得自己差不多可以的时候 就吧Windows10干掉了 c盘装Ubuntu 专心学习. 这里主要来 ...
- Jenkins高危代码执行漏洞检测/开源漏洞靶场
漏洞细节可以参看安全客的文章:https://bbs.ichunqiu.com/thread-22507-1-1.html Jenkins-CLI 反序列化代码执行(CVE-2017-1000353) ...
- 使用onpaste粘贴事件引起的探索
前天项目有一个需求,在Excel文档里面直接复制商品编码,然后粘贴到页面空白处就把相应的数据加载出来.当时我是懵逼的,不知道如何下手. 以前没遇到过类似的需求,后来才想起onpaste事件 在使用on ...
- Springboot中读取.yml文件
自定义配置文件application-dev.yml spring: dataresource: druid: driver-class-name: com.mysql.jdbc.Driver url ...
- postgresql-分页重复数据探索
# postgresql-分页重复数据探索 ## 问题背景 许多开发和测试人员都可能遇到过列表的数据翻下一页的时候显示了上一页的数据,也就是翻页会有重复的数据. ### 如何处理? 这个问题出现的原因 ...
- GNum试用体验
只需在GNum上注册一个用户名,填上自己的电话号码,它就会自动生成一个URL,你的朋友(可以不注册GNum)在浏览器上进入这个 URL,就可以给你的手机打电话,目前可以免费通话200分钟,而且如果你邀 ...
- 使用go语言编写IOS和Android程序
go语言目前已可以用来开发android和ios手机app.相关资料: 1.IOS https://groups.google.com/forum/?utm_medium=email&utm_ ...
- 如何做自己的服务监控？spring boot 1.x服务监控揭秘
1.准备 下载可运行程序:http://www.mkyong.com/spring-boot/spring-boot-hello-world-example-jsp/ 2.添加服务监控依赖 <d ...
- Apollo 4 客户端 SDK 设计
前言 之前聊了客户端的一些功能,例如融入 Spring, @value 注解的自动刷新实现,长轮询等,这次从客户端的整体设计来聊聊. 设计 上图是 client 项目的包结构. 其中,核心包就是 in ...