目錄
CSS基礎文法
CSS選擇器
選擇器
基于關系的選擇器
僞類
僞元素
優先級别
CSS樣式
背景
文本
字型
連結
清單
表格
CSS布局
CSS盒子模型
邊框
内邊距
外邊距
CSS基礎文法
為什麼要使用CSS
- 樣式定義如何顯示HTML元素
- 是為了解決内容與表現分離的問題
CSS聲明
CSS聲明塊
CSS規則
CSS選擇器
選擇器
- ID選擇器
- 元素選擇器
- 類( class)選擇器
- 屬性選擇器
基于關系的選擇器
僞類
僞元素
- ::before 會為目前元素建立一個子元素作為僞元素。
- ::after 用來比對已選中元素的一個虛拟的最後子元素。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>僞元素</title>
<style>
q::before {
content: "«";
color: blue;
}
q::after {
content: "»";
color: red;
}
</style>
</head>
<body>
<q>一些引用</q>, 他說, <q>比沒有好。</q>.
</body>
</html>
優先級别
- 元素選擇器和僞元素的級别最低
- 其次是類選擇器、屬性選擇器和僞類
- ID選擇器是選擇器中級别最高的
- 内聯樣式總會覆寫外部樣式表的任何樣式
- !Important 聲明将覆寫任何其他聲明
CSS樣式
背景
文本
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>文本</title>
<style>
/* 設定文本顔色 */
#p1 {
color: lightcoral;
}
/* 設定文本左對齊 */
#p2 {
text-align: left;
}
/* 設定文本居中對齊 */
#p3 {
text-align: center;
}
/* 設定文本右對齊 */
#p4 {
text-align: right;
}
/* 設定連結樣式去掉下劃線 */
a {
text-decoration: none;
}
/* 設定文本的縮進 */
#p5 {
text-indent: 50px;
}
</style>
</head>
<body>
<p id="p1">這是一個段落内容.</p>
<p id="p2">這又是一個段落内容.</p>
<p id="p3">這又是一個段落内容.</p>
<p id="p4">這又是一個段落内容.</p>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >這是一個連結</a>
<p id="p5">這還是一個段落内容.</p>
</body>
</html>
網頁搭建入門---CSS入門
字型
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>字型</title>
<style>
/* 設定字型系列 */
#p1 {
font-family: "Times New Roman";
}
/* 設定自定義字型系列 */
@font-face {
font-family: 'FontAwesome';
src: url('font/fontawesome-webfont.eot?v=3.2.1');
src: url('font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
font-weight: normal;
font-style: normal;
}
#p2 {
font-family: FontAwesome;
}
#p3 {
font-size: larger;
font-style: italic;
}
</style>
</head>
<body>
<p id="p1">this is text.</p>
<p id="p2">this is text too.</p>
<p id="p3">這是一個段落内容.</p>
</body>
</html>
連結
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>連結</title>
<style>
/* 正常，未通路過的連結 */
a:link {
color: lightgreen;
/* 修改連結的文本樣式 */
text-decoration: none;
/* 設定連結的背景顔色 */
background-color: lightyellow;
}
/* 當使用者滑鼠放在連結上時 */
a:hover {
color: lightcoral;
}
/* 使用者已通路過的連結 */
a:visited {
color: lightblue;
}
/* 連結被點選的那一刻 */
a:active {
color: lightslategray;
}
</style>
</head>
<body>
<a href="#" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" >這是一個連結.</a>
</body>
</html>
清單
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>清單</title>
<style>
/* 設定清單項的預定義樣式 */
#u1 {
list-style-type: decimal;
}
/* 設定清單項的圖檔樣式 */
#u2 {
list-style-image: url("imgs/mac.png");
}
/* 設定清單項水準方向排列 */
#u3 {
list-style-type: none;
}
#u3>li {
float: left;
display: inline-block;
background-color: lightgreen;
padding: 5px;
}
</style>
</head>
<body>
<ul id="u1">
<li>蘋果</li>
<li>西瓜</li>
<li>香蕉</li>
</ul>
<ul id="u2">
<li>蘋果</li>
<li>西瓜</li>
<li>香蕉</li>
</ul>
<ul id="u3">
<li>蘋果</li>
<li>西瓜</li>
<li>香蕉</li>
</ul>
</body>
</html>
表格
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>表格</title>
<style>
table, th, td {
border: 1px solid lightslategray;
border-collapse: collapse;
}
table {
width: 80%;
margin: 0px auto;
}
table th {
background-color: lightcoral;
color: white;
}
table th, table td {
padding: 10px;
}
.info {
background-color: lightgreen;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th>名稱</th>
<th>職位</th>
<th>收入</th>
</tr>
<tr class="info">
<td>張無忌</td>
<td>老闆</td>
<td>100000</td>
</tr>
<tr>
<td>小昭</td>
<td>秘書</td>
<td>10000</td>
</tr>
<tr class="info">
<td>周芷若</td>
<td>主管</td>
<td>20000</td>
</tr>
</table>
</body>
</html>
網頁搭建入門---CSS入門
CSS布局
- 兩行三列布局
- 三行兩列布局
CSS盒子模型
邊框
内邊距
外邊距