20180528-前端学习日志-CSS文本样式(1)

一、段落

1. 颜色属性color:

可以直接写颜色等。

2. 段落缩进属性text-indent:

  • 属性为em,意思是当前字体的倍数。首行缩进2字节即为2em。悬挂缩进为:<p style="text-indent:-2em;padding:2em">
  • 属性为%,意思是当前页面的百分比缩进。如10%,50%,这些都是相对值。
  • 其他长度属性如in/cm/mm,这些都是绝对值。还有像素点px。
3. 行高属性line-height:

可以为em,也可以不写。行高为当前字体的倍数。如果改为normal即为正常行高。

4. 文字对齐属性text-align:

left左/right右/center中/justify两端对齐

5. 英文单词间隔属性word-spacing:

例如word-spacing:30px 只对英文有用,对中文无用。

6. 字符间隔属性letter-spacing:

例如letter-spacing:10px 对中英文都起作用。所有字符间隔10px。

7. 文本转换属性text-transform:

  • uppercase/lowercase将所有英文转换成大写/小写
  • capitalize首字母大写

8. 文字装饰属性text-decoration:

underline/overline/line-through下划线、上划线、中穿线

9. 空格属性white-space:

默认值是normal。有个值pre和html里面的pre功能类似,都是直接显示。但是pre不会随着浏览器卷动。

这个时候就要用到pre-wrap,既有pre又有wrap的效果。而nowrap是直接成为一行不再保留原来的wrap效果。

pre-line合并空白保留换行。

10. 文字书写方向:direction:

默认ltr,从左到右。可以设置rtl从右到左。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Paragraph</title>
</head>
<body>
<h1>报告题目:How to Publish a Paper with IEEE</h1>
<p style="color:red">报 告 人:李军  教授,青年千人,中山大学</p>

<p style="line-height:1.5">报告时间:2018年05月29日(星期二)14:00<br>

报告地点:中国矿业大学南湖校区环测学院B109<br>

主 持 人:郑南山  教授<br>

<p style="text-indent:2em;
line-height:2;
text-align:justify;
word-spacing:10px;
letter-spacing:5px;
text-transform:capitalize;
text-decoration:underline overline line-through;
white-space:pre-wrap;
direction:rtl">
个人简介:李军,中山大学,教授、博士生导师,2013年入选中组部青年千人计划,主要研究方向为高光谱图像处理,在混合像元分解、分类等领域取得了一些创新性成果;
在遥感与社交媒体数据融合处理领域开展了探索性研究。发表SCI论文60多篇,SCI他引1040次,8篇ESI高被引论文。
获IEEE GRSS青年成就奖。担任期刊IEEE JSTARS副编辑,PIEEE、ISPRS JP&RS等期刊客座编辑;SPIE HPC大会联合主席等。
</p>
</body>
</html>

显示效果如下:



二、文字

1. 字体系列属性font-family:

  • serif 大部分的西方字体,有衬线。
  • sans-serif 相反,无衬线。
  • monospace 宽的字体,一般用于写程序代码表示终端输出。
  • cursive 类似于手写的字体。
  • fantasy 无法归类的字体,比如各种符号等。

如果出现备选字体,可以用逗号隔开。如font-family:Times,TimesNR,serif。

2. 字体倾斜属性font-style:

  • normal 不倾斜
  • italic 倾斜
  • obique 倾斜

italic是使用斜体字,obique是使文字倾斜。

3. 字体宽度font-variant:

small-caps 小型大写字母字体

4. 字体重量属性:font-weight:

可以用bold加粗

5. 字体大小属性font-size:

建议em,也可以px

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Paragraph</title>
</head>
<body>
<h1>报告题目:How to Publish a Paper with IEEE</h1>
<p style="color:red;font-style:italic">报 告 人:李军  教授,青年千人,中山大学</p>

<p style="line-height:1.5">报告时间:2018年05月29日(星期二)14:00<br>

报告地点:中国矿业大学南湖校区环测学院B109<br>

主 持 人:郑南山  教授<br>

<p style="text-indent:2em;

font-family:Times,TimesNR,serif;
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:2em">
个人简介:李军,中山大学,教授、博士生导师,2013年入选中组部青年千人计划,主要研究方向为高光谱图像处理,在混合像元分解、分类等领域取得了一些创新性成果;
在遥感与社交媒体数据融合处理领域开展了探索性研究。发表SCI论文60多篇,SCI他引1040次,8篇ESI高被引论文。
获IEEE GRSS青年成就奖。担任期刊IEEE JSTARS副编辑,PIEEE、ISPRS JP&RS等期刊客座编辑;SPIE HPC大会联合主席等。
</p>
</body>
</html>

显示效果:


猜你喜欢

转载自blog.csdn.net/weixin_40582630/article/details/80484961
今日推荐