Web学习之css
CSS指層疊樣式表(Cascading Style Sheets)，CSS 是標(biāo)準的布局語言，用來控制元素的尺寸、顏色、排版。CSS 由 W3C 發(fā)明，用來取代基于表格的布局、框架以及其他非標(biāo)準的表現(xiàn)方法。樣式 (style) 定義如何顯示 HTML 元素；樣式通常存儲于樣式表中；外部樣式表存儲于 CSS 文件中。
CSS可以解決html代碼對樣式定義的重復(fù)，提高了后期樣式代碼的可維護性，并增強了網(wǎng)頁的顯示效果功能。簡單一句話：CSS將網(wǎng)頁內(nèi)容和顯示樣式進行分離，提高了顯示功能。1、CSS基礎(chǔ)部分
層疊次序
當(dāng)同一個HTML元素被不止一個樣式所定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據(jù)下面的規(guī)則層疊于一個新的虛擬樣式表中，其中數(shù)字 4 擁有最高的優(yōu)先權(quán)。
CSS基本語法
CSS 規(guī)則由兩個主要的部分構(gòu)成：選擇器，以及一條或多條聲明。?selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是您希望設(shè)置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。selector {property: value}
CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
CSS高級語法
選擇器的分組，你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標(biāo)題元素進行了分組。所有的標(biāo)題元素都是綠色的。
1 h1,h2,h3,h4,h5,h6 { 2 color: green; 3 }CSS派生選擇器
通過依據(jù)元素在其位置的上下文關(guān)系來定義樣式，你可以使標(biāo)記更加簡潔。在 CSS1 中，通過這種方式來應(yīng)用規(guī)則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由于它們依賴于上下文關(guān)系來應(yīng)用或者避免某項規(guī)則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選擇器允許你根據(jù)文檔的上下文關(guān)系來確定某個標(biāo)簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。比方說，你希望列表中的 strong 元素變?yōu)樾斌w字，而不是通常的粗體字，可以這樣定義一個派生選擇器，它只對li標(biāo)簽中的strong標(biāo)簽起作用：
CSS id 選擇器
id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。注意：id 屬性只能在每個 HTML 文檔中出現(xiàn)一次。
1 <p id="red">這個段落是紅色。</p> 2 <p id="green">這個段落是綠色。</p>id 選擇器和派生選擇器
在現(xiàn)代布局中，id 選擇器常常用于建立派生選擇器。
一個選擇器，多種用法
即使被標(biāo)注為 sidebar 的元素只能在文檔中出現(xiàn)一次，這個 id 選擇器作為派生選擇器也可以被使用很多次：
// haha為form的id #haha {color : green; } #haha input {color : blue; } #haha select {color : red; }上面的樣式只會應(yīng)用于id是haha元素內(nèi)的內(nèi)容。比如，id為haha的form內(nèi)input標(biāo)簽中字體顏色為blue，select標(biāo)簽中字體顏色為red，其他的顏色為green。
CSS類選擇器
在 CSS 中，類選擇器以一個點號顯示：?.center {text-align: center}
在上面的例子中，所有擁有 center 類的 HTML 元素均為居中。在下面的 HTML 代碼中，h1 和 p 元素都有 center 類。這意味著兩者都將遵守 ".center" 選擇器中的規(guī)則。
注意：類名的第一個字符不能使用數(shù)字！它無法在 Mozilla 或 Firefox 中起作用。
我們在使用時是使用類選擇器還是ID選擇器呢？注意，ID選擇器會使用一次，并且僅一次，如果有多個ID項匹配ID選擇器，則只有第一個起作用。不同于類選擇器，ID 選擇器不能結(jié)合使用，因為 ID 屬性不允許有以空格分隔的詞列表。類似于類，可以獨立于元素來選擇 ID。有些情況下，您知道文檔中會出現(xiàn)某個特定 ID 值，但是并不知道它會出現(xiàn)在哪個元素上，所以您想聲明獨立的 ID 選擇器。例如，您可能知道在一個給定的文檔中會有一個 ID 值為 mostImportant 的元素。您不知道這個最重要的東西是一個段落、一個短語、一個列表項還是一個小節(jié)標(biāo)題。您只知道每個文檔都會有這么一個最重要的內(nèi)容，它可能在任何元素中，而且只能出現(xiàn)一個。在這種情況下，特別適合使用ID選擇器。
CSS屬性選擇器
對帶有指定屬性的 HTML 元素設(shè)置樣式。可以為擁有指定屬性的 HTML 元素設(shè)置樣式，而不僅限于 class 和 id 屬性。屬性選擇器在為不帶有 class 或 id 的表單設(shè)置樣式時特別有用：
[attribute] {color : red; }以上代碼就會對<p attribute="">我是一個段落</p>產(chǎn)生作用了。
CSS的創(chuàng)建
如何插入樣式表，當(dāng)讀到一個樣式表時，瀏覽器會根據(jù)它來格式化 HTML 文檔。插入樣式表的方法有三種：外部樣式表、內(nèi)部樣式表和內(nèi)斂樣式。
外部樣式表
當(dāng)樣式需要應(yīng)用于很多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以通過改變一個文件來改變整個站點的外觀。每個頁面使用 <link> 標(biāo)簽鏈接到樣式表。<link> 標(biāo)簽在（文檔的）頭部：
1 <head> 2 <link rel="stylesheet" type="text/css" href="mystyle.css" /> 3 </head>瀏覽器會從文件 mystyle.css 中讀到樣式聲明，并根據(jù)它來格式文檔。外部樣式表可以在任何文本編輯器中進行編輯。文件不能包含任何的 html 標(biāo)簽。樣式表應(yīng)該以 .css 擴展名進行保存。下面是一個樣式表文件的例子：
1 hr {color: sienna;} 2 p {margin-left: 20px;} 3 body {background-image: url("images/back40.gif");}內(nèi)部樣式表
當(dāng)單個文檔需要特殊的樣式時，就應(yīng)該使用內(nèi)部樣式表。你可以使用 <style> 標(biāo)簽在文檔頭部定義內(nèi)部樣式表，就像這樣:
<head> <style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");} </style> </head>內(nèi)聯(lián)樣式
由于要將表現(xiàn)和內(nèi)容混雜在一起，內(nèi)聯(lián)樣式會損失掉樣式表的許多優(yōu)勢。請慎用這種方法，例如當(dāng)樣式僅需要在一個元素上應(yīng)用一次時。要使用內(nèi)聯(lián)樣式，你需要在相關(guān)的標(biāo)簽內(nèi)使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
HTML+CSS程序示例
<html> <head><title>HTML和CSS學(xué)習(xí)</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產(chǎn)生作用 */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" src="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><option value="shanghai">上海</option><option value="hangzhou">杭州</option></select> <br/>留言板: <textarea></textarea> <br/><input type="submit" value="提交" /> <input type="reset" /></form><hr color="red"/><form>用戶名: <input type="text" name="username" value="123"/> <br/>密 碼: <input type="password" name="password"/> <br/></form></body> </html>網(wǎng)頁端顯示效果如下：
?
?
2、CSS樣式
CSS背景
CSS 允許應(yīng)用純色作為背景，也允許使用背景圖像創(chuàng)建相當(dāng)復(fù)雜的效果。CSS 在這方面的能力遠遠在 HTML 之上。
p.bg {background-image: url(img/bg_1.jpg);padding: 20px;background-repeat: repeat-y;background-position: center;text-align: center; } <p class="bg">我是一個有背景的段落</p>最后網(wǎng)頁效果為：
?
CSS文本
CSS 文本屬性可定義文本的外觀。通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
1 { 2 text-indent: 2em; /* 縮進2個字符 */ 3 text-align: left; /* 左對齊 */ 4 word-spacing: 20px; /* 字符間隔 */ 5 letter-spacing: 5px; /* 字母間隔 */ 6 text-transform: uppercase; /* 文本轉(zhuǎn)換為大寫字符 */ 7 text-decoration: underline; /* 文本下劃線處理 */ 8 }CSS字體
{font-family: serif; /* 選擇字體 */font-style: normal; /* 文本格式 粗體/斜體 */font-size: 20px; /* 文本大小 */ }CSS鏈接
a:link { color: blue; } /* 未被訪問的鏈接 */ a:visited { color: red; } /* 已被訪問的鏈接 */ a:hover { color: yellow; } /* 鼠標(biāo)指針移動到鏈接上 */ a:active { color: black; } /* 正在被點擊的鏈接 */CSS列表
ul.disc {list-style-type: disc} ul.circle {list-style-type: circle} ul.square {list-style-type: square} ul.none {list-style-type: none}CSS表格
table, th, td {border: 1px solid blue; /* 邊框設(shè)置藍色表框 */border-collapse: collapse; /* 是否將表格邊框折疊為單一邊框 */ } table {width: 100%; /* 表格寬度 */height: 100%; }CSS輪廓
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。CSS outline 屬性規(guī)定元素輪廓的樣式、顏色和寬度。
{outline: dashed;outline-color: red;outline-style:dotted; }?
3、CSS框模型
CSS 框模型 (Box Model) 規(guī)定了元素框處理元素內(nèi)容、內(nèi)邊距、邊框 和 外邊距 的方式。
?
元素框的最內(nèi)部分是實際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。
CSS內(nèi)邊距
h1 {padding: 10px; /* 所有 h1 元素的各邊都有 10 像素的內(nèi)邊距 */ } h1 {padding: 10px 0.25em 2ex 20%; /* 按照上、右、下、左的順序分別設(shè)置各邊的內(nèi)邊距，具有不同單位*/ } h1 {padding-top: 10px; /* 上下左右分別設(shè)置 */padding-right: 0.25em;padding-bottom: 2ex;padding-left: 20%; }CSS邊框
元素的邊框?(border)?是圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線。CSS border?屬性允許你規(guī)定元素邊框的樣式、寬度和顏色。
h1 {border-style: outset; /* 設(shè)置邊框樣式(凸起按鈕效果) */border-width: 10px; /* 邊框?qū)挾?*/border-color: red; /* 邊框顏色 */ }CSS外邊框
h1 {margin: 10px; /* 四邊外邊距屬性 */margin: 20px 30px 30px 20px; /* 四邊外邊距屬性 */margin-top: 20px; /* 單邊外邊距屬性 */margin-right: 30px;margin-bottom: 30px;margin-left: 20px; }?
4、CSS定位
CSS?有三種基本的定位機制：普通流、浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在?(X)HTML?中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內(nèi)框在一行中水平布置。可以使用水平內(nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設(shè)置行高可以增加這個框的高度。
CSS相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現(xiàn)在它所在的位置上。然后，可以通過設(shè)置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。如果將?top?設(shè)置為?20px，那么框?qū)⒃谠恢庙敳肯旅?20?像素的地方。如果?left?設(shè)置為?30?像素，那么會在元素左邊創(chuàng)建?30?像素的空間，也就是將元素向右移動。
#box_relative {position: relative;left: 30px;top: 20px; }CSS絕對定位
絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {position: absolute;left: 30px;top: 20px; }?
5、CSS高級特性
CSS水平排列
.line {display: inline; /* 當(dāng)塊級元素類為line時，這些塊就會水平排列顯示 */ }CSS尺寸
img.normal {height: normal; /* 設(shè)置圖片正常顯示 */ } img.small {height: 100px; /* 圖片小圖顯示 */ }CSS導(dǎo)航條
/* 導(dǎo)航條格式 */ .navigation {margin: 0;padding: 0; } .navigation li {display: inline; } <p>以下是導(dǎo)航條內(nèi)容</p> <ul class="navigation"><li><a href="#">計算機</a></li><li><a href="#">經(jīng)濟</a></li><li><a href="#">歷史</a></li> </ul>網(wǎng)頁顯示效果如下：
?
?
參考
1、CSS 教程
2、Web學(xué)習(xí)之html
轉(zhuǎn)載于:https://www.cnblogs.com/luoxn28/p/5352768.html
總結(jié)
- 上一篇： Linux 中的零拷贝技术
- 下一篇： Linux系统编程7：入门篇之Linux