text-indent
text-indent文本缩进
通常我们用于段落首行缩进两个子的距离 text-indent:2em; em为字符单位
line-height
line-height行高
控制行与行之间的距离使用px单位行高就为确定值 可以使用em或百分比当使用从父类中继承的行高时继承的为计算后的行高
line-height属性也可以是没有单位的数值,表示字号的倍数,这是最方便的一种方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
/* 字体大小不变只改变行与行之间的距离 */
line-height:26px;
}
p {
/* 使用倍数方法对文本的行高进行设置,更加人性化。 */
font-size:15px;
line-height:1.25;
}
</style>
</head>
<body>
<div>中国人</div>
<p>所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失</p>
<p>所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失</p>
<p>所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失所有的热情都会在失望拒绝中慢慢消失</p>
</body>
</html>
单行文本垂直居中text-align和line-height
需要设置行高等于盒子高,line-leight 控制行与行之间的距离使用px单位行高就为确定值 可以使用em或百分比当使用从父类中继承的行高时继承的为计算后的行高
其次text-align:center使文本水平居中即可,,, text-align可以设定字体水平的对齐方式相关属性:left \| center \| right \| justify==只对块级元素有效可继承==
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
border: 1px solid #000;
width:300px;
height:300px;
background-color:orange;
color:#fff;
font-size:50px;
text-align:center;
line-height:300px;
}
</style>
</head>
<body>
<p>
小月月
</p>
</body>
</html>
font合写属性
- 简写font:后面依次 font-style font-weight font-size/line-height font-family
字体设置简写必须有font-size font-family
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
text-indent:2em;
font:italic bold 20px/1.5 serif,"微软雅黑";
}
h3 {
text-align:center;
}
</style>
</head>
<body>
<h3>陈情表</h3>
<p>臣密言:臣以险衅,夙遭闵凶。生孩六月,慈父见背;行年四岁,舅夺母志。祖母刘愍臣孤弱,躬亲抚养。臣少多疾病,九岁不行,零丁孤苦,至于成立。既无伯叔,终鲜兄弟,门衰祚薄,晚有儿息。外无期功强近之亲,内无应门五尺之僮,茕茕孑立,形影相吊。而刘夙婴疾病,常在床蓐,臣侍汤药,未曾废离。</p>
<p>逮奉圣朝,沐浴清化。前太守臣逵察臣孝廉,后刺史臣荣举臣秀才。臣以供养无主,辞不赴命。诏书特下,拜臣郎中,寻蒙国恩,除臣洗马。猥以微贱,当侍东宫,非臣陨首所能上报。臣具以表闻,辞不就职。诏书切峻,责臣逋慢。郡县逼迫,催臣上道;州司临门,急于星火。臣欲奉诏奔驰,则刘病日笃;欲苟顺私情,则告诉不许:臣之进退,实为狼狈。</p>
<p>伏惟圣朝以孝治天下,凡在故老,犹蒙矜育,况臣孤苦,特为尤甚。且臣少仕伪朝,历职郎署,本图宦达,不矜名节。今臣亡国贱俘,至微至陋,过蒙拔擢,宠命优渥,岂敢盘桓,有所希冀。但以刘日薄西山,气息奄奄,人命危浅,朝不虑夕。臣无祖母,无以至今日;祖母无臣,无以终余年。母、孙二人,更相为命,是以区区不能废远。</p>
<p>臣密今年四十有四,祖母今年九十有六,是臣尽节于陛下之日长,报养刘之日短也。乌鸟私情,愿乞终养。臣之辛苦,非独蜀之人士及二州牧伯所见明知,皇天后土,实所共鉴。愿陛下矜悯愚诚,听臣微志,庶刘侥幸,保卒余年。臣生当陨首,死当结草。臣不胜犬马怖惧之情,谨拜表以闻。</p>
</body>
</html>
文本大小写text-transform属性
text-transform属性
属性值capitalize表示将文本中每个单词以大写字母开头
属性值uppercase将文本中的单词的每个字母否转变成大写
属性值lowercase定义文本中单词都是小写字母