? ? ?在最開始接觸HTML5的時候，你會遇到的大多是一些常見常用的屬性以及屬性值。它們分類廣、品種雜且使用率高。到css各種樣式的時候，你會接觸到更多的東西，各種屬性、選擇器、盒子模型都是重點。那么，現在我們就看一下它們到底是什么。

?列表

列表是很重要的一個塊級標簽。

分為有序列表ol、無序列表ul和定義描述列表dl，我們常會用到的就是無序列表ul。列表中的每一項都用li表示。

無序列表ul需要注意的是，列表中的每一項前面都會有一個符號，而我們在用到它時一般是不會要前面的符號的。這時就要用到 list-style：none；了，取消無用的符號。

1 <ul> 2 <li>第一項</li> 3 <li>第二項</li> 4 <li>第三項</li> 5 </ul>

CSS常用選擇器

css修改頁面樣式時，必須使用選擇器進行包裹。

選擇器{
? 屬性1：屬性值2；
? 屬性2：屬性值2；
? }

常用選擇器：

選擇器名	寫法
標簽選擇器	HTML標簽名{}
類選擇器（class選擇器）	.class名{}
ID選擇器	#ID名{}
通用選擇器	*{}
并集選擇器	選擇器1，選擇器2，選擇器3，...選擇器n{} 多個選擇器之間逗號分隔
交集選擇器	選擇器1選擇器2...選擇器n{} 多個選擇器之間緊挨著，沒有分隔
后代選擇器?	選擇器1 選擇器2 ... 選擇器n{} 空格分隔
子代選擇器	選擇器1>選擇器2>...>選擇器n{}

選擇器優先級：

1.css生效的第一規則是“近者優先”！！即，那個選擇器作用于最里層標簽，則這個選擇器生效。
2.當選擇器作用于同一層時，可以根據選擇器的優先級權重進行累加計算。
? ? ID選擇器*10 + class選擇器*10 + 標簽選擇器*1
? ? 注意：并集選擇器，相當于多個選擇器拆開寫，因此并集選擇器不參與權重累加。
3.當做用于同一層，而且選擇器優先級完全相同時，誰寫在后面誰生效。（后來者居上）

?

CSS常用文本屬性

font-weight：字體粗細。bold-加粗、normal-正常、lighter-細體；也可以使用100-900的數值，400表示normal，700表示bold。

font-style：字體傾斜。italic-傾斜、normal-正常

font-size：字號。可以寫px單位，也可以用%表示。

font-family:字體系列（字體族）。可以直接寫字體名，也可以寫字體系列名；常用的字體系列有：serif-襯線體? sans-serif 非襯線體

line-height:行高。可以使用px單位、可以直接寫數字（表示默認行距的幾倍）、也可以寫百分比（表示默認行距的百分比）。行高的重要作用：讓單行文字在父容器中垂直居中！

text-align：設置區域內的行級元素的水平對齊方式；

letter-spacing：字符間距，字與字之間的間距。

text-decoration:文本修飾。常用與去掉超鏈接的下劃線。

overflow:設置超出區域的文字如何顯示；

auto，默認效果。文字少不顯示滾動條，文字超出時顯示垂直滾動條；

hidden，無論蚊子多少都不顯示滾動條，文字超出時將隱藏不顯示；

scroll，無論文字多少都會顯示垂直、水平兩根滾動條；

white-space: nowrap; 設置中文，行末不斷行顯示。

text-overflow: ;設置行末多余文字的顯示方式。

【設置行末顯示省略號的方法（三行代碼，缺一不可）】

text-overflow:ellipsis; overflow:hidden; white-space:nowrap;

?

CSS常用背景屬性

background-color:背景色。

background-image:背景圖。使用url("")選擇圖片路徑。當背景圖和背景色同時存在時，背景圖會覆蓋背景色。

background-repeat:背景圖的重復方式。repeat-平鋪（默認）； no-repeat-不平鋪 ；repeat-x-沿x軸平鋪 ；repeat-y-沿x軸平鋪

background-position:背景圖偏移量。

background縮寫形式：background-color | background-image | background-repeat | background-attachment | background-position

?

偽類選擇器

?：link - 未訪問狀態
?：visited - 已訪問狀態
?：hover - 鼠標指上狀態
?：active - 激活選定狀態（鼠標線點下未松開）

注意：當超鏈接多種偽類狀態共存時，必須按照link-visited-hover-active的順序排列，否則會導致某些狀態不能生效。

?

CSS盒子模型

margin:外邊距

