CSSコードの書式設定-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSコードの書式設定

巴扎黑

Aug 09, 2017 pm 03:48 PM

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>12

Example

<!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 サイトでよく見られます:
CSSコードの書式設定

上の図の元の価格の取り消し線は、次のコードを使用して実現できます:

 .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/imghwm/default1.png"  data-src="http://img.com/2000200.jpg"  class="lazy"    alt="CSSコードの書式設定" ></div></body></html>123456789101112131415

以上がCSSコードの書式設定の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AM

Pavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました

セクション要素との取引Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

graphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AM

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます！そして、それは私が完璧になったことがあります

コンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか？Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 中国語版

中国語版、とても使いやすい

Dreamweaver Mac版

ビジュアル Web 開発ツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。