CSS+DIV Web ページのスタイルとレイアウト -- テキストスタイルと Paragraph_html/css

CSS+DIV Web ページのスタイルとレイアウト -- テキストスタイルと Paragraph_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:49:33

オリジナル

1341 人が閲覧しました

Web ページで最も重要なのはテキストです。Web ページの最も直接的な表現はテキストと画像、そしていわゆるフォームであると前回のブログで述べました。最初に最も馴染みのあるものと、よく使用されるテキストについて話します。 Web ページ内のテキストを CSS で制御できるようになり、Web ページ上のテキストが退屈で単調になることはなくなります。

1. テキストスタイル

テキストスタイルには主にテキストサイズ、色、フォントなどが含まれます。具体的には次のものが含まれます

上記のテキスト効果スタイルをすべて包括的に適用するための小さな例を作成します。

コード:

<html><head>	<title>文字字体</title><style>body{background-color:#99CCFF;}h2{font-family:楷体_GB2312, "Times New Roman";}h3{	font-family:"宋体";}p.bigsize {font-size: 0.5in;}p.smallsize {font-size: 0.5cm;}p.bluecolor {	color:#00CCFF;}p.yellowcolor {	color:#FFFF66;}p.bold{	font-weight:bold;}p.Italic{	font-weight:bold;	font-style:italic;}.line{	text-decoration:underline;}.line1{	text-decoration:blink;}.line3{	text-decoration:line-through;}.line4{	text-decoration:overline;}.zuozhe1{	text-transform:capitalize;/* 单词首字大写 */  }.zuozhe2{	text-transform:uppercase; /* 全部大写 */ }.zuozhe3{	text-transform:lowercase; /* 全部小写 */  }.joy{	color:#CC33CC;}</style>   </head><body>	<h2>人群中哭着-----楷体</h2> <h3>你只想变成透明的颜色-----宋体</h3>	<p class="bigsize">五月天        <span class="joy">你不是真正的快乐</span></p>      	<p class="smallsize">        阿信</p>	<p class="bluecolor">你再不回梦或痛或心动了-----蓝色</p>   	<p class="yellowcolor">你已经决定了 你已经决定了-----黄色</p>	<p class="bold">你已经决定了-----文字粗细：粗体</p>  	<p class="Italic">你静静忍着-----文字粗细+斜体</p>	<span class="line">紧紧把昨天在拳心握着-----下划线</span><br><span class="line1">而回忆越是甜就是越伤人-----文字的闪烁</span><br><span class="line3">  文字的删除线</span><br><span class="line4">越是在手心留下密密麻麻深深浅浅的刀割-----顶划线</span>	<br><br><span class="zuozhe1">作者: Claribel （英文字母首字母大写）</span><span class="zuozhe2">   作者: Claribel （英文字母全部大写）</span><span class="zuozhe3">   作者: Claribel （英文字母全部小写）</span></body></html>

ログイン後にコピー

実行中の効果:

2. テキストの段落

体系的に読者に提示される次に、明確な段落スタイルが非常に必要であることについて説明します。テキスト段落の一般的なスタイル。具体的な詳細については、次のブログを参照してください: CSS+DIV Web ページのスタイルとレイアウト??テキストスタイルと段落 (2)