為了寫頁面硬著頭皮上HTML，一切從0開始，但愿我能OK!
【css語法】：屬性名：屬性值
【css引入方式】
1.行間樣式的引入
寫法：在標(biāo)簽中，寫入style="......",引號當(dāng)中寫css相應(yīng)的樣式
<div style="width: 100px;height: 20px;background: red;">css樣式</div>
2.內(nèi)部樣式表的引入
(1).標(biāo)簽名選擇器
寫法：在head標(biāo)簽里，寫一個style的標(biāo)簽，在標(biāo)簽中通過選擇器來控制樣式。div{...}
(2).ID選擇器
(3).class選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
/*內(nèi)部樣式*/
width: 100px;height: 20px;background: red;
}
#box{
/*id樣式*/
background: blue;
}
.fire{
/*class樣式*/
background: green;
}
</style>
</head>
<body>
<div>css樣式</div>
<div>css央視2</div>
<div id="box">id樣式</div>
<div class="fire">class樣式</div>
</body>
</html>
3.外部樣式表的引入
<link rel="stylesheet" href="css文件路徑">
1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/1.css">
</head>
<body>
<div>css樣式</div>
<div>css央視2</div>
<div id="box">id樣式</div>
<div class="fire">class樣式</div>
</body>
</html>
1.css
div {
width: 100px;height: 20px;background: red;
}
#box{
background: blue;
}
.fire{
background: green;
}
4.選擇器之間的優(yōu)先級：
標(biāo)簽名選擇器<class選擇器<id選擇器<行間樣式
5.css寬、高、背景設(shè)置
寬：width
高：height
背景：background
背景色：background-color:顏色值英文單詞/十六進制/rgb三要素值
背景圖：background-image:url("圖片路徑")
背景圖平鋪：background-repeat:no-repeat/repeat-x/repeat-y
背景圖定位：background-position：第一個值(X軸位置) 第二個值(Y軸位置)
備注：第一個值：left/center/right/30px
第二個值：top/center/bottom/40px
復(fù)合寫法：background：color image position repeat
背景圖滾動：background-attachment：fixed；
【css盒模型】
1.邊框 border
(1).復(fù)合寫法 border：border-width border-style border-color
border-width 邊框?qū)挾?br>
border-style 邊框樣式 solid-實線/dashed-虛線/dotted-點線
border-color 邊框顏色 值(顏色單詞 十六進制 RGB)
(2)單一寫法：
border-left: 2px dashed blue;
border-right: 4px dashed red;
border-top: 6px dotted green;
border-bottom: 8px dashed yellow;
(3)邊框透明
border-bottom: 8px dashed transparent;
(4).邊框圓角
border-radius: 2%(4px)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 500px;
height:300px;
background-image: url("image/1.jpg");
/*復(fù)合邊框*/
/*border: 4px solid red;*/
/*單一邊框,寬度 類型 顏色/透明度*/
border-left: 2px dashed blue;
border-right: 4px dashed red;
border-top: 6px dotted green;
border-bottom: 8px dashed transparent;
border-radius: 2%
}
</style>
</head>
<body>
<div>testdiv</div>
</body>
</html>
2.填充padding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 20px;
border: 1px dashed red;
/*padding復(fù)合寫法*/
padding: 10px;
/*第一個值代表上下，第二個值代表左右*/
padding:10px 20px;
/*padding單一寫法*/
padding-left:2px;
padding-top:4px;
padding-bottom:6px;
padding-right:8px;
}
</style>
</head>
<body>
<div>善金科技</div>
</body>
</html>
3.外邊距 margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 20px;
border: 1px dashed red;
/*margin*/
margin: 10px;
/*第一個值代表上下，第二個值代表左右*/
margin:10px 20px;
/*margin*/
margin-left:2px;
margin-top:4px;
margin-bottom:6px;
margin-right:8px;
}
</style>
</head>
<body>
<div>善金科技</div>
</body>
</html>
【css3選擇器】
1、子選擇器 >
舉例：div>span
解釋：那么樣式文件只影響div下的span，而不會影響到在下一級的span
2、相鄰選擇器 +
舉例：p+strong
解釋：P標(biāo)簽相鄰的標(biāo)簽strong會受影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基礎(chǔ)</title>
<style>
/*子選擇器*/
div>span{
border: 1px solid red;
}
/*相鄰選擇器*/
p+strong{
border: 1px solid green;
}
</style>
</head>
<body>
<header>CSS3選擇器演示
<!-- 子選擇器 -->
<div>
<span>子span1</span>
<p>
<span>孫子span</span>
</p>
<span>子span2</span>
<!-- 相鄰選擇器 -->
<p>我的p標(biāo)簽1</p>
<strong>我是strong1</strong>
<span>我是span3</span>
<p>我的p標(biāo)簽2</p>
</div>
</header>
</body>
</html>
