CSSコードの書式設定
テキスト レイアウト – – フォント
CSS スタイルを使用して、Web ページ内のテキストのフォント、フォント サイズ、色、その他のスタイル属性を設定できます。次のコードは、Web ページのテキストのフォントを Song Diagnostics に設定する例を見てみましょう。
body{font-family:"宋体";}1ここで一般的ではないフォントを設定しないように注意してください。設定したフォントがユーザーのローカル コンピューターにインストールされていない場合、ブラウザのデフォルト フォントが表示されるからです。 (設定したフォント スタイルをユーザーが表示できるかどうかは、設定したフォントがユーザーのローカル コンピューターにインストールされているかどうかによって異なります。)
現在、ほとんどの Web ページでは、次のように「Microsoft Yahei」を設定するようになっています:
body{font-family:"Microsoft Yahei";}1または
body{font-family:"微软雅黑";}1注:最初の方法は 2 番目の方法よりも互換性があります。
このフォントは美しく、クライアントで安全に表示できるためです（通常、デフォルトでローカルにインストールされます）。
例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>认识html标签</title><style type="text/css">body{ font-family:"Microsoft Yahei";}span{ font-family:"宋体";}</style></head><body> <h1 id="三年级">三年级</h1> <p>三年级<span id="stress">三年级</span>三年级</p> <p>三年级</p></body></html>1234567891011121314151617181920テキストレイアウト – – フォントサイズ、色
次のコードを使用して、Web ページ上のテキストのフォントサイズを 12 ピクセルに設定し、フォントの色を #666 に設定できます。 (グレー):
body{font-size:12px;color:#666}1例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字号、颜色</title><style type="text/css">body{font-size:12px;color:#666;}.stress{font-size:20px;color:red;}</style></head><body> <h1 id="三年级">三年级</h1> <p>三年级<span class="stress">三年级</span>三年级</p> <p>三年级<span>三年级</span>三年级</p></body></html>12345678910111213141516テキスト レイアウト – – 太字
CSS スタイルを使用してテキストのスタイルを変更することもできます: 太字、斜体、下線、取り消し線。 次のコードを使用して、テキストのスタイルを変更することもできます。テキストを太字で表示するように設定します。
p span{font-weight:bold;}1ここでは、テキストに太字フォントを設定したい場合、それを実現するための別の CSS スタイルがあることがわかります。太字スタイルを実現するために h1-h6 や強力なタグを使用する必要はなくなりました。
例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>粗体签</title><style type="text/css">p span{font-weight:bold;}a{font-weight:bold;}</style></head><body> <h1 id="三年级时">三年级时</h1> <p>三年级时<span class="stress">三年级时</span>三年级时<a href="http://www.imooc.com">三年级时</a>三年级时</p> <p>三年级时</p></body></html>12345678910111213141516テキストレイアウト – – 斜体
次のコードは、ブラウザでテキストを斜体スタイルで表示することができます:
p a{font-style:italic;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>斜体样式</title><style type="text/css">p{ font-style:italic;
}a{ font-weight: bold; color: red; font-style: normal;}</style></head><body><p>三年级<a>三年级</a>三年级</p> </body></html>1234567891011121314151617181920テキストレイアウト – – 下線
一部テキストを視覚的に強調できる下線スタイルにテキストを設定したい場合は、次のコードを使用してそれを実現できます:
p a{text-decoration:underline;}<p> 三年级 <a> 四年级 </a> 五年级 </p>12Example
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>下划线样式</title><style type="text/css">a { text-decoration:underline;
}span { text-decoration:underline;}</style></head><body><p><span>三年级</span><a> 四年级 </a> 五年级 </p></body></html>123456789101112131415161718テキスト レイアウト – – 取り消し線
If Web ページに取り消し線を設定したい場合は、取り消し線をどうするか、このスタイルは電子商取引 Web サイトでよく見られます: 
上の図の元の価格の取り消し線は、次のコードを使用して実現できます:
.oldPrice{text-decoration:line-through;}1例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>删除样式</title><style type="text/css">.oldPrice{text-decoration:line-through;}</style></head><body><p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> </body></html>12345678910111213段落レイアウト – – インデント
中国語のテキストでは、段落の前にスペースを 2 つ残すのが通例です。この特別なスタイルは、次のコードで実現できます:
p{text-indent:2em;}<p>1922年的春天，一个想要成名名叫尼克卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>12注: 2em は、を意味します。テキストのサイズが 2 倍になります。
例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>缩进样式</title><style type="text/css">p{text-indent:2em;};</style></head><body> <h1 id="尼克-卡拉威">尼克?卡拉威</h1> <p>1922年的春天，一个想要成名名叫尼克?卡拉威（托比?马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p></body></html>123456789101112131415段落の組版 – – 行間隔 (行の高さ)
このセクションでは、段落の組版で重要な役割を果たす別の行間隔 (行の高さ) 属性 (line-height) について学習します。 )、次のコードは段落の行間隔を 1.5 倍に設定することを実装します。
p{line-height:1.5em;}<p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p>12例
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>行间距</title><style type="text/css">p{line-height:2em;}</style></head><body><p>菲茨杰拉德，二十世纪美国文学巨擘之一。</p></body></html>12345678910111213段落レイアウト – – 漢字間隔、文字間隔
漢字間隔、文字間隔設定:
文字間隔またはを設定したい場合ウェブページ レイアウト 文字間隔 は、次のコードに示すように、letter-spacing を使用して実現できます: h1{
letter-spacing:50px;
}...<h1 id="了不起的乔布斯">了不起的乔布斯</h1>12345
英語の単語間の間隔を設定したい場合はどうすればよいですか?これは、単語間隔を使用して実現できます。以下のコード:
h1{
word-spacing:50px;
}...<h1 id="welcome-nbsp-to-nbsp-iOS">welcome to iOS!</h1>12345<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>字间距</title><style type="text/css">h1{ letter-spacing:20px;}</style></head><body><h1 id="hello-nbsp-world-你好">hello world!你好！</h1></body></html>123456789101112131415
設定要素が英語の場合、文字間隔の設定は英単語の間隔ではなく、文字の間隔になります。
ブロック要素
内のテキストと画像に中央揃えのスタイルを設定したいですか? text-align スタイル コードを使用すると、テキストを中央揃えで表示できます。 h1{
text-align:center/left/right;
}<h1 id="了不起的乔布斯">了不起的乔布斯</h1>1234
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>对齐</title><style type="text/css">div{ text-align:center;}</style></head><body><div><img src="/static/imghw/default1.png" data-src="http://img.com/2000200.jpg" class="lazy" alt="CSSコードの書式設定" ></div></body></html>123456789101112131415
以上がCSSコードの書式設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7333
9
1627
14
1351
46
1263
25
1209
29
Vue におけるプレースホルダーの意味
May 07, 2024 am 09:57 AM
Vue.js では、placeholder 属性は、input 要素のプレースホルダー テキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベスト プラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。
携帯電話のフォーマット復元方法の秘密を公開（携帯電話の故障？心配しないでください）
May 04, 2024 pm 06:01 PM
現在では、電源が入らない、システムクラッシュなどの遅延が発生することは避けられませんが、使用中に携帯電話は私たちの生活に欠かせないものとなっています。私たちはしばしば途方に暮れますが、時にはこれらの問題に対する解決策が見つからないこともあります。携帯電話の問題を解決するために、この記事では携帯電話のフォーマットを回復し、携帯電話を通常の動作に戻すいくつかの方法を紹介します。データをバックアップする - 携帯電話をフォーマットする前に、写真や連絡先などの重要な情報が失われないように、携帯電話上の重要なデータとファイルをバックアップすることを検討してください。データのセキュリティを確保するため、またはファイルをクラウド ストレージ サービスに転送することを選択するために、コンピューターに接続してファイルをバックアップできます。システム内蔵の回復機能を使用する - シンプル
jsでのスパンの意味は何ですか
May 06, 2024 am 11:42 AM
スパン タグは、テキストにスタイル、属性、または動作を追加できます。 色やフォント サイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。
jsでレムは何を意味しますか
May 06, 2024 am 11:30 AM
CSS の REM は、ルート要素 (html) のフォント サイズに対する相対単位です。次の特性があります: ルート要素のフォント サイズに相対し、親要素の影響を受けません。ルート要素のフォント サイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。 応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォント サイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォント サイズを調整することで、グローバル フォント サイズを簡単に変更できます。
vueに画像を導入する方法
May 02, 2024 pm 10:48 PM
Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。
jsのノードとは何ですか
May 07, 2024 pm 09:06 PM
ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノード タイプには、要素ノード、テキスト ノード、コメント ノード、ドキュメント ノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページ コンテンツ、イベント処理、アニメーション、およびデータ バインディングを動的に作成するのに役立ちます。
ブラウザのプラグインは何語で書かれていますか?
May 08, 2024 pm 09:36 PM
ブラウザ プラグインは通常、次の言語で作成されます。 フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java
vscodeで不明な属性を設定する方法 vscodeで不明な属性を設定する方法
May 09, 2024 pm 02:43 PM
1. まず、左下隅にある設定アイコンを開き、設定オプションをクリックします。 2. 次に、ジャンプしたウィンドウで CSS 列を見つけます。 3. 最後に、不明なプロパティ メニューのドロップダウン オプションをエラー ボタンに変更します。 。
