CSS カラープロパティ、テキストプロパティ、プロパティの継承

HTML の基礎ゼロの必読書 - HTML の入門、プログラミングはとても簡単

第6章: カラー属性、テキスト属性

1. カラースタイル（カラー値方式）
- 1. color属性値の取得方法
2. フォントスタイル
3. テキスト属性
4. 属性の継承
要約する

1. カラースタイル（カラー値方式）

1. color属性値の取得方法

一般的な色の属性には、color とbackground-color が含まれます。プロパティ値:

英語の値:

赤、青など、関連する色を英語で直接適用します

16 進値:

色は「#」で始まる6桁の16進数値で表されます。6 桁の数字は 3 つのグループに分割され、各グループに 2 桁が含まれ、赤、緑、青の 3 色の強度を順に表します。

例: #FFFF99 詳細については、16 進カラーテーブルを参照してください。

手動で入力することも、スクリーンショットを撮るときにスクリーンショットツールを使用して色番号をコピーすることもできます。

3.rgb値

RGBとは、赤・緑・青の英語の頭文字をとったもので、光の三原色を指します。各色の値は 0 ～ 255 で、0 は何もない (黒) を表し、255 は最高の色の値 (白) を表します。

値: 0 ～ 255 の正の整数、パーセンテージも使用可能

たとえば、rgb(0,0,255) の場合、詳細については、RGB カラークエリの比較表を参照してください。

手動で入力することも、スクリーンショットを撮るときにスクリーンショットツールを使用して色番号をコピーすることもできます。

rgba値

rgba 値は、追加の a 属性 (アルファ) があることを除いて、rgb と同じです。a は透明度を表します。a の値の範囲は次のとおりです: 0~1

例: (0,0,255,0.5)

透明色透明

指定された値は透明色です

<head>
    <title>颜色取值</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        /* 1.英文取值法： */
        .p1{
      
      
            color: red;
            /* color: pink; */
        }
        /* 2.16进制取值法： */
        .p2{
      
      
            color: #FFCC00;
            /* color: #FF99FF; */
        }
        /* 3.rgb取值法：r:红  g:绿 b:蓝色 三原色
          取值：0~255正整数 也可以百分比  */
        .p3{
      
      
           color: rgb(23, 187, 45);
        }
        /* 4.rgb取值法:和rgb一样 只是多了一个a属性(alpha) a代表透明度
          a取值范围: 0~1
         */
        .p4{
      
      
            color: rgba(123, 34, 255,0.5);
        }
        /* 5. 透明的颜色 transparent，使文字变得透明 */
        .p5{
      
      
            color:transparent ;
        }
    </style>
</head>
<body>
    <p class="p1">你好，我是p1</p>
    <p class="p2">你好，我是p2</p>
    <p class="p3">你好，我是p3</p>
    <p class="p4">你好，我是p4</p>
    <p class="p5">你好，我是p5</p>
</body>

レンダリング：
ここに画像の説明を挿入します

2. フォントスタイル

Web ページ上のテキストの特性 (色、サイズ、太さ、配置など) を変更します。

1.カラー文字色

2.font-size フォントサイズ

値：数値、単位：px em、パーセンテージなど（1em=16px）

デフォルトのフォントサイズは 16 ピクセル、最小サイズは 12 ピクセルです。

3.font-style テキスト傾斜スタイル

プロパティ値:

italic はフォントを斜体にします

注: i と em を除く他のフォントは標準であり、デフォルトでは傾いていません。

4.font-weight フォントの太さ

プロパティ値:

太字は太字フォントを定義します

太字はより太字のフォントを定義します

ライターは細いフォントを定義します

Normal は通常のフォントサイズを定義します
。注: h1~h6、b、および Strong を除き、他のフォントはデフォルトで Normal になります。

5.font-family フォントタイプ、フォント名

一般的なフォントの種類: Song フォント、Hei フォント、Microsoft YaHei、Kai フォントなど。

値: 漢字に対応する対応フォントを直接引用します。例: フォントファミリー: ボールド;

注: 標準化のため、これらの値を引用するときは、英語では ' ' 一重引用符を使用できます。もちろん、引用符なしでもエラーは報告されません (例: font-family: 'Helvetica')。

