ホームページ > 記事 > ウェブフロントエンド > CSSとは何ですか? 3 つの CSS スタイルとテキスト属性の紹介

CSSとは何ですか? 3 つの CSS スタイルとテキスト属性の紹介

不言オリジナル: 2018-08-09 15:31:552676ブラウズ

この記事では、CSSとは何なのかを紹介します。 3 つの CSS スタイルとテキスト属性の紹介は、必要な方の参考になれば幸いです。

CSSとは何ですか?

カスケードスタイルシート、CSS、カスケードスタイルシートと呼ばれます。
HTML ファイルを変更し、Web ページ要素の植字やサイズ制御などの操作を実行するために使用されます。
言い換えれば、HTML ファイルは Web ページのコンテンツを埋め、CSS はコンテンツのパフォーマンスを制御します
たとえば、要素のサイズ、Web ページ内の要素の位置、要素の背景、その他の属性などです。

CSSコードはどこに書かれていますか?

1 インラインスタイル (inline): CSS コードを HTML タグに記述できます。style="css style";

<p style="color: red;">这是一个段落</p>

2 内部スタイル:

CSS コードを style タグに記述します
理論的には、style タグは文書内のどこにでも記述して有効にすることができますが、ここでは head タグにスタイルを記述します

<html>
    <head>        ...
        <style type="text/css">
            css样式
        </style>
    </head>
</html>

3 外部スタイル:

外部スタイルとは、CSS コードを CSS ファイルに個別に記述することです。 (CSS サフィックスファイル) 中
次に、リンクタグを使用して外部スタイルファイルを導入します
外部スタイルファイルにスタイルタグは必要なく、CSSコードを直接記述するだけです

<html>
    <head>        ...
        <link rel="stylesheet" type="text/css" href="css文件路径" />
    </head>
</html>

3つのスタイルを同時に複数の方法で使用できます

テキスト属性: font属性

1 フォントサイズ: font- size

設定フォントのサイズ。px、em、ptなどの単位の値を使用します。

font-size: 12px;

2 フォントの色: color

color: red;

3 フォントのスタイル: font-family

宋朝、弥平などのフォントを設定します
複数の値を持つことができます
ただし、表示されるフォントスタイルは 1 つだけです
最初のフォントが利用可能な場合は最初のフォントを使用し、そうでない場合は 2 番目のフォントを使用します
2 番目のフォントが利用できない場合は、3 番目のフォントを使用し、以下同様にします
フォントは英語のカンマで区切られます。値が中国語または複数の単語の場合は、英語の二重引用符で囲む必要があります

font-family: "宋体",Times,"New Century Schoolbook";

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

標準太字太字値

font-weight: bold;

説明
デフォルト値、太字なし

太字、太字よりも効果が明白です
100~900単位値なし、通常は 100 ~500 は通常の効果、600~900 は太字で、値が大きいほどフォントも太くなります

5 テキストケース: text-transform

OK 値を選択してくださいなし大文字大文字小文字

text-transform: capitalize;

説明
デフォルト値、影響なし
最初の文字を大文字
すべて大文字
小文字

6 横文字配置: text-align

オプションの値左右中心中心合わせ両端揃え両端を揃える

text-align: left;

7 テキストの垂直方向の配置

説明
デフォルト値、左揃え
右揃え

オプションの値説明ベースラインデフォルト。要素は親要素のベースライン上に配置されますsubテキストの下付き文字を垂直に揃えますsuperテキストの上付き文字を垂直に揃えますtop上を揃えます行内で最も高い要素を持つ要素要素の上部を揃えます text-top 要素の上部を親要素のフォントの上部と揃えます middle この要素を親要素の中央bottom要素の上端を揃える行の最下位要素の上端を揃えますtext-bottom要素の下端を親要素の下端と揃えますfontinheritvertical-align 属性の値が親要素から継承されることを指定します。要素が inline または inline-block に属している場合にのみ、vertical-align 属性が機能します。

vertical-align: baseline;

8 テキスト装飾

オプションの値説明なし下線なし下線下線線通しスルースルー(取り消し線)



	上線
	ラインスルー
	text-decoration: underline; 9 首行缩进: text-indent 该属性接受一个带单位的值规定文本首行缩进多少个单位的空间只对第一行有缩进，而且只用于块元素 text-indent: 2em; text-indent的属性值一般会使用em作为单位，因为一般缩进都以多少个字符为标准 10字间距: letter-spacing 该属性接受一个带单位的值规定每个字符之间间隔多少个单位的空间 letter-spacing: 1em; 11 词间距: word-spacing 该属性接受一个带单位的值规定每个单词之间间隔多少个单位的空间该属性对中文无效相关文章推荐：鼠标划过字体时如何用css来实现字体变色？（代码实测） css三栏布局的三种实现方式（圣杯布局、双飞翼布局、Flex布局）

以上がCSSとは何ですか? 3 つの CSS スタイルとテキスト属性の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

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

前の記事：CSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト)次の記事：CSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト)

続きを見る