CSS学習ノート(詳細)
10527 ワード
CSS
CSSの3種類の導入方式
優先度:近接原則、この要素に近いものはどのスタイルですか/* */
<head>
<title>title>
<style>
h1{
color:#000000;
}
style>
head>
/* */
<h1 style="color:red">
h1>
/* */
/* ： */
<link href="css " rel="stylesheet">
/* ： */
<head>
<title>title>
<style>
@import url="css "；
style>
head>
セレクタ
3つの基本セレクタ:優先度:idセレクタ>classセレクタ>ラベルセレクタ/*1. */
h1{
}
/*2. */
.xxx{
}
<h1 class="xxx">h1>
/*3.id id */
#xxx{
}
<h1 id="xxx">h1>
階層セレクタ
/*1. ： */
body p{
} //body p
/*2. ： */
body>p{
} //body p
/*3. ： */
.active + p{
}
<p class="active">p0p>
<p>p1p> // p
/*4. */
.active~p{
}
<p class="active">p0p>
<p>p1p>
<p>p2p> // p
ファブリック擬似クラスセレクタ
：
ul li:first-child{
} //ul li
ul li:last-child{
} //ul li
p:nth-child(1){
} // p ， p ，
p:nth-of-type(1){
} // p p
a:hover{
} // a
属性セレクタ(共通)
：
a[id]{
} // id a
a[class *="front"]{
} //class front a
a[href ^= http]{
} //href http a
a[href $= .com]{
} //href .com a
Web要素の美化
spanラベル:重点的に表示する字はspanでカバーします
rgba:最後のaは透明度を設定し、0~1の値をとる
例:rgba(255,0,0,0.5)
1.フォントスタイル
font-family
フォント
font-size
フォントサイズ
font-weight
フォントの太さ
color
フォントの色
2.テキストスタイル
text-align
レイアウト
left,right,center
text-indent
最初の行のインデント
height
テキストの行の高さ
line-hight
行ごとの行の高さ
text-decoration:
線
overline,line-through,underline,none
vertical-align:
テキスト画像の配置
middle
text-shadow
影
10 px 10 px 10 px black水平シャドウの位置、垂直シャドウの位置、ぼやけた距離、シャドウの色
3.ハイパーリンク擬似クラス
a:hover
マウスが止まった時
a:active
マウスを押して離さないとき
a:visited
リンクがアクセスしたとき
a:link
リンクのデフォルトの状態
4.リスト
list-style:
none
liの前の小さな点を取り除く
circle
中空円
decimal
数値
square
正方形
5.背景
background-img:url("")
画像を挿入
background-repeat
repeat-x
repeat-y
none-repeat
6.グラデーションbackground-color:#FFFFFF;
background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);
ケースモデル
/* */
<head>
<title>title>
<style>
h1{
color:#000000;
}
style>
head>
/* */
<h1 style="color:red">
h1>
/* */
/* ： */
<link href="css " rel="stylesheet">
/* ： */
<head>
<title>title>
<style>
@import url="css "；
style>
head>
/*1. */
h1{
}
/*2. */
.xxx{
}
<h1 class="xxx">h1>
/*3.id id */
#xxx{
}
<h1 id="xxx">h1>
/*1. ： */
body p{
} //body p
/*2. ： */
body>p{
} //body p
/*3. ： */
.active + p{
}
<p class="active">p0p>
<p>p1p> // p
/*4. */
.active~p{
}
<p class="active">p0p>
<p>p1p>
<p>p2p> // p
：
ul li:first-child{
} //ul li
ul li:last-child{
} //ul li
p:nth-child(1){
} // p ， p ，
p:nth-of-type(1){
} // p p
a:hover{
} // a
：
a[id]{
} // id a
a[class *="front"]{
} //class front a
a[href ^= http]{
} //href http a
a[href $= .com]{
} //href .com a
background-color:#FFFFFF;
background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50%,#FF0000 100%);
margin:外距離
padding:内側余白
border:枠線
margin:0px 0px 0px 0px;//4つの変数は、順序上、右、下、左であるべきです.
margin:0px 0px;//2つの変数の場合は上下、左右の順になります
margin:0px;//1つの変数の場合、4つのエッジを値に統一します.
margin:0 auto;//中央を設定できます.中央はブロック要素でなければなりません.固定幅が必要です.
2.規範用div分箱
3.フィレット
border-radiusの4つの変数はそれぞれ左上,右上,右下,左下である
4.影
box-shadow:100px 100px 100px red
5.フローティング
≪ブロック・レベル要素｜Block Level Elements｜oem_src≫:排他的な行
h 1~h 6 p divリスト...
≪行内要素｜Line Elements｜oem_src≫:1行を排他しない
span a img strong…
6.親ボーダーの集約の問題
1.親要素の高さを増やす
2.空のdivラベルを追加し、フローティングをクリア
.clear{
clear:both;
margin:0;
padding:0;
}
<div class="clear">div>
3.overfloat
overfloatの追加:scroll;
4.親に擬似クラスを追加
#father:after{
content:'';
display:block;
}
位置
1.相対位置決め
position:
relative
元の位置に対してシフト
left
right
top
bottom
2.絶対位置決め
position:
absolute
親要素のない場所は、ブラウザに対して位置します.
3.固定位置決め
position:
fixed
ページに対する配置は、ナビゲーションバーでよく使用されます.
4.z-index階層
z-index:
0~999
便箋にz軸を付けるのは、最上位または最下位に配置するのと同じです.
opacity:
0~1
背景の透明度の設定
アニメーション(Animation)
多くネットで探して、ただ理解するだけでいいです