<head>
    <title>字体样式</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        p,em,i{
      
      
            color: red;
            font-size: 15px;
        }

        /* 文字倾斜样式 */
        .p2{
      
      
            /* font-style：italic使字体倾斜 */
            font-style: italic;
        }
        em,i{
      
      
            /* font-style: normal使字体不倾斜 ，除了i 、em 以外，其他字体的都是默认normal*/
            font-style: normal;
        }

        /* 字体粗细 */
        .p1{
      
      
            /* bold 定义粗的字体 */
            font-weight: bold;
        }
        .p2{
      
      
            /* bold 定义更粗的字体 */
            font-weight: bolder;
        }
        .p3{
      
      
            /* lighter  定义更细的字体*/
            font-weight: lighter;
        }
        .p4{
      
      
            /* normal 定义正常字体大小，除了h1~h6，b，strong以外，其他字体的都是默认normal */
            font-weight: normal;
        }
        .p5{
      
      
            /* 用数值100~900来控制，取值只能是整百【不要px单位】 */
            font-weight: 900;
        }
        
        /* 字体类型，字体名称 宋体、黑体、微软雅黑、楷体等
        取值：直接引用相应字体对应中文汉字即可
        【为了规范，在引用这些值时，可以用英文状态下‘’单引号，当然不用引号也不会报错 】
        需要引入其他特殊字体时，通过外部引入*/
        .p1{
      
      
            /* font-family: 黑体; */
            font-family: '宋体';
        }
        .p2{
      
      
            font-family: '楷体';
        }

    </style>
</head>
<body>
    <p class="p1">你好，我是p1</p>
    <p class="p2">你好，我是p2</p>
    <em>你好，我是em</em>
    <i>你好，我是i</i>
    <p class="p3">你好，我是p3</p>
    <p class="p4">你好，我是p4</p>
    <p class="p5">你好，我是p5</p>
</body>

レンダリング：
ここに画像の説明を挿入します

6.line-height 行の高さ

値: 値 (px) パーセンテージ

テキストを垂直方向の中央に配置したい場合は、line-height の値を height の値と同じ高さに設定できます。

7.font-varian はテキストを小さな大文字で表示します

すべての小文字は大文字に変換されますが、すべての小文字はテキストの残りの部分に比べてフォントサイズが小さくなります。

値: font-variant: small-caps

<head>
    <title>字体样式</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1 {
      
      
            width: 200px;
            height: 300px;
            background-color: red;
        }

        .div1>p {
      
      
            /* display: inline-block; */
            width: 100px;
            height: 50px;
            border: 1px solid yellow;
            line-height: 50px;
        }

        /* 行高  line-height
        取值：数值（px）  百分比
        如果想要文字垂直居中，可设置line-height的值和height的值一样高就行了*/
        .div2 {
      
      
            width: 200px;
            height: 100px;
            border: 1px solid red;
            line-height: 50px;
        }
        /* 小型大写字母显示文本 这意味着所有的小写字母均会转换成大写，但是所有作用小型大写字母与其余文本相比，其字体尺寸更小。
         font-variant: small-caps */
        .div2>.two{
      
      
            font-variant: small-caps;
        }
    </style>
</head>
<body>
    <div class="div1">
        <p class="p1">你好，我是p1</p>
        <p class="p2">你好，我是p2</p>
        <p class="p3">你好，我是p3</p>
        <p class="p4">你好，我是p4</p>
        <p class="p5">你好，我是p5</p>
    </div>
    <div class="div2">
        <p class="one">hello ,html,css</p>
        <p class="two">hello ,html,css</p>
    </div>
</body>

レンダリング：
ここに画像の説明を挿入します

補足：vertical-align 垂直ベースライン配置属性

プロパティ値:

上: 上揃え

中央: 中央の位置合わせ

下: 下揃え

ベースライン: デフォルトの配置
前章で述べたベースラインの配置の問題に関しては、同じ配置属性値、上、中央、下配置を追加するというものです。詳細については、前章の第 3 章と第 4 章のベースライン調整の問題を参照してください。

3. テキスト属性

1.text-align 水平方向の配置

プロパティ値:

左揃え左揃え

中心を水平に揃える

右揃え右揃え

<style>
        .div1>p{
      
      
            width: 200px;
            height: 50px;
            background-color: thistle;
            margin-bottom: 10px;
        }
        /* 水平对齐方式： */
        .div1>.p1{
      
      
            /* 居左对齐 */
            text-align:left;
        }
        .div1>.p2{
      
      
            /* 水平居中对齐 */
            text-align:center;
            /* 加上行高line-height=height*/
            line-height: 50px;
        }
        .div1>.p3{
      
      
            /* 居右对齐 */
            text-align:right;
            text-indent: 10px;
        }
</style>
<body>
    <div class="div1">
        <p class="p1">这是我的对齐方式</p>
        <p class="p2">这是我的对齐方式</p>
        <p class="p3">这是我的对齐方式</p>
    </div>
</body>

レンダリング：
ここに画像の説明を挿入します

2.text-indent 1行目のインデント

