20.11.27-5日間

🤩Backgrounds

🎠background-Image

要素を指定する背景画像

のデフォルトでは、要素

全体を覆うように画像が繰り返される.
🎠background-repeat

画像

を水平および垂直に繰り返す.

画像サイズが小さい、水平、垂直に繰り返し表示可能、

レベルでのみ繰り返したい場合は、バックグラウンド繰り返し:repeat-x;

歳を繰り返すには、背景:repeat-yを繰り返します.

は1回のみ表示され、背景は繰り返します:no-repeat;

🎠background-position

left

right

top

bottom

ex) background-position: right top;
右上隅
🎠background-attachment

の背景画像をスクロールするか固定するかを指定します.
(ページの残りの部分にスクロールしない)

background-attachment: fixed;

background-attachment: scroll;

🎠Shorthand

コードを減らすには、単一のプロパティにすべてのバックグラウンドプロパティ

を指定します.
ex)
                                                            👇👇
😃このオプションを使用すると、属性値の順序は次のとおりです.

background-color

background-image

background-repeat

background-attachment

background-position

🤩Borders(ボーダー)

borderを使用して、枠線のスタイル、幅、色を指定します.
🎠border-style(枠線タイプ)

破線ボーダー

破線ボーダー

ソリッドステート-堅牢な枠線

両端

-3 D溝の枠線.(枠線の色の値に依存)

リッジ-3 Dリッジの枠線.(枠線の色の値に依存)

insert-3 D挿入ボーダー.(枠線の色の値に依存)

開始-3 D開始ボーダー.(枠線の色の値に依存)

none-境界なし

非表示-枠線を隠す

🎠border-width(幅)

の幅は、特定の寸法を「px、pt、cm、em」等に設定してもよいし、予め定義する3つの値(やせ、中、厚い)のいずれかを用いる

を設定してもよい.

左、右、上、下の4つの値

🎠border-color

の枠線を設定する色

左、右、上、下それぞれ

を設けることができる.
🎠border-style:sides(エッジインタフェース)

/*four values*/
p.four {       /*top   right bottom  left */
  border-style: dotted solid double dashed;
}

/* Three values */
p.three {       /*top  right bottom - left는 마주보는 right와 같음*/
  border-style: dotted solid double;
}

/* Two values */
p.two {        /* top  right - bottom은 top과 left는 right와 같음*/
  border-style: dotted solid;
}

/* One value */
p.one {          /*전체 똑같음*/
  border-style: dotted;
}

🎠Shorthand
👉1つの枠線属性

border-width

border-style(必須!!)

border-color

ex)

🎠border-radius(円形枠線)
border-radius: __px;
--の数値が高いほど、曲線の形状が明らかになります.
なんてことだ

🤩Margins(マージン)

👉各余白を指定するプロパティ

margin-top

margin-right

margin-bottom

margin-left

👉すべての余白アトリビュートには、次の値があります.

auto-ブラウザ計算マージン
(コンテナ内に要素を水平方向に中央に配置すると、要素が指定する幅を占め、残りの空間が左と右の間に均一に分布する)

.

長さ-エッジピッチをpx、pt、cmなどの

に指定します.

%-

を含む要素の幅を指定します.

継承-空白を親要素から継承するには

を指定します.
👉Shorthand
sideと同様に、左から右、右、左から順に.

🤩Padding

枠線とコンテンツの間の空間

の境界に相当します.

🤩高さ/幅(高さ/幅)

👉ツールバーの

auto-デフォルト.ブラウザの計算高さと幅

長さ-高さ/幅はpxです.

cmと定義

%-コンテナブロックの幅を

パーセントとして定義します.

初期高さ/幅がデフォルトの

に設定.

継承-親から高さ/幅を継承
注意)heightプロパティとwidthプロパティには、塗りつぶし、枠線、または余白は含まれません.エレメントの塗りつぶし、枠線、および余白の内側領域の高さ/幅を設定します.

🎠最大幅(最大幅)

最大幅

を設定するためのものである.

🤩Text

🎠Alignment

text-align-テキストの水平位置合わせを設定するための

right, left, center

previdence-各線が同じ幅であることを確認します.
左右のマージンは直

である.
🎠Decoration

テキストの装飾を設定または削除するための

text-decoration: none; - リンクから下線を削除する場合によく使用されます

h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
🎠へんかん

text-transform-大文字と小文字を指定するための

は、すべてのコンテンツを大文字または小文字に変更したり、各単語の頭文字を大文字に変更したりするために使用されます.
ex)
大文字)THIS IS SOME TEXT.
{text-transform: uppercase;}
小文字)これはtextです.
{text-transform: lowercase;}
最初の字)これはSome Textです.
{text-transform: capitalize;}
🎠間隔(Spacing)

text-インデント-テキストの最初の行のインデントを指定します.
ex) text-indent: 50px;

文字間隔-テキスト内の文字間のスペースを指定します.
間隔を増やした場合:アルファベット間隔:3 px;
間隔を小さくする場合:アルファベット間隔:-3 px;

行-高さ-行間

を指定します.

単語間隔-単語間のスペースを指定する

-要素の内部でスペースを処理する方法を指定します.
white-space: nowrap; 改行を無効にする

🎠Shadow

text-シャドウ-テキストにシャドウを追加

最も簡単な使い方は、水平シャドウ(2 px)と垂直シャドウ(2 px)のみを指定します.
ex)

text-shadow: 2px 2px;
text-shadow: 2px  2px  5px  red;
                   /*흐림효과*/

🤩Links

👉リンクのステータス

a:link-非オンサイト通常リンク

a:アクセス-ユーザーアクセスのリンク

a:hover-ユーザーがマウスを離したときのリンク

a:active-クリック瞬間リンク

👉順序規則

a:hoverは、a:linkおよびa:アクセス後に到着する必要があります.

a:activeはa:hoverの後にある必要があります.

😉リファレンス

https://www.w3schools.com/