2019.4.3 HTML&CSS 理論部分

#HTML

塊標籤

• 1.獨佔一行,不和其餘標籤待在一行;
• 2.能設置寬高

常見的塊標籤:h1-h6,p,div,table,hr,br,ul,ol,

行標籤

• 1.能夠和其餘行標籤待在一行
• 2.不能設置寬高

常見的行標籤:a,em,strong,span(行標籤中的div)

行內塊標籤

• 1.能夠設置寬高

常見的行內塊標籤:input,img,textarea

行塊標籤轉化

inline 表明行標籤 display: inline 塊標籤轉換行標籤 block 表明塊標籤 display: block 行標籤轉換塊標籤 inline-block 表明行塊標籤(行標籤的特性多一點) 能夠設置寬高 也能夠在一行顯示 display: inline-block;

常見標籤書寫規則

• 1.a標籤不能嵌套a標籤
• 2.塊標籤中能夠寫塊標籤和行標籤(可是不是全部的塊標籤均可以)
• 3.p標籤和h1-h6標籤不能嵌套塊標籤
• 4.行標籤只能嵌套行標籤,不能嵌套塊標籤
• 5.注意縮進

css

css

內聯樣式表,最新版本是css3

引入方式

• 內部引入
• 直接寫
• 外部引入

選擇器

在css中用來選擇標籤的一個規則

標籤選擇器

選擇全部的標籤更改樣式

id選擇器

根據標籤的id屬性選擇該標籤

類選擇器

內容能夠用div包起來在div裏設計樣式

後代選擇器

無論隔多少層,都會被選中 .con p{ color:red; }

子代選擇器

直接選擇子元素 .con>p{ color:red; }

羣組選擇器

並列選中全部的指定元素 h1,h2 { color: blue; }

屬性選擇器

規定屬性的選擇器 input[type="text"] {

background-color: green;

}

僞類選擇器

a:link{
       /*連接沒有被訪問*/
       color: gray;
   }
    a:visited{
        /*連接被訪問過*/
        color: red;
    }
    a:hover{
        /*鼠標懸停*/
        color: deeppink;
    }
    a:active{
        /*鼠標點擊*/
        color: gold;
    }

選擇器的優先級

優先級比較的是相同的css樣式 標籤選擇器 < 類選擇器 < id選擇器

外部引入和內部引入沒有優先級之分 行內樣式優先級高於head裏寫的

class的命名規範

見名知意 以數字字母下劃線組成 可是不能以數字開頭