css设置文本格式笔记
长度单位
- 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>