css设置文本格式笔记

最新推荐文章于 2020-04-03 13:25:27 发布

able陈

最新推荐文章于 2020-04-03 13:25:27 发布

阅读量289

点赞数

分类专栏： html 文章标签： css文本笔记

本文链接：https://blog.csdn.net/qq_42330141/article/details/86765048

版权

html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

长度单位

px(piexl):像素，属于相对单位，会根据显示器的不同而呈现不同的大小。
em:是以当前自负的高度为单位，font-size的大小为基准，如果没有就采用默认值。
cm,in,mm,pt(点数),pc(印刷单位)=12pt.这些都是绝对单位，这些都不经常使用。
使用px外单位时候要写具体如：1cm

关于字体的设置使用font-*******

1.字体font-family

font-family:黑体, Arial, “Times New Roman”;
使用逗号设置多个预备选项

2字体的倾斜效果font-style

倾斜字体其实是一种单独存在的字体，称为oblique体,不经常使用，我们平常在word等文字软件中使用的倾斜其实是一种文字的拉伸成为italic体
font-style:italic;
font-style:oblique;
font-style:normal;(默认值)

3字体的加粗效果font-weight

normal bold lighter 100-900
效果可以设置为以上的几种，但是在浏览器中一般指区分normal和bold;
font-weight:bold;
font-weight:normal;

4控制文字大小font-size

使用的单位可以是开头介绍的任意一个
font-size:21px;
font-size:2em;
font-size:200%(基于当前的字体大小的两倍)

关于文字的整体布局使用text-****

设置字体装饰text-decoration

类型: none underline line-through(删除线) overline(上划线) blink(文字闪烁,一般都不支持)
text-decoration:underline;
text-decoration:overline;

设置首行缩进text-index

text-index:2em
首行缩进两个字符
还有一种特殊的缩进：首行悬挂缩进
padding-left:2em;(使文本整体缩进两个字节)
text-index:-2em;(使用负值)

设置文本的水平位置text-align

center left right justify(两端对齐)
text-align:center;
text-align:justify;

英文字母的大小写转换

text-transform:uppercase;
text-transform:lowercase;
text-transform:capitalize;(首字母大写)

其他几个经常使用的设置

控制字词间距：word-spacing(控制单词之间的间距） letter-spacing(控制字母之间的间隔)
控制汉字之间的间隔:使用的使letter-spacing，使用word-spacing无效
设置段落内的行高:line-height:倍数/长度/百分比(相对于font-size)

设置段落之间的间距margin:(x1,x2)

x1:上间距 x2:下间距
外间距，相对于padding:

最后通过代码总结

<html>
	<head><title>文本</title>
	<style type="text/css">
h3{
 font-style:italic;
 text-decoration:line-through;
 background-color:blue;
 text-align:center;
 color:white;
 }
p{
 font-family:黑体;
}
.chinese
{
 letter-spacing:5px;
 background-color:black;
 color:white;
 border:1px blue solid;
}
.English{
 font-weight:bold;
 letter-spacing:5px;
 word-spacing:50px;
 text-transform:capitalize;
 color:yellow;}
span{
 font-size:2em;
 float:left;
}
.p2{
 text-index:2em;
 line-height:2em;
 text-decoration:underline;
 line-height:200%;
 margin:50px 0;
 padding:50px;
 border:1px black solid;
}
</style>

	</head>
	<body>
	<h3>文本段</h3>装的仅仅是半杯水，遇见的那个人依然似乎无法填补内心的空洞，时间一点一点地过去，水也一点一点地蒸发掉，你开始觉得他越来越无法满足你的全部幻想全部期待，对望的时候，彼此的眼里充满了空洞犹疑。杯子里面的水终于全部消失。</p>
	<p class="p2">分离是如此容易的一件事，就连曾经淡淡的水痕都刹那间无影无踪。生活似乎回到了最初的样子，天依旧蓝得透心，城市依旧匆忙得落寞。只是你不明白，为什么在每一个狂欢之夜，隐藏在人群中望着烟花绽放的夜空，会一边默默地流泪，一边强作笑颜。你对自己说是因为感动于这绚烂，没错，一切都太绚烂，绚烂得已经让你不知所措，绚烂得已经让你相信一切希望与期待都未曾出现过。于是决定走开，带着一只空旷而干涸的杯子，有的时候一边走一边疑惑，世界那么大，为什么那么渺小孤单的一滴雨还是会打在自己的脸庞上呢，人潮汹涌，流走的水再也无法收集，过去的心境再也无法找寻。有的时候，你在一些奇怪的梦里恍惚地以为曾经的一汪水，还心满意足地躺在自己杯子里面，只有醒过来的时候才了解，即使是沧海，多年之后也化作了桑田</p>
	<p class="English">happy new year</p>
	</body>
	</html>

在这里插入图片描述

able陈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
css设置文本格式笔记

长度单位px(piexl):像素，属于相对单位，会根据显示器的不同而呈现不同的大小。em:是以当前自负的高度为单位，font-size的大小为基准，如果没有就采用默认值。cm,in,mm,pt(点数),pc(印刷单位)=12pt.这些都是绝对单位，这些都不经常使用。使用px外单位时候要写具体如：1cm关于字体的设置使用font-*******1.字体font-familyfont...
复制链接

扫一扫