CSS-入門到精通
阿新 • • 發佈:2018-11-19
前言
我們在上網的時候經常看到許多絢麗的網頁,這樣的網站程式碼量是不是很多呀? NoNoNo不是這樣的。先看一個例子(如下程式碼為HTML):
<body> <font color="#000fff" face="楷體" size="6">這是第一條</font> <font color="#000fff" face="楷體" size="6">這是第二條</font> <font color="#000fff" face="楷體" size="6">這是第三條</font> </body>
結果是這個樣子的:
字型顏色為藍色,字型為楷體,字型大小為6,如果在加上粗體、斜體等等是不是還要在後面加上一系列的程式碼。如果有100條這個得資訊,這些屬性就要寫100次。如果我們想把這100條資訊的字型換位宋體,這時麻煩來了,這麼多該如何是好。可能有人說用替換,很顯然在大專案中也是很麻煩的。程式猿是聰明的,這時就有了CSS。
CSS
官話:層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化。
個人理解:根據HTML中設定的標籤,把他們分成幾類。一類一類去修飾它們。實現了網頁內容與樣式分離,這也是CSS最大的特點!
我們用CSS輔助我們上面的小例子,建立CSS就不錯陳述了,直接看程式碼:
<!--HMTL中的程式碼--> <body> <span class="menu">這是第一條</span> <span class="menu">這是第二條</span> <span class="menu">這是第三條</span> </body>
<!--CSS中的程式碼-->
.menu{
color:#000fff;
font-size:20px;
font-family:楷體;
}
結果:
如果我們需要修改字型的屬性,直接在CSS裡面修改即可,是不是簡單了很多。說到這裡,HTML中ID選擇器,類選擇器,標籤選擇器。他們之間肯定有個優先順序。我們先看看他們都是什麼(下圖)
優先順序:ID選擇器 > 類選擇器 > 標籤選擇器。
CSS還可以並列寫法和父子寫法
- 如果我們兩個選擇器的樣式相同,可以使用父子寫法,兩個選擇器用 “,” 隔開
- 父子寫法,兩個選擇器中間用空格隔開
塊級元素、行內元素
<body>
<div >這是第一條</div> 塊級元素,佔一整行
<span >這是第二條</span> 行內元素
<span >這是第三條</span>
</body>
結果:
把行內元素轉換為塊級元素,可以在HTML之間修改,也可在CSS中編寫 idsplay:block;
盒子模型
外邊框:
border-width: 1px;
border-color: #00f;
border-style: solid; 邊框為實線,dashed為虛線。
內邊距:
padding-top:3px;
padding-left:10px;
padding-bottom:20px; 下邊距
外邊距:
margin:5px;
文字垂直居中:
line-height:60px;
浮動:
float:left; 向左浮動
clear:left; 清除浮動
定位:
position:relative; 相對定位,把自己位置看作定位,沒有脫離標準流
position:absolute; 絕對定位,包含它的更外一層盒子來定位,脫離標準流
總結
雖然總結用了好長時間,但是收穫的過程美滋滋!