一.css出現(xiàn)的位置
1.行間樣式表
給單獨(dú)的標(biāo)簽添加樣式
語(yǔ)法：<div style=""></div>
<div style="width:100px;height=100px;background:red"></div>
缺點(diǎn):如果樣式太多就不利于修改
2.內(nèi)部樣式表
樣式表寫(xiě)在了html文件里面
語(yǔ)法：把樣式寫(xiě)在一對(duì)<style></style>標(biāo)簽當(dāng)中，這個(gè)標(biāo)簽對(duì)是放在html頁(yè)面里面的。一般style標(biāo)簽放在<head></head>里面
缺點(diǎn)：內(nèi)部樣式表的作用范圍只存在當(dāng)前的頁(yè)面
3.外部樣式表
把樣式寫(xiě)在一個(gè)單獨(dú)的文件里，用到的時(shí)候用地址把它引用進(jìn)來(lái)就可以了
例如:
html文件
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div></div>
</body>
</html>`
index.css文件
`div{
width: 100px;
height: 100px;
background: #f00;
}
ps: W3C規(guī)定：行為，結(jié)構(gòu)，樣式相分離
二.屬性
屬性是描述元素的，總以名稱=值對(duì)的形式出現(xiàn)
寫(xiě)法：選擇器{樣式屬性：值...}
三.使用css設(shè)置邊框(border)
1.復(fù)合樣式邊框
- 組成(三個(gè)參數(shù)的位置可以調(diào)換，但不建議)：
1.邊框的粗細(xì) 1px
2.邊框的樣子
solid 實(shí)線
dashed 虛線
dotted 點(diǎn)劃線(不兼容，不同瀏覽器顯示的是不一樣的)
3.邊框顏色
red 顏色的英文表示
#f00 顏色的十六進(jìn)制表示
rgb(255,0,0) 顏色的RGB表示方法
在CSS3中rgba(255,0,0,0.5) 第四個(gè)參數(shù)表示透明度
例：
div{
width: 300px;
height: 300px;
border: 1px dotted rgba(255,0,0,0.2);
}
2.單一樣式邊框
1.邊框粗細(xì)
border-width: 1px 2px 4px 8px;
上邊 右邊 下邊 左邊
border-width: 1px 2px 4px;
上邊 右邊和左邊 下邊
border-width: 1px 2px;
上邊和下邊 左邊和右邊
2.邊框的樣子
border-style: solid dashed dotted solid;
上邊 右邊 下邊 左邊
border-style: solid dashed dotted;
上邊 右邊和左邊 下邊
border-style: solid dashed;
上邊和下邊 左邊和右邊
3.邊框顏色
border-color:red green black yellow;
上邊 右邊 下邊 左邊
border-color:red green black;
上邊 右邊和左邊 下邊
border-color: red green;
上邊和下邊 左邊和右邊
例如：
div{
width: 300px;
height: 300px;
border-width: 1px 2px 4px 8px;
border-style: solid dashed dotted solid;
border-color:red green black yellow;
}
3.單方向的邊框
border-top 上邊框
border-top-width 上邊框的寬度
border-top-style 上邊框的樣子
border-top-color 上邊框的顏色
border-right 右邊框
border-right-width 右邊框的寬度
border-right-style 右邊框的樣子
border-right-color 右邊框的顏色
border-bottom 下邊框
border-bottom-width 下邊框的寬度
border-bottom-style 下邊框的樣子
border-bottom-color 下邊框的顏色
border-left 左邊框
border-left-width 左邊框的寬度
border-left-style 左邊框的樣子
border-left-color 左邊框的顏色`