CSS指層疊樣式表(Cascading
Style Sheets),CSS
是標準的佈局語言,用來控制元素的尺寸、顏色、排版。CSS
由 W3C
發明,用來取代基於表格的佈局、框架以及其他非標準的表現方法。樣式
(style) 定義如何顯示
HTML 元素;樣式通常存儲於樣式表中;外部樣式表存儲於
CSS 文件中。
CSS可以解決html代碼對樣式定義的重複,提高了後期樣式代碼的可維護性,並增強了網頁的顯示效果功能。簡單一句話:CSS將網頁內容和顯示樣式進行分離,提高了顯示功能。
1、CSS基礎部分
層疊次序
當同一個HTML元素被不止一個樣式所定義時,會使用哪個樣式呢?一般而言,所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中,其中數字
4 擁有最高的優先權。
瀏覽器缺省設置
外部樣式表
內部樣式表(位於
<head> 標籤內部)
內聯樣式(在
HTML 元素內部)
CSS基本語法
CSS
規則由兩個主要的部分構成:選擇器,以及一條或多條聲明。
selector {declaration1; declaration2;... declarationN }
選擇器通常是您需要改變樣式的
HTML 元素。每條聲明由一個屬性和一個值組成。屬性(property)是您希望設置的樣式屬性(style
attribute)。每個屬性有一個值。屬性和值被冒號分開。selector
{property: value}
CSS
對大小寫不敏感。不過存在一個例外:如果涉及到與
HTML 文檔一起工作的話,class
和 id
名稱對大小寫是敏感的。有興趣瞭解WEB前端的可以加我這個羣:前面是四八七,中間是四二五,後面是四二九,我們這個每晚都有大神講解,真心有興趣的朋友可以加羣,如果不是真心的請勿打擾
CSS高級語法
選擇器的分組,你可以對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中,我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
1
h1,h2,h3,h4,h5,h6 {
2
color: green;
3
}
CSS派生選擇器
通過依據元素在其位置的上下文關係來定義樣式,你可以使標記更加簡潔。在
CSS1 中,通過這種方式來應用規則的選擇器被稱爲上下文選擇器
(contextual selectors),這是由於它們依賴於上下文關係來應用或者避免某項規則。在
CSS2 中,它們稱爲派生選擇器,但是無論你如何稱呼它們,它們的作用都是相同的。
派生選擇器允許你根據文檔的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器,我們可以使
HTML 代碼變得更加整潔。比方說,你希望列表中的
strong 元素變爲斜體字,而不是通常的粗體字,可以這樣定義一個派生選擇器,它只對li標籤中的strong標籤起作用:
1
li strong {
2
font-style: italic;
3
font-weight: normal;
4
}
CSS
id 選擇器
id
選擇器可以爲標有特定
id 的 HTML
元素指定特定的樣式。id
選擇器以 "#"
來定義。下面的兩個 id
選擇器,第一個可以定義元素的顏色爲紅色,第二個定義元素的顏色爲綠色:
1
#red {color:red;}
2
#green {color:green;}
下面的
HTML 代碼中,id
屬性爲 red
的 p
元素顯示爲紅色,而 id
屬性爲 green
的 p
元素顯示爲綠色。注意:id
屬性只能在每個 HTML
文檔中出現一次。
1
<p id="red">這個段落是紅色。</p>
2
<p id="green">這個段落是綠色。</p>
id
選擇器和派生選擇器
在現代佈局中,id
選擇器常常用於建立派生選擇器。
#sidebar
p {
font-style:
italic;
text-align:
right;
margin-top:
0.5em;
}
一個選擇器,多種用法
即使被標註爲
sidebar 的元素只能在文檔中出現一次,這個
id 選擇器作爲派生選擇器也可以被使用很多次:
//
haha爲form的id
#haha
{
color
: green;
}
#haha
input {
color
: blue;
}
#haha
select {
color
: red;
}
上面的樣式只會應用於id是haha元素內的內容。比如,id爲haha的form內input標籤中字體顏色爲blue,select標籤中字體顏色爲red,其他的顏色爲green。
CSS類選擇器
在
CSS 中,類選擇器以一個點號顯示:
.center {text-align: center}
在上面的例子中,所有擁有
center 類的
HTML 元素均爲居中。在下面的
HTML 代碼中,h1
和 p
元素都有 center
類。這意味着兩者都將遵守
".center" 選擇器中的規則。
1
<h1 class="center">
2
This heading will be center-aligned
3
</h1>
4
5
<p class="center">
6
This paragraph will also becenter-aligned.
7
</p>
注意:類名的第一個字符不能使用數字!它無法在
Mozilla 或
Firefox 中起作用。
我們在使用時是使用類選擇器還是ID選擇器呢?注意,ID選擇器會使用一次,並且僅一次,如果有多個ID項匹配ID選擇器,則只有第一個起作用。不同於類選擇器,ID
選擇器不能結合使用,因爲
ID 屬性不允許有以空格分隔的詞列表。類似於類,可以獨立於元素來選擇
ID。有些情況下,您知道文檔中會出現某個特定
ID 值,但是並不知道它會出現在哪個元素上,所以您想聲明獨立的
ID 選擇器。例如,您可能知道在一個給定的文檔中會有一個
ID 值爲 mostImportant
的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節標題。您只知道每個文檔都會有這麼一個最重要的內容,它可能在任何元素中,而且只能出現一個。在這種情況下,特別適合使用ID選擇器。
CSS屬性選擇器
對帶有指定屬性的
HTML 元素設置樣式。可以爲擁有指定屬性的
HTML 元素設置樣式,而不僅限於
class 和 id
屬性。屬性選擇器在爲不帶有
class 或 id
的表單設置樣式時特別有用:
[attribute]
{
color
: red;
}
以上代碼就會對<p
attribute="">我是一個段落</p>產生作用了。
CSS的創建
如何插入樣式表,當讀到一個樣式表時,瀏覽器會根據它來格式化
HTML 文檔。插入樣式表的方法有三種:外部樣式表、內部樣式表和內斂樣式。
外部樣式表
當樣式需要應用於很多頁面時,外部樣式表將是理想的選擇。在使用外部樣式表的情況下,你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用
<link> 標籤鏈接到樣式表。<link>
標籤在(文檔的)頭部:
1
<head>
2
<link rel="stylesheet"type="text/css" href="mystyle.css" />
3
</head>
瀏覽器會從文件
mystyle.css 中讀到樣式聲明,並根據它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的
html 標籤。樣式表應該以
.css 擴展名進行保存。下面是一個樣式表文件的例子:
1
hr {color: sienna;}
2
p {margin-left: 20px;}
3
body {background-image: none;}
內部樣式表
當單個文檔需要特殊的樣式時,就應該使用內部樣式表。你可以使用
<style> 標籤在文檔頭部定義內部樣式表,就像這樣:
<head>
<style
type="text/css">
hr
{color: sienna;}
p
{margin-left: 20px;}
body
{background-image: none;}
</style>
</head>
內聯樣式
由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式,你需要在相關的標籤內使用樣式(style)屬性。Style
屬性可以包含任何 CSS
屬性。本例展示如何改變段落的顏色和左外邊距:
1
<p style="color: sienna;margin-left: 20px">
2
This is a paragraph
3
</p>
HTML+CSS程序示例
<html>
<head>
<title>HTML和CSS學習</title>
<!--
引用外部文件方式
<link
type="text/css"rel="stylesheet" href="body.css"/>
-->
<!--
直接在head中寫css方式
-->
<style
type="text/css">
/*
id選擇器 */
#haha
{
color
: green;
}
#haha
input {
color
: blue;
}
#haha
select {
color
: red;
}
/*
屬性選擇器 */
[attribute]
{
color
: brown;
}
/*
類選擇器 */
.p_class
{
color
: red;
}
/*
屬性選擇器,只對input中type爲text產生作用
*/
input[type="text"]
{
background-color:yellow;
}
</style>
</head>
<body>
<p>我是一個段落</p>
<p
attribute="">我是一個段落</p>
<!-- 屬性選擇器
-->
<p
class="p_class">我是一個段落</p>
<!-- 類選擇器
-->
<hr
color="blue"/>
<!--
id選擇器 -->
<form
id="haha" action="/example/html/form_action.asp"method="post">
用戶名:
<input type="text"name="username"/> <br/>
密 碼:
<input type="password" name="password"/><br/>
上 傳:
<input type="file" name="upload_file"/><br/>
圖 片:
<input type="image" original="pic.jpg"width="40px" height="20px"/> <br/>
單 選:
<input type="radio" name="sex"checked="checked" value="man"/>男<input
type="radio" name="sex"value="women"/>女
<br/>
多 選:
<input type="checkbox" name="sex2"checked="checked" value="man"/>男<input
type="checkbox" name="sex2"value="women"/>女
<br/>
城 市:
<select name="city">
<option
value="null">--請選擇--</option>
<option
value="beijing">北京</option>
<optionvalue="shanghai">上海</option>
<optionvalue="hangzhou">杭州</option>
</select>
<br/>
留言板:
<textarea>
</textarea>
<br/>
<input
type="submit"value="提交"
/> <inputtype="reset" />
WEB前端學習交流羣21 598399936