前言
CSS的詳細(xì)內(nèi)容將在CSS文集中介紹
1.概述
1.1 作用
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的。
1.2 添加方式
- 內(nèi)聯(lián)樣式：在HTML元素中使用"style" 屬性
- 內(nèi)部樣式表：在HTML文檔頭部 < head > 區(qū)域使用< style > 元素 來包含CSS
- 外部引用：使用外部 CSS 文件
2. 幾個常用屬性
2.1 前景色（color:）
style="color:blue"
2.2 背景色（background-color:）
style="background-color:yellow"
2.3 字體大小（font-size:）
style="font-size:20px"
2.4 對齊（text-align）
style="text-align:center;"
- 左對齊：默認(rèn)
- 居中：
center - 右對齊：
right
3. 引用方式
3.1 內(nèi)聯(lián)樣式
使用說明
- 作用
當(dāng)個別元素需要使用特殊樣式時 - 使用方法
在相關(guān)標(biāo)簽中加入樣式屬性，（可以是任意CSS） - 語法示例
<h1 style="xxxxx;"></h1>
完整示例1（前景/背景色）
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body style="background-color:red;">
<h2 style="background-color:yellow;color:blue">黃底藍(lán)字的標(biāo)題</h2>
<p style="background-color:green;">綠底黑字的段落</p>
</body>
</html>
- 結(jié)果顯示
image.png
完整示例2（對齊）
- 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<h1 style="text-align:center;">居中對齊</h1>
<h1 style="text-align:right;">右對齊</h1>
<h1>左對齊（默認(rèn)）</h1>
</body>
</html>
- 結(jié)果顯示
image.png
3.2 內(nèi)部樣式表
使用說明
- 使用方法
在head中定義CSS表
- 語法示例
<head>
<style type="text/css">
body {
屬性: 值;
}
</style>
</head>
完整示例
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background-color: yellow;
}
p {
color: blue;
}
</style>
<meta charset="utf-8">
<title>蜀</title>
</head>
<body>
<h1 style="text-align:center;">標(biāo)題</h1>
<p>段落內(nèi)容和body是head中style定義的</p>
</body>
</html>
-
結(jié)果顯示
image.png
3.3 外部樣式表
使用說明
指定外部文件定義CSS表
語法示例
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
說明：
- rel 是鏈接的類型，此處說明是 style sheet
- type 是外聯(lián)文件的類型
- href 是外聯(lián)文件的位置
