CSSの基本属性を整理したいです.😊😊

CSSコメント

/*コンテンツ*/

text-align

テキストの位置は、left、right、centerに並べ替えることができる.
👉 <p>``<div>タグの内容もソートできます.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>

<style>
h1{
	text-align: center;
}

h2{
	text-align: left;
}

h3{
	text-align: right;
}
</style>

text-decoration

text-装飾はいくつかの方法でテキストを装飾することができます.

Underline

:スクライブ機能

<h1>Hello World!</h1>

<style>
h1 {
  text-decoration: underline;
}
</style>

Overline

:テキスト上のスクライブ機能

<h1>Hello World!</h1>

<style>
h1 {
  text-decoration: overline;
}
</style>

Line-through

:行は文章を貫く.

<h1>Hello World!</h1>

<style>
h1 {
  text-decoration: line-through;
}
</style>

None

何もありません.主に装飾の除去に用いられる.

html

<a class="no-decoration" 
href="https://www.google.com" target="_blank">구글</a>

css

.no-decoration {
  text-decoration: none;
}

color

文章に色をつけたい場合は、color属性を使用します.

色値の各種記号

カラーアトリビュートは同じ青で指定されます.次のコードは、それぞれ異なる色記号を使用してテキストの色を決定します.

1.色名

石灰、ミント、hotpinkなど.

<h1>Heading 1</h1>

<style>
h1 {
  color: blue;
}
</style>

2. HEX

:16進数記号.ffffff(白)

<h1>Heading 1</h1>

<style>
h1 {
  color: #0000FF;
}
</style>

3. RGB

:rgb光源あたり256個の数値としてマークされます.rgb(0,255,0)

<h1>Heading 1</h1>

<style>
h1 {
  color: rgba(0,0,255,1.0);
}

👉rgbにalpha(不透明度)を付けてマークできます.
範囲0.0～1.0

rgba(255,255,255,0.3)

margin

marginプロパティを使用して、要素間の余白を設定します.空白の大きさはpx単位に設定してもよい.marginプロパティは、複数のタグを使用することもできます.

<h1>Heading 1</h1>

<style>
h1 {
 margin-top: 50px;
 margin-right: 50px;
 margin-bottom: 80px;
 margin-left: 50px;
}
</style>

4つの方法があります.

1.一括指定

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px 7px 3px; (위,오른쪽,아래,왼쪽)
}
</style>

2.すべての側が同じ場合に指定

<h1>Heading 1</h1>

<style>
h1 {
  margin: 50px;
}
</style>

3.上、右|左、下

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px 0px;
}
</style>

4.上|下、右|左

<h1>Heading 1</h1>

<style>
h1 {
  margin: 5px 10px;
}
</style>

CSS Selecter

クラスとIDは同じように見えますが、違いもあります.
1.同じクラス名に複数の要素を持つことができますが、複数の要素が同じIDを共有することはできません.
2.1つの要素には複数のクラスがありますが、1つの要素には1つのIDしかありません.
👉 すなわち,1つの要素に複数のクラスがあり,1つのIDに1つしかない.

element

css

li {
}

class

html

<p class="blue-text">Hello World!</p>

「cssで」.(句号)「忘れないで!

css

.blue-text {
  color: blue;
  font-size: 10px;
}

id

html

<p id="my_text">Hello World!</p>

cssの中の“#”を忘れないでください!

css

#my_text{
  color: blue;
  font-size: 10px;
}