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格式化排版--排版的更多相关文章

  1. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  2. div介绍 盒子模型边框属性 CSS初始化 文字排版 边框调整 溢出

    今天学习的div,了解了div是干什么用的掌握了什么是盒子模型,以及div的外边距内边距以及边框,运用div和CSS给文字排版,利用边框的来做图像,div溢出的处理 CSS初始化: 精确排版的时候用这 ...

  3. HTML CSS + DIV实现排版布局

    HTML CSS + DIV实现排版布局 1.网页可以看成是由一个一个"盒子"组成,如图: 由上图可以看出,页面分为上(网站导航).中.下(版权声明)三个部分,中间部分又分为左(商 ...

  4. 通过HTML及CSS模拟报纸排版总结

    任务目的 深入掌握CSS中的字体.背景.颜色等属性的设置 进一步练习CSS布局 任务描述 参考 PDS设计稿(点击下载),实现页面开发,要求实现效果与 样例(点击查看) 基本一致 页面中的各字体大小, ...

  5. CSS格式化 CSS代码压缩工具

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  7. HTML+CSS学习笔记 (10) - CSS格式化排版

    文字排版--字体 我们可以使用css样式为网页中的文字设置字体.字号.颜色等样式属性.下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体. body{font-family:" ...

  8. 从零开始学习html（十）CSS格式化排版——下

    六.文字排版--删除线 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&q ...

  9. 从零开始学习html（十）CSS格式化排版——上

    一.文字排版--字体 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&qu ...

随机推荐

  1. Integer包装类源码分析

    版权声明:本文为博主原创文章,转载请注明出处,欢迎交流学习! 今天上班的途中在手机里看到几道关于Integer拆装箱的小题目,正好有点时间翻看了一下Integer类的源码,加上自己的一点思考,决定写点 ...

  2. Thinking in Java from Chapter 11

    From Thinking in Java 4th Edition 持有对象 // Simple container example (produces compiler warnings.) // ...

  3. Android 框架式编程 —— 起篇

    一般的,在开发的时候,写过的代码在需求变更后,发现需要改动非常多的地方,那么说明之前的代码的架构肯定是存在问题的. 下面我们结合面向对象的六大基本原则谈Android 框架式编程.首先先介绍一下面向对 ...

  4. 在虚拟机上安装redis集群，redis使用版本为4.0.5,本机通过命令客户端可以连接访问，外部主机一直访问不了

    在虚拟机上安装了redis 4 ,启动后本机客户端可以连接访问,但是外部主机一直访问不了,在使用java代码连接redis集群时报:no reachable node in cluster,原因:在r ...

  5. asp.net mvc 安全测试漏洞 " HTTP 动词篡改的认证旁路" 问题解决

    IBM Security Appscan漏洞筛查-HTTP 动词篡改的认证旁路漏洞,具体解决方案: 在Web.Config中system.webServer节点增加配置security: <se ...

  6. Linux链接脚本学习--lds

    一.概论 ld: GNU的链接器. 用来把一定量的目标文件跟档案文件链接在一起,并重新定位它们的数据,链接符号引用. 一般编译一个程序时,最后一步就是运行ld进行链接 每一个链接都被一个链接脚本所控制 ...

  7. SVN 分支主干的相互合并

    1.主干合并到分支 1在本地trunk中先update一下,有冲突的解决冲突,保证trunk和repository已经完全同步, 2.在/branches /MyProject上右键,依次选择”Tor ...

  8. hive中的子查询改join操作（转）

    这些子查询在oracle和mysql等数据库中都能执行,但是在hive中却不支持,但是我们可以把这些查询语句改为join操作: -- 1.子查询 select * from A a where a.u ...

  9. PL/SQL Developer从11.0.6版本开始32/64为之区分

    PL/SQL Developer从11.0.6版本开始32/64为之区分 在PL/SQL Developer11.0.6版本之前,64位Windows操作系统在使用PL/SQL Developer都未 ...

  10. Jstl标签汇总

    JSTL的核心标签库标签共13个,使用这些标签能够完成JSP页面的基本功能,减少编码工作. 从功能上可以分为4类:表达式控制标签.流程控制标签.循环标签.URL操作标签.  (1)表达式控制标签:ou ...