使用 table 進行布局存在缺陷,而一般的布局都會采用 DIV+CSS 來進行布局。
Div 它是一個html 標簽,一個塊級元素(單獨顯示一行)。它單獨使用沒有任何意義,必須結合 CSS 來使用。它主要用于頁面的布局。?
Span 它是一個 html 標簽,一個內聯元素(顯示一行)。它單獨使用沒有任何意義,必須結合 CSS 來使用。它主要用于對括起來的內容進行樣式的修飾。
CSS
層疊樣式表 Cascading Style Sheets
樣式定義如何顯示HTML元素
樣式通常存儲在樣式表中
把樣式添加到HTML4.0中,是為了解決內容與表現分離的問題
外部樣式表通常存儲在CSS文件中
CSS 的作用:
HTML 整個網站的骨架
CSS 對整個骨架的內容進行修飾
CSS語法規范:
選擇器{
? ? 屬性名1:屬性值1;
? ? 屬性名2:屬性值2;
? ? ... ....
}
CSS引入方式:
1、行內引入
<div style="color:red;font-size:100px">JavaEE</div>
2、內部引入
<style type="text/css">
? ? div{
? ? ? ? color:red;
? ? ? ? font-size:100px;
? ? }
</style>
3、外部引入
style.css
div{
? ? color:red;
? ? font-size:100px;
}
page.html
<!DOCTYPE html>
<html>
? ? <head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title></title>
? ? ? ? <link rel="stylesheet" type="text/css" href="../../css/style.css" />
? ? </head>
優先級問題:?誰離需要修飾的元素近,誰的樣式生效,其它的被覆蓋掉。(就近原則)
CSS選擇器
元素選擇器、類選擇器、id選擇器
元素名{
? ? 屬性名1:屬性值1;
? ? 屬性名2:屬性值2;
}
對相同元素設置相同樣式。
.類名{
? ? 屬性名1:屬性值1;
? ? 屬性名2:屬性值2;
}
對多個元素設置相同的樣式。
#id屬性名{
? ? 屬性名1:屬性值1;
? ? 屬性名2:屬性值2;
}
a{text-decoration:none;} ?去掉下劃線