フロントエンド開発ツールの完璧な外観 CSS_html/css_WEB-ITnose

まずはHTMLの知識をマスターしてください！ ！ ！ ！詳細については、「HTML での共通タグの整理」を参照してください

4. CSS の開始

1. CSS スタイルを理解します
CSS スタイルを使用する利点の 1 つは、特定のスタイルを定義することで、Web ページの異なる場所にあるテキストのフォント、フォント サイズ、色を統一できることです

2. CSS スタイルの利点
を使用します。 < ;/span>囲みでCSSスタイルを統一設定します

3. CSSコードの構文
}) 選択されたシンボル: セレクターとも呼ばれ、スタイル ルールの要素を Web ページに適用する必要があることを示します。 Web ページ内のすべての段落 (p) のテキストは青色に変わりますが、他の要素 (OL など) は影響を受けません。 宣言される。複数のステートメントがある場合は、英語のセミコロン「;」で区切ることができます

4. CSS コメントコード
/*コメントステートメント*/ を使用してそれを示します (HTML では を使用します)

5. CSS スタイルの基礎知識
1. インライン CSS スタイル (既存の HTML タグに直接記述する)

ここのテキストは赤色です。

ここのテキストは赤色です。

2. 埋め込み CSS スタイル (現在のファイルに記述)
タグの間に CSS スタイル コードを記述します
外部 CSS スタイル の間に記述する必要があり、通常、埋め込み CSS スタイルは の間に記述されます

3. 外部 CSS スタイル (別のファイル内に記述されます)
この CSS スタイル ファイルには拡張子「.css」があり、 内で CSS スタイル ファイルをロックしました。 HTML ファイル
& lt; link href = "base.css" rel = "styleSheet" type = "text /css" /& gt;
1、CSS スタイル ファイル名 などの意味の英語の文字が付けられます。 main.css。
2. rel="stylesheet" type="text/css"は固定の記述方法であり、変更することはできません。
3. タグの位置は一般的に に記述されます。 {} より前の部分が「セレクター」であり、「セレクター」は {} 内の「スタイル」のオブジェクトを指定します。 style" Web ページ内のどの要素が使用されているかを示します。

2. タグセレクター タグセレクターは実際には HTML コード内のタグです
3. クラスセレクター1 英語のドットの先頭、2. クラスの名前は can を選択します任意の名前を付けることができます (中国語ではありません) = "クラス選択名" クラスを設定します
& lt; span class = "ストレス" & gt; マウス & lt;/span & gt;クラスの前*/

4. ID セレクター
多くの点で、ID セレクターはクラス セレクターに似ています。
違い:
タグ内。 优的
の 3 つのメソッドの優先順位
これら 3 つのスタイルの優先順位を覚えておいてください: 内部担保 & gt; 埋め込み & gt; 外部タイプ: 埋め込みタイプ: 埋め込みタイプ CSS スタイルの位置外部スタイルの後ろにある必要があります
要約すると、近接原則 (設定されている要素に近いほど優先度が高くなります)

6. CSS セレクター
1. セレクターとは
スタイル宣言 (定義) は以下で構成されます。 2 つの部分
selector {
style;
}
1. ラベルに class = "クラス名" の代わりに ID = "ID 名" を設定します。
2. ID セレクターの前には、英語のドット (.) ではなくポンド記号 (#) が付いています。

2. タグ セレクター
タグ セレクターは、実際には HTML コード内のタグ 、、

、 です。 12px; line-height：1.6em;}
3.クラスセレクター名{cssスタイルコード;}。ステップ: 適切なラベルを使用して、変更するコンテンツをマークします。 ステップ 2: class = "クラス選択デバイス名" を使用してクラスを設定します
ステップ 3: クラスセレクターの CSS スタイルを設定します

