Forever

Do one thing at a time, and do well.

css之文本属性

CSS文本属性知识整理总结:

1.字间距:

letter-spacing: 合法的尺寸单位|normal;
可以设置负值,当设置成负值时,字间距会比正常间距小
normal:正常的字间距

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>字间距</title>
<style type=”text/css”>
div{
/*letter-spacing: 10px;*/
letter-spacing: -4px;
letter-spacing: normal;
}
</style>
</head>
<body>

<div>文案策划网</div>

</body>
</html>

2.行高:行高可以控制行与行之间的间距,但不是行间距。一行的高度

line-height: 值;
1.合理的行高 normal 默认值
2.尺寸单位 固定的行高
3.数字 当前字体尺寸的倍数来设置行高
4.百分比 当前字体尺寸的百分比来设置行高
行高经常用来使单行文本垂直居中

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>行高</title>
<style type=”text/css”>
div{
font-size: 20px;
/*line-height: 40px;*/
/*line-height: 3;*/
line-height: 200%;
}
p{
width: 300px;height: 100px;background: #00AEFF;
line-height: 100px;
}
</style>
</head>
<body>

<div>文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网文案策划网</div>

<p>文案策划网</p>

</body>
</html>

3.首行缩进

text-indent: 尺寸单位;
1.默认值: 0
2.使用em作为首行缩进的尺寸单位,1em就表示一个汉字的长度
3允许使用负值,首行会缩进到左边
4.使用百分比,基于父元素宽度的百分比进行缩进,不建议使用

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>首行缩进</title>
<style type=”text/css”>
p{
/*font-size: 20px;*/
/*text-indent: 40px;*/
text-indent: 2em;
/*text-indent: -2em;*/
/*text-indent: 50%;*/
}
</style>
</head>
<body>

<p>近日,全球知名的美国科技公司IBM、亚马逊和微软,先后做出了一个惊人的重大决定:他们将暂时禁止美国警察使用他们公司的人脸识别技术。</p>

<p>如下图所示,美国《华盛顿邮报》就在过去几天里先后报道了这三家公司的决定,其中IBM的印度裔首席执行官Arvind Krishna,是于当地时间周一最先提出的这个打算,亚马逊在2天后做出了类似的宣布,微软公司则是在当地时间周四宣布的这一决定。</p>

<p>从这些报道来看,这三家公司是为了响应美国当前的反种族主义和警察暴力抗争活动的号召,同时也是碍于舆论场上一直存在的对于其人脸识别技术被美国警察等机构滥用的指控。</p>

</body>
</html>

4.水平排列方式:

text-align: left|right|center|justify;
1.left 默认值,文本排列到左边
2.right 文本排列到右边
3.center 文本排列到中间
4.justify 文本两端对齐,对单行文本无效。不建议使用

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>水平排列方式</title>
<style type=”text/css”>
div{
width: 300px;height: 40px;
line-height: 40px;background: #9ACD32;
margin: 100px auto;
/*text-align: left;*/
/*text-align: right;*/
/*text-align: center;*/
text-align: justify;
}
</style>
</head>
<body>

<!–<div>文案策划网</div>–>
<div>文案策划网<p style=”display: inline-block;width: 100%;”></p></div>
</body>
</html>

5.垂直对齐方式: 对行块元素,行内块级元素,表格元素有效

vertical-align: 值;
1.baseline 默认值,对齐父元素基线

2.sub 对齐下标
3.super 对齐上标
4.top 顶部对齐
5.bottom 底部对齐

6.middle 垂直居中对齐
7.text-top
8.text-bottom

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>垂直对齐方式</title>
<style type=”text/css”>
.a{
font-size: 40px;
background: red;vertical-align: middle;
}
.b{
font-size: 20px;
background: #2E8B57;
/*vertical-align: baseline;*/
/*vertical-align: sub;*/
/*vertical-align: super;*/
/*vertical-align: top;*/
/*vertical-align: bottom;*/
vertical-align: middle;
}
</style>
</head>
<body>

<!–<p>19.9 <sub>元</sub></p>
<p>19.9 <sup>元</sup></p>–>

<div>
<span class=”a”>19.9</span>
<span class=”b”>元</span>
</div>
</body>
</html>

6.文本修饰

text-decoration: 值;
1.underline 定义下划线
2.overline 定义上划线
3.line-through 定义删除线
4.blink 闪烁的文字效果 当前所有浏览器都不支持,低版本的火狐浏览器支持。不建议使用.

重要:默认值 none 表示没有

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>文本修饰</title>
<style type=”text/css”>
p{
/*text-decoration: underline;*/
/*text-decoration: overline;*/
/*text-decoration: line-through;*/
text-decoration: blink;
}
a{
text-decoration: none;
}
</style>
</head>
<body>

<!–<ins>文案策划网</ins><br />
<del>文案策划网</del>–>

<p>文案策划网</p>

<a href=”#”>文案策划网</a>

</body>
</html>

7.文本阴影

text-shadow: 值1 值2 值3 值4;
值1:水平阴影位置,必须。正值时,阴影在右,负值时,阴影在左
值2:垂直阴影位置,必须。正值时,阴影在下,负值时,阴影在上
值3:阴影模糊距离,可选值
值4:阴影颜色,合法颜色值。可选。默认和文字颜色相同

示例:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>文本阴影</title>
<style type=”text/css”>
p{
/*color: red;*/
font-size: 30px;font-weight: 700;
/*text-shadow: 2px 3px 2px black;*/

text-shadow: 0px 0px 2px red;
}
</style>
</head>
<body>
<p>西贝博客</p>
</body>
</html>

8.文本重置:Reset.css

reset.css参考写法,写法根据自己的要求来写,这里只是做一个样板:

body{font-size: 16px;font-family: “微软雅黑”;color: #222222;}
b{font-weight: normal;}
i{font-style: normal;}
a,a:hover,a:active{text-decoration: none;color: #222222;}

然后html文件中用link标签引用即可。如

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
<link rel=”stylesheet” type=”text/css” href=”reset.css”/>
<style type=”text/css”>
p{
text-indent: 30px;
}
div{
text-indent: 100px;
}
</style>
</head>
<body>

<p><span>文案策划网</span></p>
<div><img src=”wenancehua.png”/></div>

<a href=”#”>文案策划网</a>

</body>
</html>

西贝整理的学习笔记。

点赞

发表评论

邮箱地址不会被公开。 必填项已用*标注