[CSS]CSSベース-1

20721 ワード
テキストリンク

1. CSS


CSSの基本的な使い方は以下の通りです.
Selector {
	property : value;
}
積層スタイルシートに積層という名前が含まれているのはなぜですか?
最後の入力値が適用されるためです.
p{
    color :pink;
}

p{
    color :green;
}
上記cssがある場合、pラベルは緑色のフォントを採用します.これは非常にエラーが発生しやすい特徴です.

cssの適用方法


1.


cssを使用するにはhtmlのheadタグを使用します.
<link rel ="stylesheet" type = " text/css" href = "css파일">
点滴すればいいです.

2.


htmlのタグのプロパティとしてスタイル値を直接与えることもできます.
<header style = "background-color: green">

3.


htmlのheadプロパティにスタイルラベルを追加します.
<head>
  <style>
    li{
    	bakground-color:purple;
    	color : white;
    }
  </style>
</head>

2.CSSセレクタ


1) .class


htmlのclass属性に合致する要素にcss属性を適用します.
html
<p class = "webtext">Lorem ipsum </p>
css
.webtext{
	color : pink;
}

2) #id


html id属性に合致する要素にcss属性を適用します.
html
<p id = "id1">Lorem ipsum </p>
css
#id1{
	color : pink;
}

3) *


すべての要素にcssを適用します.
css
*{
	font-size : 12px;
}

4) element


すべては、ラベルを持つ要素に適用されます.
html
<p>Lorem ipsum </p>
css
p{
	color : pink;
}

5) element,element


複数の要素を適用することもできます.
html
<h1> Lorem </h1>
<p>Lorem ipsum </p>
css
p{
	color : pink;
}

6) element1 element2


element 1のelement 2にcssをすべて適用します.何階も隠すのに適しています.
html
<a>밖에있는 a태그에요</a>
      <h2>
        Home
        <div>
          <a>a태그에요</a>
        </div>
      </h2>
css
h2 a {
    color  : yellow
}

7) element1 > element2


属性をelement 1の真下にあるelement 2タグに適用します.(中に他のマークがある場合は適用されません)
html
<a>밖에있는 a태그에요</a>
      <h2>
        Home
        <a>h2 바로 아래에 있는 a태그에요</a>
        <div>
          <a>h2 안에 div안에 있는 a태그에요</a>
        </div>
      </h2>
css
h2 a {
    color  : yellow
}

8) element1 + element2


プロパティをelement 1の後ろにあるelement 2に適用します.
html
 <h2>
        <a>h2 안에 있는 a태그에요</a>
 </h2>
      <a>h2 바로 뒤에 있는 a태그에요</a>
      <a>h2 바로 뒤에 있는 a태그에요2</a>
css
h2 a {
    color  : green
}

9) :hover


要素にマウスを置くとプロパティが適用されます
html
 <h2>
        <a>h2 안에 있는 a태그에요</a>
 </h2>
      <a>h2 바로 뒤에 있는 a태그에요</a>
      <a>h2 바로 뒤에 있는 a태그에요2</a>
css

h2 + a:hover {
    color  : green
}

マウスを置くと緑の字になります.

10) :last-child / :first-child


エレメントの最後のエレメント/最初のエレメントに適用します.
<h2>
        <a>h2 안에 있는 a태그1 이에요</a> 
        <a>h2 안에 있는 a태그2 에요</a>
        <a>h2 안에 있는 a태그3 이에요</a>
</h2>
css

h2 :first-child{
    color  : red
}
h2 :last-child{
    color  : green
}

11) !重要(推奨しない)


cssは、以下の最後に適用される属性が適用されることを示すが、!importantが使用される場合、優先的に適用される.
p{
    color :pink !important;
}

p{
    color :green;
}

とくしゅせい


cssプロパティが詳細であればあるほど、勝算が高くなります(適用可能性が高い)
inline style>id>class>element順で特異性が高く、専門的な計算機でグーグル優先度を計算できます

3.Googleフォントを使う


Googleフォントに行っていろいろなフォントを試してみます.
自分の好きなフォントを選んで使いましょう.

下端に下図と同じ格子があり、横に+を押すと以下の窓が表示されます


リンクラベルはcssを適用する際に使用したことがあるのでよく知られています.ヘッドラベルに入れて次にfont-familyプロパティを適用したい要素に挿入します.
<head>
    <title>CSS</title>
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
*{
	font-family: 'Roboto', sans-serif;
 }
ただし、このようにcssファイルを外部からインポートすると、HTMLをロードしてcssファイルをインポートするのに長い時間フォントが見えない現象が発生する可能性があります.詳しくはcircial renderpathを勉強します
ActivityのDisplayMetrics
ゴラン地図