CSS (Cascading Styel Sheet) は、Web ページの外観を制御する一連の書式設定ルールであり、Web デザインに不可欠なツールの 1 つです。次にcssの基本的な構文形式を学習していきます。
1. CSSの定義ルール
カスケード スタイル シートは完全なプレーン テキスト ファイルで、通常は「css」拡張子の付いた別個のファイルとして使用され、そのコンテンツには、特定の HTML タグでコンテンツを配置および表示する方法をブラウザーに指示する一連のルールが含まれています。セレクター、属性、属性値の 3 つの部分で構成されます。構文は次のとおりです。
構文: セレクター { プロパティ: 値 }
↑ ↑ ↑
セレクター {プロパティ: 値}
CSS スタイルは、Web ブラウザによって解析され、HTML ドキュメントの対応する要素に適用される一連のルールで構成されます。 CSS スタイル ルールは、セレクター、属性、値の 3 つの部分で構成されます。
1. セレクター: セレクターは、スタイルを定義する HTML タグです。HTML タグがセレクターとして定義されると、HTML ページ内のタグの下のコンテンツは CSS で定義されたルールに従って変更されます。
2. 属性: HTML 要素に設定するスタイル名は、セレクターで変更されるコンテンツを指します。一般的なものには、フォント属性、色属性、テキスト属性などが含まれます。以下は私たちが定義したスタイルシートです。
3. 値: 数値と単位またはキーワードで構成される属性の値は、特定の属性の表示効果を制御するために使用されます。
@charsetgb2312;body{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}このスタイルシートでは次のようになります。
1. @charsetgb2312; は、中国の国家標準文字セットを使用することを意味します。
2. body と p は HTML の 2 つのタグであり、これら 2 つのタグに対して 3 つのスタイルが設定されています。
font-family: フォントのフォントタイプを指定します。
"> 2. スタイルシートを埋め込む
HTML ページ内で定義される CSS スタイル シートは、埋め込み CSS スタイル シートと呼ばれます。つまり、HTML 文書の先頭部分では、style タグが使用され、タグ内に一連の CSS ルールが定義されます。
構文: <head><styletype=text/css><!--......--></style></head>
例証します:
<style> は CSS スタイル シートの開始を示し、終了マークは </style> です。開始マーク <style> には、上記の属性 type=text/css など、必要に応じていくつかの属性を追加できます。この列は、CSS スタイル シートが MIME タイプを採用していることを示します。このタイプの特徴は、ブラウザーが CSS コードをサポートしていない場合、CSS コードがフィルターされて、ブラウザーが CSS コードを次の形式で表示しないようにすることです。ソースコード。より信頼性を高めるために、スタイル シートにコメント識別子 <!--...--> を再度追加します。CSS ルールはこのコメント識別子で定義されます。
例 1: t1.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>埋め込み CSS スタイル シート</title><styletype=text/css><!--@charsetgb2312; {フォントファmily:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>何千もの山から鳥が何千もの道を飛び、人の痕跡も一掃される<p>何千の山からの鳥が何千もの道を飛び、人の痕跡も一掃される</p></body></html>3. 外部スタイルシートへのリンク
外部 CSS スタイル シートは、.css 拡張子が付いた外部ファイルです。外部スタイル シートの定義は複数のページに適用できます。 HTML ページの link タグを使用して、外部 CSS スタイル シートに接続できます。構文は次のとおりです。
文法：
<linkrel=stylesheetthref=*.css” type=text/css>
パラメータ:
1. rel 属性は、スタイル シートが HTML ドキュメントとどのように結合されるかを示します。 rel 値: スタイルシート。外部スタイルシートの指定を示します。
2. *.cssは別途保存されたスタイルシートファイルです。
例 2 外部 CSS ファイル p2.css を定義し、そのファイルを t2.htm ファイルに接続します。
例 2: t2.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>外部スタイル シートへのリンク</title><styletype=text/css><!--@charsetgb2312; body {font-family:宋体;f ont-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head><body>親愛なる、あなたは飛ぶゆっくりと、目の前のとげのあるバラに注意してください<p>愛しい人、口を開けて、風にそよぐ花の香りに酔いしれるでしょう</p></body></html>4. インラインスタイルシート
インライン スタイルは、HTML 固有のタグで定義された CSS スタイル シートを指します。一般的に使用される HTML タグは、主に、<p>、<h2>、<ul>、<div> などの BODY 内の一部の要素です。以下はインライン スタイルの例です。
例 3: t3.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>無題のドキュメント</title></head><body><divstyle=color:blue;font-size :30px;>風に吹かれる花の香りに酔いしれる</div><pstyle=color:#ff0000;font-style:italic;>風に吹かれる花の香りに酔いしれる</p>< /body></html>
5. 外部スタイルシートをインポートする
外部スタイルシートをインポートするということは、HTML ファイルに埋め込みスタイルシートが設定されていることを意味しますが、この場合、<style> で外部スタイルシートをインポートし、@ を使用することができます。以下の例に示すように、インポートします。
<html><head><styletype=text/css><!--@importurl(mystyle.css);他のスタイル シートの宣言--></style></head></body>.... .</body></html>
このうち、 @import url(mystyle.css); は、mystyle.css スタイル シートをインポートすることを意味します。インポートされた外部スタイル シートは、スタイル シートの先頭、内部スタイル シートの上にある必要があります。
例 4
外部 CSS ファイル p4.css を定義し、そのファイルを t4.htm ファイルにインポートします。
例 4: t4.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>外部スタイル シートをインポートする</title><styletype=text/css><!--@importurl(p4 .css);@charsetgb2312;本文{font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;color:#FF00ff;}--></style></head> <body>何千もの鳥が何千もの山々を飛び越えるが、人間の痕跡は見られない<p>何千もの鳥が何千もの山々を飛び越えるが、人間の痕跡は見られない</p></body></html>6. CSSスタイルシートの継承
CSS スタイル シートでは、子タグの一部の属性は親タグの属性を継承します。たとえば、タグ p がフォントの色属性を設定しない場合、タグ p はタグ本体の子要素になります。 in p は body 値の color を使用します。次の例はこの状況を示しています。
例 5: t5.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>埋め込み CSS スタイル シート</title><styletype=text/css><!--@charsetgb2312; { font-family:宋体;font-size:20px;color:#FF0000;}p{font-family:宋体;font-size:30px;}--></style></head><body>千山鸟何千もの道を飛び越え、人間の痕跡は一掃される<p>何千もの山々、何千もの道を飛び交う鳥、そして人間の痕跡は一掃される</p></body></html>7. 複数の要素を設定する
CSS では、次の例に示すように、セレクターとして使用する場合、単一の形式を複数のタグに適用できます。
例 6: t6.htm
<html><head><metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/><title>埋め込み CSS スタイル シート</title><styletype=text/css><!--@charsetgb2312; 、h2、h3 ,p,{font-family:宋体;color:#FF0000;}--></style></head><body><h1>何千もの鳥が何千もの山を飛び越え、何千もの人々が消える</h1> <h2>何千もの山の鳥が何千もの道を飛び、人の痕跡もなく消えます</h2><h3>何千の山の鳥が何千もの道を飛び、人の痕跡もなく消えます</h3><p>鳥何千もの山から何千もの道を飛び越え、人の痕跡もなく消えていきます</p></ body></html>