03 CSS技術
CSS 技術
文件:CSS2.0.ch
1.1CSS技術介紹
CSS 是「層疊樣式表單」。是用於(增強)控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。
1.2 CSS語法規則
選擇器：瀏覽器根據“選擇器”決定受 CSS 樣式影響的 HTML 元素（標籤）。
屬性 (property) 是你要改變的樣式名，並且每個屬性都有一個值。屬性和值被冒號分開，並
由花括號包圍，這樣就組成了一個完整的樣式宣告（declaration），例如：p {color: blue}
多個宣告：如果要定義不止一個宣告，則需要用分號將每個宣告分開。雖然最後一條宣告的
最後可以不加分號(但儘量在每條宣告的末尾都加上分號)
例如：
p{
color:red；
font-size:30px;
}
注：一般每行只描述一個屬性
CSS 註釋：/*註釋內容*/
1.3 CSS 和 HTML 的結合方
1.3.1 第一種：
在標籤的 style 屬性上設定”key:value value;”，修改標籤樣式。
<body> <!-- 需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個畫素，實線，紅色。 --> <div style="border: 1px solid red;">div1</div> <div style="border: 1px solid red;">div2</div> <span style="border: 1px solid red;">span1</span> <span style="border: 1px solid red;">span2</span> </body>
問題：這種方式的缺點？
1.如果標籤多了。樣式多了。程式碼量非常龐大。
2.可讀性非常差。
3.Css 程式碼沒什麼複用性可方言。
1.3.2 第二種
在 head 標籤中，使用 style 標籤來定義各種自己需要的 css 樣式。
格式如下：
xxx {
Key : value value;
}
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- style標籤專門用來定義css樣式程式碼--> <style type="text/css"> div{ /* 需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個畫素，實線，紅色。*/ border: 1px solid red; } span{ border: 1px solid red; } </style> </head> <body> <!-- 需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個畫素，實線，紅色。 --> <div>div1</div> <div>div2</div> <span>span1</span> <span>span2</span> </body> </html>
問題：這種方式的缺點。
1.只能在同一頁面內複用程式碼，不能在多個頁面中複用 css 程式碼。
2.維護起來不方便，實際的專案中會有成千上萬的頁面，要到每個頁面中去修改。工作量太大了。
1.3.1 第三種
把 css 樣式寫成一個單獨的 css 檔案，再通過 link 標籤引入即可複用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css" /標籤 匯入 css 樣式檔案
1、css檔案內容
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
2、html檔案程式碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<!--
需求 1：分別定義兩個 div、span 標籤，分別修改每個 div 標籤的樣式為：邊框 1 個畫素，實線，紅色。
-->
<div>div1</div>
<div>div2</div>
<span>span1</span>
<span>span2</span>
</body>
</html>
1.4 CSS選擇器
1.4.1 標籤名選擇器
標籤名選擇器的格式是：
標籤名{
屬性：值;
}
標籤名選擇器，可以決定哪些標籤被動的使用這個樣式
需求 1：在所有 div 標籤上修改字型顏色為藍色，字型大小 30 個畫素。邊框為 1 畫素黃色實線。
並且修改所有 span 標籤的字型顏色為黃色，字型大小 20 個畫素。邊框為 5 畫素藍色虛線。
<html>
<head>
<meta charset="UTF-8">
<title>CSS選擇器</title>
<style type="text/css">
div{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
span{
border: 5px dashed blue;
color: yellow;
font-size: 20px;
}
</style>
</head>
<body>
<!--
需求1：在所有div標籤上修改字型顏色為藍色，字型大小30個畫素。邊框為1畫素黃色實線。
並且修改所有span 標籤的字型顏色為黃色，字型大小20個畫素。邊框為5畫素藍色虛線。
-->
<div>div標籤1</div>
<div>div標籤2</div>
<span>span標籤1</span>
<span>span標籤2</span>
</body>
</html>
1.4.2 id選擇器
id 選擇器的格式是：
#id 屬性值{
屬性：值;
}
id 選擇器，可以讓我們通過 id 屬性選擇性的去使用這個樣式。
<html>
<head>
<meta charset="UTF-8">
<title>ID選擇器</title>
<style type="text/css">
#id001{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
#id002{
color: red;
font-size: 20px;
border: 5px dotted blue;
}
</style>
</head>
<body>
<!--
需求1：分別定義兩個 div 標籤，
第一個div 標籤定義 id 為 id001 ，然後根據id 屬性定義css樣式修改字型顏色為藍色，
字型大小30個畫素。邊框為1畫素黃色實線。
第二個div 標籤定義 id 為 id002 ，然後根據id 屬性定義css樣式 修改的字型顏色為紅色，字型大小20個畫素。邊框為5畫素藍色點線。
-->
<div id="id001">div標籤1</div>
<div id="id002">div標籤2</div>
</body>
</html>
1.4.3 class選擇器(類選擇器)
class 型別選擇器的格式是：
.class 屬性值{
屬性：值;
}
class 型別選擇器，可以通過 class 屬性有效的選擇性地去使用這個樣式。
類可以有多個，id只能有一個
<head>
<meta charset="UTF-8">
<title>class型別選擇器</title>
<style type="text/css">
.class01{
color: blue;
font-size: 30px;
border: 1px solid yellow;
}
.class02{
color: gray;
font-size: 26px;
border: 1px solid red;
}
</style>
</head>
<body>
<!--
需求1：修改 class 屬性值為 class01的 span 或 div 標籤，字型顏色為藍色，字型大小30個畫素。邊框為1畫素黃色實線。
需求2：修改 class 屬性值為 class02的 div 標籤，字型顏色為灰色，字型大小26個畫素。邊框為1畫素紅色實線。
-->
<div class="class01">div標籤class01</div>
<div class="class02">div標籤</div>
<span class="class01">span標籤class01</span>
<span>span標籤2</span>
</body>
</html>
1.4.4 組合選擇器
組合選擇器的格式是：
選擇器 1，選擇器 2，選擇器 n{
屬性：值;
}
組合選擇器可以讓多個選擇器共用同一個 css 樣式程式碼
<html>
<head>
<meta charset="UTF-8">
<title>class型別選擇器</title>
<style type="text/css">
.class01,#id01{
color: blue;
font-size: 20px;
border: 1px yellow solid;
}
</style>
</head>
<body>
<!--
需求1：修改 class="class01" 的div 標籤 和 id="id01" 所有的span標籤，
字型顏色為藍色，字型大小20個畫素。邊框為1畫素黃色實線。
-->
<div class="class01">div標籤class01</div> <br />
<span id="id01">span 標籤</span> <br />
<div>div標籤</div> <br />
<div>div標籤id01</div> <br />
</body>
</html>
1.5常用樣式
1、字型顏色
color：red；
顏色可以寫顏色名如：black, blue, red, green 等
顏色也可以寫 rgb 值和十六進位制表示值：如 rgb(255,0,0)，#00F6DE，如果寫十六進位制值必
須加#
2、寬度
width:19px;
寬度可以寫畫素值：19px；
也可以寫百分比值：20%；
3、高度
height:20px;
高度可以寫畫素值：19px；
也可以寫百分比值：20%；
4、背景顏色
background-color:#0F2D4C
5、字型樣式：
color：#FF0000；字型顏色紅色
font-size：20px; 字型大小
6、紅色 1 畫素實線邊框
border：1px solid red;
7、DIV 居中
margin-left: auto;
margin-right: auto;
8、文字居中：
text-align: center;
9、超連線去下劃線
text-decoration: none;
10、表格細線
table {
border: 1px solid black; /*設定邊框*/
border-collapse: collapse; /*將邊框合併*/
}
td,th {
border: 1px solid black; /*設定邊框*/
}
11、列表去除修飾
ul {
list-style: none;
}
示例程式碼：
<html>
<head>
<meta charset="UTF-8">
<title>06-css常用樣式.html</title>
<style type="text/css">
div{
color: red;
border: 1px yellow solid;
width: 300px;
height: 300px;
background-color: green;
font-size: 30px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
table{
border: 1px solid red;
border-collapse: collapse;
}
td{
border:1px solid red;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<a href="www.baidu.com">百度</a>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<div>我是 div</div>
</body>
</html>