①只寫一個值時，表示四周的外邊距都是這個值；
②寫兩個值：第一個表示上下，第二個值表示左右；
③寫三個值：分別表示上、右、下，左邊默認表示右邊；
④寫四個值：分別表示上、右、下、左，順時針方向。
⑤margin: 0px auto; 設置塊級元素在父容器中水平居中！！！！很重要！！！

padding:內邊距,屬于div區域，但不能往里面寫東西。

①只寫一個值時，表示四周的外邊距都是這個值；
②寫兩個值：第一個表示上下，第二個值表示左右；
③寫三個值：分別表示上、右、下，左邊默認表示右邊；
④寫四個值：分別表示上、右、下、左，順時針方向。
設置padding后，將導致div可見區域被撐大！！使用時必須注意div所占的實際大小。

border：邊框

共接收3個屬性：邊框的寬度、邊框的樣式、邊框的顏色。
邊框樣式不能省略，其他兩個可以省略。但是原則上一般三個屬性都要寫。
三個屬性的順序可以隨意顛倒，沒有先后要求。

• 如果當父盒子包裹子盒子，給子盒子添加margin-top時，子盒子和父盒子的上邊線重合，而導致兩個盒子同時下來。

【解決辦法】
1、給父容器添加一定的padding-top。會導致父容器產生不必要的padding區域。不推薦使用！！
2、給父容器添加一定的上邊框（border-top）。會導致父容器產生不必要的邊框域。不推薦使用！！
3、給父容器或子容器添加float屬性；
4、給父容器添加overflow。推薦！對頁面布局不會產生影響。

border-radius:圓角。

共接收8個屬性值，分別表示：x軸（左上、右上、右下、左下）/Y軸（左上、右上、右下、左下）

box-shadow:盒子陰影。

共接收六個屬性值，用空格分隔；
①水平陰影距離（必選）：可正可負。正數右移，負數左移。
②垂直陰影距離（必選）：可正可負。正數上移，負數下移。
③陰影模糊半徑（可選）：只能為正數，默認為0。數值越大，陰影越模糊。
④陰影擴展半徑（可選）：可正可負，默認為0。數值增大，陰影擴大；數值減小，陰影縮小。
⑤陰影顏色（可選）：默認為黑色。
⑥內外陰影（可選值）：默認為外陰影。inset 表示內陰影。
eg：box-shadow: 0px 0px 10px 0px red inset;設置為外面一周的陰影。

?

盒子模型分類

1.標準盒子（W3C盒子）：我們設置的寬度和高度僅僅包含content區域。再添加padding和border時，會導致盒子的可視區域增大；box-sizing: content-box;? 使用標準盒子，默認。
2.IE盒子（怪異盒子）：我們設置的寬度和高度包含content+padding+border；添加padding和border會導致content區域被壓縮，盒子的可視區域不會增大；box-sizing: border-box;

?

CSS定位

1.相對定位 relative：

定位機制：①相對定位是相對于自己原來的位置進行定位；當top等屬性不設置時，元素位置不會發生任何變化；②相對定位不會釋放掉自己原來的位置，也不會影響文檔中其他元素。

2.絕對定位 absolute：

定位機制：?①相對于第一個有定位的祖先元素進行定位。（即，第一個使用relative、absolute、fixed定位的祖先元素）?②如果祖先元素都沒有定位，則相對于瀏覽器的左上角進行定位；但是，如果要使用絕對定位，都要先給父容器使用相對定位。③使用絕對定位的元素，會從文檔流中徹底刪除！原有空間被釋放。

3.固定定位 fixed：

定位機制：①固定定位永遠相對于瀏覽器窗口進行定位。②固定定位會將元素徹底從文檔流中刪除，原有空間釋放；③固定定位的元素不隨滾動條的滾動而滾動!

?

CSS3過渡、變換

• transition：過渡屬性，共接收四個屬性值：

?①參與過渡的CSS樣式屬性。可以指定為all/none；
?②過渡需要多長時間完成。通常0.3s 0.5s。
?③過渡的樣式效果。常選ease！！！
?④過渡延時幾秒后開始。可以省略不寫。

• transform變換屬性：

translate(100px,100px) 平移，分別表示X/Y軸，Y軸不寫默認為0.

scale(1.5) 縮放，只寫一個值，表示X/Y都進行縮放。

rotate(180deg) 旋轉 默認繞Z軸轉。單位不能省略。

skew(40deg) 傾斜 表示沿X軸、Y軸傾斜多少度。只寫一個值表示沿X軸傾斜。

transform-origin：定義變換起點，常用于與rotate旋轉配合。

?

轉載于:https://www.cnblogs.com/yanglianwei/p/8596249.html

總結

以上是生活随笔為你收集整理的初入HTML5的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。