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