6.cssテキストstyle_html/css_WEB-ITnose

テキスト スタイルは、テキストの効果とテキストの向きを目的としている限り、つまり、 テキスト スタイル と テキスト コントロール をまとめると、利用可能な属性の表があります。

属性名	説明	CSS バージョン
text-decoration	装飾テキストにさまざまなダッシュが表示されます	1
text-transform	英語のテキストを大文字に変換小文字	1
text-shadow	テキストシャドウに追加	3
text-align	テキストの配置を設定	1,3
white-space	空白の処理グラフィー	1
letter-spacing	設定 文字間の間隔	1
word-spacing	単語間の間隔を設定	1
line-height	行を設定身長	1
word-wrap	段落の単語を制御します	3
text-indent	テキストの最初の行のインデントを設定します	1

テキストスタイル

1.テキスト装飾

これらはテキスト内のさまざまな単語です 下線、次の値を選択できます:

value	Description
none	下線装飾付きのテキストをキャンセルします
underline	させてくださいテキストの下部に下線を表示します
overline	テキストの先頭に上線を表示します
ラインスルー	テキストの中央に取り消し線を表示します
blink	テキストを点滅させる、基本的には対応していません

2.text-transform

説明変換された値をデフォルトの状態に戻す英語の単語の最初の文字を大文字にする英語を変換する 英語をに変換します小文字

	値
	none
	大文字化
	大文字

/*让本来有下划线的超链接取消*/a {    text-decoration: none;}

3.text-shadow

テキストの影を追加します

p {    text-transform: uppercase;}

説明: text に影を追加します。 4 つの値があり、最初の値: 水平オフセット、2 番目の値: 垂直オフセット、3 番目の値: 影のぼかし (オプション)、4 番目の値: 影の色 (オプション)。

テキストコントロール

1.text-align

テキストの配置を指定します 以下の値が選択可能です: Description左揃え、デフォルト 右揃え中央揃えコンテンツを両端に揃える startテキストを開始境界に保持する (css3)endテキストを終了境界に配置する(css3)

	Value
	left
	right
	center
	揃え

🎜

p {    text-align: center;}

　　注意：这里使用标签的话会没有效果，所以应该使用分组标签。

2.white-space

　　处理空白排版方式

值	说明
normal	默认值，空白符被压缩，文本自动换行
nowrap	空白符被压缩，文本不换行
pre	空白符被保留，遇到换行符则换行
pre-line	空白符被压缩，文本会在排满或遇换行符换行
pre-wrap	空白符被保留，文本会在排满或遇换行符换行

　　

p {    white-space: nowrap;}

　　解释：浏览器在处理空白字符是时候有一个特性，当重复出现多个空白字符的时候，都把它们压缩成一个，下面是具体例子：

<span>Sc        olia</span><br />

<span>Sc olia</span>

　 上面两个显示效果是一样的，虽然第一行那里c和o相隔很多个空白字符，但浏览器会将它们压缩成一个。

　　而换行在默认条件下只有浏览器在一行显示不下就会自动换行，不管代码里是否是在一行内写完的，当然也可以通过设置改变这种默认行为。

3.letter-spacing

　　设置文本之间的间距

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

p {    letter-spacing: 4px;}

　　解释：这个设置类似word文档中的文字间隔。

4.word-spacing

　　设置英文单词之间的间距

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

p {    word-spacing: 14px;}

　　解释：单词的判定标准其实就是空格，类似于：

<span>scolia abc</span><span>你 好</span>

　　只要用空格将一段文本分隔，那么分隔后的两个部分就是单词了，对中文也有效。

5.line-height

　　设置段落行高

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”
数值	比如：1,2,3
%	比如：200%

p {    line-height: 200%;}

　　解释：类似word中的行距。

6.word-wrap

　　设置过长的英文单词是否断开

值	说明
normal	单词不断开
break-word	断开单词

p {    word-wrap: break-word;}

　　解释：如果一个的单词很长，但一个视口显示不下，默认是不断开的，此时会出现横向的滚动条，若设置了断开，这会在一行显示满了以后自动换行。

7.text-indent

　　设置文本首行的缩进

值	说明
normal	设置默认间距
长度值	比如：“数字”+“px”

p {    text-indent: 20px;}

 

　　解释：就是控制缩进的。

 

 　　这里总结一下：

　　文本样式：

　　　　1.各种划线

　　　　2.大小写转换

　　　　3.阴影

　　文本控制：

　　　　1.对齐方式

　　　　2.空白字符和换行处理

　　　　3.文字间距

　　　　4.单词间距

　　　　5.行高

　　　　6.单词断开

　　　　7.首行缩进