【CSS】学习笔记3 段落设置 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS学习2</title>
<!--单词间隔 word-spacing 
语法：word-spacing:取值
--> 
<!--字符间隔 letter-spacing
语法：letter-spacing:取值
--> 
<!--字符修饰 text-decoration
语法：text-decoration
说明：none不修饰，underline添加下划线，overline添加上划线，line-through添加删除线，bilnk文字闪烁效果
--> 
<!--垂直对齐方式 vertical-align
语法:vertical-align：对齐方式
--> 
<!--文本转换  text-transform
语法：text-transform:转换值
说明：none原始值，capitalize使每个单词的第一个字母大写；uppercase使每个单词所有字母大写；lowercase使每一个单词字母小写
--> 
<!--水平对齐方式 text-align
语法：text-align：排列值
说明：left左对齐，right右对齐，center居中对齐，justify两端对齐
--> 
<!--文本缩进 text-indent
语法：text-indent:缩进值
--> 
<!--文本行高 line-height
语法：line-height:行高值
--> 
<!--处理空白 white-space
语法:while-space:值
说明:nomal将连续的多个空格合并,pre空白会被浏览器保留,nowrap文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
--> 
<!--文本反排 unicode-bidi\direction
1.unicode-bidi:bidi-override|normal|embed
bidi-override严格按照direction属性的值重排序;nomal表示默认值;embed表示对象打开附加的嵌入层,在对象内部进行隐性重排序
2.direction:ltr|rtl|inherit
ltr:从左到右顺序阅读;rtl:从右到左顺序阅读;inherit:文本流的值不可继承
-->
<style type="text/css" >
<!--
.df {
    font-family: "新宋体";
    font-size: 14px;
    word-spacing: 3px;/*单词间隔*/
    letter-spacing: 3px;/*字符间隔*/
    text-decoration: underline;/*字符修饰*/
}
.ch {
    vertical-align: super; /*垂直排列方式*/
    font-family: "宋体";
    font-size: 12px;
}
.wordstyle1 {
    font-size: 14px;
    text-transform: capitalize;
}
.wordstyle2 {
    font-size: 14px;
    text-transform: uppercase;
}
.wordstyle3 {
    font-size: 14px;
    text-transform: lowercase;
}
.wordstyle4 {
    font-size: 14px;
    text-transform: none;
}
.k {
    font-family: "宋体";
    font-size: 10pt;
    text-align: left;/*水平对齐方式*/
    text-indent: 25px;/*文本缩进*/
    line-height: 25px;/*文本行高*/
    white-space: pre;/*处理空白*/
}
.shi {
    font-family: "隶书";
    font-size: 10pt;
direction: rtl unicode-bidi:bidi-override;
    writing-mode: vertical-rl;
}
</style>
</head>

<body class="k">
<h1>西游记介绍</h1>
<span class="df">《西游记》是中国古代第一部浪漫主义章回体长篇神魔小说。现存明刊百回本《西游记》均无作者署名。清代学者吴玉搢等首先提出《西游记》作者是明代吴承恩。<br>
全书主要描写了唐僧师徒五人经历九九八十一难去西天取得真经的故事。该小说以“唐僧取经”这一历史事件为蓝本，通过作者的艺术加工，深刻地描绘了明代社会现实。<br>
《西游记》是中国神魔小说的经典之作，达到了古代长篇浪漫主义小说的巅峰，与《三国演义》《水浒传》《红楼梦》并称为中国古典四大名著。《西游记》自问世以来在民间广为流传，各式各样的版本层出不穷，明代刊本有六种，清代刊本、抄本也有七种，典籍所记已佚版本十三种。鸦片战争以后，大量中国古典文学作品被译为西文，《西游记》渐渐传入欧美，被译为英、法、德、意、西、手语、世（世界语）、斯（斯瓦西里语）、俄、捷、罗、波、日、朝、越等语言。</span><br>
<br>
<br>
<b>垂直对齐方式例子 vertical-align</b><br>
5<span class="ch">2</span>-2<span class="ch">2</span>=21<br>
<br>
<br>
<b>文本转换例子  text-transform</b>
<p class="wordstyle1">just do it!</p>
<p class="wordstyle2">just do it!</p>
<p class="wordstyle3">just do it!</p>
<p class="wordstyle4">just do it!</p>
<span class="fk">层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。<br>
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</span> <span class="shi">床前明月光，疑是地上霜。
举头望明月，低头思故乡。</span>
</body>
</html>

 

posted @ 2021-01-28 11:02  木子欢儿  阅读(164)  评论(0)  编辑  收藏  举报