1.CSS 邊框?qū)傩?/strong>
CSS邊框?qū)傩栽试S你指定一個(gè)元素邊框的樣式和顏色绎谦。
- 邊框樣式
邊框樣式屬性指定要顯示什么樣的邊界奠蹬。
border-style屬性用來(lái)定義邊框的樣式
border-style 值:
none: 默認(rèn)無(wú)邊框
dotted: dotted:定義一個(gè)點(diǎn)線邊框
dashed: 定義一個(gè)虛線邊框
solid: 定義實(shí)線邊框
double: 定義兩個(gè)邊框粪糙。 兩個(gè)邊框的寬度和 border-width 的值相同
groove: 定義3D溝槽邊框于未。效果取決于邊框的顏色值
ridge: 定義3D脊邊框忿墅。效果取決于邊框的顏色值
inset:定義一個(gè)3D的嵌入邊框。效果取決于邊框的顏色值
outset: 定義一個(gè)3D突出邊框咬像。 效果取決于邊框的顏色值
邊框?qū)挾?br> 您可以通過(guò) border-width 屬性為邊框指定寬度算撮。
為邊框指定寬度有兩種方法:可以指定長(zhǎng)度值生宛,比如 2px 或 0.1em(單位為 px, pt, cm, em 等),或者使用 3 個(gè)關(guān)鍵字之一肮柜,它們分別是 thick 陷舅、medium(默認(rèn)值) 和 thin。邊框顏色
border-color屬性用于設(shè)置邊框的顏色素挽∶镒福可以設(shè)置的顏色:
name - 指定顏色的名稱(chēng)狸驳,如 "red"
RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
Hex - 指定16進(jìn)制值, 如 "#ff0000"
您還可以設(shè)置邊框的顏色為"transparent"预明。
注意: border-color單獨(dú)使用是不起作用的,必須得先使用border-style來(lái)設(shè)置邊框樣式耙箍。邊框-單獨(dú)設(shè)置各邊
在CSS中撰糠,可以指定不同的側(cè)面不同的邊框:
p
{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:solid;
border-bottom-color: red;
}
- 邊框-簡(jiǎn)寫(xiě)屬性
上面的例子用了很多屬性來(lái)設(shè)置邊框。
T你也可以在一個(gè)屬性中設(shè)置邊框辩昆。
你可以在"border"屬性中設(shè)置:
border-width
border-style (required)
border-color
border:5px solid red;
2.CSS 輪廓(outline)
輪廓(outline)是繪制于元素周?chē)囊粭l線阅酪,位于邊框邊緣的外圍,可起到突出元素的作用汁针。
輪廓(outline)屬性指定元素輪廓的樣式术辐、顏色和寬度。
- outline 在一個(gè)聲明中設(shè)置所有的輪廓屬性
p
{
border:1px solid red;
outline:green dotted thick;
}
- outline-color 設(shè)置輪廓的顏色
- outline-style 設(shè)置輪廓的樣式
- outline-width 設(shè)置輪廓的寬度
p.one
{
border:1px solid red;
outline-style:solid;
outline-width:thin;
}
3.CSS Margin(外邊距)
CSS Margin(外邊距)屬性定義元素周?chē)目臻g施无。
margin沒(méi)有背景顏色辉词,是完全透明的
margin可以單獨(dú)改變?cè)氐纳希禄猓笕鹛桑疫吘唷R部梢砸淮胃淖兯械膶傩浴?br>
Margin可以使用負(fù)值兴想,重疊的內(nèi)容幢哨。
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
4.CSS Padding(填充)
CSS Padding(填充)屬性定義元素邊框與元素內(nèi)容之間的空間。
當(dāng)元素的 Padding(填充)(內(nèi)邊距)被清除時(shí)嫂便,所"釋放"的區(qū)域?qū)?huì)受到元素背景顏色的填充捞镰。
單獨(dú)使用填充屬性可以改變上下左右的填充”刑妫縮寫(xiě)填充屬性也可以使用岸售,一旦改變一切都改變。
p.ex1 {padding:2cm;}
p.padding {padding-bottom:2cm;}
5.所有CSS 尺寸屬性
height 設(shè)置元素的高度蔚龙。
line-height 設(shè)置行高冰评。
max-height 設(shè)置元素的最大高度。
max-width 設(shè)置元素的最大寬度木羹。
min-height 設(shè)置元素的最小高度甲雅。
min-width 設(shè)置元素的最小寬度解孙。
width 設(shè)置元素的寬度。
6.CSS Display(顯示) 與 Visibility(可見(jiàn)性)
display屬性設(shè)置一個(gè)元素應(yīng)如何顯示抛人,visibility屬性指定一個(gè)元素應(yīng)可見(jiàn)還是隱藏弛姜。
隱藏元素 - display:none或visibility:hidden
隱藏一個(gè)元素可以通過(guò)把display屬性設(shè)置為"none",或把visibility屬性設(shè)置為"hidden"妖枚。但是請(qǐng)注意廷臼,這兩種方法會(huì)產(chǎn)生不同的結(jié)果。
visibility:hidden可以隱藏某個(gè)元素绝页,但隱藏的元素仍需占用與未隱藏之前一樣的空間荠商。也就是說(shuō),該元素雖然被隱藏了续誉,但仍然會(huì)影響布局莱没。
display:none可以隱藏某個(gè)元素,且隱藏的元素不會(huì)占用任何空間酷鸦。也就是說(shuō)饰躲,該元素不但被隱藏了,而且該元素原本占用的空間也會(huì)從頁(yè)面布局中消失臼隔。CSS Display - 塊和內(nèi)聯(lián)元素
塊元素是一個(gè)元素嘹裂,占用了全部寬度,在前后都是換行符摔握。
塊元素的例子:
<h1>
<p>
<div>
內(nèi)聯(lián)元素只需要必要的寬度寄狼,不強(qiáng)制換行。
內(nèi)聯(lián)元素的例子:
<span>
<a>
如何改變一個(gè)元素顯示
可以更改內(nèi)聯(lián)元素和塊元素盒发,反之亦然例嘱,可以使頁(yè)面看起來(lái)是以一種特定的方式組合,并仍然遵循web標(biāo)準(zhǔn)宁舰。
下面的示例把列表項(xiàng)顯示為內(nèi)聯(lián)元素:
li {display:inline;}
下面的示例把span元素作為塊元素:
span {display:block;}
注意:變更元素的顯示類(lèi)型看該元素是如何顯示拼卵,它是什么樣的元素。例如:一個(gè)內(nèi)聯(lián)元素設(shè)置為display:block是不允許有它內(nèi)部的嵌套塊元素蛮艰。