HTM L+CSS所學基本知識點

標籤：

 

1、html製作頁面的結構，由head和body構成。

 

2、CSS為頁面的顯示樣式，可以控制頁面中的元素的位置，顏色，大小等。

 

3、html代碼注釋方式<!--代碼注釋部分-->

 

4<head>   <body>   <div>  <h1>-.......<h6>  <p>  <br>  <hr>   <span>   <pre>  <strong>   <em>   <q>   <blockquote>  <adress>   <code>   <pre>  <ul>  <ol>  <li>  <table>   <caption>  <a>  <img>  <input>  <option>

 

5、CSS注釋方式 ：/*CSS代碼注釋*/

 

6、CSS的樣式添加方式：（1）直接以style=“color：red;”的方式添加在標籤中（內聯樣式）。（2）在頭部<head>中的<style>用選取器的方式添加樣式（內建樣式）。（3）將CSS寫在另一個文檔中B，在文檔頭部<head>中以link連結的方式將文檔B加入（外部樣式）。

 

7、樣式優先順序：內聯>嵌入>外部。多個同樣選取器的內建樣式時，按照最後一個的樣式來。也可以在屬性值後加!important來增加優先順序。

 

8、CSS選取器：（1）標籤選取器q{}，權重001。（2）類別選取器.class{}，權重010。（3）id選取器#id{}，權重100。（4）子選取器p>span{}。(5)後代選取器p  span{}。（6）通用選取器*{}。（7）偽類別選取器a:hover{};a:link{};a:actived{};a:visited{}。（8）分組選取器p,h1{}。

 

9、繼承：某些樣式會繼承父類的樣式，比如font-size,color等。但是某些樣式則不會繼承，比如border。

 

10、CSS樣式：font-family、font-size、font-style、color、text-decoration、text-indent、letter-spacing、line-height、text-align。

 

11、盒子模型：由四部分組成，分別為content、padding、border、margin。長度：margin-left+border+padding-left+content+padding-right+border+margin-right。填充是盒子中的padding、邊界是border部分。

 

12、元素分類：（1）塊級樣式：block，寬度是父類寬度，可以設定樣式的寬度、高度等，每個區塊層級元素佔據一行。（2）內聯樣式：inline,寬度是由常值內容決定的，不能設定樣式的高度和寬度等，多個內聯樣式可以在一行顯示。（3）內聯塊狀樣式：inline-block，其寬度有常值內容決定，多個可以顯示在一行，並且具備內聯樣式可以設定高度和寬度的功能。

 

13、布局模型：（1）流動模型：區塊層級元素各佔一行；內嵌元素可以多個顯示在一行。（2）浮動模型：float:left/right。（3）層模型：absolute定位參照物是父類對象；relative定位參照物是自身；fixed定位父類，但是下拉條形框會一直隨之移動。（4）absolute和relative組合：現在父類設定position:relative,，然後子類元素設定position：absolute，則子類的定位參照物是剛設定的父類對象。

 

14、縮寫：border:10px 20px 10px 20px為border:10px 20px;border:10px 20px 20px 20px為border:10px 20px 20px。

 

15、長度值：px；em是參照父類的長度，%也是參照父類的長度。

 

16、置中設定：行內元素裡文本的置中：text-align:center。定寬塊狀元素：margin:0 auto（由於有寬度，塊狀元素沒有獨佔完整的一行，可以移動）。不定寬塊狀元素：由於每個塊狀元素寬度都是父類寬度，獨佔一行，不能自由移動。（1）添加在table裡，然後再table裡設定margin：0 auto；（2）display：inline。將塊狀元素設定為行內元素，在使用text-algin:center來設定。（3）先在父類設定floa:left;position:relative;left:50%;然後在子類設定 floa:left;margin:0;padding:0;position:relative;left:-50%。margin:0 auto;不能用於inline中，可以用於display：table中。

 

17、垂直置中：（1）單行：父元素height:100px;line-height:100px;行間距類似於信紙的一行，包括了字型大小和字型之間空白的間距。（2）多行：將多行文本或者圖片放置在標籤<table>中，再使用vertical-align:middle；td標籤下預設設定了vertical-align:middle。（3）多行：將<div>盒模型設定為display:table-cell；啟用vertical-align:middle。

 

18、position:absolute;和float:left/right;內嵌元素會自動化佈建成inline-block，即可設定寬度和高度了，且元素不會佔用一整行。

HTM L+CSS所學基本知識點