html-css進介提高__html

相對位址與絕對位址

?相對位址（路徑）：“./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示目前的目錄下的pic.jpg的圖片，這個使用時可以省略
相對位址（路徑）：“ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示目前的目錄下的上一級目錄下的images檔案夾中的pic.jpg的圖片。 絕對位址

絕對位址（路徑）：比如：img src=”C:\course5\03day\images\001.jpg” alt=”圖片” / 絕對位址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對位址就沒有這個問題。 網頁上引入或連結到外部檔案，需要定義檔案的地址，常見引入或連結外部檔案包括以下幾種：

<!-- 引入外部圖片   --><img src="images/001.jpg" alt="圖片" /><!-- 連結到另外一個網頁   --><a href="002.html">連結到網頁2</a><!-- 外鏈一個css檔案   --><link rel="stylesheet" type="text/css" href="css/main.css" /><!-- 外鏈一個js檔案   --><script type="text/javascript" src="js/jquery.js"></script>

html標籤提高

無序列表一般應用在布局中的新聞標題列表和文章標題列表，它是含有語義的，標籤結構如下：

<ul>    <li>列表標題一</li>    <li>列表標題二</li>    <li>列表標題三</li></ul>

列表的內容一般是可以連結的，點選連結到新聞或者文章的具體內容，所以具體結構一般是這樣的：

<ul>    <li><a href="#">列表標題一</a></li>    <li><a href="#">列表標題二</a></li>    <li><a href="#">列表標題三</a></li></ul>

css常用選取器

1、id選取器
通過id名來選擇元素，元素的id名稱不能重複，所以一個樣式設定項只能對應於頁面上一個元素，不能複用，id名一般給程式使用，所以不推薦使用id作為選取器。

#box{color:red} ......<p id="box">這是一個段落標籤</p>   <!-- 對應以上一條樣式，其它元素不允許應用此樣式 --><p>這是第二個段落標籤</p> <!-- 無法應用以上樣式，每個標籤只能有唯一的id名 --><p>這是第三個段落標籤</p> <!-- 無法應用以上樣式，每個標籤只能有唯一的id名  -->

2、組選取器
多個選取器，如果有同樣的樣式設定，可以使用組選取器。

.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>

3、偽類及虛擬元素選取器
常用的偽類別選取器有hover，表示滑鼠懸浮在元素上時的狀態，虛擬元素選取器有before和after,它們可以通過樣式在元素中插入內容。

.box1:hover{color:red}.box2:before{content:'行首文字';}.box3:after{content:'行尾文字';}<div class="box1">....</div><div class="box2">....</div><div class="box3">....</div>

css屬性提高

文本常用樣式屬性二：
text-align 設定文字水平對齊，如text-align:center 設定文字水平置中
text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px
font-style 設定字型是否傾斜，如：font-style:’normal’; 設定不傾斜，font-style:’italic’;設定文字傾斜
font 同時設定文字的幾個屬性，寫的順序有相容問題，建議按照如下順序寫： font：是否加粗 字型大小/行高 字型；如： font:normal 12px/36px ‘微軟雅黑’;
其他常用樣式屬性：
list-style 設定無序列表中的小圓點，一般把它設為”無”，如：list-style:none
css元素溢出
當子項目的尺寸超過父元素的尺寸時，需要設定父元素顯示溢出的子項目的方式，設定的方法是通過overflow屬性來設定。

overflow的設定項：
1、visible 預設值。內容不會被修剪，會呈現在元素框之外。
2、hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
3、scroll 內容會被修剪，但是瀏覽器會顯示捲軸以便查看其餘的內容。
4、auto 如果內容被修剪，則瀏覽器會顯示捲軸以便查看其餘的內容。