### 1.css常見樣式 1.內部樣式，適用于不多的較為簡潔的樣式 ``` <style> div{ font-size:30px; background:red; } </style> ``` 2.內聯樣式【不要用】 ``` <div class="one" style="background:red;font-size12px;"></div> ``` 3.外部樣式表【重點掌握，極力推薦】   ***** ### 2.常用CSS屬性 ~~~ width height color //字體顏色 background-color padding //內邊距 margin //外邊距 border //border-width， border-style，border-color border-color border-style //solid可見 border-width line-height text-align //文本水平方向(可對內聯塊和內聯標簽設置) text-indent //首行縮進 text-decoration //text-decoration:underline/overline/line-through/none 下劃線 cursor: pointer; //鼠標變成抓手 list-style:none; //去掉無序列表前面的圓點(“ul”和“li”均可使用) ::after //偽元素(在元素之前添加內容) ::before //偽元素(在元素之后添加內容) //按如下順序，才能實現組合效果 :link //未訪問的鏈接 :visited //已訪問的鏈接 :hover //鼠標移動到鏈接上 :active //選定的鏈接 ~~~ ***** ### 3.margin，padding設置 ``` 1.margin/padding:10px; //四個方向都改變，距離一樣 2.margin/padding:10px 20px; //第一個值:top,buttom;第二個值:right,left 3.margin/padding:10px 20px 30px; //第一個值:top;第二個值:right,left;第三個值:bottom 4.margin/padding:10px 20px 30px 40px; //top,right,bottom,left ``` ***** ### 4.內聯塊、內聯標簽變為塊標簽 ``` display:block; ``` ***** ### 5.水平居中 #### **塊標簽水平居中** ##### 方法一： ``` margin-left:auto; margin-right:auto; ``` #### **內聯塊、內聯標簽水平居中** ##### 方法一： ``` text-align:center; //在不改變display的情況下 ``` ***** ### 6.樣式重置 ~~~ *{ margin:0; padding:0; } ~~~ ***** ### 7.元素、class、id選擇器  <br/>  ***** ### 8.分組選擇器  ***** ### 9.后代選擇器    ***** ### 10.兄弟選擇器 ``` .one+p //選中one之后第一個p標簽 .one~p // 選中one之后所有的p標簽 ```   ***** ### 11.偽類選擇器 ~~~ :hover //鼠標懸停 :focus //獲取焦點 ~~~ ***** ### 12.偽元素 偽元素是用CSS代碼生成的元素，不是像p，div，h1這樣已經定義好的元素  >網頁效果圖  ***** ### 13.選擇器優先級  ***** ### 14.鼠標懸置放大圖片  ***** ### 15.去掉div下img 下端的空白  ***** ### 16.background ``` background:red; //設置單個值其他各個值默認 ``` ##### **background值順序** ``` background:color image repeat position ``` ##### **背景圖** ``` background-image:url("xxxxx"); ``` ##### **背景重復** ``` background-repeat:repeat/no-repeat/repeat-x/repeat-y ``` ##### **背景圖位置** ``` background-position-x:center; background-position-y:center; ``` ##### **背景大小 width height** ``` background-size:100% 50%; background-size:cover/100% 100%; ```  #### **背景關聯** 如果文檔比較長，那么當文檔向下滾動時，背景圖像也會隨之滾動。當文檔滾動到超過圖像的位置時，圖像就會消失。您可以通過`background-attachment` 屬性防止這種滾動。通過這個屬性，可以聲明圖像相對于可視區是固定`fixed`，因此不會受到滾動的影響： ~~~ body{ background-image:url(/i/eg_bg_02.gif); background-repeat:no-repeat; background-attachment:fixed/scroll (默認滾動); } ~~~ #### **background，background-color，background-image使用時應該注意的問題** 只給background設置背景圖，那么color默認為transparent（透明） ``` background:url(); ``` 如果設置background-image，那么要讓color透明就需要單獨設置，并且要讓背景有顏色就應該設置background-color，而不是直接設置background； ``` background-image:url(); background-color:xxx; ``` ***** ### 17.圖像自適應 ~~~ img{ max-width:100%; height:auto; } ~~~