CSS三種書(shū)寫(xiě)方式
外部樣式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>外部樣式</title>
<!--外部樣式書(shū)寫(xiě)
<link href="css/xxx.css" rel="stylesheet">
css的書(shū)寫(xiě)：
標(biāo)簽{
xx:xx;
xx:xx;
}
外部樣式的原理，就是根據(jù)配置傻瓜式配置
-->
<link href="css/index.css" rel="stylesheet">
</head>
<body>
<div>這是一個(gè)容器標(biāo)簽</div>
<p>這是一個(gè)段落標(biāo)簽</p>
</body>
</html>
行內(nèi)樣式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>行內(nèi)樣式</title>
</head>
<body>
<!--注意書(shū)寫(xiě)格式
style = "xx：xx;xx:xx;"
-->
<div style="font-size: 30px ; color: black ; background-color: cadetblue;">這是一個(gè)容器標(biāo)簽</div>
<br/>
<p style="font-size: 20px;color: blue;background-color: gray">這是一個(gè)段落標(biāo)簽</p>
</body>
</html>
頁(yè)內(nèi)樣式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>頁(yè)內(nèi)樣式</title>
<!--頁(yè)內(nèi)樣式的書(shū)寫(xiě)
<style>
標(biāo)簽{xx:xx;
xx:xx;}
<style>
注意：font-size: 30px 要加px!!!
遵守原則：就近原則；疊加原則；
-->
<style>
div{
color: black;
background-color: gray;
}
div{
color: white;
background-color: blue;
font-size: 30px;
}
p{
color: blue;
background-color: saddlebrown;
font-size: 20px;
}
</style>
<!--<link href="css/index.css" rel="stylesheet">-->
</head>
<body>
<div>這是容器標(biāo)簽</div>
<div>這是容器標(biāo)簽</div>
<div>這是容器標(biāo)簽</div>
<p>這是段落標(biāo)簽</p>
<p>這是段落標(biāo)簽</p>
<p>這是段落標(biāo)簽</p>
</body>
</html>
CSS選擇器
前三個(gè)選擇器比較常用
1、標(biāo)簽選擇器
div{
font-size: 30px;
background-color: saddlebrown;
}
2、類(lèi)選擇器
.test{
font-size: 25px;
background-color: gray;
}
3、id選擇器 只有一處能用，當(dāng)有多處使用的時(shí)候就報(bào)錯(cuò)
#myid{
font-size: 20px;
background-color: darkslategray;
}
4、并列選擇器 邏輯或：滿(mǎn)足一個(gè)條件就使用樣式
div,.test{
font-size: 10px;
background-color:darkred;
}
5、復(fù)合選擇器 邏輯與：同時(shí)滿(mǎn)足條件才可以
div.test{
font-size: 10px;
background-color:darkred;
}
6、后代選擇器
div p{
background-color: darkred;
}
7、直接后臺(tái)選擇器
div > p{
background-color: green;
}
8、相鄰兄弟選擇器
div + p{
background-color: gray;
}
9、屬性選擇器
div[name]{
background-color: green;
}
10、、偽類(lèi)選擇器 當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候
#myid:hover{
background-color: gray;
}
11、偽元素選擇器
div:first-letter{
background-color: gray;
}
CSS屬性
div{
color: white;
background:url("images/1.jpeg");
/* no-repeat 設(shè)置不平鋪
cover:把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。
背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。*/
background-size: cover;
width: 200px;
height: 200px;
/*
visibility 會(huì)隱藏內(nèi)容,不會(huì)隱藏尺寸
display 既隱藏內(nèi)容,又隱藏尺寸
*/
/*visibility: hidden;*/
/*display: none;*/
background-color: green;
/*字體 */
font-family: '宋體';
/*字體加粗 */
font-weight: bold;
/*設(shè)置光標(biāo)類(lèi)型 */
cursor: crosshair;
/*加下劃線(xiàn) underline none*/
text-decoration: underline;
/*text-decoration-color: red;*/
/*首行縮進(jìn)30%*/
text-indent: 30%;
}
ul{
/*指示點(diǎn)是方形*/
list-style: square;
}
p{
/*一定要注意：寫(xiě)數(shù)字就要加 px!!! */
width: 100px;
height: 50px;
/*超出標(biāo)簽部分內(nèi)容隱藏 auto */
overflow: auto;
}
可繼承屬性
<!--可以繼承的屬性
這個(gè)屬性,所有標(biāo)簽可繼承
visibility、cursor
這些屬性,只有內(nèi)聯(lián)標(biāo)簽可繼承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
這些屬性,只有塊級(jí)標(biāo)簽可繼承
text-indent、text-align
這些屬性,只有列表標(biāo)簽可繼承
list-style、list-style-type、list-style-position、list-style-image
不可繼承屬性
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
