HTML 中 使用CSS樣式 （上）
阿新 • • 發佈：2019-01-27
在每一個標籤上都可以設定style屬性，這就是CSS樣式
<div style="height:48px;border: 1px solid red;text-align:center;line-height:48px;">FGF</div>
<div style="height:48px;border: 1px solid red;text-align:center;line-height:48px;">FGF</div>但是上面的樣式沒有重用性。如何提高重用性呢？
一、編寫css樣式
1、ID選擇器
由於ID唯一，所以也是寫多遍。
<head>
<style>
#i1{
background-color: #2459a2;
height: 48px;
}
#i2{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">ff</div>
<div 2、class選擇器
class選擇器是最常用的。
<head>
<style>
.c1{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">ff</div>
<div class="c1"> 3、標籤選擇器
不管那一層，只要是這個標籤就應用這個樣式。
<head>
<style>
div{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div >ff</div>
<span >f
<div >fgf</div>
</span>
</body>4、層級選擇器（空格）
也叫關聯選擇器。如下：span裡面的div才應用樣式
<head>
<style>
span div{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div >ff</div>
<span >f
<div >fgf</div>
</span>
</body>層級也可以標籤和類選擇器做層級，比如
.c1 .c2 div a h1{
}5、組合選擇器（逗號）
ID組合
<head>
<style>
#i1, #i2{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div id="i1">ff</div>
<div id="i2">ff</div>
</body>class 組合
<head>
<style>
.c1, .c2{
background-color: #2459a2;
height: 48px;
}
</style>
</head>
<body>
<div class="c1">ff</div>
<div class="c2">ff</div>
</body>六、屬性選擇器
對選擇到的標籤再通過屬性再進行一次篩選
<head>
<style>
.c1[type="text"]{ width:100px; height:200px; }
input[name="fgf"]{width:40px; height:40px; }
</style>
</head>
<body>
<input class="c1" type="text" n="alex">
<input class="c1" name="fgf" type="password">
</body>二、CSS的存在形式及優先順序
如果對一個內容指定多個樣式，樣式沒有重合，就都應用上了。
如果有重合，優先順序，標籤上style優先，編寫順序，就近原則,越往下越優先。
<head>
<link rel="stylesheet" href="css/commons.css" />
<!--引入CSS檔案-->
.c1{
background-color: #2459a2;
height: 10px;
}
<!--優先順序：看是這裡c1寫在下面，還是c2在下面-->
.c2{
}
</head>
<body>
<div class="c1 c2" style="color: pink">asdf</div>
</body>css檔案寫法，直接寫，不用再寫<style>
.c1{
background-color: #2459a2;
height: 10px;
}
<!--優先順序：看是這裡c1寫在下面，還是c2在下面-->
.c2{
}三、css邊框以及其他常用樣式
<body>
<div style="border: 1px solid red;">
<!--border：邊框；solid：實體的-->
asdfasdf
</div>
<div style="height: 48px; /*高度（畫素）*/
width:80%; /*寬度（百分比）*/
border: 2px dotted red;
/*dotted：虛線的 （border-left）*/
font-size: 16px; /*字型大小*/
text-align: center; /*水平居中*/
line-height: 48px; /*垂直居中根據標籤高度*/
font-weight: bold; /*字型加粗*/
color: white; /*字型顏色*/
background-color: lawngreen; /*背景色*/
">asdf</div>
</body>四、css之float樣式
html標籤中，div是塊級標籤，一個標籤佔一整行。顯然好多網站都是分左右欄的，那怎麼實現呢？
這裡就需要用到float樣式，讓塊級標籤飄起來。自己有多少佔多少。
<body>
<div style="width: 20%;background-color: red;float: left">1</div>
<div style="width: 50%;background-color: black;float: left">2</div>
<div style="width: 20%;background-color: blue;float: right">2</div>
</body>float飄起來之後，撐不起父標籤，需要加一句，如下。
<div style="width: 300px;border: 1px solid red;">
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="width: 96px;height:30px;border: 1px solid green;float: left;"></div>
<div style="clear: both;"></div>
<!--float有個坑：孩子飄起來了，父親沒飄起來，就撐不起來了，需要加上上面那一句。-->
</div>五、css之display樣式
******
行內標籤：無法設定高度，寬度，padding margin
塊級標籤：設定高度，寬度，padding margin display: none; -- 讓標籤消失
display: inline; -- 讓標籤變成行內標籤
display: block; -- 讓標籤變成塊級標籤
display: inline-block; -- 擁有兩者的屬性↓
具有inline,預設自己有多少佔多少
具有block，可以設定無法設定高度，寬度，padding margin六、css之內外邊距
- margin：外邊距（離上面的邊距增加了，本身沒有增加。）
- padding：內邊距（上邊邊距增加了，自身內部增加邊距。）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
</style>
</head>
<body style="margin: 0">
<div class="pg-header">
<div style="width: 980px;margin: 0 auto;">
<!--margin: 0 auto; 網頁上邊距為零，置頂；auto：當前寬度左右居中-->
<div style="float: left;">收藏本站</div>
<div style="float: right;"><a>登入</a></div>
<div style="clear: both"></div>
</div>
</div>
</body>
</html>七、css總結
CSS
在標籤上設定style屬性：
background-color: #2459a2;
height: 48px;
...
編寫css樣式：
1. 標籤的style屬性
2. 寫在head裡面 style標籤中寫樣式
- id選擇區
#i1{
background-color: #2459a2;
height: 48px;
}
- class選擇器 ******
.名稱{
...
}
<標籤 class='名稱'> </標籤>
- 標籤選擇器
div{
...
}
所有div設定上此樣式
- 層級選擇器（空格） ******
.c1 .c2 div{
}
- 組合選擇器（逗號） ******
#c1,.c2,div{
}
- 屬性選擇器 ******
對選擇到的標籤再通過屬性再進行一次篩選
.c1[n='alex']{ width:100px; height:200px; }
PS:
- 優先順序，標籤上style優先，編寫順序，就近原則
2.5 css樣式也可以寫在單獨檔案中
<link rel="stylesheet" href="commons.css" />
3、註釋
/* */
4、邊框
- 寬度，樣式，顏色 (border: 4px dotted red;)
- border-left
5、
height， 高度 百分比
width， 寬度 畫素，百分比
text-align:center, 水平方向居中
line-height，垂直方向根據標籤高度
color、 字型顏色
font-size、 字型大小
font-weight 字型加粗
6、float
讓標籤飄起來，塊級標籤也可以堆疊
老子管不住：
<div style="clear: both;"></div>
7、display
display: none; -- 讓標籤消失
display: inline; -- 讓標籤變成行內標籤
display: block; -- 讓標籤變成塊級標籤
display: inline-block; -- 擁有兩者的屬性↓
具有inline,預設自己有多少佔多少
具有block，可以設定無法設定高度，寬度，padding margin
******
行內標籤：無法設定高度，寬度，padding margin
塊級標籤：設定高度，寬度，padding margin
8、padding margin(0,auto)