値: 数値、単位 px em. 負の値も許可されます。負の値を使用すると、最初の行が左にインデントされます。

<style>
        /* 首行缩进
        取值：数值，单位px em 允允许使用负值。如果使用负值，那么首行会被缩进到左边。*/
        .div2{
      
      
            width: 500px;
            height: 150px;
            border: 1px solid red;
            text-indent: 20px;
            /* text-indent: -20px; */
        }
        
    </style>
    <div class="div2">
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
            这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。这是段落中的一些文本。
    </div>

レンダリング：
ここに画像の説明を挿入します

3. 文字装飾文字線スタイル

プロパティ値:

none デフォルト値、テキスト行なし。
通常、リンクの下線を消去するために使用されます。

下線下線

上線上線

line-through center line
注: del タグは取り消し線タグです。1 つはスタイル、もう 1 つはラベルです。

4.text-decoration-color 文字線色

<style>
        .div3>p{
      
      
            width: 200px;
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }

        /* 文本线样式 */
        .div3>.p1>a{
      
      
            /* none 默认值，没有文本线 */
            text-decoration: none;
        }
        .div3>.p2{
      
      
            /* underline 下划线 */
            text-decoration: underline;
        }
        .div3>.p3{
      
      
            /* overline 上划线 */
            text-decoration: overline;
        }
        .div3>.p4{
      
      
            /*  line-through 中划线
            del标签是删除线 */
            text-decoration: line-through;
        }

        /* 文本线颜色 */
        .div3>.p2{
      
      
            text-decoration-color: blue;
        }
        .div3>.p3,.div3>.p4{
      
      
            text-decoration-color: red;
        }
    </style>
    <div class="div3">
        <p class="p1"><a href="">我是超链接</a></p>
        <p class="p2">文本线</p>
        <p class="p3">文本线</p>
        <p class="p4">文本线</p>
        <p class="p5">￥99 <del>原价：299</del> 我是删除线</p>
        
    </div>

レンダリング：
ここに画像の説明を挿入します

5.text-transform 大文字と小文字の変換

プロパティ値:

なしデフォルト値、変更なし

最初の文字を大文字にする

Capitalize はすべての文字を大文字に変更します

小文字はすべての文字を小文字にします

6.文字間隔単語間隔

単語（文字と文字）の間、つまり文字間の距離を制御します。
属性値：数値、単位：px、em。

7.word-spacing 単語の間隔

単語間の距離、つまり単語自体が持つスペースの距離を制御します。
属性値：数値、単位：px、em。

2 つの違い:

文字間隔個々の漢字間の距離を制御し、文字や記号などの個々の文字間の距離も制御できます。もともと距離がなかったのに、無理やり距離を開けてしまったみたいな。

単語の間隔これは英語の単語間の距離を制御し、英語で書くときに単語を区切るためにスペースが使用されるため、通常は英語用に用意されています。中国語では、漢字の間にスペースがない場合にのみ有効になります。それは元々存在していた距離を再び制御することに等しい。。

<title>文本属性</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1>p{
      
      
            width: 200px;
            height: 50px;
            background-color: pink;
            margin-bottom: 10px;
        }
        
        /* 字母大小写转换 */
        .div1>.p1{
      
      
            /* none 默认值，不变 */
            text-transform: none;
        }
        .div1>.p2{
      
      
            /* 首字母大写 */
            text-transform: uppercase;
        }
        .div1>.p3{
      
      
            /* 字母全部变为大写 */
            text-transform: capitalize;
        }
        .div1>.p4{
      
      
            /* 字母全部变为小写 */
            text-transform: lowercase;
        }
        .div2>p{
      
      
            width: 500px;
            height: 50px;
            background-color: green;
            margin-bottom: 10px;
        }

        .div2>.p2{
      
      
            /* 控制字与字（单个字符）之间的距离 */
            letter-spacing: 30px;
        }
        .div2>.p3{
      
      
            /* 控制以空格间隔开文字的间距（空格本身的宽度）*/
            word-spacing: 30px;
        }
        /* letter-spacing和word-spacing的 区别： 
        1.letter-spacing 控制的是单个汉字之间的距离，也可控制字母，符号等单个字符的距离，就相当于原本没有距离，硬是给拉开的距离。 
        2. word-spacing 控制的是英语单词之间的距离，一般为英文准备的，因为英文书写的时候使用空格分开单词。在中文时，除非中文间有空格，才能生效。就相当于，原本就有的距离，再次去控制这个原本就存在的距离。
        */
    </style>
