雖說菜鳥教程寫的更全

css選擇器

選擇器結合使用作用更大,中間用空格分開

• 派生選擇器

/*最簡單的，選擇label然後設定屬性,可以巢狀*/
div strong i {
    attribute: ;
}
/*也可以div i{}直接選取後代元素*/

/*但是子選擇器只能一層一層選擇*/
div>strong>i{}

<div ><strong > <i>!!!</i> <i>???</i> </strong><\div>

• Id選擇器

/*因為id是唯一的所以id選擇的時候可以不需要派生選擇器，但是不能結合其他的使用*/
#idname
{
	attribute: ;
}
 

• Class選擇器

.classname
{
	attribute:;
}

• 屬性選擇器

/* 指定屬性的型別不是標籤的名字 比如title ，herf！！！...*/
[title]{
	attribute1:1;
}

/* 屬性選擇器也可以指定特定屬性的名字*/
[title='asdf']
{
    attribute:..;
}
[title~='as'] /*關鍵字匹配，包含關鍵字即匹配*/
<div title='asdf'>qrew</div>
<div title='asfd'></div>
<div title>qwerwr</div>
 

• **萬用字元 *** 如果存在萬用字元，那麼如果你沒有給一個標籤自定義，則自動擁有萬用字元的屬性

/*通常定義外內邊界*/
* {
	padding:0px;
	margin:0px;
}

css 屬性

背景

• background-attachment:背景影象是否滾動;
• background-color:背景顏色;
• background-img:背景設定為圖片;
• background-position:背景圖片起始位置;
• background-repeat:背景是否重複及如何重複;

文字

/*
{
	color: 字的顏色;
	padding:字與邊框的間距;
	direction:文字方向;
	text-align:對齊文字;
	text-decorate:修飾文字; 比如超連結有下劃線，可以把這個屬性變為none就沒了
	word-spacing:字間距;
	letter-spacing:字元間距;
	text-indent:首行縮排em;
	text-shadow:陰影離字前方的距離 px陰影離字上方的距離 px 陰影后方距離px陰影顏色color;字陰影

	font-size:字型大小px;
	font-family:字型樣式;
        如果沒有可以
        @font-face{
            font-family:yourfontname;
            src:url();
        }
        之後使用yourfontname可以自動從src下載
}
*/
 

連結

• a:link 普通的,未被訪問過的連結
• a:vistied 訪問過的連結
• a:hover 滑鼠位於連結上方
• a:active 連結被點選時刻時

浮動 float

與left，right相似但是浮動不佔不浮動的'位置'，但是浮動之間還是在同一層，也可以設定position來控制不同的層級

浮動優先橫向排滿，再縱向增加

• left,right 向左向右浮動
• none 元素不浮動
• inherit 繼承父親的浮動屬性
• clear：xxx 去掉xxx的浮動效果

clear:left; /*去掉向左浮動效果*/

列表標籤 ul

感覺好多，隨便寫寫了

通常形式如下

<ul>
	<li>...</li>
	<li>..</li>
</ul>

通常設定display margin padding float屬性

比如display: inline 可以橫向排放

盒子模型 container

盒子模型包括外邊距（padding），內邊距（margin），內容（content），邊框（broder）

#paddingattribute{
	padding:;
	padding-left:;
    padding-right:
	padding-bottom:;
}

#marginattribute{
    margin:;
    margin-left:;
    margin-right:;
    margin-bottom:;
}

#broderattribute{
	border:;
   	border-top|left|right|bottom-width:;
    border-top|left|right|bottom-color:;	
    border-radius:px;/*邊框圓滑度*/
    box-shadow:apx bpx cpx color; /*邊框陰影*/
    border-img:；
}

2D，3D旋轉 transform

這個屬性太多還是直接看文件吧

動畫效果 animation

有六種屬性（必須規定前兩種屬性）

• animation-name

• animation-duration

• animation-timing-function

• animation-delay

• animation-iteration-count

  n或infinite（無限次）

• **animation-direction **

  normal：正常播放

  alternate：輪流反向播放

定義了animation一定要（定義keyframes）

{
    animation: animation_name 5s infinite alternate
	/*
    指定瀏覽器上的animation
    webkit-animation:animation_name time
    */
}

@keyframes animation_name{
	0%{...}
	23%{..}
	...
}
/*指定瀏覽器上的關鍵幀*/
@-webkit-keyframes animation_name{
    0%{...}
    ...
}

過渡 transition

包括四種屬性：

1. transition-property(過渡的名稱,旋轉之類的)

2. transition-duration(過度花費的時間)

3. trainsition-timing-function(過渡曲線)

4. trainsition-delay(延遲多久開始)

{
	transition:1 2 3 4;
    /*也可以直接指定屬性賦值*/
    transition-property:...;
}