1 引言
- CSS指層疊樣式表（Cascading Style Sheets），樣式定義了如何顯示HTML元素负甸，而樣式通常存儲(chǔ)在外部樣式表中，而外部樣式表通常存儲(chǔ)在CSS文件中荞胡。
- 因此我們要學(xué)習(xí)的就很顯然了茫经，首先是CSS的基礎(chǔ)內(nèi)容个扰，其次如何將其保存為外部樣式表瓷炮，最后在HTML代碼中引用。
2 CSS基礎(chǔ)內(nèi)容
2.1 CSS規(guī)則
- CSS 規(guī)則由兩個(gè)主要的部分構(gòu)成：選擇器递宅，以及一條或多條聲明:
image.png
選擇器通常是您需要改變樣式的 HTML 元素娘香。例如p或者h1，或者使用相應(yīng)的ID選擇器或者類選擇器办龄。
例子：
p
{
text-align:center;
/*這是另一個(gè)注釋*/
color:black;
font-family:arial;
}
2.2 ID選擇器與類選擇器
- ID選擇器
當(dāng)使用上面的p進(jìn)行改變樣式時(shí)烘绽，會(huì)影響整個(gè)HTML頁(yè)面的p元素。但如果只想改變某一個(gè)元素時(shí)俐填，應(yīng)當(dāng)使用ID選擇器安接。
用法：ID選擇器以關(guān)鍵字 # 作為標(biāo)識(shí)；
下面的例子將作用于id = 'jacob'
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#jacob
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="jacob">Hello World!!!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
另需要注意的是英融，<style></style>標(biāo)簽放在head標(biāo)簽中盏檐。
- Class選擇器
用于描述某一類元素的樣式，與ID選擇器的區(qū)別在于其可以選擇某一組元素驶悟。
用法：以關(guān)鍵字 . 作為標(biāo)識(shí)胡野；
<html>
<head>
<meta charset="utf-8">
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">標(biāo)題居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
此外痕鳍，還可以指定特定元素的類選擇器硫豆。
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>
2.3 樣式表
插入樣式表的三種方式
-
外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁(yè)面時(shí)，外部樣式表將是理想的選擇额获。在使用外部樣式表的情況下够庙，你可以通過改變一個(gè)文件來改變整個(gè)站點(diǎn)的外觀恭应。每個(gè)頁(yè)面使用 標(biāo)簽鏈接到樣式表抄邀。 標(biāo)簽在（文檔的）頭部
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
瀏覽器會(huì)從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔昼榛。
下面是一個(gè)樣式表文件的例子：
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(/images/back40.gif);}
- 內(nèi)部樣式表
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)境肾，就應(yīng)該使用內(nèi)部樣式表剔难。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
- 內(nèi)聯(lián)樣式
<p style="color:sienna;margin-left:20px">這是一個(gè)段落奥喻。</p>
- 此外需要注意的是：
如果外部樣式表偶宫、內(nèi)部樣式表同時(shí)對(duì)某個(gè)元素進(jìn)行了樣式定義，那么需要注意這里有一個(gè)繼承與覆蓋的過程环鲤。
一個(gè)例子如下：
外部樣式表：
h3
{
color:red;
text-align:left;
font-size:8pt;
}
內(nèi)部樣式表：
h3
{
text-align:right;
font-size:20pt;
}
那么得到的結(jié)果是：
color:red; text-align:right;
font-size:20pt;
需要注意的是：
!important 關(guān)鍵字會(huì)覆蓋所有纯趋，就比如在外部樣式表中使用!important，其不會(huì)被內(nèi)部樣式表與內(nèi)聯(lián)樣式覆蓋冷离。
權(quán)重計(jì)算方式：
image.png
一個(gè)簡(jiǎn)單的例子如下：
<html>
<head>
<style type="text/css">
#redP p {
/* 權(quán)值 = 100+1=101 */
color:#F00; /* 紅色 */
}
#redP .red em {
/* 權(quán)值 = 100+10+1=111 */
color:#00F; /* 藍(lán)色 */
}
#redP p span em {
/* 權(quán)值 = 100+1+1+1=103 */
color:#FF0;/*黃色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>
根據(jù)權(quán)重的計(jì)算結(jié)果吵冒，em顯示為藍(lán)色。
2.4 背景
CSS 屬性定義背景效果：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
- background-color 屬性定義了元素的背景顏色西剥。
<style>
body
{
background-color:#b0c4de;
}
</style>
整個(gè)頁(yè)面的顏色會(huì)變成藍(lán)色痹栖。
<style>
h1
{
background-color:#6495ed;
}
p
{
background-color:#e0ffff;
}
div
{
background-color:#b0c4de;
}
</style>
對(duì)應(yīng)的元素背景改變。
- background-image 屬性描述了元素的背景圖像.
<style>
body
{
background-image:url('https://7n.w3cschool.cn/attachments/knowledge/201611/31824.png');
background-color:#cccccc;
}
</style>
該方法會(huì)使得背景圖片在整個(gè)元素內(nèi)平鋪瞭空，若想改變平鋪方式則可以利用以下幾個(gè)方法揪阿。
body
{
background-image:url('gradient2.png');
//僅在x方向平鋪
background-repeat:repeat-x;
}
body
{
background-image:url('img_tree.png');
//不平鋪
background-repeat:no-repeat;
}
可以利用 background-position 屬性改變圖像在背景中的位置:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
//水平66%處，吹制33%處
background-position:66% 33%;
}
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
//相對(duì)于左上角的偏移量咆畏。
background-position:50px 100px;
}
2.5 文本
- Text Color
<style>
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
</style>
- 文本的對(duì)齊方式
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
h1{text-align:center}
p.date{text-align:right}
p.main{text-align:justify}
</style>
</head>
<body>
<h1>CSS text-align 實(shí)例</h1>
<p class="date">2015 年 3 月 14 號(hào)</p>
<p class="main">“當(dāng)我年輕的時(shí)候南捂，我夢(mèng)想改變這個(gè)世界;當(dāng)我成熟以后，我發(fā)現(xiàn)我不能夠改變這個(gè)世界旧找，我將目光縮短了些黑毅，決定只改變我的國(guó)家;當(dāng)我進(jìn)入暮年以后，我發(fā)現(xiàn)我不能夠改變我們的國(guó)家钦讳，我的最后愿望僅僅是改變一下我的家庭矿瘦，但是，這也不可能愿卒。當(dāng)我現(xiàn)在躺在床上缚去，行將就木時(shí)，我突然意識(shí)到：如果一開始我僅僅去改變我自己琼开，然后易结，我可能改變我的家庭;在家人的幫助和鼓勵(lì)下，我可能為國(guó)家做一些事情;然后柜候，誰(shuí)知道呢?我甚至可能改變這個(gè)世界搞动。”</p>
<p><b>注意：</b> 重置瀏覽器窗口大小查看 "justify" 是如何工作的渣刷。</p>
</body>
</html>
image.png
當(dāng)text-align設(shè)置為"justify"鹦肿，每一行被展開為寬度相等，左辅柴，右外邊距是對(duì)齊（如雜志和報(bào)紙）箩溃。
- 文本修飾
<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
文本修飾
- 文本轉(zhuǎn)換
<style>
//轉(zhuǎn)換為大寫
p.uppercase {text-transform:uppercase;}
//轉(zhuǎn)換為小寫
p.lowercase {text-transform:lowercase;}
//首字母大寫
p.capitalize {text-transform:capitalize;}
</style>
- 文本縮進(jìn)
p {text-indent:50px;}
- 文本間隔
改變字之間的間隔距離
p
{
word-spacing:30px;
}
