目次
CSS 外観属性
color: テキストの色
line-height: 行間隔
text-align: 水平方向の配置
text-indent: 1 行目のインデント
letter-spacing: 文字間隔
word-spacing: 単語間隔
ワードブレイク: 自動改行
色の半透明(CSS3)
テキストシャドウ(CSS3)
ホームページ ウェブフロントエンド CSSチュートリアル CSSの外観プロパティとは何ですか? CSS の外観プロパティの概要

CSSの外観プロパティとは何ですか? CSS の外観プロパティの概要

Aug 18, 2018 pm 04:19 PM

この記事では、CSS の外観属性とは何ですか? CSS の外観属性の紹介は、必要な場合に参考にしていただければ幸いです。

CSS 外観属性

color: テキストの色

color 属性は、値を取得する 3 つの方法があります:

  1. 赤、緑、青などの事前定義された色の値。

  2. #FF0000、#FF6600、#29D794 などの 16 進数。実際には、16 進数が色を定義する最も一般的な方法です。

  3. 赤などの RGB コードは、rgb(255,0,0) または rgb(100%,0%,0%) として表すことができます。

RGBコードのパーセントカラー値を使用する場合、値が0の場合パーセント記号は省略できず、0%と記述する必要があることに注意してください。

line-height: 行間隔

line-height 属性は、行間の距離、つまり文字の垂直方向の間隔である行間隔を設定するために使用され、一般に行の高さと呼ばれます。 line-height によく使用される属性値の単位は、ピクセル px、相対値 em、パーセント % の 3 つです。実際の作業で最もよく使用される単位はピクセル px です。

通常、行間隔はフォント サイズより約 7.8 ピクセル大きくなります。

text-align: 水平方向の配置

text-align 属性は、テキスト コンテンツの水平方向の配置を設定するために使用されます。これは、HTML の align 配置属性に相当します。利用可能な属性値は次のとおりです:

left: 左揃え (デフォルト値)

right: 右揃え

center: 中央揃え

text-indent: 1 行目のインデント

text-indent 属性は次の目的で使用されます。テキストの最初の行のインデントを設定するには、その属性値をさまざまな単位の値、em 文字幅の倍数、またはブラウザ ウィンドウの幅に対する割合で指定することをお勧めします。 em を設定単位として使用します。

1em は、漢字の段落の文字の幅です。

p {    line-height: 25px;/*行间距*/
    text-indent: 2em;/*首行缩进*/
    }
h3 {    
    text-align: center;/*水平对齐*/
    }
ログイン後にコピー

letter-spacing: 文字間隔

letter-spacing 属性は、文字の間隔を定義するために使用されます。いわゆる文字間隔は、文字間の距離です。その属性値はさまざまな単位の数値にすることができ、負の値が許可され、デフォルトは通常です。

word-spacing: 単語間隔

word-spacing 属性は、英語の単語間の間隔を定義するために使用され、中国語の文字には無効です。文字間隔と同様に、その属性値はさまざまな単位の値にすることができ、負の値が許可され、デフォルトは標準です。

英語では単語間隔と文字間隔の両方を設定できます。違いは、letter-spacing は文字間の間隔を定義するのに対し、word-spacing は英語の単語間の間隔を定義することです。

p {
    letter-spacing: 2px;/*字间距*/
    }
p {
    word-spacing: 5px;/*单词间距 针对英文 中文无效*/
    }
ログイン後にコピー

ワードブレイク: 自動改行

通常は、ブラウザのデフォルトの改行ルールを使用します。

break-all を使用すると、単語内で改行が可能になります。

keep-all は、半角スペースまたはハイフンでのみ行を折り返すことができます。

色の半透明(CSS3)

文字の色 css3では半透明形式を採用することができます。

color:rgba(r,g,b,a) a是alpha 透明的意思 取值范围 0~1之间 color:raba(0,0,0,0.3)
ログイン後にコピー

テキストシャドウ(CSS3)

テキストシャドウシャドウ

text-overflow:水平位置 垂直位置 模糊距离 阴影颜色;
ログイン後にコピー
説明
h-shadow 必須。水平方向の影の位置。負の値も許可されます。
v-shadow 必須。垂直影の位置。負の値も許可されます。
ぼかし オプション。ぼやけた距離。
カラー はオプションです。影の色。 CSS カラー値を参照してください。

最初の 2 つの項目は必須で、最後の 2 つの項目はオプションです。

関連する推奨事項:

CSS3 の外観属性を使用して、Elements_html/css_WEB-ITnose の外観を変更する

CSS マージン属性と使用法の概要

以上がCSSの外観プロパティとは何ですか? CSS の外観プロパティの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue 3 Vue 3 Apr 02, 2025 pm 06:32 PM

それは' Vueチームにそれを成し遂げてくれておめでとうございます。それは大規模な努力であり、長い時間がかかったことを知っています。すべての新しいドキュメントも同様です。

Redwood.jsと動物相を使用してイーサリアムアプリを構築します Redwood.jsと動物相を使用してイーサリアムアプリを構築します Mar 28, 2025 am 09:18 AM

最近のビットコインの価格が20k $ $ USDを超えており、最近30Kを破ったので、イーサリアムを作成するために深く掘り下げる価値があると思いました

ブラウザから有効なCSSプロパティ値を取得できますか? ブラウザから有効なCSSプロパティ値を取得できますか? Apr 02, 2025 pm 06:17 PM

私はこの非常に正当な質問で誰かに書いてもらいました。 Leaは、ブラウザから有効なCSSプロパティ自体を取得する方法についてブログを書いています。それはこのようなものです。

CI/CDで少し CI/CDで少し Apr 02, 2025 pm 06:21 PM

「ウェブサイト」は「モバイルアプリ」よりも適していると言いますが、Max Lynchからのこのフレーミングが好きです。

粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード 粘着性のあるポジショニングとサスのダッシュを備えた積み重ねられたカード Apr 03, 2025 am 10:30 AM

先日、Corey Ginnivanのウェブサイトから、この特に素敵なビットを見つけました。そこでは、スクロール中にカードのコレクションが互いに積み重ねられていました。

WordPressブロックエディターでのマークダウンとローカリゼーションを使用します WordPressブロックエディターでのマークダウンとローカリゼーションを使用します Apr 02, 2025 am 04:27 AM

WordPressエディターでユーザーに直接ドキュメントを表示する必要がある場合、それを行うための最良の方法は何ですか?

レスポンシブデザインのブラウザを比較します レスポンシブデザインのブラウザを比較します Apr 02, 2025 pm 06:25 PM

これらのデスクトップアプリがいくつかあり、目標があなたのサイトをさまざまな次元ですべて同時に表示しています。たとえば、書くことができます

フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? フレックスレイアウト内の紫色のスラッシュ領域が誤って「オーバーフロー空間」と見なされるのはなぜですか? Apr 05, 2025 pm 05:51 PM

フレックスレイアウトの紫色のスラッシュ領域に関する質問フレックスレイアウトを使用すると、開発者ツールなどの混乱する現象に遭遇する可能性があります(D ...

See all articles