コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

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

不言
リリース： 2018-08-09 15:31:55
オリジナル
2681 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル：
css html
ソース：php.cn
前の記事：CSSを使用して、マウスが上に移動したときにフォントの色を変更するにはどうすればよいですか? (コードの実テスト) 次の記事：マウスがフィールド上を通過したときに下線CSSを実現するにはどうすればよいですか? (ナビゲーションバーコードの例)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
PX から REM への自動変換エラー <style>html { font-size: calc(100vw / 3.75); }body { font-size: 0.16rem; }</style...
から 2024-04-16 09:34:16
0
0
4687
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
CSSでページ下部の謎の空白を解決する方法 Bootstrap と D3 を使用して単純な Web ページを構築しようとしていますが、下部の空白をすべて削除する方法がわかりません。それをなくしたいのです。 bodyとhtml...
から 2024-04-06 20:22:15
0
1
454
livewire遅延プレースホルダーでlaravelコンポーネントを使用する方法 laravel コンポーネントのスケルトンを livewire3 プレースホルダー内に追加したい これまでに試したこと: Laravel コンポーネントを含めることによる Live...
から 2024-04-06 20:02:10
0
2
543
文字列を HTML コード (配列から生成) に置き換えるトップレベルのメソッド 次のような文字列があるとします... $htmlPattern="Usernameis:#name#andusercompanyis#company#"; 部分...
から 2024-04-06 17:40:41
0
2
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート