HTML,CSSの続き。Progate中級編を終えて。
Progate中級編の復習をします。
CSS一覧
-
background-image: url()背景画像 -
background-size: cover;背景画像で範囲を埋め尽くす -
margin: 0 auto;中央揃え -
opacity: 0~1要素の透過。←0が透明、1が不透明 -
-color: rgba(0~255,0~255,0~255,0~1);色だけの透過。 -
letter-spacing: 2px;文字の横間隔 -
line-height: 20px;行の高さを指定。しかも、高さの中央に文字が来るようになる。 -
input :hover{「カーソルが乗った時に」 -
transition: all 3s;アニメーションの指定。「変化を適応する対象」「何秒」 -
border-radius: 10px;角を丸める -
text-align: left/center/right;要素を左/中央/右に。 -
font-weight: normal/bold;フォントを通常/太字に。 -
width: 25%;親要素に対して25%の幅を持つ。 -
position: absolute; top: 20px; left: 20px;画面上かrelativeからの距離で場所を決める。 -
position: relative;absoluteの親になれる。 -
position: fixed;要素を固定する。 -
cursor: text;カーソルがテキストモードの表示になる。 -
cursor: pointer;カーソルが指モードになる。 -
cursor: default;カーソルがいつもの矢印になる。 -
:active{「クリックされているときに」 -
box-shadow: none;影を消す。 -
z-index: 0~;要素の重なり順を指定。値が大きい方が表に来る
インラインブロック要素
＊インライン要素はwidth, height, 上下marginが指定できない。
そのため、インラインブロック要素に変える必要。
display: inline-block;インラインブロック要素化
display: block; ブロック要素化
display: inline; インライン要素化
＊インライン要素はその要素しか（文字だけ。など）クリックできない。
＊ブロック要素にすると、paddingなど要素全体がクリックできる。
場所を指定するときのfloat/margin/text-align
floatはブロック同士を横並びにするイメージ。
margin: 0 auto;はブロック要素を中央にもってくるイメージ。
text-align: left/center/rightは、ブロックの中にある要素の位置を決めるイメージ。
Facebookの"f"のようなアイコンを使いたい
- Font-Awesomeの読み込みをheadタグ内でする。
- spanタグ内で読み込み。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<span class="fa fa-facebook"></span>
</body>
</html>
要素を重ねたい
画像に文字など、要素同士を重ねたいときはposition: absolute;とposition: relative;をつかう。
1.position: relativeを親要素につける
2.position: absoluteで子要素の位置を親から指定。
Author And Source
この問題について(HTML,CSSの続き。Progate中級編を終えて。), 我々は、より多くの情報をここで見つけました https://qiita.com/takamin3106/items/fa4cc2c7dc9377060f4b著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .