目录
CSS文本属性
text-indent 首行缩进
- text-indent属性定义首行文本内容之前的缩进量
- 常用单位是“em”，1em等于一个字符的宽度，2em等于两个字符的宽度
<style>
p {
font-size: 20px;
}
p span {
font-size: 2em; /*相当于 40px*/
}
.line2 {
text-indent: 2em; /*P首行缩进为2个字符大小*/
}
</style>
<body>
<p class="line1">
鞠婧祎，你真是 <span>太美</span>了吧
</p>
<p class="line2">
鞠婧祎是一位演员
</p>
</body>在使用em时，如果该标签的父级(直到<html>父级)没有规定font-size的大小，1em默认为浏览器规定的大小，一般为1em = 18p，如果规定了font-szie大小 1em = font-size大小
效果：
line-height 行高
- line-height属性定义行高
- 从一行文字的最顶部到下一行的最顶部之间的距离，就是行高
- line-height属性值可以是以px为单位的数值
- line-height属性值也可以是没有单位的数值，表示”字号的倍数“，这是最推荐的写法
- 实际工作中行高：“1.25”、“1.5”、“1.75”都是常用的倍数设置
- line-height属性值也可以是百分数，表示字号的倍数
| 示例 | 说明 |
|---|---|
| line-height:30px; | 行高为30px |
| line-height:2; | 行高为font-size的倍数，如果font-szie:20px;则line-height:2;表示行高为40px; |
| line-height:200%; | 行高为font-size的百分比，如果font-size:20px;则line-height:40px; |
| line-height:normal; | 取决于客户端使用的默认值 |
<style>
div {
border: 1px solid red; /*边框线:1像素 实线 红色*/
font-size: 20px; /*字体大小*/
}
.line1 {
line-height: 30px; /*行高为30px*/
}
.line2 {
line-height: 2; /*行高为字体2倍*/
}
.line3 {
line-height: 200%; /*行高为字体2倍*/
}
</style>
<body>
<div class="line1">行高为30px</div>
<div class="line2">行高为数值2</div>
<div class="line3">行高为200%</div>
</body>效果：
注：
- 推荐在设置line-height时使用无单位数值
- 主段落内容的line-height至少应为1.5
- 如果文字的大小要随页面的缩放而变化，请使用无单位的值，以保证行高也会等比例缩放
行文本垂直、水平居中
设置行高 = 盒子高度，就可实现单行文本垂直居中
使用text-align属性实现水平居中
text-align常用的三个属性值：
- left水平居左
- center水平居中
- right水平居右
<style>
div.left {
text-align: left;
}
div.center {
/* 文本居中对齐 */
text-align: center;
}
div.right {
text-align: right;
}
</style>
<body>
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</body>效果：
font 复合属性
- font属性可以用来作为“font-style”、“font-weight”、“font-size”、“line-height”、“font-famliy”属性的合写
/*
20px 表示字体大小
1.5 表示行高
Arial, "微软雅黑" 表示字体（英文写前边，中文写后边）
*/
font: 20px/1.5 Arial, "微软雅黑";
- font属性连写时，必须设置font-szie和font-famliy才能生效
- font-style和font-weight必须在font-size之前
font: bold 30px; /* 这种写法是错的,没有设置font-famliy不会生效 */
/* 正确写法 */
font: bold italic 20px/1.5 "宋体";
font: 20px/1.5 "宋体";
/* 错误写法 */
font: italic 20px/1.5 bold; /* font-weight必须写在font-size之前 */
font: 20px/1.5 bold "宋体"; /* font-weight必须写在font-size之前 */继承性
文本属性的继承性和就近原则
- 祖先元素设置，后代元素即生效
- 文本相关的属性普遍具有继承性，只需要给“祖先标签”设置，即可在后代所有标签中生效
<style>
.box {
font-size: 20px;
line-height: 1.5;
font-weight: bold;
font-family: "宋体";
text-align: center;
text-decoration: underline;
font-style: italic;
color: skyblue;
}
</style>
<body>
<h1>继承性</h1>
<div class="box">
<ul>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
<li>我是列表项</li>
</ul>
</div>
</body>效果：
就近原则：
- 继承的选择器，权重可以看做是0
<style>
/* （3,0,0） 注意：继承的选择器，权重可以看做是0，权重绝对没有选中的大*/
#box1 #box2 #box3 {
color: red;
}
/* （0,0,1）p标签是直接选中，权重最高，因此跟继承没关系 */
p {
color: skyblue;
}
</style>
<body>
<h2>在非继承的情况下，继承选择器权重为0</h2>
<div class="box1" id="box1">
<div class="box2" id="box2">
<div class="box3" id="box3">
<p>我是段落标签</p>
</div>
</div>
</div>
</body>效果：
- 在继承的情况下，选择器权重计算失效
<style>
/* 就近原则，谁描述的近，听谁的 */
#box1 #box2 {
color: red;
}
/* .box3描述距离p标签更近，所以，当前生效 */
.box1 .box3 {
color: green;
}
</style>
<body>
<h2>在继承的情况下，选择器权重计算失效，而是就近原则</h2>
<div class="box1" id="box1">
<div class="box2" id="box2">
<p>我是段落标签</p>
<div class="box3" id="box3">
<p>我是段落标签</p>
</div>
</div>
</div>
</body>效果：
word-spacing
word-spacing表示字间距，对中文是无效的，仅对英文字单词起作用
| 属性值 | 描述 |
|---|---|
| normal | 正常的单词间距，由当前字体或浏览器定义 |
| 长度 | 通过制定具体的额外间距来增加字体的单词间距 |
<style>
.f1 {
word-spacing: 50px; /*英文单词间间距*/
}
</style>
<body>
<h3 class="f1">注意观察，汉字与英文之间的显示区别</h3>
<h3 class="f1">display is different</h3>
</body>效果：
letter-spacing 字符间距
letter-spacing属性用于设置文本字符的间距表现
| 属性值 | 描述 |
|---|---|
| normal | 按照当前字体的正常间距确定的 |
| 长度 | 置顶文字间的间距以代替默认间距，可以使负值，如-10px |
<style>
.f1 {
letter-spacing: 30px; /*字简距*/
}
</style>
<body>
<h3 class="f1">注意观察，汉字与英文之间的显示区别</h3>
<h3 class="f1">display is different</h3>
</body>效果：
列表样式
list-style-type
- list-style-type属性设置列表项标记的类型
| 值 | 描述 |
|---|---|
| none | 无标记。 |
| disc | 默认，实心圆 |
| circle | 空心圆 |
- 在实际开发中上面的标记基本不用
- 一般只需要把前面的标记去掉
- 如果需要相关标记类型，用做好的小图标来代替
<style type="text/css">
ul {
list-style-type: none; /*去掉标记*/
}
</style>
<body>
<ul>
<li>前端</li>
<li>java</li>
<li>大数据</li>
</ul>
</body>效果：
list-style-image
用来指定列表中的列表标记图像，几乎不用，了解就好
| 值 | 描述 |
|---|---|
| URL | 图像的路径 |
| none | 默认，无图像显示 |
| inherit | 从父元素继承 |
ul li {
/* 去掉默认小黑圆点 */
list-style-type: none;
list-style-image: url(images/dot.png);
}list-style-position
规定列表中列表项目标记的位置，几乎不用，了解就好
值 描述 inside 项目标记放置在文本以内，且环绕文本对齐 outside 默认值。保持标记位于文本左侧。项目标记放置在文本以外，且环绕文本不根据标记对齐 inherit 从父元素继承
| outside效果 | inside效果 |
 |  |
