一.基礎知識
1.基本構(gòu)成:選擇符和聲明逐虚,聲明包括屬性和值匿值。
2.注釋/*...*/
3.在html中插入形式(離被設置元素越近,優(yōu)先級越高)
(1)內(nèi)聯(lián)式:直接寫在現(xiàn)有的html標簽中
<p style=“color:red;font-size:12px;...”>...</p>
(2)嵌入式(寫在<head></head>之間)
<style type=“text/css”>
span
{
color:red;
}
</style>
(3)外部式:寫入單獨文件*.css
在head內(nèi)使用link鏈接入html
<link href=“*.css” rel=“stylesheet” type=“text/css”> ?rel和type是固定寫法
二.選擇器
1.標簽選擇器(html中的標簽)
標簽{樣式設置;}
?可寫成分組選擇器
標簽1物喷,標簽2{樣式設置;}
2.類選擇器
<span class=“類名1 類名2”>...</span>...
<span class=“類名1 類名2”>...</span>...
.類名1{樣式設置;}
.類名2{樣式設置;}
3.id選擇器
<span id=“id名”>...</span>
#id名{樣式設置}唯一性
4.子選擇器(只包含第一代)
.類名>span{樣式設置;}
5.包含(后代)選擇器
.類名 span{樣式設置;}
6.通用選擇器(設置所有的標簽樣式)
*{樣式設置;}
7.偽類選擇器(給標簽的某種狀態(tài)添加樣式)
標簽.hover{樣式設置;}鼠標劃過時的樣式
三.選擇器權(quán)值
1.標簽是1
2.類選擇是10
3.id選擇是100
例:
四.文字排版
1.body{font-family:"Microsoft Yahei";}給網(wǎng)頁設置字體-微軟雅黑
2.body{font-size:12px;color:red;}給網(wǎng)頁設置字號和顏色
3.p span{font-weight:bold;}文字設置為粗體
4.p a{font-style:italic;}文字設置為斜體
5.p a{text-decoration:underline;}文字設置下劃線
6. ? .oldPrice{text-decoration:line-through;}文字設置刪除線
7.p{text-indent:2em;}段落縮進2個
8.p{line-height:2em;}行間距2倍行高
9.h1{letter-spacing:50px;}中文字职车,字母間距
h1{word-spacing:50px;}單詞間距
10.h1{text-align:center;}段落居中
h1{text-align:left;}段落居左
h1{text-align:right;}段落居右
五.布局模型
1.流動模型(flow)默認
第一點,塊狀元素都會在所處的包含元素內(nèi)自上而下按順序垂直延伸分布济榨,因為在默認狀態(tài)下燎含,塊狀元素的寬度都為100%。實際上腿短,塊狀元素都會以行的形式占據(jù)位置。如右側(cè)代碼編輯器中三個塊狀元素標簽(div,h1橘忱,p)寬度顯示為100%赴魁。
第二點,在流動模型下钝诚,內(nèi)聯(lián)元素都會在所處的包含元素內(nèi)從左到右水平分布顯示颖御。(內(nèi)聯(lián)元素可不像塊狀元素這么霸道獨占一行)
2.浮動模型(float)
div{float:left}
div塊在一行按居左順序顯示
3.層模型(layer)
層模型有三種形式:
(1)絕對定位(position: absolute)
(2)相對定位(position: relative)
(3)固定定位(position: fixed)
fixed:表示固定定位,與absolute定位類型類似凝颇,但它的相對移動的坐標是視圖(屏幕內(nèi)的網(wǎng)頁窗口)本身潘拱。由于視圖本身是固定的,它不會隨瀏覽器窗口的滾動條滾動而變化拧略,除非你在屏幕中移動瀏覽器窗口的屏幕位置芦岂,或改變?yōu)g覽器窗口的顯示大小,因此固定定位的元素會始終位于瀏覽器窗口內(nèi)視圖的某個位置垫蛆,不會受文檔流動影響
(4)相對于某個模塊定位
六.代碼縮寫
1.盒模型縮寫見html
2.顏色縮寫
p{color:#000000} ? 縮寫 p{color:#000} ? ?
p{color:#336699} ? ?縮寫p{color:#369} ?
3.字體縮寫
注意:
1禽最、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性,其他的屬性(如 font-weight袱饭、font-style川无、font-variant、line-height)如未指定將自動使用默認值虑乖。
2懦趋、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。
一般情況下因為對于中文網(wǎng)站疹味,英文還是比較少的仅叫,所以下面縮寫代碼比較常用:
七.值
1.顏色值
在網(wǎng)頁中的顏色設置是非常重要,有字體顏色(color)佛猛、背景顏色(background-color)鹃两、邊框顏色(border)等谣拣,設置顏色的方法也有很多種:
八.樣式設置
(一).居中
1.行內(nèi)元素
? ? ? 如果被設置元素為文本、圖片等行內(nèi)元素時,水平居中是通過給父元素設置 text-align:center 來實現(xiàn)的别瞭。(父元素和子元素:如下面的html代碼中,div是“我想要在父容器中水平居中顯示”這個文本的父元素俺抽。反之這個文本是div的子元素 )如下代碼:
2.塊狀元素之定寬
? ? ? ?定寬塊狀元素:塊狀元素的寬度width為固定值川抡。
? ? ? ?滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現(xiàn)居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中:
3.塊狀元素之不定寬
(1)加入 table 標簽
? ? ? ?為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度(table其長度根據(jù)其內(nèi)文本長度決定)边臼,因此可以看做一個定寬度塊元素哄尔,然后再利用定寬度塊狀居中的margin的方法,使其水平居中柠并。
第一步:為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 岭接、富拗、 )。
第二步:為這個 table 設置“左右 margin 居中”(這個和定寬塊狀元素的方法一樣)鸣戴。
舉例如下:
(2)設置 display: inline 方法:與第一種類似啃沪,顯示類型設為 行內(nèi)元素,進行不定寬元素的屬性設置窄锅。
改變塊級元素的 display 為 inline 類型(設置為 行內(nèi)元素 顯示)创千,然后使用 text-align:center 來實現(xiàn)居中效果。
這種方法相比第一種方法的優(yōu)勢是不用增加無語義標簽入偷,但也存在著一些問題:它將塊狀元素的 display 類型改為 inline追驴,變成了行內(nèi)元素,所以少了一些功能疏之,比如設定長度值殿雪。
(3)設置 position:relative 和 left:50%:利用 相對定位 的方式,將元素向左偏移 50% 体捏,即達到居中的目的冠摄。
我們可以這樣理解:假想ul層的父層(即下面例子中的div層)中間有條平分線將ul層的父層(div層)平均分為兩份,ul層的css代碼是將ul層的最左端與ul層的父層(div層)的平分線對齊几缭;而li層的css代碼則是將li層的平分線與ul層的最左端(也是div層的平分線)對齊河泳,從而實現(xiàn)li層的居中。
4.垂直居中
(1)父元素高度確定的單行文本
父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現(xiàn)的年栓。(height: 該元素的高度拆挥,line-height: 顧名思義,行高(行間距)某抓,指在文本中纸兔,行與行之間的 基線間的距離 )。
line-height 與 font-size 的計算值之差否副,在 CSS 中成為“行間距”汉矿。分為兩半,分別加到一個文本行內(nèi)容的頂部和底部备禀。
這種文字行高與塊高一致帶來了一個弊端:當文字內(nèi)容的長度大于塊的寬時洲拇,就有內(nèi)容脫離了塊。
(2)父元素高度確定的多行文本
a)使用插入 table ?(包括tbody曲尸、tr赋续、td)標簽,同時設置 vertical-align:middle另患。
css 中有一個用于豎直居中的屬性 vertical-align纽乱,在父元素設置此樣式時,會對inline-block類型的子元素都有用昆箕。下面看一下例子:
b)這種方法兼容性比較差鸦列,只是提供大家學習參考租冠。
在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell(設置為表格單元顯示)薯嗤,激活 vertical-align 屬性肺稀,但注意 IE6、7 并不支持這個樣式, 兼容性比較差应民。
5.隱性改變diaplay類型
有一個有趣的現(xiàn)象就是當為元素(不論之前是什么類型元素,display:none 除外)設置以下 2 個句之一:
a) position : absolute
b) float : left 或 float:right
簡單來說夕吻,只要html代碼中出現(xiàn)以上兩句之一诲锹,元素的display顯示類型就會自動變?yōu)橐?display:inline-block(塊狀元素)的方式顯示,當然就可以設置元素的 width 和 height 了涉馅,且默認寬度不占滿父元素归园。
如下面的代碼,小伙伴們都知道 a 標簽是 行內(nèi)元素 稚矿,所以設置它的 width 是 沒有效果的庸诱,但是設置為 position:absolute 以后,就可以了晤揣。
九.樣式
1.font-size:12px;字號
2.color:red;字體顏色
3.line-height:1.6em;行間距
4.font-weight:normal;去掉字體加粗
5.border:1px;邊框1像素寬
6.solid:red;邊框紅色實心