ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS+DIV Web ページのスタイルとレイアウトに精通している CSS テキスト効果_html/css_WEB-ITnose
CSS+DIV Web ページのスタイルとレイアウトに精通している CSS テキスト効果_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:51:311133ブラウズ
editer編集者は、CSSの基本的な構文を簡単に紹介し、段階的に、このブログ投稿を主に要約します画像を見てください:
次に、エディターが上の図に従って 1 つずつ説明します。興味のある方は、エディターと協力して次のコード例を実装してください。的
のフォント CSS では、FONT-FAMILY を使用してテキストのフォントを制御します。次に、例とその作用を見てみましょう。上記のコードについて、まず h2 を見てみましょう。 「font-family:bold,smallcircle;」とあるのですが、これはh2マークの中に太字がある場合は太字を使い、太字がない場合は小さい丸を使います。以下同様です。その効果は上の図に示されているとおりです。
to上記の小さな例では、1列目は.05インチ、2列目は0.5cm、3行目は12ポンド、4行目は4mmです。 5 行目は 2pc です。上記のコードから、CSS が font-size を通じてテキスト サイズを制御していることがわかります。
文字の色を表現する方法はたくさんありますが、h2 の color:rgb (0%、0%、80%) はパーセンテージで表示され、P マークは 16 進数で表現され、スパンマークは直接青になります。的文字
テキストの太さ テキストのもう 1 つの効果を読み続けます。太さの効果です。テキストの太さを 1 つずつ比較するために多くの線を使用します
<html><head> <title>文字字体</title><style><!--h2{ font-family:黑体, 幼圆;}p{ font-family:Arial, Helvetica, sans-serif;}p.kaiti{ font-family:楷体_GB2312, "Times New Roman";}--></style> </head><body> <h2>送别</h2> <p>长亭外，古道边，芳草碧连天。晚风拂柳笛声残，夕阳山外山。天之涯，地之角，知交半零落。一瓠浊酒尽余欢，今宵别梦寒。长亭外，古道边，芳草碧连天。问君此去几时来，来时莫徘徊。天之涯，地之角，知交半零落。人生难得是欢聚，惟有别离多。</p> <p class="kaiti">作者: 李叔同</p></body></html> 実行中の効果は次のとおりです。 :
100、200、300、400 の間には大きな違いはありません。500 までは表示効果は太字と同じですが、100 ～ 400 は視覚的には通常と同じです。
。サンプルコードと実行中の効果を見てみましょう:
<span style="font-size:18px;"><html><head> <title>文字大小</title><style><!--p.inch{ font-size: 0.5in; }p.cm{ font-size: 0.5cm; }p.mm{ font-size: 4mm; }p.pt{ font-size: 12pt; }p.pc{ font-size: 2pc; }--></style> </head><body> <p class="inch">文字大小，0.5in</p> <p class="cm">文字大小，0.5cm</p> <p class="mm">文字大小，4mm</p> <p class="pt">文字大小，12pt</p> <p class="pc">文字大小，2pc</p></body></html></span> 実行中の効果は次のとおりです:
下線、下線、取り消し線
サンプルコードと効果は次のとおりです 表示:
<span style="font-size:18px;"><html><head> <title>文字颜色</title><style><!--h2{ color:rgb(0%,0%,80%); }p{ color:#333333; font-size:13px;}p span{ color:blue; }--></style> </head><body> <h2>冬至的由来</h2> <p><span>冬至</span>过节源于汉代，盛于唐宋，相沿至今。《清嘉录》甚至有“<span>冬至</span>大如年”之说。这表明古人对<span>冬至</span>十分重视。人们认为<span>冬至</span>是阴阳二气的自然转化，是上天赐予的福气。汉朝以<span>冬至</span>为“冬节”，官府要举行祝贺仪式称为“贺冬”，例行放假。《后汉书》中有这样的记载：“<span>冬至</span>前后，君子安身静体，百官绝事，不听政，择吉辰而后省事。”所以这天朝庭上下要放假休息，军队待命，边塞闭关，商旅停业，亲朋各以美食相赠，相互拜访，欢乐地过一个“安身静体”的节日。</p> <p>唐、宋时期，<span>冬至</span>是祭天祭祀祖的日子，皇帝在这天要到郊外举行祭天大典，百姓在这一天要向父母尊长祭拜，现在仍有一些地方在<span>冬至</span>这天过节庆贺。</p></body></html></span>
実行効果は次のとおりです。
text-transform 属性では、capitalize (単語の最初の文字が大文字)、uppercase (すべて大文字)、 lowerca (すべて小文字) である必要があります。私たちのレンダリングは、優れた比較を提供します。 Google のロゴをシミュレートする簡単な例を使用します。サンプル コードと動作効果は次のとおりです。
動作効果は次のとおりです。
編集者からのメッセージ: このブログ投稿では、編集者は主に、テキストのフォント、テキストのサイズ、テキストの色、テキストの太さ、テキストの斜体、下線、アンダーライン、取り消し線、英語の大文字と小文字など、CSSのテキスト効果を紹介します。文字、これらは CSS でテキストを設定するための基本的な知識です。重要なのは、CSS でインターフェイスを生き生きと動かすことです。まだ終わっていません。継続してください。