Dress up CSS

8790 ワード
CSS html テキストリンク
css?
私たちが使用しているサイトは、さまざまな機能と情報を提供しています.
その機能の中で暖かい色を与え、クリック時に閉じるなどします.
サイトの多彩な機能をCSSに変えることができます.
構文
cssはkeyとvalueの2つの方法を使用します.
2つの使い方があり、
htmlでqueryStringを直接使用する方法
cssファイルの作成と使用方法があります.
1. style element

  • htmlタグの後にqueryStringとして記述されます.

  • QueryString:key=value(属性=属性値)
    • <h1> i like cat </h1>
<h1 style="font-style: italic"> i like cat </h1>
    2.外部ファイル

  • 外部ファイルを作成する前にhtmlのbodyラベルにid、class属性値を使用します.

  • idとclass?特定の要素に名前を付けます.

  • 新しいcssファイルを作成し、必要なid、classプロパティ値を選択します.
    これを「選択者」といいます.
    • <body>
  <h2 id="title"> 고양이 얌전하게 만드는 법 </h2>
  <h2 class="content"> 없습니다. </h2>
</body>
    html例
    <body>
	<h1 id="title">간식으로 뭘 먹었지?</h1>
    <h2 class="content">내가 어제 먹은 과일이 뭘까?</h2>
    <ul>
    	<li class="ate">사과</li>
        <li>포도</li>
        <li>귤</li>
    </ul>
</body>
    cssの例は上のhtmlを飾るために使用されます
    * {
	font-size: 10px;
}

#title {
	color: red;
}

.content {
	background-color: yellow;
}

ul > li {
	height: 40px;
}

.ate > li {
	background-color: green;
}

  • cssをtitleという属性値idに適用するには、前に「#」と書いてtitleを選択します.

  • contentはclassと宣言されたので「.」前に書く.

  • フルーツカタログを選択するために">"シャベルを使用しました.

  • ulのliのateクラスのみを適用するために、例の方法を使用します.
    • cssは、選択者によって限られた領域を配置することができる.
    cssで置き換えることができる属性値はたくさんありますが、そのうちの2つを選択するだけです.
    選択した領域空間のmarginとpaddingを調整できます.
    3.共通属性値
    margin
  • 要素間の間隔をずらすことができます.
    • #content {
	margin: 25px 0 30px 0;
}
    padding
  • 要素のコンテンツの場所を変更します.
  • padding値を記入すると、その方向に増加します.
    • #content {
	pdding: 10px 5px 10px 5px;
}
    marginもpaddingも4方向(東西南北)に設定できます.
    左から北、東、南、西(12時、3時、6時、9時)!
    Box-sizing
    興奮して属性値を変更しcssを適用すると,ある瞬間に遭遇するという問題がある.私が設定したサイズ(width)は1つしかありませんが、なぜ出力のサイズが違うのでしょうか?!
    理由はラテを飲まなくても、探さなくてもいいからです.
    属性値を1つ適用すれば解決できます.
    * {
	box-sizing: border-box;
}
    Dart言語【004】制御フロー文
    Android extsd open failed: EACCES (Permission denied)