4. ID セレクター
多くの場合このように、ID セレクターはクラス セレクター
に似ています。 違い:
1. ラベルに class="クラス名 " の代わりに id="ID 名" を設定します。
2. ID セレクターの前には、英語のドット (.) ではなくポンド記号 (#) が付いています。


HTML ドキュメントでは、ID セレクターは 1 回だけ使用できます。クラス セレクターは複数回使用できます。
2. クラス セレクターの単語リスト メソッドを使用して、要素に複数のスタイルを同時に設定できます。 1 つの要素に複数のスタイルを同時に設定できますが、これはクラス セレクターを使用する場合にのみ実現でき、ID セレクターは使用できません (ID ワード リストは使用できません)。
5。子セレクター
指定されたラベル要素の下に子孫要素を選択する。最初のスパン{色：}
このセレクターと子セレクターの違いに注意してください。子セレクターは、その直接の子孫のみを参照します。あるいは、子要素に作用する最初の世代の子孫として理解することもできます。子孫セレクターは、すべての子子孫要素に作用します。子孫セレクターはスペースを介して選択しますが、子セレクターは「>」を介して選択します
概要: > 要素の最初の世代の子孫に作用し、スペースは要素のすべての子孫に作用します。

7. ユニバーサル セレクター
は (*) 記号で指定されます。その機能は、HTML 内のすべてのラベル要素と一致するようにすることです。次のコードを使用して、HTML 内の任意のラベル要素のフォントの色を赤に設定します
* {color: red; }

8. 疑似クラスセレクター
を使用すると、HTML に存在しないタグ (タグの特定の状態) のスタイルを設定できます。たとえば、マウスオーバー状態のフォントの色を設定します。 HTML のタグ要素:
a: hover{color:red;}
疑似クラスセレクターについては、これまでのところ、すべてのブラウザに対応している「疑似クラスセレクター」は、 a タグ: hover (これのみがすべてのブラウザーに対応)
現在では、a:hover の組み合わせがより一般的に使用されます

9. グループ化セレクター
HTML 内の複数のラベル要素に同じスタイルを設定する場合、グループ化を使用できますセレクター (,)

' ' s

7. CSS の継承、カスケード、特殊性
1. 継承
CSS の一部のスタイルは継承されます。
継承は、スタイルを特定の HTML タグ要素だけでなく、その子孫にも適用できるようにするルールです。
一部の CSS スタイルは継承されないことに注意してください。ボーダーなど: 1px 赤一色
継承できないスタイル:
表示、マージン、ボーダー、パディング、背景、高さ、最小高さ、最大高さ、幅、最小幅、最大幅、オーバーフロー、位置、左、 right 、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before、および unicode-bidi

2. 特異性
ブラウザは、 Weight 使用する CSS スタイルを決定するには、最も高い重みを持つ CSS スタイルを使用します。ラベルの重みは 1、クラス セレクターの重みは 10、ID セレクターの重みは最大 100 です。 または p {color: red;} /*正しい値は 1* /
p span {color: green;} /*正しい値は 1+1 = 2* /
.warning {color:white;} /*power value IS 10*/
Pspan.warning {color：purple;}/*重量は1+1+10 = 12*/
1 = 111*/
であり、重み付き1 = 111*/
です。

3. カスケード
スタッキングとは、HTML ファイル内の同じ要素に複数の CSS スタイルが存在する可能性があることを意味し、同じ重みを持つスタイルが存在する場合、これらの CSS スタイルの順序に基づいて決定されます。最後は適用されます。 标 内部結合テーブル (ラベルの内部) & gt; スタイル テーブルに埋め込まれています (現在のファイル内) & gt; 外部スタイル テーブル (外部ファイル内)。
4.重要性
、、、、、および。

8. CSS の書式設定と組版
1. テキストの組版
body{font-family:"宋体";}
body{font-family:" Microsoft Yahei";}
注: 最初の方法は 2 番目の方法よりも互換性があります。 pont 2.フォントサイズ、色
フォントサイズ、色のボディ{font-size：＃666} p a {font-style：yatalic;}
5 5. underline
p {2em;}
2em はテキストのサイズの 2 倍を意味します。
8.ライン間隔（線の高さ）
P {ラインハイト：1.5em;}
9.文字間隔
{
文字-Spacing：50px;
ワード間隔を使用して達成する10.アラインメントAlignmentブロック要素のテキストと画像の使用を使用して使用して使用する使用を使用して左、右、右、中央
9、 CSS ボックス モデル
1. 要素分類
HTML のラベル要素は、通常、ブロック要素、内部関連要素 (内部要素とも呼ばれます)、および行内のインライン ブロック要素
の 3 つの異なるタイプに分類されます。
div >、

、

... 、

、

一般的に使用されるインライン要素:
scan>、
、、、、、、、、
よく使用されます。インラインブロック要素:

2. ブロックレベルの要素（要素分類）
表示設定: ブロックは要素を表示しますブロックレベル要素として
a{display:block;}
ブロックレベル要素の特徴:
1. 各ブロックレベルの要素は新しい行で始まり、その後の要素も新しい行で始まります。 (本当に強引、ブロックレベルの要素が1行を占有します)
2. 要素の高さ、幅、行の高さ、上下の余白を設定できます。
3. 設定されていない場合、幅が設定されていない限り、要素の幅は親コンテナの 100% (親要素の幅と同じ) になります。
3. インライン要素 (要素の分類)
ブロック要素は、display:inline コードによってインライン要素として設定することもできます
インライン要素の特徴:
1. 他の要素と同じ行にあります
2. 要素の高さ、幅、行の高さ、上下の余白は設定できません。
3. 要素の幅は、要素に含まれるテキストまたは画像の幅であり、変更できません。

4. インラインブロック要素（要素の分類）
インラインブロック要素（inline-block）は、インライン要素とブロック要素の両方の特徴を持ち、要素をインライン化する ブロック化要素 l Inline を設定するコードです。 -ブロック要素の特徴:
1. と他の要素が線上にあります。
2. 要素の高さ、幅、高さ、上端の距離を設定できます。 はい 5. ボックス モデルとは
ボックス モデル: パディング、外側の距離 マージン、ボーダー BORDER
ブロック タグはボックス モデルの特徴を持ちます
6、フレーム (ボックス モデル)
ボックス モデルはコンテンツとフィラーで囲まれています線では、この線の太さ、スタイル、色 (境界線の 3 つの属性) を設定できます。
-width:2px; use using using ‐ ‐ ‐ ‐width ‐ width: 2px;境界線のスタイルは次のとおりです。
点線 | -2. border-color (境界線の色) の色は、次のように 16 進数の色に設定できます。
border-color:#888; // 手前の井戸を忘れないでください。 -3. 境界線の幅 (境界線の幅) を次のように設定することもできます。
最も一般的に使用されるピクセル (PX) です。 CSSスタイルでは、境界線のみを設定できますと高さ(ボックスモデル)
CSSで定義された幅と高さ(Height)、高さ(Height)、埋め込まれたコンテンツ範囲を指します。
要素の実際の幅 (ボックスの幅) = 左ボーダー + 左ボーダー + 左パディング + コンテンツの幅 + 右パディング + 右ボーダー + 右ボーダー。

8. 塗りつぶし（ボックスモデル）
要素の内容と境界線との距離を設定することができ、これを「塗りつぶし」と呼びます。パディングは上、右、下、左 (時計回り) に分割することもできます
div{padding:20px 10px 15px 30px;}
また、次のように分けることもできます。                padding-top:20px;
               padding-right:10px;
               padding-bottom:15px;
               padding-left:30px;
            }
        上、右、下、左的填充都为10px;可以这么写
            div{padding:10px;}
        上下填充一样为10px，左右一样为20px，可以这么写：
            div{padding:10px 20px;}

    9、边界（盒模型）
        元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左
            div{margin:20px 10px 15px 30px;}
        也可以分开写：
            div{
               margin-top:20px;
               margin-right:10px;
               margin-bottom:15px;
               margin-left:30px;
            }
        如果上右下左的边界都为10px;可以这么写：
            div{ margin:10px;}
        如果上下边界一样为10px，左右一样为20px，可以这么写：
            div{ margin:10px 20px;}
        总结一下：padding和margin的区别，padding在边框里，margin在边框外。

十、CSS布局模型
    1、CSS布局模型
        CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
            在网页中，元素有三种布局模型：
            1、流动模型（Flow）
            2、浮动模型 (Float)
            3、层模型（Layer）

    2、流动模型
        流动（Flow）是默认的网页布局模式
        典型特征：
            第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置
            第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

    3、浮动模型
        任何元素在默认情况下是不能浮动的，但可以用CSS定义为浮动，如div、p、table、img等元素都可以被定义为浮动。如下代码可以实现两个div元素一行显示
        div{
            width:200px;
            height:200px;
            border:2px red solid;
            float:left;
        }
        

        

        右浮动：float:right;
        一左一右：#div1{float:left;}   #div2{float:right;}

    4、什么是层模型
        CSS定义了一组定位（positioning）属性来支持层布局模型。
        层模型有三种形式：
            1、绝对定位(position: absolute)
            2、相对定位(position: relative)
            3、固定定位(position: fixed)

    5、绝对定位（层模型）
        想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

        如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
        div{
            width:200px;
            height:200px;
            border:2px red solid;
            position:absolute;
            left:100px;
            top:50px;
        }
        

    6、相对定位（层模型）
        想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

        如下代码实现相对于以前位置向下移动50px，向右移动100px;
        #div1{
            width:200px;
            height:200px;
            border:2px red solid;
            position:relative;
            left:100px;
            top:50px;
        }
        

    7、固定定位（层模型）
        fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed?属性功能相同

    8、Relative与Absolute组合使用
        使用position:absolute可以实现被设置元素相对于浏览器（body）
        相对于其它元素进行定位
            使用position:relative来帮忙，但是必须遵守下面规范：
        1、参照定位的元素必须是相对定位元素的前辈元素：
            

               