</head>
<body>
    <div class="div1">
        <p class="p1">HELLO,i love html and css</p>
        <p class="p3">HELLO,i love html and css</p>
        <p class="p2">HELLO,i love html and css</p>
        <p class="p4">HELLO,i love html and css</p>
    </div>
    <div class="div2">
        <p class="p1">你好,我是p。html and css ## ￥￥</p>
        <p class="p2">你好,我是p。html and css ## ￥￥</p>
        <p class="p3">你好,我是p。html and css ## ￥￥</p>
    </div>
</body>

レンダリング：
ここに画像の説明を挿入します

8.空白改行方法

プロパティ値:

通常のデフォルト値、通常の行折り返し

nowrap テキストが折り返されない

9.ワードブレイクロングワード行の折り返し方法

プロパティ値:

通常のデフォルト値。ブラウザのデフォルトの行折り返し方法を使用します。

ブレークオールでは単語内での改行が可能になります

keep-all は半角スペースまたはハイフンでのみ改行できます

<style>
       div{
      
      
           width: 150px;
           height: 100px;
           border: 1px solid red;
           margin-bottom: 10px;
           white-space: normal;
       }
       /* white-space 换行方式
        normal 默认值，正常换行
        nowrap 文本不换行*/
       .div2{
      
      
           white-space: nowrap;
       }

       .div3{
      
      
           /* *normal* 默认值，使用浏览器默认的换行方式 */
           /* break-all 允许在单词内换行 */
           /* word-break: break-all; */
           word-break: break-all;
       }
       .div4{
      
      
        /* keep-all* 只能在半角空格或连字符处换行。 */
           /* word-break: break-all; */
           word-break: keep-all;
       }
    </style>
</head>
<body>
    <div class="div1">
        我爱学前端，零基础学HTML+CSS。
    </div>
    <div class="div2">
        我爱学前端，零基础学HTML+CSS。
    </div>
    <div class="div3">
        I love learning front end.I love learning front end
    </div>
    <div class="div4">
        I love learning front end.I love learning front end
    </div>
</body>

レンダリング：
ここに画像の説明を挿入します

10. テキストのオーバーフローが楕円になる…

オーバーフローコンテンツは非表示になります。

オーバーフロー表示モード text-overflow 属性値: ellipsis は、トリミングされたテキストクリップを表す省略記号を表示します。デフォルト、クリップされたテキスト

単一行のテキストのオーバーフロー部分を省略記号に変更するには、次の 3 つの手順が必要です (必須)

White-space: nowrap; は非ラップ属性を与えるため、オーバーフローします

overflow:hidden; オーバーフロー部分は非表示になります

text-overflow: 省略記号はコンテンツをオーバーフローします...

<head>
    <title>溢出隐藏</title>
    <link rel="stylesheet" href="rest.css">
    <style>
        .div1{
      
      
            width: 200px;
            height: 200px;
            background-color: pink;

            /* 将单行文字溢出部分变为…省略号，要有以下三个步骤（必不可少） */
            /*给一个不换行属性，所以就会溢出  */
            white-space: nowrap;
            /* 溢出隐藏了 */
            overflow:hidden;
            /* 溢出的内容变为... */
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="div1">
        我爱学前端，零基础学HTML+CSS。
    </div>
</body>

レンダリング:
ここに画像の説明を挿入します
単一行のテキストのオーバーフロー部分は... 省略記号になります (理解するだけでよく、詳細を説明する必要はありません)

<head>
    <title>溢出隐藏</title>
    <link rel="stylesheet" href="rest.css">
    <style>
.div2{
      
      
    width: 200px;
    background-color: pink;

    /* 将多行文字溢出部分变为…省略号，要有以下五个步骤（必不可少） */
    /*给一个不换行属性，所以就会溢出  */

    /* 注意不要设置高度，默认由内容自己撑开 */

    /* 溢出隐藏了 */
    overflow:hidden;
    /* 溢出的内容变为... */
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 这个数值代表想要第几行变为...省略号隐藏 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
    </style>
</head>
<body>
    <div class="div2">
        我爱学前端，零基础学HTML+CSS。我爱学前端，零基础学HTML+CSS。
    </div>
</body>

レンダリング：
ここに画像の説明を挿入します

4. 属性の継承

継承: 子要素は、祖先要素から一部の属性の値を継承できます。
ほとんどテキストリテラルのプロパティボックス自体の幅、高さ、マージン、境界線などのプロパティは継承されません。

要約する

上記はエディターがまとめたカラー属性（カラーバリューメソッド）、フォントスタイル、テキスト属性などについて、比較的詳しく誰でもわかるように解説したものです。様々な資料を参考にしながら、私自身の理解も踏まえて作成しておりますが、誤字・脱字がございましたら、ご指摘・修正を賜りますよう、よろしくお願い申し上げます。