1、字体颜色、间距、首行缩进、对齐方式

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
#style1 {
font-family: "微软黑雅";
font-size: 20px;
color: black;
text-indent: 40px;
letter-spacing: 4px;
line-height: 40px;
}
#style2{
text-align: center;
font-family: "微软黑雅";
font-size: 30px;
}
</style>
</head> <body bgcolor="aquamarine">
<div id="style2">
<p>将进酒</p>
</div> <div id="style1">
<p>
君不见,黄河之水天上来,奔流到海不复回。 君不见,高堂明镜悲白发,朝如青丝暮成雪。 人生得意须尽欢,莫使金樽空对月。 天生我材必有用,千金散尽还复来。 烹羊宰牛且为乐,会须一饮三百杯。 岑夫子,丹丘生,将进酒,杯莫停。
</p>
<p>
与君歌一曲,请君为我倾耳听。 钟鼓馔玉不足贵,但愿长醉不复醒。 古来圣贤皆寂寞,惟有饮者留其名。 陈王昔时宴平乐,斗酒十千恣欢谑。 主人何为言少钱,径须沽取对君酌。 五花马,千金裘,呼儿将出换美酒,与尔同销万古愁。
</p>
</div> </body> </html>

标题设置的对齐方式为居中对齐

在段落里面有文本缩进:40px、行间距:40px

知识点总结:

(1)text-indent:首行缩进,作用于段落的首行,可以作用于<p>标签

(2)letter-spacing:字符间距

(3)line-spacing:行间距,由上间距、下间距和文字大小组成

(4)text-align:左对齐,右对齐,居中对齐(水平对齐方式)

(5)color:字体颜色,可以为十六进制、颜色英文、RGB(100%-0%)

2、首行缩进

<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
text-indent: 2em;
}
</style>
</head>
<body>
<p>
君不见黄河之水天上来,奔流到海不复回。
君不见高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
</p>
</body>
</html>

em是一个相对单位,就是当前文字的一个文字大小。

CSS——段落处理的更多相关文章

  1. 精通CSS+DIV网页样式与布局--CSS段落效果

    在上一篇博文中,小编主要详细的介绍了CSS是如何控制文字的显示效果,随着需求的不断变更,那么我们如何对段落进行相关操作,以达到我们想要的效果呢,接下来,为了需要,小编继续来完善CSS对段落的控制的显示 ...

  2. CSS段落对齐方式

    CSS段落对齐有两种方式:水平对齐和垂直对齐. 1.水平对齐: (1).text-align:left;         //左对齐 (2).text-align:right;      //右对齐 ...

  3. CSS 段落/换行/缩进

    CSS 段落/换行/缩进 1.盒模型 box-sizing: content-box|border-box|inherit; content-box(默认) : 实际宽度/高度 = width/hei ...

  4. css段落首字母下沉

    摘要: 段落首字母放大是指放大段落开头的字母或者汉字,主要使用了css的first-letter伪类选择器. 单行放大: 在第一行内放大,效果如下: <!DOCTYPE html> < ...

  5. css:段落文本两端对齐

    效果图: Css:

  6. css 段落文字换行问题

    项目中遇到的一个小问题,以前没有注意到: 超链接超出父级元素,想着给a标签加宽度但是没有效果... 后来发现两个很好用的css属性 1.word-wrap 用来控制换行 取值: (1)normal  ...

  7. css段落(后盾)

  8. css段落样式

    字间距 letter-spacing 首行缩进 text-indent

  9. 如何提升我的HTML&CSS技术,编写有结构的代码

    前言 之前写了四篇HTML和CSS的知识点,也相当于是一个知识点汇总.有需要的可以收藏,平时开发过程中应该会遇到这些点,到时候再查看这些博客可能更容易理解.从这篇开始更多的介绍开发过程经常让人头痛的前 ...

随机推荐

  1. Maven Wrapper(mvnw)

    Maven Wrapper Maven Wrapper是一个Maven插件,用于封装提供Maven项目构建时所需要的一切.这么说可能比较抽象,来举个具体的例子吧. 一个Maven项目由多人协作维护,某 ...

  2. 原来update还可以这么用,一切都是这么神奇。

    update sys_user_info a left join union_menber_info b on a.user_cardno = b.member_cardno set a.user_s ...

  3. odoo视图中常用widget

    widget="statusbar" 头部状态条标签 widget="email" 电子邮件地址标签 widget="selection" ...

  4. 《Java 8 in Action》Chapter 8:重构、测试和调试

    我们会介绍几种方法,帮助你重构代码,以适配使用Lambda表达式,让你的代码具备更好的可读性和灵活性.除此之外,我们还会讨论目前比较流行的几种面向对象的设计模式, 包括策略模式.模板方法模式.观察者模 ...

  5. python 25 类的成员

    目录 1. 类的私有成员 -- __ 1.1 类的私有静态属性 1.2 类的私有方法 1.3 对象的私有方法 2. 类的其他方法 2.1 类方法 @classmethod 2.2 静态方法 @stat ...

  6. cookies和sessionstorage和localstorage区别

    相同点:客户端都会存储 不同点 不同点 存储大小 有效时间 数据与服务器交互方式 cookies <=4K 在设置cookie过期之前一直有效(无论窗口浏览器是否关闭) 正常情况下,cookie ...

  7. HTML连载33-背景定位

    一.背景定位 同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色 1.在CSS中有一个叫做background-position:属性,就是专门用来控制背景图片的位置 ...

  8. 终于跑通分布式事务框架tcc-transaction的示例项目

    1.背景 前段时间在看项目代码的时候,发现有些接口的流程比较长,在各个服务里面都有通过数据库事务保证数据的一致性,但是在上游的controller层并没有对一致性做保证. 网上查了下,还没找到基于Go ...

  9. GCN和GCN在文本分类中应用

    1.GCN的概念        传统CNN卷积可以处理图片等欧式结构的数据,却很难处理社交网络.信息网络等非欧式结构的数据.一般图片是由c个通道h行w列的矩阵组成的,结构非常规整.而社交网络.信息网络 ...

  10. 重温Android和Fragment生命周期

    重温下Android和Fragment生命周期,理解生命周期方法的作用,什么时候调用,可以做一些什么操作. 1.Android生命周期 1.1 生命周期图 1.2 生命周期函数说明 onCreate: ...