CSS
Cascade Style Sheet（層疊樣式表）
結(jié)合方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>結(jié)合方式</title>
<!--可以在head標(biāo)簽里定義style屬性-->
<style type="text/css">
p{
color:red;
}
</style>
<!--也可以用link引入,后引入的會覆蓋前面定義的，p.css指定了p標(biāo)簽為綠色-->
<link rel="stylesheet" type="text/css" href="p.css">
</head>
<body>
<p>我是綠色的</p>
<!--可以在每個html標(biāo)簽里定義-->
<p style="color:blue">我是藍(lán)色的，覆蓋了head里導(dǎo)入的綠色</p>
</body>
</html>
選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>結(jié)合方式1</title>
<!--只對class為one的p標(biāo)簽有效, p.one {} -->
<!-- * {} 對所有標(biāo)簽有效-->
<!-- #one, p {} 對id為one或者p標(biāo)簽有效-->
<!--
選擇器{
樣式屬性鍵：樣式屬性值;
樣式屬性鍵：樣式屬性值1 樣式屬性值2 樣式屬性值3;
/* 這里面都是注釋 */
}
id選擇器（保證id在頁面中唯一）
#id{
}
類選擇器（對類名一樣的所有標(biāo)簽）
.類名{
}
偽選擇器
選擇標(biāo)簽的某個狀態(tài)，需要配合其他選擇器使用
link 未訪問過
visited 訪問過
hover 懸浮
active 激活，點(diǎn)擊
-->
<style type="text/css">
.one {
color:red;
}
p {
color:green;
}
a:link {
color:blue;
}
a:visited {
color:green;
}
a:hover {
color:yellow;
}
a:active {
color:pink;
}
</style>
</head>
<body>
<p>我是綠色的</p>
<!--可以在每個html標(biāo)簽里定義-->
<p style="color:blue">我是藍(lán)色的，覆蓋了head里定義的綠色</p>
<p id="one">我是綠色的</p>
<p class="one">我是紅色的</p>
<a >百度首頁</a>
</body>
</html>
字體屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style type="text/css">
p {
font-family:微軟雅黑;
color:red;
font-size:18px;
font-style:italic;
}
</style>
<body>
<p>一個p標(biāo)簽</p>
</body>
</html>
背景屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* p {
background-color: red;
}
*/
body {
background-image: url(image.png);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
</style>
</head>
<body>
<p>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
</p>
<p>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
</p>
<p>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
啊哈哈哈<br/>
</p>
</body>
</html>
塊和行標(biāo)簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--塊級標(biāo)簽，占據(jù)一行，div
行內(nèi)標(biāo)簽，占據(jù)行內(nèi)一部分，span-->
<body>
<div style="background-color:red;">我是div, 占用一行</div>
<span style="background-color:red;">我是span, 行內(nèi)</span>
<span style="background-color:red;">我是span, 行內(nèi)</span>
<span style="background-color:red;">我是span, 行內(nèi)</span>
</body>
</html>
盒子模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
盒子模型的屬性
一. 邊框系類屬性
二. 尺寸屬性
三. 邊距
*內(nèi)邊距
*外邊距
border-color:邊框顏色
border-width:邊框?qū)挾? border-style:邊框樣式
border-color: red;
border-width: 1px;
border-style: solid;
margin-left:100px;左外邊距
margin-top:100px;
padding-left:100px; 左內(nèi)邊距
padding-top:100px; 上內(nèi)邊距
注意:內(nèi)邊距會延長所在盒子的長或?qū)?
margin/padding復(fù)合參數(shù) : 1個值 上下左右
2個值 1.上下 2.左右
3個值 1.上 2.左右 3.下
4個值 1.上 2.右 3.下 4.左
*/
div {
border-color: blue;
border-width: 1px;
border-style: solid;
height: 300px;
width: 300px;
}
#one {
height: 300px;
width: 200px; /*內(nèi)邊距會延長所在盒子的長或?qū)?/
padding: 100px;
}
#two {
height: 100px;
width: 100px;
margin:10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id="one">
<div id="two" ></div>
</div>
</body>
</html>
2017.3.7
by @sunhaiyu
