font-size:12px;/*文字大小*/
10年積累的網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn),可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你,你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程,更有肇源免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
color:#CCCCCC;/*文字顏色*/
font-family:Arial,
Helvetica,
sans-serif;/*設(shè)置字體*/
font-weight:bold;/*文字加粗*/
text-align:center;/*DIV標(biāo)簽內(nèi)部水平方向居中或居左右*/
text-decoration:underline;/*下劃線*/
line-height:150%;/*行高*/
margin:10px
5px
0;/*容器外部邊距*/
margin-top:10px;
padding:10px
5px
0;/*容器內(nèi)部邊距*/
float:left;/*1.僅在做列的結(jié)構(gòu)才用
2.用了float要用父DIV包起來(lái)*/
background-color:#999999;/*背景顏色*/
background-image:url(images/test.gif);/*背景圖片*/
background-repeat:no-repeat;/*背景圖片不平鋪*/
background-position:5px
10px;/*背景圖片的位置,第一個(gè)為橫坐標(biāo),第二個(gè)為縱坐標(biāo)*/
list-style-type:none;/*消除ul無(wú)序列表li前面的小黑點(diǎn)*/
display:block;/*以塊形式顯示,通常用于鏈接中實(shí)現(xiàn)鼠標(biāo)劃過的效果*/
display:inline;/*當(dāng)用了float時(shí)做靠邊的DIV外邊距出現(xiàn)翻倍情況時(shí)才使用,針對(duì)的是IE6的一個(gè)bug*/
border:1px
solid
#ccc;/*表格、DIV、LI、A等容器的邊框?qū)傩?,虛線是dashed*/
overflow:hidden;/*溢出部分隱藏*/
overflow:auto;/*自動(dòng)判斷容器高度,從而選擇自動(dòng)出現(xiàn)/隱藏垂直滾動(dòng)條*/
/*自動(dòng)適應(yīng)高度,并且兼容火狐的做法*/
clear:both;
overflow:hidden;
二樓的就一傻X,人家發(fā)的有用就行了,你管人家復(fù)制粘貼還是手寫!自己傻了吧唧的還好意思說(shuō)人家!
標(biāo)簽常用的主要是DIV,也可以純div,不過與table、p、ol、ul、li、span、a等常用標(biāo)簽搭配使用的話,寫頁(yè)面就能省事一點(diǎn)
至于CSS常用屬性我就不多說(shuō)了,有什么不知道的可以參照一樓的
盒子模型是CSS中一個(gè)很重要的概念,頁(yè)面中的所有元素都可以看成一個(gè)盒子,并占據(jù)一定的頁(yè)面空間,一個(gè)頁(yè)面由很多盒子組成,盒子之間會(huì)互相影響。只有掌握盒模型以及其中每個(gè)屬性的用法,才能真正控制好頁(yè)面元素。
盒子模型主要定義四個(gè)區(qū)域: 內(nèi)容(content)、內(nèi)邊距/填充(padding)、邊框(border)和外邊距(margin) 。
盒子的內(nèi)容區(qū)域存放文本和圖片等頁(yè)面元素,擁有如下屬性:
邊框基本屬性:
通過一個(gè)屬性設(shè)置四個(gè)方向邊框的寬度、樣式、顏色
屬性:border
取值:width style color;
只設(shè)置某一條邊框的寬度、樣式、顏色
語(yǔ)法:border-方向(top/right/bottom/left):width style color;
只設(shè)置邊框的寬度、樣式、顏色中的一種
語(yǔ)法:border-屬性(width/style/color):取值;
只設(shè)置某一條邊框的寬度、樣式、顏色中的一種
語(yǔ)法:border-方向(top/right/bottom/left)-屬性(width/style/color):取值;
屬性:border-radius
作用:設(shè)置倒角位置處圓的半徑,半徑越大,弧度越大。
取值:
屬性:border-image
語(yǔ)法:
border-image-source :引入背景圖片
取值:
默認(rèn)值:無(wú)圖片
url(圖片URL地址)
border-image-slice :切割引入背景圖片,把邊框背景切成9份
取值:
number:默認(rèn)單位px
百分比:
fill:保留邊框圖像的中間部分
border-image-width :指定邊框圖片的寬度
border-image-repeat :指定邊框背景圖片的排列方式,可定義2個(gè)參數(shù),即水平和垂直方向
取值:
Stretch:默認(rèn)值,拉伸
Repeat:平鋪
Round:取整平鋪
內(nèi)容區(qū)域和邊框(邊緣)之間的距離
語(yǔ)法:padding: 值;
單邊設(shè)置:padding-方向(top/right/bottom/left):值;
取值:
數(shù)值px
百分比
內(nèi)邊距的簡(jiǎn)寫方式:
padding:value;
四個(gè)方向內(nèi)邊距的值均為value
padding:value1 value2;
Value1為上下內(nèi)邊距的值,value2為左右內(nèi)邊距的值
padding:value1 value2 value3;
Value1為上內(nèi)邊距的值,value2為左右內(nèi)邊距的值,value3為下內(nèi)邊距的值
padding:value1 value2 value3 value4;
上右下左內(nèi)邊距的值分別為value1, value2, value3, value4
外邊距指元素與元素之間的距離,即圍繞在元素邊框之外的空白區(qū)域,通過外邊距可以為元素創(chuàng)建額外的“空間”。默認(rèn)不能被其他元素所占據(jù),用于拉伸兩個(gè)元素間的距離。
語(yǔ)法:margin: 值;
單邊設(shè)置:margin-方向(top/right/bottom/left):值;
取值:
重新制定元素尺寸計(jì)算模式
屬性:box-sizing
取值:
屬性:resize
取值:
位于元素邊框之外的一條線
屬性:
outline:width style color;
屬性:box-shadow
語(yǔ)法:
box-shadow: h-shadow v-shadow blur spread color inset;
取值:由一組值構(gòu)成的值列表
屬性:background-color
取值:顏色值或transparent
注意:背景顏色是從邊框位置處開始繪制
屬性:background-image
取值:url(背景圖像URL)
屬性:background-repeat
取值:
屬性:background-attchment
取值:
scroll:默認(rèn)值,滾動(dòng)
fixed:固定
屬性:background-position
取值:
屬性:background-size
取值:
屬性:background-origin
取值:
屬性:background-clip
取值:
CSS3多背景通過為每個(gè)背景屬性提供多個(gè)屬性值實(shí)現(xiàn)。
font 簡(jiǎn)寫屬性語(yǔ)法:
將所有字體屬性合寫為一行,其中font-family是復(fù)合屬性中必不可少的屬性。
可以不設(shè)置其中的某個(gè)值,如果省略值地話,就使用屬性的默認(rèn)值。
②文本屬性:
(2)CSS3文本陰影屬性:
屬性:text-shadow
作用:產(chǎn)生陰影和模糊主體
語(yǔ)法:
作用:定義列表的編號(hào)樣式
屬性:list-style-type
作用:用于設(shè)置列表項(xiàng)的圖像屬性
語(yǔ)法:
圖像URL地址:圖像的相對(duì)路徑或絕對(duì)路徑
none:默認(rèn)值,不指定圖像
注意:圖片圖標(biāo)與文字之間的距離在不同瀏覽器中是不一樣的,因此,一般情況下不采用這種方式來(lái)設(shè)置列表的圖片樣式。
通過設(shè)置li的背景圖片的方式來(lái)設(shè)置列表圖片基本步驟:
設(shè)置list-style-type屬性值為none
設(shè)置li標(biāo)記的背景屬性backgruond
作用:用于聲明列表標(biāo)志相對(duì)于列表項(xiàng)內(nèi)容的位置
語(yǔ)法:
作用:可以同時(shí)設(shè)定列表樣式類型、列表樣式位置、列表樣式圖片等屬性的值。
語(yǔ)法:
注意:
可以不設(shè)置其中的某個(gè)值,未設(shè)置的屬性采用默認(rèn)值
同時(shí)指定list-style-image和list-style-type時(shí),list-style-image優(yōu)先顯示,除非list-style-image設(shè)置為none,或圖片路徑錯(cuò)誤無(wú)法顯示
當(dāng)列表與列表項(xiàng)目同時(shí)使用樣式時(shí),列表項(xiàng)目的樣式優(yōu)先顯示
特點(diǎn):
可以設(shè)置寬度和高度
默認(rèn)情況下每個(gè)塊級(jí)元素獨(dú)占一行
作用:
塊級(jí)元素主要用于頁(yè)面布局
常用塊級(jí)元素:
div、p、h1~h6、ol、ul等
特點(diǎn):
不可以設(shè)置寬度和高度,其寬度就是自身文字或圖片的寬度
默認(rèn)情況下多個(gè)行內(nèi)元素會(huì)在一行內(nèi)顯示,遇父元素邊界時(shí)會(huì)自動(dòng)換行
作用:
行內(nèi)元素主要用于設(shè)置文樣式
常用行內(nèi)元素:
a、span、em、b、i、strong、img、input等
作用:控制頁(yè)面元素脫離原有文檔流,實(shí)現(xiàn)向左或向右移動(dòng),直到該元素外邊緣碰到其包含框或另一個(gè)浮動(dòng)框的邊緣停止,標(biāo)準(zhǔn)流中的其他盒子將頂?shù)礁?dòng)盒子的位置。浮動(dòng)的元素不占據(jù)實(shí)際空間。
屬性: float
取值:
浮動(dòng)元素不會(huì)相互重疊;
浮動(dòng)元素不會(huì)上下浮動(dòng),如果一個(gè)浮動(dòng)元素在另一個(gè)浮動(dòng)元素之后顯示,而且會(huì)超出容納塊,則它下降到低于先前任何浮動(dòng)元素的位置。
作用:規(guī)定元素的哪一側(cè)不允許出現(xiàn)其他浮動(dòng)元素。
取值:
作用:控制頁(yè)面元素在頁(yè)面中的位置。
屬性:position
取值:static/relative/absolute/fiexed
默認(rèn)屬性值,元素按照標(biāo)準(zhǔn)文檔流進(jìn)行排列,塊級(jí)元素獨(dú)占一行, 行內(nèi)元素位于一行內(nèi)顯示,一行顯示不下,自動(dòng)換行。
特點(diǎn):
相對(duì)于自身原有位置進(jìn)行偏移
仍處于標(biāo)準(zhǔn)文檔流中
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
當(dāng)元素相對(duì)定位后會(huì)產(chǎn)生Z軸上的堆疊,不設(shè)置z-index屬性時(shí),默認(rèn)該元素出現(xiàn)在X軸和Y軸構(gòu)成的平面上。
特點(diǎn):
建立了以包含塊為基準(zhǔn)的定位
絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素(設(shè)定了絕對(duì)定位、相對(duì)定位或固定定位中的任何一種),如果元素沒有已定位的祖先元素,則該元素的位置相對(duì)于瀏覽器窗口。
完全脫離了標(biāo)準(zhǔn)文檔流
隨即擁有偏移屬性和z-idex屬性
偏移屬性:
left:數(shù)值px;
right:數(shù)值px;
top:數(shù)值px;
bottom:數(shù)值px;
絕對(duì)定位未設(shè)置偏移量的特點(diǎn):
無(wú)論是否存在已經(jīng)定位的祖先元素,都保持在元素的初始位置
脫離了標(biāo)準(zhǔn)文檔流
設(shè)定固定定位的元素框的表現(xiàn)類似于將position設(shè)置為absolute,不過其包含塊是瀏覽器窗口本身。
在計(jì)算機(jī)顯示中把垂直于屏幕平面的方向稱為Z方向,CSS絕對(duì)定位容器的z-index屬性即對(duì)應(yīng)該方向。
作用:用于控制元素的層疊次序,使得某個(gè)元素浮于其他元素之上。
語(yǔ)法:
auto:遵循其父元素的定位
number:整數(shù),可負(fù),值大者疊加在上層
注意:使用z-index屬性時(shí),要求該元素的position屬性值為absolute、relative或fixed。
作用:用于定義建立布局時(shí)元素生成的顯示框類型
語(yǔ)法:dispaly:值;
作用:用于定義建立布局時(shí)元素生成的顯示框類型
語(yǔ)法:visibility:值;
一、使用STYLE屬性
二、使用STYLE標(biāo)簽
三、使用 LINK標(biāo)簽
四、使用@import引入
五、使用div等元素標(biāo)記引入樣式