Web学习之css
CSS指層疊樣式表(Cascading Style Sheets)，CSS 是標準的布局語言，用來控制元素的尺寸、顏色、排版。CSS 由 W3C 發明，用來取代基于表格的布局、框架以及其他非標準的表現方法。樣式 (style) 定義如何顯示 HTML 元素；樣式通常存儲于樣式表中；外部樣式表存儲于 CSS 文件中。
CSS可以解決html代碼對樣式定義的重復，提高了后期樣式代碼的可維護性，并增強了網頁的顯示效果功能。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提高了顯示功能。1、CSS基礎部分
層疊次序
當同一個HTML元素被不止一個樣式所定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊于一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
CSS基本語法
CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。?selector {declaration1; declaration2; ... declarationN }
選擇器通常是您需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是您希望設置的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。selector {property: value}
CSS 對大小寫不敏感。不過存在一個例外：如果涉及到與 HTML 文檔一起工作的話，class 和 id 名稱對大小寫是敏感的。
CSS高級語法
選擇器的分組，你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的聲明。用逗號將需要分組的選擇器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
1 h1,h2,h3,h4,h5,h6 { 2 color: green; 3 }CSS派生選擇器
通過依據元素在其位置的上下文關系來定義樣式，你可以使標記更加簡潔。在 CSS1 中，通過這種方式來應用規則的選擇器被稱為上下文選擇器 (contextual selectors)，這是由于它們依賴于上下文關系來應用或者避免某項規則。在 CSS2 中，它們稱為派生選擇器，但是無論你如何稱呼它們，它們的作用都是相同的。
派生選擇器允許你根據文檔的上下文關系來確定某個標簽的樣式。通過合理地使用派生選擇器，我們可以使 HTML 代碼變得更加整潔。比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選擇器，它只對li標簽中的strong標簽起作用：
CSS id 選擇器
id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。id 選擇器以 "#" 來定義。下面的兩個 id 選擇器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。注意：id 屬性只能在每個 HTML 文檔中出現一次。
1 <p id="red">這個段落是紅色。</p> 2 <p id="green">這個段落是綠色。</p>id 選擇器和派生選擇器
在現代布局中，id 選擇器常常用于建立派生選擇器。
一個選擇器，多種用法
即使被標注為 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" 選擇器中的規則。
注意：類名的第一個字符不能使用數字！它無法在 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: url("images/back40.gif");}內部樣式表
當單個文檔需要特殊的樣式時，就應該使用內部樣式表。你可以使用 <style> 標簽在文檔頭部定義內部樣式表，就像這樣:
<head> <style type="text/css">hr {color: sienna;}p {margin-left: 20px;}body {background-image: url("images/back40.gif");} </style> </head>內聯樣式
由于要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法，例如當樣式僅需要在一個元素上應用一次時。要使用內聯樣式，你需要在相關的標簽內使用樣式（style）屬性。Style 屬性可以包含任何 CSS 屬性。本例展示如何改變段落的顏色和左外邊距：
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" 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>網頁端顯示效果如下：
?
?
2、CSS樣式
CSS背景
CSS 允許應用純色作為背景，也允許使用背景圖像創建相當復雜的效果。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>最后網頁效果為：
?
CSS文本
CSS 文本屬性可定義文本的外觀。通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。
1 { 2 text-indent: 2em; /* 縮進2個字符 */ 3 text-align: left; /* 左對齊 */ 4 word-spacing: 20px; /* 字符間隔 */ 5 letter-spacing: 5px; /* 字母間隔 */ 6 text-transform: uppercase; /* 文本轉換為大寫字符 */ 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; } /* 鼠標指針移動到鏈接上 */ 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; /* 邊框設置藍色表框 */border-collapse: collapse; /* 是否將表格邊框折疊為單一邊框 */ } table {width: 100%; /* 表格寬度 */height: 100%; }CSS輪廓
輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
{outline: dashed;outline-color: red;outline-style:dotted; }?
3、CSS框模型
CSS 框模型 (Box Model) 規定了元素框處理元素內容、內邊距、邊框 和 外邊距 的方式。
?
元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認是透明的，因此不會遮擋其后的任何元素。
CSS內邊距
h1 {padding: 10px; /* 所有 h1 元素的各邊都有 10 像素的內邊距 */ } h1 {padding: 10px 0.25em 2ex 20%; /* 按照上、右、下、左的順序分別設置各邊的內邊距，具有不同單位*/ } h1 {padding-top: 10px; /* 上下左右分別設置 */padding-right: 0.25em;padding-bottom: 2ex;padding-left: 20%; }CSS邊框
元素的邊框?(border)?是圍繞元素內容和內邊距的一條或多條線。CSS border?屬性允許你規定元素邊框的樣式、寬度和顏色。
h1 {border-style: outset; /* 設置邊框樣式(凸起按鈕效果) */border-width: 10px; /* 邊框寬度 */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?中的位置決定。塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
CSS相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。如果將?top?設置為?20px，那么框將在原位置頂部下面?20?像素的地方。如果?left?設置為?30?像素，那么會在元素左邊創建?30?像素的空間，也就是將元素向右移動。
#box_relative {position: relative;left: 30px;top: 20px; }CSS絕對定位
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {position: absolute;left: 30px;top: 20px; }?
5、CSS高級特性
CSS水平排列
.line {display: inline; /* 當塊級元素類為line時，這些塊就會水平排列顯示 */ }CSS尺寸
img.normal {height: normal; /* 設置圖片正常顯示 */ } img.small {height: 100px; /* 圖片小圖顯示 */ }CSS導航條
/* 導航條格式 */ .navigation {margin: 0;padding: 0; } .navigation li {display: inline; } <p>以下是導航條內容</p> <ul class="navigation"><li><a href="#">計算機</a></li><li><a href="#">經濟</a></li><li><a href="#">歷史</a></li> </ul>網頁顯示效果如下：
?
?
參考
1、CSS 教程
2、Web學習之html
轉載于:https://www.cnblogs.com/luoxn28/p/5352768.html
總結
- 上一篇： Linux 中的零拷贝技术
- 下一篇： 如何实现在O(n)时间内排序，并且空间复