一.學習方法
1.如何學習
2.如何解決問題
（2）微博，知乎，論壇
（3）國外資源 （stackoverflow.com）
二。基本用法
1.基本格式： 新增乙個css規則，一些術語、概念講解：宣告、選擇器、屬性、屬性值
2.css新增方式
*內聯樣式表（行內樣式）：p>
*內部樣式表（嵌入式）：head裡面新增上style標籤
*外部樣式表（鏈結式）:
*引入樣式：
三。selectors選擇器
1.標籤選擇器 tag_selector
2.id選擇器 #id_selector
3.class選擇器 .class_selector
1.組選擇器 tag_selector,#id_selector,#id_selector
2.派生選擇器 tag_selector a
3.子類選擇器 tag_selector>a
1.tag_selector#id_selector
2.tag_selector.class_selector
1.tag_selector[name="***"]
2.tag_selector[name^="開頭"]
3.tag_selector[name$="結尾"]
4.tag_selector[name*="包含"]
四、pseudoclasses偽類選擇器
1.未訪問 ：a:link
2.懸浮 ：a:hover
3.啟用 ：a:active
4.已訪問： a:visited --注意訪問順序
5.聚焦 ： input:focus
1.第 n 個：selector: nth-child(3)
2.第（奇數）個：selector: nth-child(odd)
3.第（偶數）個：selector: nth-child(even)
五、widthandheights的設定
1.塊級元素設定寬高
width：300px;
height:200px;
2.非塊級元素設定寬高，必須先設定：display:block;
3.最大、最小寬高設定：
max-width:600px;
min-width:200px;
max-height:500px;
min-height:100px;
其他：溢位的控制：
自動：overflow:auto;
滾動：overflow:scroll;
隱藏：overflow:hidden;
六、position定位
1.相對定位 ：position:relative;
2.絕對定位：position:absolute;
3.固定定位：position:fixed;
七、box_model盒子模型
1.內容：content
2.內邊距：padding
3.邊框：border
4.外邊距：margin
八、centeringcontainer元素居中
1.精確計算
1.設定padding 2.設定margin
2.使用margin的auto值
3.如何使文字居中 text-align:center
九、color顏色設定
1.顏色名：blue、red
2.十六進製制：#000,#fff, #00ff55
3.rgb：rgb(120,255,0)
4.rgba：rgba(120,255,0,0.5)
*alpha通道的透明度和元素的透明度 opacity:0.6
十、displayproperty display屬性設定
1.display:block;
2.display:inline;
3.display:inline-block;
十一、hiding_an_element在網頁上隱藏某個元素
1.display:none 使元素徹底隱藏，隱藏後不占用原空間（看不見摸不著）
2.visibility:hidden 使物件不可見，隱藏後仍占用原空間（看不見但摸得著）
十二、fontbasics字型設定
1.用什麼字型 font-family --kaiti，microsoft yahei···········
2.字型多大 font-size:1.2em; -- 1em=16px;
3.字型粗細 font-weight:bolder; --lighter, bold, normal
4.字型風格 font-style:***; (normal, italic, oblique)
十三、uppercase_lowercase_capitalize 字型大小寫轉換
1.小寫：text-transform:lowercase;
1.大寫：text-transform:uppercase;
1.首字母大寫：text-transform:capitalize;
十四、direction 文字書寫方向
1.從左到右 direction:ltr; (left to right)
2.從右到左 direction:rtl;(right to left)
十五、text_align 文字對其設定
1.左對齊（預設）： text-align：left；
2.右對齊：text-align:right;
3.中心對齊：text-align:center;
4.兩端對齊（文字拉伸）：text-align:justify;
*如果direction屬性是ltr，則預設值是left； 如果direction是rtl，則為right。
十六、text_indent 文字縮排的普通用法 text-indent：-100px;
1.比如：縮排文字，增加段落可讀性
2.比如：凸排列表項，使列表項間更容易區分開來
十七、text_indent特殊用法------用於隱藏文字
1.設定標題（1.隱藏文字；2,用背景替代標題）
2.設定乙個漂亮的按鈕 submit button（1.隱藏文字； 2.用背景替換按鈕）
十八、border_basic border屬性的基本用法
1.邊框樣式：border-style:solid; dashed/dotted/double/groove/insert/outset
2.邊框寬度：border-width:5px; px/em/pt
3.邊框顏色：border-color:#000;
4.簡寫屬性：border:1px solid #000; (寬度 樣式 顏色) 順序可隨意
十九、border實際應用
二十、border使用注意事項
1.一旦設定border屬性，那麼border-style屬性必須設定
2.對布局的影響：
注意新增了border屬性將會使盒子變大（border參與布局） （outline與border顯示效果相同，但不占用空間）
盒子模型大小=content+border+padding
（margin是盒子與盒子之間的間距，盒子大小取決於上面三個要素）
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS學習 CSS學習筆記
出處 注 本學習筆記只是自己的一些備忘，初學者的東西不具有參考性，請到w3school 進行系統學習。學習css我使用的工具是visual css，可以實現同步預覽，快速學習編輯css。1.css的作用 用來規定網頁中的內容的顯示方式，避免給html增加很多的屬性而將 變得臃腫。2.css的應用方式...
CSS 學習筆記
當同乙個html元素被不止乙個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於乙個新的虛擬樣式表中，其中數字4 擁有最高的優先權。1.瀏覽器預設設定 2.外部樣式表 3.內部樣式表 位於標籤內部 4.內聯樣式 在html 元素內部 因此，內聯樣式 在html 元素內部 擁有最...