Html和Css學習筆記-html進階-div與span

Html和Css學習筆記-html進階-div與span

此篇部落格是我的複習筆記，html和css學的時間太久了，忘得差不多了，最近要使用一下，是以重新打開html的書略讀，後記錄了标簽，元素，屬性的具體意義。

這裡所介紹的html和css的版本為html5與css3

Html是超文本标記語言（英語全稱：HyperText Markup Language，簡稱：HTML）是一種用于建立網頁的标準标記語言

Css是層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來html和xml等檔案樣式的計算機語言，CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。

Html和Css驗證工具的位址：

http://validator.w3.org/

一.div元素

<div>就相當于一個容器，可以把元素一同放在這個容器裡，這個容器也可以成為邏輯區，div可以嵌套使用，并配合使用id屬性，例子如下：

<div id="id屬性名字">

邏輯區的内容

</div>      

書語：在頁面中要使用<div>，但不要濫用。如果這樣做有助于你将頁面分解為邏輯區，進而保證結構清晰并便于指定樣式，那麼可以增加更多的結構。如果隻是為了在頁面中建立大量結構而增加<div>，就隻會讓頁面複雜，而沒有任何實際好處

二.span元素

<div>元素允許你為塊級内容建立邏輯劃分，<span>元素則采用類似的方式建立内聯内容的邏輯分組，使用方式，舉例如下：

<span class="類的名字">xxxx</span>      

三.新增css屬性

1.width：xxxx;設定元素内容區的寬度

2.float：xxx;定義元素在哪個方向浮動

3.clear:xxxx;定義了元素的哪邊上不允許出現浮動元素

4.position:xxxx;屬性規定元素的定位類型。

四.css中如何選擇子元素

所謂子元素就是元素中的元素，具體指定方法舉例如下：

第一種，未使用id元素

父元素名字 子元素名字{

}      

第二種 使用id元素

#id屬性名字 子元素:
"      

五.a元素的css配置方法 

a元素在前面的博文中提到過，是設定連結的，連結不點選是為藍色有下劃線，點選後是紅色有下劃線，懸停會顯示連結内容，那這部分内容的css樣式更改方式如下：、

第一種方法

a:link{
這是選擇器應用于處于未通路狀态的連結
}
a:visited{
這是選擇器應用于已通路的連結
}
a:hover{
懸停在一個連結上時會應用這個選擇器
}      

第二種方法，運用僞類

#類的名字 a:link{
這是選擇器應用于處于未通路狀态的連結
}
#類的名字 a:visited{
這是選擇器應用于已通路的連結
}
#類的名字 a:hover{
懸停在一個連結上時會應用這個選擇器
}      

原文位址 https://www.cnblogs.com/renren-study-notes/p/10483148.html