一、html需掌握的：

1.　img標簽

　　屬性：src  alt  title  width  height

2.　a標簽

　　屬性：href  target

3.　ul 標簽及li 標簽，二者都是塊級標簽

　　ul 屬性（type：disc  circle  square  none）

4.　table 標簽及 tr 標簽 和 td 標簽和 th 標簽

　　屬性：border    cellpadding    cellspacing    width    rowspan    colspan

5.　form 表單  input 標簽 ：type類型

6.　select 標簽 option 標簽

　　屬性：multiple  及 selected

 
7.　lable 標簽 

　　屬性：for

二、css需要掌握的第一部分：查找標簽

1.css三種導入方式：

　　1.行內式：常用在網站頁面最下端，網站的介紹中

　　　　缺點：html與css代碼雜糅在一起，耦合性太強

　　2.嵌入式：<style></style>

　　3.鏈接式：<link rel="stylesheet" href=""/>

2.css選擇器：

一 基本選擇器

       1 標簽選擇器
        div{
            color: red;
        }
        2 id選擇器
        
 
#p2{
            color: red;
        }
       3 class選擇器

        .c1{
            color: red;
        }
       4 通配選擇器（了解）

        * {
            color: red;
        }


        二 組合選擇器

        1 後代選擇器

        .c2 p{
            color: red;
        }


         2 子代選擇器

        .c2>p{
            color: red;
        }


        
 
3 毗鄰選擇器 （了解）

        .c2+p{
            color: red;
        }

        4 兄弟選擇器 （了解）

        .c2~p{
            color: red;
        }


        5.多元素選擇器

        .c2 .c3,.c2~.c3{
            color: red;
            background-color: green;
            font-size: 15px;
        }
        
        6.   p.c1{
            color: red;
        }       表示的是選擇一個既是p標簽並且是c1類標簽的
       
        7.   class=‘s1 c1‘    標簽可以有多個類名

        8.屬性選擇器： （可以自定義屬性）
                1.    [egon] {
                            color: red;
                           }        
                

                2.    [egon=‘dog‘] {
                            color: red;
                           }     

                3.    p[egon] {
                            color: red;
                           } 
                    選擇的是p標簽中屬性是egon的  如：<p egon="dog">asd</p>

3.偽類： 偽類都是通過： 實現的 偽類的目的：解耦

　　anchor偽類：   一般和a標簽連用

　　　　屬性：

　　　　　　：link {color: red;}     沒有接觸過的 鏈接是 紅色

　　　　　　：hover {color: gray;}　　鼠標懸浮在鏈接上 是 灰色

　　　　　　：active {color: green;}　　訪問時 是 綠色

　　　　　　：visited {color: gold;}　　訪問完  是 黃色　



    　    .outer:hover .inner1{color: gold;}
            表示的是 懸浮在outer位置時  outer的後代inner1區域變化顏色
            這種情況，只能是後代，其他情況不行

before after 偽類

例：p:before{content:"hello";color:red;}

4.選擇器優先級：

三、css需要掌握的第二部分：屬性操作

1.文本：

　　1.顏色：十六進制/red/RGB

　　2.位置：　　水平：text-align：left / right / center / justify

　　　　　　　　垂直：line-height=行高

　　3.間距：line-height：10px;       

　　4.文本與圖片對齊：vertical-align：middle / top / ±數字（+下移，-上移）          註意：動的是圖片

　　5.對 a 標簽操作時 一定要定位到 a 標簽：text-decoration：none;  去掉a 標簽的下劃線

　　6.font-size：10px;  字體大小

　　7.font-weight：light / bold / broder  調字體粗細

　　8.font-style：oblique/italic   斜體

　　9.text-indext：30px;   首行縮進
　　
　　10.letter-spacing：10px;　　字母間距

　　11.word-spacing:20px;　　單詞間距

2.內外邊距 padding 與margin

padding    內邊距    加上padding後盒子區域會變大

padding 簡寫：
    padding：50px     上下左右都是50
              ：50px 20px    上下50
              ：50px 20px 10px   上 50   左右 20  下 10
              ：50px 20px 10px 10px     上 50    右  20  下 10   左 10 


margin：盒子與盒子的距離（外邊距）
            
                {width:80%;
                    margin: 0 auto;
                           }            
               0 表示上下距離，auto 是左右居中                    

3.邊框屬性border

border        加上border後盒子區域會變大
      屬性：
        1.border-width    

        2.border-style    

        3.border-color

        4.簡寫：  border：3px solid red;

4.背景屬性

1. background-color: red;

2.background-image: url("");

3.background-repeat: no-repeat / repeat-x / repeat-y;   圖片重復    

4.background-position: center;  
   （與background-position:center center一樣）

    background-position: 400px 200px;  背景圖片距離左邊界400px，上邊界200px

5.簡寫：background：url("") no-repeat center;    圖片居中不重復

6.窗口小圖片大時，移動圖片，在瀏覽器中調尺寸

5.display 屬性

dispaly：inline-block     變成內聯塊級標簽---可以解決塊級在一行顯示問題

dispaly：none      隱藏盒子
    三個盒子，如果中間的盒子設置了dispaly：none ，並且它是三無屬性（無邊框、無padding、無文本），那麽下方盒子就會頂上來
    

6.overflow 屬性

overflow：hidden / auto / scroll

overflow：hidden  解決溢出問題

7.position 定位

1. position：static  默認位置

2. position：fixed   固定位置

    例子：     position：fixed；
                  top / left / bottom / right ：20px     （相對可視窗口的距離）
  
3. position：relative;   相對自己的位置，並且原位置保存

    例子：     position：relative；
                  top：20px;
                  left：200px;   

4. position：absolute;        相對已定位的父級，並且原位置不保存

   例子：     position：absolute;
                  top：200px;
                  left：200px;   
                           

8.float 浮動屬性： 解決多個塊級標簽在一行顯示

1.浮動布局的位置：看上一個元素是不是浮動元素，如果是就挨著放，如果不是就另起一行放

2.清除浮動：
　　1  clear：left;  清除自身左側不能有浮動元素
　　2  clear：right； 清除自身右側不能有浮動元素
　　3  clear：both；  清除自身左右兩側不能有浮動元素（按照先後順序判斷）
　　4  父級塌陷問題

python-day52--前端html、css