[TIL]20210712

アルゴリズム#アルゴリズム#

今日解いた.

ネットワーク

属性-color

16進数ex.#RGB
headではh1 {color: 색상 값;}body表示<h1 style="color: #ff0000"> heading </h1>さらに、colorだけでなく、色に関連するほとんどの属性にも適用されます.
ex) <div style="background-color:rgb(255,0,0)"></div>色キーワードex.black,red
CSS自体の使用可能な文字識別子.
あらかじめ定義されたキーワード(red、blue、blackなど)を使用して色を表すことができます.
>注:キーワードの透過性は透過性を表します
16進ex.#RRGGBB
6桁の16進数で2つの位置に同じ値がある場合は、3桁のサムネイルを使用します.
例えば、aa 11 ccは、a 1 cと略すことができる.RGB(0,0,0)RGB値は、各変数値(R赤、G緑、B青)の強度をrgb(R、G、B)として定義する.
0～255の整数値を指定できます.0→255は黒から白への値の変化を表します.RGBA(0,0,0,0)RGBA値は、既存のRGBに追加されたA値です.
各変数はrgb(R,G,B,A)の形で(R赤,G緑,B青,A透明度)の強度を定義する.
A値は、0から1までの値を指定し、0.5などの小数で表すことができます.
0→1は透明から不透明への値の変化を表します.
例えば、rgba(0,0,0,0)は透明な色を有する.

属性→背景

background-color
デフォルト:透過
背景色のプロパティを指定します.
前のカラーコースで学習したカラー値と同じです.
background-image
デフォルト:none
背景として使用する画像のパスを指定するプロパティです.
urlのパスには、絶対パスと相対パスが含まれます.
background-colorに色を適用し、background-imageとして画像を使用すると、画像に透明な部分があります.
その部分に背景色が出ます
background-repeat
デフォルト:repeat
画像が重複しているかどうかと画像方向のプロパティを指定します.
デフォルト値がrepeatのため、個別に設定しない場合はx、y軸で繰り返し表示されます.
background-repeatの値は次のとおりです.
<属性値>
repeat
x、y軸を繰り返します.
repeat-x
x軸方向にのみ繰り返します.
repeat-y
y軸方向にのみ繰り返します.
no-repeat
画像を繰り返さない.
background-position
デフォルト:0%
0%要素の背景画像の位置を指定するプロパティです.x軸とy軸の位置を指定できます.値の宣言順序はx軸とy軸の間隔です.片側のみを指定すると、残りの部分は中心値として適用されます.
<属性値>
%
画像の%点を基準の%点に重ねます.
px
画像上の(0,0)点を基点pxからの距離と一致させる.
*ここでの基準は画像の左上隅です.
キーワード
top、left、right、bottom、centerキーを使用できます.
宣言順序にかかわらず、キーワードは上、下をy軸、左、右をx軸とします.
background-attachment
デフォルト:スクロール
画面のスクロールに伴って背景画像が移動するかどうかを指定します.
<属性値>
scroll
背景画像は、要素自体に対して固定されており、コンテンツに従ってスクロールされません.
local
背景画像は要素の内容に対して固定され、内容に従ってスクロールされます.
fixed
バックグラウンドイメージはビューポートに対して固定され、スクロールの影響を受けません.(ビューポート:ユーザーが表示できるWebページ領域.)
例>>

height: 500px;
      background-color: yellow;
      background-image: url(https://www.w3schools.com/CSSref/img_tree.gif);
      background-repeat: no-repeat;
      background-position: center top;