CSSボックスモデル、MediaQuery、Grid

16658 ワード
grid Box Model 宣言(宣言) セレクタ MediaQuery テキストリンク
出典:生活コードCSS

どのようにCSSをホームページに入れます

  • スタイルラベル
    • を使用
    書き込み
  • スタイル属性

    • 1.スタイルラベルの使用


    ex)フォント色を変更したい場合はhead内にcssを導入できます.
    <head>
<style>
a{color : black;} 
</style>
    上のラベルの意味:aつまりすべてのリンクの字はすべて黒です
    重複するコードを単一のコードとして表します.重複除外
    color:blackを効果、宣言(declaration).特定の領域に効果をもたらす意味で
    aをセレクタと呼ぶ.誰に効果を与えるかを選ぶ意味で括弧と一緒に来てください.
    クリーンアップ:
    a = selector
    color : red = declaration
    color=property(プロパティ)
    red=value(値)

    2.スタイル属性の使用


    ex)複数のリストの1つのリストの色を変更したい場合
    <a href ="2.html" target="_blank" style="color:red">CSS</a>
    style=""はCSS言語の約束です.Html属性ですが、その値には一定のCSS属性の効果があります.
    styleプロパティを書き込むと、ここにある文字に影響を与えるため、選択者は必要ありません.

    適用


    ex)リンクの下線を削除したい場合
    <style>
a{text-decoration : none;}
</style>
    ex)特定のリンクセグメント以外に文字を保持したい場合は、
    <a href = "2.html" ; style = "color:red"; "text-decoration:none">CSS</a>

    自分でCSS属性を確定する


    もっと大きな声でh 1の字を調べたいなら
    ->css text sizeプロパティを検索できます
    h1{font-size:50px;}
    ex)中央揃えをしたい場合
    -> css text center property
    h1{text-align:center;}
    ex)確認したディレクトリをグレー表示する場合
    <li><a href ="html.1" class="saw">HTML</a></li>
<li><a href ="html.2" class="saw">CSS</a></li>
    class=""はhtmlのプロパティです.グループの意味でclassと書く
    まだあります.
    <style>
.saw{color:grey;} </style>
    ぜひsaw(.)貼ってこそ、クラスの役割を果たすことができる.
    注意)styleラベルでは、コマンドは後のコマンド順に効果を表示します.
    前のコマンドを優先位置に置きたい場合はidを使用します.
    <li><a href ="html.2" id="active">CSS</a></li>


<style>
#active{color:red;}
    id=「active」:idがactiveである場所を検索します.id値は1回のみ表示されます.
    id名の前に#を付けます.

    ->idセレクタ>classセレクタ>tagセレクタ


    箱型


    block level element:h 1などのセル全体のタグを使用
    inline element:、これらのラベルはaなどのスペースのみを占有します.
    ex)ボックスの作成
    h1{border-width : 5px;
border - color : red;
border - style : solid;
display : inline;}

a{border-width : 5px;
border - color : red;
border - style : solid;
display : inline;}

더 간단하게 할 땐,
h1,a{border:5px solid red;}

간격을 더 주고 싶고 크기를 바꾸고 싶을 때
h1,a{border:5px solid red; padding:20px; margin:20px; width: 10px;}
    ディスプレイ:none->tagを消す
    ディスプレイ:block->セル全体を占有したい時間
    display:inline->ボックスサイズを行内サイズに変更したい場合

    Boxモデル応用


    見出しに下線を付ける場合
    <style>
h1{border-bottom: 1px grey solid;}
</style>
    ブランクライトの位置がぼやけているときにマウスの右カーソル->チェックチェックチェック!
    <style>
h1{border-bottom: 1px grey solid; 
   margin:0; padding:20px;}
</style>
    ex)ol右側の線を作成したい場合
    <style>
ol{border-right: 1px grey solid;
   width: 100px;} </style>
    width:100 pxを直線に近づけるように追加します.
    見出しの下の下線とolの右側の線の間隔を縮小するには、->余白:0;追加
    文字とborderの間隔を指定するには、->padding:20 px;
    タイトルの下の下線画面を埋めるには->body{margin:0;}

    Grid


    ex)olタグの中の文字とpタグの中の文字を同じ層に置きたい場合
    divラベルとid=gridを使用する
    divラベル(block level element):何の意味もありません.デザインのラベルのみです.類似のラベルにはSpanラベル(inline element)があります.
    <div id = "grid">
<ol>
html
css
javascript
<div id = "article">
<p>
html is ~~~
</p>
</div>
</div>

이렇게 두 구간을 <div>로 구분을 해준다. 
이 후
<style>
#grid{display: grid;
	grid-template-columns : 150px 1fr}</style>
    
p태그 왼쪽 구간 여백을 주고 싶을 때
<style>
#article{padding-left:20px;"}

ol태그 왼쪽 구간 여백을 주고 싶을 때
#grid ol{padding-left:33px;}
조상이 grid인 것 중 ol이라는 의미이기 때문에 앞에 #grid를 써주는 것이 좋다.
    *秘訣!既存のドキュメントのgridなどのラベルが使用可能であることを確認するには、
    caniuse.comで検索できます!****

    メディアクエリMediaQuery


    反応型デザイン:画面の大きさに応じて、ページの各要素が反応します.
    ex)800 pxより大きい画面でdivタグ内の部分を消したい場合
    @media(min-width:800px){div{display:none;}}
    ex)画面が800 px未満の場合
    @media(max-width:800px){div{display:none;}}
    ex)画面が800 px未満の場合、grid効果を削除し、olの右側の枠線をクリアし、h 1の下の下線をクリアする
    @media(max-width:800px){#grid{display:block;}
                       h1{border-bottom:none;}
                       ol{border-right:none;}}

    CSSコードの再使用


    CSSコードの重複を避けるには、
    style.cssという名前の新しいファイルを作成すると、styleタグ内のコードが表示されます.cssファイルに移動します.
    次に、本明細書でlinkラベルを使用すると、次のようになります.
    <link rel="stylesheet" href="style.css">
    rel : the relationship between the current document & the linked document
    JQueryプラグイン23番目:DOMオブジェクトを模したouterHTML
    [アルゴリズム基本]二分探索アルゴリズム