css：cascading style sheets層疊樣式表，級聯樣式表，簡稱樣式表。
定義html頁面中元素的樣式
1.實現內容和表現的分離
2.實現**的可重用性和可維護性
1.html：內容的體現
2.css：樣式的修飾
如果css樣式屬性與html屬性相衝突時，w3c建議盡量使用css屬性去取代html屬性。
1.內聯方式（行內樣式）
也稱行內樣式。
語法：將樣式定義在元素的style屬性中
ex:樣式宣告：由屬性和值組成
ex:css屬性:值;
常用css屬性：
1.color:定義文字顏色
取值：顏色英文單詞
2.font-size:定義字型大小
取值：數值+px
3.background-color:定義背景顏色
取值：顏色的英文單詞
2.內部樣式
將樣式定義在html頭元素中
特點：當前頁面中可以隨意使用定義好的樣式
使用步驟：
1.在增加一對元素
2.在元素中去增加樣式規則
樣式規則：由選擇器和樣式宣告組成
選擇器：規範頁面中哪些元素可以使用定義好的樣式
元素選擇器：由元素名稱作為選擇器，規範當前標記的樣式
選擇器3.外部樣式
將樣式定義在外部的css檔案中，在html頁面對css檔案進入引入
使用步驟：
1.建立乙個css檔案(.css為結尾的檔案)
2.在css檔案中寫樣式規則
3.在網頁中引入css檔案，在head中引入
練習1：
1.使用內聯樣式為p元素設定背景顏色為灰色，字型顏色為綠色，字型大小為50px;
2.使用內部樣式為div元素設定字型大小為70px,字型顏色為藍色。
3.使用外部樣式為span元素設定字型大小為90px,背景顏色為黃色。
大部分樣式屬性可以被繼承（子繼承父）
ex: body
/*以下是標記*/
這是div元素中的內容
sssssss
hhhhhhhh
為乙個元素定義多個選擇器，當樣式宣告不衝突時，多個樣式會疊加到一起被元素所應用。
ex: div
body
/*以下是頁面標記*/
這是div元素中的內容
如果樣式衝突時，按照不同樣式的優先順序來應用樣式。
瀏覽器預設設定 最低
內部樣式和外部樣式 中（就近原則）
內聯樣式 最高
!important規則
將!important新增到樣式屬性值之後，與值
之間用空格隔開。
作用：調整顯示的優先順序
練習2：
在練習1基礎之上，用外部樣式表定義div樣式，設定其字型大小為90px，文字樣色為黃色，改變內部樣式與外部樣式的位置，檢視瀏覽器中的效果。
選擇器作用：用於匹配頁面中的元素
作用：匹配頁面中所有元素
語法：*
效率較低，盡量少用
又叫標記選擇器，標籤選擇器
作用：定義頁面某一類元素的樣式
語法：由元素名稱作為選擇器
ex:div
p{}a{}
header{}
img{}
u{}作用：通過標記所附帶的class屬性值對選擇器進行引用
特點：一段公共樣式，誰想用誰就可以引用
語法：.類名
定義類名注意：
1.不能以數字開頭
2.不能包含特殊符號（#，@，$,%,^,&）,但是包含(-,_)
引用：多類選擇器：
允許讓乙個元素應用多個類選擇器
ex:分類選擇器：
將元素選擇器和類選擇器聯合使用，從而實現對元素的不同樣式的細分控制。
語法：元素選擇器.類選擇器
4.id選擇器
作用：使用元素所附帶的id屬性值來進行樣式的宣告定義
語法：#idvalue
作用：定義一組選擇器的公共樣式
選擇器列表用逗號隔開
ex:div,p.text,#top,.myf,span
作用：依託於後代關係匹配頁面的元素
後代：一級以及多餘一級父子關係
語法：選擇器1 選擇器2 選擇器3
作用：匹配元素不同狀態的樣式
語法： :偽類名稱
選擇器:偽類名稱
偽類分類：
1.鏈結偽類
:link 匹配尚未訪問的超級鏈結
:visited 匹配訪問過的超級鏈結
2.動態偽類
:hover 匹配滑鼠懸停在元素上的狀態
:active 匹配元素被啟用時的狀態
:focus 匹配元素獲取焦點的狀態
練習：按照以下布局寫出css樣式
要求用後代選擇器設定當前文字樣式，當滑鼠懸停時文字顏色為紅色，字型為30px
%：相對單位
px:畫素，文字大小
pt:磅 1/72in
in:英吋-->2.54cm
cm:厘公尺
mm:公釐
em:倍數
1.顏色的英文單詞
red,blue,green,yellow,black,pink...
2.rgb(r,g,b)
r:0-255
g:0-255
b:0-255
3.rgb(r%,g%,b%)
4.#rrggbb
0-9或a-f組成
#000000 黑色
#ffffff 白色
#eeeeee 灰色
5.#rgb
#000 黑色
#fff
#ff11aa-->#f1a
用於設定元素的寬度和高度
預設尺寸：
塊級元素：
寬度：佔據父元素寬度的100%
高度：自適應
行內元素：
寬度：自適應
高度：自適應
屬性： 1.寬度：width
取值：具體數值+px
百分比 %
2.高度：height
取值：具體數值+px
百分比 %
哪些元素的尺寸允許修改？
1.塊級元素允許修改尺寸
2.非塊級元素，本身存在width和height屬性的元素（img,table），允許修改尺寸。
但是不具備width和height屬性的行內元素(a,span,i,u,b)不能修改其尺寸。
就是圍繞在元素內容和內邊距外的線條。
1.邊框屬性
1.簡寫方式
border:width style color;
width:邊框的寬度（粗細）
style:邊框的樣式（實線，虛線）
取值： solid:實線
dotted:虛線
dashed:選線
color:邊框的顏色 合法的顏色值
2.單邊設定
屬性：border-方向：width style color;
方向： top:上
bottom:下
left:左
right:右
初學web前端 20170427
倒角 將元素的直角倒成圓角 取值 1.具體數值 px 2.百分比 設定圓形時使用 屬性 border top left radius 左上角 border top right radius 右上角 border bottom left radius 左下角 border bottom right r...
Web前端初學總結
恢復內容開始 學習了一周的c 這一周學了不少東西，也寫了不少 感覺挺不錯的，總結一下學到的東西。最基礎的就是變數 資料 運算。這裡面包含了不少的 基礎規則，多用，多記就好了。然後是流程控制，這其中所包含的東西就不僅是需要記住就可以的，還得弄明白，想明白。裡面牽涉到邏輯問題，if判斷，switch選擇...
初學者web前端學習筆記
對於 if 語句括號裡的表示式，ecmascript 會自動呼叫boolean 轉型函式將這個表示式的結果轉換成乙個布林值。如果值為 true，執行後面的一條語句，否則不執行。通過arguments 物件的length屬性，來智慧型的判斷有多少引數，然後把引數進行合理的應用 比如，要實現乙個加法運算...