list-style
- list-style是list-style-type、list-type-position、list-style-image三个的综合写法
- 但在实际开发中，用的最多的是“list-style:none;”和“list-style-type:none;”
应用实践
单行文本水平垂直居中
<style>
.box{
width: 200px;
height: 50px;
border: 1px solid red;
text-align: center;
line-height: 50px;
}
</style>
<div class="box">
单行文本垂直水平居中
</div>效果：
设置中英文混合间距
将word-spacing与letter-spacing两者结合使用
<style>
h3 {
word-spacing: 20px;
}
h3 span {
letter-spacing: 20PX;
}
</style>
<body>
<h3>I love you <span>我的宝贝！</span></h3>
</body>效果：
新闻排版【重要】
<style>
h1 {
font-size: 30px;
text-align: center;
}
.desc {
text-indent: 0;
text-align: center;
font-size: 15px;
color: #666;
}
.desc > span {
color: red;
background-color: #ddd;
}
.desc > a {
color: red;
text-decoration: none;
}
p {
text-indent: 2em;
line-height: 2;
}
</style>
<body>
<h1>首个国产新冠特效药上市后首批抵深</h1>
<p class="desc">
<span>原创</span> 2022-07-12 09:57 · <a href="">南方日报</a>
</p>
<p>7月11日,新冠中和抗体安巴韦单抗和罗米司韦单抗联合疗法药品运抵深圳市第三人民医院</p>
<p>
南方日报讯
（记者/黄思华）7月11日，新冠中和抗体安巴韦单抗和罗米司韦单抗联合疗法药品交接仪式在深圳市第三人民医院举行。这是国产新冠特效药商业化上市后向市场供应的首批药物，共计100人份，每1人份的联合疗法是由安巴韦单抗1000毫克和罗米司韦单抗1000毫克组成，
全程在2—8℃冷链环境下储存。
</p>
<p>南方日报记者 朱洪波 摄</p>
</body>效果：
扫一扫
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