相对参照元素进行定位

             2. オフセット配置を実行するには、Position: Relative;
#BOX1 {
width: 200px;
Height: 200px;
position: relationship を追加する必要があります。 #BOX2 {
ポーズ: 絶対;
上: 20px;
左: 30px;}}







1. マージン)、パディングと境界線の設定。上下左右の４方向を時計回りに上、右、下、左と設定します。
margin:10px 15px 12px 14px;/*上設置は10px、右設置は15px、下設置は12px、左設置は14px*/
通常は下三面の書き込み方法:
1、如果上、右、下、次のコードに示すように、 left の値は同じです。
use using through through out through through ' s ‐ ‐ ‐ ‐ ‐‐ ‐ マージンは次のようになります: 10px 10px 10px
2.次のコードに示すように、上と下の値は同じであり、左と右の値は同じです。
margin: 10px 20px 10px 20px
Margin: 10px 20px; 3. 左右の値が同じ場合は以下のようになります:
Margin: 10px 20px 30px 20px;
注:padding と border の略語は margin と同じです。
2. カラー値の省略
設定したカラーが16進数のカラー値の場合、各2桁の値が同じであれば半分に省略できます。 または p {color: #00000000;}
略語:
p {color: #000;}
p {color: #336699;} 略語: p {color: #369; body{
font-style:italic; font-variant:small-caps;
font-weight:bold font-size:12px;
font-family:"宋体" if;
}
略称:
ボディ{フォント：イタリックスモールキャップ太字12px/1.5em1. この短縮方法を使用するには、他のプロパティ (font-weight、font-style、font-varient、line-height など) が指定されていない場合は、少なくとも font-size プロパティと font-family プロパティを指定する必要があります。指定すると、デフォルト値が自動的に使用されます。
2. 省略する場合は、font-size と line-height の間に「/」を斜めに追加します。

声明：

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

前の記事：adaptive_html/css_WEB-ITnose を実現する CSS の位​​置次の記事：adaptive_html/css_WEB-ITnose を実現する CSS の位​​置

関連記事

続きを見る

• HTMLの知識のまとめ
• HTMLを早く学ぶ方法
• html xhtml xml の違い
• src 属性と href 属性の違い
• HTML5とCSSの置き換え利用について

• ホームページ

• コース

• に質問

• 私の

• ホームページ
• コース
• 記事
• に質問
• 辞書
• マニュアル
• ダウンロード
• 特集

ホームページ

記事

に質問

コース

特集

ダウンロード

ゲーム

辞書

简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）