三. CSS介紹
1.為了讓網(wǎng)頁元素的樣式更加的豐富, 也為了讓網(wǎng)頁的內(nèi)容和樣式能拆分開, CSS由此而誕生.?
2.CSS是 Cascading? Style? Sheets 的首寫字母縮寫,意思是層疊樣式表.?
3.有了CSS, html 中大部分表現(xiàn)樣式的標簽就廢棄不用了, html只負責文檔的結構和內(nèi)容,
4.表現(xiàn)形式完全交給CSS, 這樣使得html文檔變得更加簡潔.
1. CSS基本語法
CSS使用格式:?
選擇器 {
? ? 屬性 : 值;
? ? 屬性 : 值;
?? ...
}
說明:
1.選擇器是將樣式和頁面元素關聯(lián)起來的名稱
2.屬性名是希望設置的樣式屬性, 每個屬性有一個或者多個值
3.屬性和值之間用冒號隔開
4.一個屬性和值與下一個屬性和值之間用分號,? 最后一個分號可以省略.
例如:
2. CSS引入方法
CSS樣式導入HTML中有三種方式
1.內(nèi)聯(lián)式:
通過標簽的 style 屬性, 在標簽上直接寫樣式.
<div style="width:100px; height:100px; background:red;">這是一個div標簽</div>
2. 嵌入式:
通過 style 標簽, 在網(wǎng)頁上創(chuàng)建嵌入的樣式表.
3.外聯(lián)式:
<link rel="stylesheet" type="text/css" herf="css/樣式文件名.css">
3. CSS選擇器
1.標簽選擇器
標簽選擇器, 此種選擇器影響范圍大,? 一般用來做一些通用設置,? 或用在層級選擇器中.
通用格式:
?標簽名 {
?? 屬性名: 值;
?? ...
}
例如:
div {
?? color: red;
}
?p {
?? font-size: 18px;
}
一旦使用標簽選擇器,則當前頁面上的所有該標簽全部都有該樣式. 這一點需要注意
2.類選擇器
通過類名來選擇元素, 一個類可應用于多個元素, 一個元素上也可以使用多個類, 應用靈活, 可復用, 是css中應用最多的一種選擇器
舉例:
3.層級選擇器:
主要應用在標簽嵌套的結構中,層級選擇器, 是結合上面兩種選擇器來寫的選擇器, 它可與標簽選擇器結合使用,減少命名,同時也可以通過層級, 限制樣式的作用范圍
例如:
層級選擇器: 按照標簽的層級來匹配對應的標簽
4. id選擇器
通過 id 名來選擇元素，元素的 id 名稱不能重復，所以一個樣式設置項只能對應于頁面上一個元素，不能復用，id 名一般給程序使用，所以不推薦使用id作為選擇器。
使用格式:
?#id名 {
?? 屬性名: 值
}
舉例:
5. 偽類選擇器
常用的偽類選擇器有hover，表示鼠標懸浮在元素上時的狀態(tài)。
CSS部分:
.box1 {
? ? width:100px;
? ? height:100px;
? ? background:gold;
}
.box1:hover {
? ? width:300px;
}
HTML部分:
補充:
#input:focus {
?? outline: none;
?? border: 2px solid red;
}
總結:
1.CSS 選擇器的主要目的是: 獲取 HTML 元素, 獲取到后給當前元素添加樣式.
2.CSS 選擇器的種類非常多, 一般我們用不上, 把常用的學會即可.
3.標簽選擇器盡量少用, 覆蓋面巨大.? 不利于我們樣式的單獨調(diào)整.
4.class 類選擇器是經(jīng)常使用的選擇器. 可以多多練習
5.層級選擇器 一般配合類選擇器或者其他的選擇器一起使用.? 常用來獲取大容器里面沒有明確定義類名的元素
6.id 選擇器偶爾使用, 使用它往往就是利用他的唯一性.? 獲取單個某個標簽使用.
7.偽類選擇器是需要設置特殊階段的效果時, 添加的選擇器, 知道即可
4. CSS屬性入門
布局常用屬性樣式:
補充說明:
background-color 背景顏色
background-image 背景圖片
background-repeat 背景重復
我們可以對上面的代碼進行合并書寫:
background: url(bgimg.gif)? no-repeat? 5px? 5px;
補充:
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣。
css 浮動:
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據(jù)空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”：
文本常用樣式屬性:
提示:樣式中的注釋
/* 設置頭部的樣式 */
.header{
?? width:960px;
?? height:80px;
?? background:gold;
}
