TIL 12|生活コードWEB 2-CSS

22688 ワード
TIL CSS 生活コード テキストリンク

なぜCSSが必要ですか?


HTMLの目的は情報伝達です.styleを指定するためにhtmlコードごとにstyleを指定すると、効率が低下し、1つのコードが複雑に見えます.HTMLが情報伝達の役割を果たすように効率を上げるためにCSS言語を用いた.

CSS


CSSを使用する方法は1)<style>タグを使用する方法と2)style属性を使用する方法がある.
<!--<style>태그를 사용하는 방법-->
<style>
	a {
		color:red;
		text-decoration: none;
	};
    </style>
  //a : 선택자selector, color:red: declaration, color:property, red: value
  • セレクタ(Selector):CSS効果を適用するターゲットを選択し、上a{~}
  • 効果(Declaration):選択者に適用されるCSS効果をCSS構文で表し、上の色:red;など.
    効果(declaration)は、複数を宣言および指定できます.セミコロン(;)順序は関係ありません.

    • 選択者


    class


    classは複数を使用して、スペースで区切ることができます.classのスタイルを指定するには.classに名前をつければいい
    <head>
    <title>AboutMe✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        .saw{
            color:gray;
        }
        .active{
            color:red;
        }
    </style>
</head>

<body>
    <ul>
        <li><a href="1.html" class="saw">AboutMe</a></li>  
        <li><a href="2.html" class="saw active">Favorites</a></li>  
  	</ul>
</body>

    id


    classで見たコードが重複しているので、良いコードとは言えません.この場合idを使用できます.idは繰り返し不可能な特徴を有する.スタイルは#id名に指定されます.
    <head>
  <style>
    #active {
      color : black;
    }
  </style>
</head>
<body>
	<li><a href="2.html" class="saw " id ="active">Favorites</a></li>
</body>

    tag


    同じラベルに一度にスタイルを指定できます.
    <style>
  a {
 	color : pink;
  }
</style>

    box model


    箱を作りたい場合はborderスタイルを指定できます.
    <!doctype html>
<html>
<head>
    <title>Favorites✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        h1{
            border-witdth: 5px;
            border-color: red;
            border-style: solid;
        }
        a{
            border-witdth: 5px;
            border-color: red;
            border-style: solid;
        }
    </style>
</head>
<body>
  <h1>blabalbalb</h1>
  <a href="https://www.google.com/">구글이다구글이다~~~</a>
</body>
    h 1はblock level要素、aはinline要素である.これはdisplay:に変更できます.
    h1{
	border-witdth: 5px;
	border-color: red;
	border-style: solid;
	display:inline;
}
a{
	border-witdth: 5px;
	border-color: red;
	border-style: solid;
	display:block;
}

    重複を避けるためには、以下のように記入することが望ましい.
    h1, a{
	border: 5px solid red;
}

    padding & margin



    マウスの右ボタン->チェック(mac)を行って確認し、少しずつ修正します.

    grid


    無意味な要素
    div: block
    span: inline
    <head>
    <title>Favorites✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        #grid{
            border:5px solid pink;
            display:grid;
            grid-template-columns: 150px 1fr;
        }
        div{
            border:5px solid gray;
        }
    </style>
</head>

<body>
    <div id="grid">
        <div>Navigation </div>
        <div>Article</div>
    </div>
   
</body>

    はんのうせっけい


    Mediaquestionsで簡単に反応型設計をします.widthが800 pxを超えると、ディスプレイに何も書かれていません.
    <head>
    <title>Favorites✧*.◟(ˊᗨˋ)◞.*✧</title>
    <meta charset="utf-8">
    <style>
        div{
            border:10px solid green;
            font-size:60px;
        }
        @media(min-width:800px){
            div{
                display:none;
            } 
        }
        
    </style>
</head>

<body>
    <div>
       responsive
    </div>
   
</body>

    cssの効率的な応用


    htmlファイルごとにCSSを作成したり修正したりするのは面倒です.CSSファイルを作成してHTMLにリンクするのが便利です.
    <head>  
	<link rel="sttylesheet" href="">
</head>
    グリッドでの位置絶対値の使用
    Home&Back onPause onStopなどの実行手順