冬休みのまとめ第3章CSS 3.1-CSS Core Foundationの概要

3.1 CSSコア基盤

1. CSSスタイルルール

特定のフォーマット:

 选择器{:属性1:属性值1;属性2:属性值2;属性3:属性值3;}

例:セカンダリタイトルのフォントサイズは20ピクセルで、色は赤です

  h2{ font-size:20px;clolr:red;}

注:

1. cssスタイルセレクターでは大文字と小文字が厳密に区別され、属性と属性値では大文字と小文字が区別されません。表記規則に従って、「セレクター、属性、値」は通常小文字です。
2複数あります。宿泊施設英語の状態の間にセミコロンで区切る必要があり、最後の属性の後にセミコロンは新しいスタイルの保持は、好ましくは、追加を容易にするために、しかし、省略することができる
3。プロパティの値は、英単語の複数で構成した場合また、中央にスペースがあります。次のように、この属性値に英語の引用符を追加する必要があります。

   p{ font-family:"Timed New Roman";}

4. cssコードを記述するときは、コードを読みやすくするために、通常はコメントを追加します
。5. cssコードでは、スペースは解析されず、中括弧とセミコロンの前後のスペースはオプションです。

第二に、CSSスタイルシートの導入

1.行内式

インラインスタイルはインラインスタイルとも呼ばれ、タグのスタイル属性を介して要素のスタイルを設定し
ます基本的な構文形式:

<标记名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标记名>

HTMLタグにはスタイル属性があり、インラインスタイルはタグとそのタグ内にネストされたサブタグにのみ影響します

2.内嵌式

インラインでは、HTMLドキュメントの<head>ヘッドタグにCSSコードを記述し、
基本的な構文形式である<style>タグ定義を使用します。

     <head>
         <style type="text/css">
           选择器{属性:属性值1:属性2:属性值2:属性3:属性值3;}
         </style>
     </head>

<style>タグは通常、<head>の<title>タグの後に配置され、HTMLドキュメントの任意の場所に配置することもできます。同時に、タイプ属性text css / textを設定する必要があります。<style>には他のコードも含まれる可能性があるため、ブラウザは<type>にCSSコードが含まれていることを認識し、css / textとして記述する必要があります

3.リンク

リンクインとは、すべてのスタイルを1つ以上の外部スタイルシートファイルに.cssの拡張子を付けて配置し、<link />タグを介して外部スタイルシートファイルをHTMLドキュメントにリンクすることです。
基本的な構文形式は次のとおりです。

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

この構文では、<link>タグを<head>ヘッドタグに配置する必要があり、<link />タグの3つの属性を次のように指定する必要があります。


①href:リンクされた外部スタイルシートファイルのURLを定義します。これは正しいパスまたは絶対パスにすることができます②tyoe:リンクされたドキュメントのタイプを定義します。ここでtext / cssとして指定する必要があり、リンクされた外部ファイルがcssスタイルであることを示します表
③rel:現在のドキュメントとリンクされたドキュメントの関係を定義しますここでは、スタイルシートとして指定する必要があります。つまり、リンクされたファイルはスタイルシートファイルです。

リンクインの最大の利点は、同じCSSスタイルシートをさまざまなHTMLページリンクで使用できることです。同時に、HTMLページは複数の<link />タグによって複数のCSSスタイルにリンクすることもできます。リンク
インは最も頻繁に使用され、最も多く使用されます実用的なCSSスタイルシート。HTMLコードとCSSコードを2つ以上のファイルに分離し、構造とパフォーマンスを完全に分離して、Webページのプリプロダクションとポストメンテナンスを非常に便利にします



4.インポート

インポートおよびリンクされるのは、外部スタイルシートファイルの場合と同じです。HTMLヘッダードキュメントにスタイルタグを適用し
、<style>タグの先頭にある@importステートメントを使用して、外部スタイルシートファイルをインポートします。
基本的な構文フォーマット:

<style type="text/css">
     @import url(css文件路径);@import"css文件路径";
     /*此处还可以存放其他css样式*/
 </style>


## 3、セレクターの基本

1.マークセレクタ

基本的な構文フォーマット:

 标记名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

この構文では、HTML内のすべてのタグ名(body、h1、p、strongなど)をタグセレクターとして使用できます。タグセレクターで定義されたスタイルは、ページ上のそのタイプのすべてのタグに有効です。
たとえば、次のとおりです。

 p{ font-size:455px;color:red;font-family:"微软雅黑";}
     

*タグセレクターの最大の利点は、ページ上の同じタイプのタグのスタイルをすばやく統一できることです。これは、差別化されたスタイルを伴うことができない欠点でもあります*

2.クラスセレクター

基本的な構文フォーマット:

.类名{属性1:属性值1;属性2;属性3:属性值3;}

この「。」は、英語の文字の下の
クラス名あり、HTML要素のクラス属性の値です。ほとんどのHTML原色は、クラス属性を定義できます。クラスセレクターの最大の利点は、要素オブジェクトに対して個別のスタイルまたは同じスタイルを定義できることです。

クラス名の最初の文字には数字を使用できません。また、厳密に大文字と小文字を区別します。通常は小文字の英語です。

3.idセレクター

基本的な構文フォーマット:

 #id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}

この構文では、id名はHTML要素のid属性値です。ほとんどのHTML要素はid属性を定義できます。要素のid値は一意であり、ドキュメント内の特定の要素にのみ対応できます。
idセレクターは、クラスセレクターのような複数の値の定義をサポートしておらず、 "id =" bold font24 ""のような記述は完全に間違っています

4.ワイルドカードセレクタ

すべてのセレクターの範囲が最も広い
(非推奨)

 *{属性1:属性值1;属性2:属性值2;属性3:属性值3:}
 
元の記事を28件公開 Like1 1695にアクセス

おすすめ

転載: blog.csdn.net/qq_45870494/article/details/104405397