CSS 清除瀏覽器默認樣式

些元素默認帶有padding, 比如ul標簽。

*{margin:0;padding:0;}

讓所有的標簽內外邊距是都 0 ；

*的執行效率不高, 所以我們使用并集選擇器, 羅列出所有的標簽(不用背, 有專業的清除默認樣式的樣式表, 以利于今后學習)

當然, 以上的寫法是我們練習的寫法。

真正的工作我們如下寫法:

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

最常用

義：HTML文檔中的分隔或者是部分，常用于組合塊級元素，以便通過樣式表來對元素進行格式化。

<div> 是一個塊級元素，也就是說它的內容自動的開始一個新行，換行是它固有的特定格式表現，同時它也是一個雙向標簽。

它應用于樣式表，有多種屬性：Class、Style、title、ID等。

小實例：

在div中給定id或者是類選擇器：

<h1>俠課島</h1>
<div class="content1">第一段文本內容....</div>
<div class="content2">第二段文本內容....</div>
<div class="content3">第三段文本內容....</div>

<div id="main">第四段文本內容.....</div>

直接在div中添加設置樣式屬性：

<div style="color:#777;">
    <h2>定義文本內容顏色</h2>
</div>

動手小練習

使用 <div> 標簽定義一段文本內容
在第一題的基礎上對內容進行樣式的設置，然后在瀏覽器中顯示出來

iv+css

1.通用兼容性代碼

在css處開頭加入

*{margin:0;

pading:0;

border:0;

}

(分別表示網頁內所有元素的外邊距、內邊距及邊框為0。)

2.鏈接樣式

當用css定義鏈接的各種狀態時，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，你可以通過記憶LoVe,Hate,兩個單詞來記住其順序。

:link --------鏈接的顏色

:visited -----鼠標點擊后的顏色

:hover -------鼠標放上去未點的顏色（懸停）

:active-------鼠標點擊瞬間的顏色

3.偽類和選擇符的配合使用

將偽類和類組合起來用，就可以在同一個頁面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，訪問后為藍色；另一組為綠色，訪問后為黃色：

a.red:link {color: #FF0000}

a.red:visited {color: #0000FF}

a.blue:link {color: #00FF00}

a.blue:visited {color: #FF00FF}

4.使用a標簽要注意的問題

當我們定義a{color:red;}時，它代表了A的四種狀態的樣式，如果此時要定義一個鼠標放上的狀態只要定義a:hover就可以了，其它三種狀態就是A中所定義的樣式。只定義了一個a:link時，一定要記得把其它三種狀態定義出來！

使用規則和注意事項

5.分清塊級元素block和內聯元素inline

塊級---可定義寬高，另起獨占一行（如：div ul）

內聯---不可定義寬高，如文本元素（如a span）

6.分清relative和absolute

position:absolute;

絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

position:relative;

絕對相對定位，他是參照父級的原始點為原始點，無父級則以BODY的原始點為原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。

7.分清display和visibility

display:none和visibility:hidden都可以隱藏一個元素,但visibility:hidden只是隱藏了元素的內容，但其使用的位置空間仍然被保留。而display:none則相當把元素從頁面中去除，其占用位置也將被刪除。

8.background的一些用法

background-image:url(背景圖案.jpg,gif,bmp);

background-color:#FFFFFF; （背景顏色）

background-color : transparent; <--設定背景為透明色 –>

background-repeat 改變背景圖片的重復并排的設定

9.class的命名注意事項

(1)顏色:使用顏色的英文名稱或者16進制代碼,如

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如

.left { float:left;

.bottom { float:bottom; }

需注意事項:

所有樣式名全都小寫;盡量用英文;為保證日后能一目了然，盡量不縮寫。

勿忘初心，方得始終

如果你喜歡這篇文章，可以關注作者頭條公眾號，每天都會有精彩web干貨與你一同分享哦！

在線咨詢

上一篇：2024 高頻前端面試題匯總之CSS篇（二）
下一篇：使用HTML編輯軟件和一個簡單的網頁

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商