前端-html、css

時間  2019-11-20
標籤 前端 html css 欄目 HTML 简体版
原文   原文鏈接

HTML

1、html簡介javascript

超級文本標記語言是標準通用標記語言下的一個應用，也是一種規範，一種標準，
它經過標記符號來標記要顯示的網頁中的各個部分。網頁文件自己是一種文本文件，經過在文本文件中添加標記符，能夠告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。瀏覽器按順序閱讀網頁文件，而後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不中止其解釋執行過程，編制者只能經過顯示效果來分析出錯緣由和出錯部位。但須要注意的是，對於不一樣的瀏覽器，對同一標記符可能會有不徹底相同的解釋，於是可能會有不一樣的顯示效果css

主要特色以下：
html

1.簡易性：超級文本標記語言版本升級採用超集方式，從而更加靈活方便。2.可擴展性：超級文本標記語言的普遍應用帶來了增強功能，增長標識符等要求，超級文本標記語言採起子類元素的方式，爲系統擴展帶來保證。3.平臺無關性：雖然我的計算機大行其道，但使用MAC等其餘機器的大有人在，超級文本標記語言可使用在普遍的平臺上，這也是萬維網（WWW）盛行的另外一個緣由。通用性：另外，HTML是網絡的通用語言,一種簡單、通用的全置標記語言。它容許網頁製做人創建文本與圖片相結合的複雜頁面，這些頁面能夠被網上任何其餘人瀏覽到，不管使用的是什麼類型的電腦或瀏覽器。

基本組成：java

1
2
3
4
5
6
7
<!DOCTYPE html>
< html >
     < head >
     </ head >
     < body >
     </ body >
</ html > 

<head>和</head>之間的內容，是元信息和網站的標題 元信息通常是不顯示出來的,可是記錄了你這個HTML文件的不少有用的信息<body>和</body>之間的內容，是瀏覽器呈現出來的，用戶看到的頁面效果。也就是說這裏是網頁的主體。也就是body的身體之意<html></html>是說明這個是一個網頁。告訴瀏覽器這個網頁的開始和結束。他包含了以後的兩個元素。<head>和</head>|<body>和</body>

2、html文檔類型
DOCTYPE 標籤 – 定義了標準文檔的類型python

DOCTYPE標籤是單獨出現的說明：    文檔類型，會使瀏覽器使用相應標準加載網頁並顯示    文檔類型定義在HTML文檔的第一行，在html標籤以前    文檔不定義DOCTYPE，瀏覽器將沒法獲知HTML或XHTML文檔的類型，所以會進入混亂模式，詳見：瀏覽器模式引用網址：http://www.dreamdu.com/xhtml/tag_doctype/DOCTYPE，簡稱爲DTDs，是英文Document type的縮寫，中文「文檔類型」

1.BackCompat：標準兼容模式未開啓（或叫怪異模式[Quirks mode]、混雜模式）瀏覽器

2.CSS1Compat：標準兼容模式已開啓（或叫嚴格模式[Standards mode/Strict mode]）
這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,這也就是惡魔的開始 – 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。若是你的頁面添加了那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。網絡


HTML DOCTYPE文檔類型舉例說明框架

HTML4.01文檔過渡定義類型ssh

此類型定義的文檔可使用HTML中的標籤與元素包括一些不被W3C推薦的標籤（例如：font、b等），
不可使用框架佈局

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01文檔嚴格定義類型

此類型等同於HTML4.01文檔過渡定義類型，但可使用框架

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0文檔過渡定義類型
此類型定義的文檔可使用HTML中的標籤與元素包括一些不被W3C推薦的標籤（例如：font、b等），
不可使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0文檔嚴格定義類型

此類型定義的文檔只可使用HTML中定義的標籤與元素，不能包含不被W3C推薦的標籤（例如：font、b）(夢之都就使用了此類型)，不可使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0文檔框架定義類型

等同於XHTML1.0文檔過渡定義類型，但可使用框架

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.1文檔嚴格定義類型

等同於XHTML1.0文檔過渡定義類型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5文檔類型

<!DOCTYPE html>

提示: HTML聲明中使用的標籤是很特殊的(不一樣於標籤語法),使用<!開始,結束也不用關閉符.

3、html-head

1
< head ></ head >

這2個標記符分別表示頭部信息的開始和結尾。頭部中包含的標記是頁面的標題、序言、說明等內容，它自己不做爲內容來顯示，但影響網頁顯示的效果。頭部中最經常使用的標記符是標題標記符和meta標記符，其中標題標記符用於定義網頁的標題，它的內容顯示在網頁窗口的標題欄中，網頁標題可被瀏覽器用做書籤和收藏清單。
設置文檔標題和其它在網頁中不顯示的信息，好比direction方向、語言代碼Language Code（實體定義!ENTITY % i18n）、指定字典中的元信息、等等。

1
Meta(metadata information)

定義了一個文檔和外部資源之間的關係

提供有關頁面的元信息，例：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞

頁面編碼（告訴瀏覽器是什麼編碼）

1
< meta http-equiv=「content-type」 content=「text/html; charset = utf -8」>

刷新和跳轉

1
2
3
4
5
< meta http-equiv=「Refresh」 Content=「30″>
#30秒刷新
 
< meta http-equiv=」Refresh「 Content=」5; Url = http ://www.baidu.com"/>
#5秒以後跳轉到百度

關鍵詞

1
< meta name = "keywords" content = "星際2,星際老男孩,，妹子" >

定義了文檔的信息

1
< title >

定義了頁面連接標籤的默認連接地址

1
2
3
4
5
6
7
< link >
 
css
< link rel = "stylesheet" type = "text/css" href = "css/common.css" >
 
icon
< link rel = "shortcut icon" href = "image/favicon.ico" >

X-UA-Compatible
微軟的IE6是經過XP、Win2003等操做系統發佈出來，做爲佔統治地位的桌面操做系統，也使得IE佔據了通知地位，許多的網站開發的時候，就按照IE6的標準去開發，而IE6自身的標準也是微軟公司內部定義的。到了IE7出來的時候，採用了微軟公司內部標準以及部分W3C的標準，這個時候許多網站升級到IE7的時候，就比較痛苦，不少代碼必須調整後，纔可以正常的運行。而到了微軟的IE8這個版本，基本上把微軟內部本身定義的標準拋棄了，而全面的支持W3C的標準，因爲基於對標準完全的變化了，使得原先在早期IE8版本上可以訪問的網站，在IE8中沒法正常的訪問，會出現一些排版錯亂、文字重疊，顯示不全等各類兼容性錯誤。

與任何早期瀏覽器版本相比，Internet Explorer 8 對行業標準提供了更加緊密的支持。 所以，針對舊版本的瀏覽器設計的站點可能不會按預期顯示。 爲了幫助減輕任何問題，Internet Explorer 8 引入了文檔兼容性的概念，從而容許您指定站點所支持的 Internet Explorer 版本。 文檔兼容性在 Internet Explorer 8 中添加了新的模式；這些模式將告訴瀏覽器如何解釋和呈現網站。 若是您的站點在 Internet Explorer 8 中沒法正確顯示，則能夠更新該站點以支持最新的 Web 標準（首選方式），也能夠強制 Internet Explorer 8 按照在舊版本的瀏覽器中查看站點的方式來顯示內容。 經過使用 meta 元素將 X-UA-Compatible 標頭添加到網頁中，能夠實現這一點。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 指令來肯定如何顯示該網頁。 若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式（Quirks 模式）顯示該網頁。更多

1
< meta http-equiv = "X-UA-Compatible" content = "IE=EmulateIE7" />

Style

在頁面中寫樣式

例如：

1
2
3
4
5
< style type = "text/css" >
     .bb{
       background-color: red;
    }
</ style >

Script

1
2
3
4
5
6
引進文件
< script type = "text/javascript" src = "http://www.googletagservices.com/tag/js/gpt.js" >
</ script >
 
寫js代碼
< script type = "text/javascript" > ... </ script >

4、body

標籤通常分爲兩種：

行內標籤：a、span、select 等

以下：

內容

塊級標籤：div、h一、p 等

以下：

內容

1.標題(h標籤)

標題（Heading）是經過<h1> - <h6>等標籤進行定義的。

<h1> 定義最大的標題。<h6> 定義最小的標題。

1
2
3
4
5
6
< h1 >h1標題</ h1 >
< h2 >h2標題</ h2 >
< h3 >h3標題</ h3 >
< h4 >h4標題</ h4 >
< h5 >h5標題</ h5 >
< h6 >h6標題</ h6 >

2.段落(p標籤)

（<p> 是塊級元素）
<br/>標籤：換行標籤

代碼：

1
2
3
4
5
6
7
8
9
10
< html >
< body >
< p >這是段落。</ p >
< p >這是段落。</ p >
< p >這是< br />段落。</ p >
 
< p >段落元素由 p 標籤訂義。</ p >
 
</ body >
</ html >

3.超連接（a標籤）

HTML 使用超級連接與網絡上的另外一個文檔相連。

幾乎能夠在全部的網頁中找到連接。點擊連接能夠從一張頁面跳轉到另外一張頁面。
使用 <a> 標籤在 HTML 中建立連接。

1
< a href = "http://www.baidu.com" >百度</ a >

提示：」連接文本」 沒必要必定是文本。圖片或其餘 HTML 元素均可以成爲連接。

target 屬性

使用 Target 屬性，你能夠定義被連接的文檔在何處顯示。

target屬性中的_blank會在新窗口打開頁面

name 屬性

name 屬性規定錨（anchor）的名稱。

當使用命名錨（named anchors）時，咱們能夠建立直接跳至該命名錨（好比頁面中某個小節）的連接，這樣使用者就無需不停地滾動頁面來尋找他們須要的信息了。

代碼：

1
2
3
4
5
6
<!--<a href="#a2"> 上面的代碼href="#要跳轉的標籤"-->
< a href = "#t1" >第一頁</ a >
< a href = "#t2" >第二頁</ a >
< p id = 't1' style = "height:1001px;background-color: aqua;" >我是第一頁</ p >
< p id = 't2' style = "height:1010px;background-color: red;" >我是第二頁</ p >
<!--在標籤裏，ID是這個標籤的惟一的值，咱們在作錨的時候指定他的ID便可-->

4.圖像標籤（img）

在 HTML 中，圖像由標籤訂義。
是空標籤，意思是說，它只包含屬性，而且沒有閉合標籤。
要在頁面上顯示圖像，你須要使用源屬性（src）。src 指 「source」。
源屬性的值是圖像的 URL 地址。
定義圖像的語法是：

1
< img src = "url" />

5.表格標籤

表格由 <table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義,每行被分割爲若干單元格
（由 <td> 標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。
數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等。
代碼以下：

1
2
3
4
5
6
7
8
9
10
< table border = "1" >
     < tr >
         < td >row 1, cell 1</ td >
         < td >row 1, cell 2</ td >
     </ tr >
     < tr >
         < td >row 2, cell 1</ td >
         < td >row 2, cell 2</ td >
     </ tr >
</ table >

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

表格的表頭

表格的表頭使用 <th> 標籤進行定義。

大多數瀏覽器會把表頭顯示爲粗體居中的文本：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< table border = "1" >
     <!--border這裏是加上邊框-->
     < tr >
         < th >標題</ th >
         < th >標題二</ th >
     </ tr >
     < tr >
     <!--一個tr是1行，一個td是一列，一行裏可能有不少列。-->
     <!--若是想加多個行就加多個tr便可-->
         < td >row 1, cell 1</ td >
         < td >row 1, cell 2</ td >
     </ tr >
     < tr >
         < td >row 2, cell 1</ td >
         < td >row 2, cell 2</ td >
     </ tr >
</ table >

標題 標題二
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

合併單元格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< table border = "1" >
<!--border這裏是加上邊框-->
< tr >
     < td colspan = "3" >1</ td >
     <!--這裏colspan，就告訴html解析的時候佔3個格-->
</ tr >
<!--一個tr是1行，一個td是一列，一行裏可能有不少列。-->
<!--若是想加多個行就加多個tr便可-->
< tr >
     < td rowspan = "2" >1</ td >
     < td >2</ td >
     < td >3</ td >
</ tr >
     < tr >
     < td >2</ td >
     < td >3</ td >
</ tr >
</ table >

1

1 2 3

2 3

6.列表標籤

無序列表

無序列表是一個項目的列表，此列項目使用粗體圓點（典型的小黑圓圈）進行標記。

無序列表始於 <ul> 標籤。每一個列表項始於 <li>。

代碼以下：

1
2
3
4
5
6
< ul >
< li >列表1</ li >
< li >列表2</ li >
< li >列表3</ li >
< li >列表4</ li >
</ ul >

  • 有序列表

    一樣，有序列表也是一列項目，列表項目使用數字進行標記。

    有序列表始於 <ol> 標籤。每一個列表項始於 <li> 標籤。

    代碼：

    1
    2
    3
    4
    < ol >
         < li >第一行</ li >
         < li >第二行</ li >   
    </ ol >

    1. 第一行


    2. 第二行

    定義列表

    自定義列表不只僅是一列項目，而是項目及其註釋的組合。

    自定義列表以 <dl> 標籤開始。每一個自定義列表項以 <dt> 開始。每一個自定義列表項的定義以 <dd> 開始。

    代碼：

    1
    2
    3
    4
    5
    6
    < dl >
    < dt >第一行</ dt >
    < dd >第二行</ dd >
    < dt >第三行</ dt >
    < dd >第四行</ dd >
    </ dl >
    第一行

    第二行

    第三行

    第四行

  • 7.塊元素

    HTML 塊元素
    大多數 HTML 元素被定義爲塊級元素或內聯元素。
    編者注：「塊級元素」譯爲 block level element，「內聯元素」譯爲 inline element。
    塊級元素在瀏覽器顯示時，一般會以新行來開始（和結束）。
    例子：<h1>, <p>, <ul>, <table>
    HTML 內聯元素
    內聯元素在顯示時一般不會以新行開始。
    例子：<b>, <td>, <a>, <img>
    HTML <div> 元素
    HTML <div> 元素是塊級元素，它是可用於組合其餘 HTML 元素的容器。
    <div> 元素沒有特定的含義。除此以外，因爲它屬於塊級元素，瀏覽器會在其先後顯示折行。
    若是與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。
    <div> 元素的另外一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元
    素進行文檔佈局不是表格的正確用法。<table> 元素的做用是顯示錶格化的數據。
    HTML <span> 元素
    HTML <span> 元素是內聯元素，可用做文本的容器。
    <span> 元素也沒有特定的含義。
    當與 CSS 一同使用時，<span> 元素可用於爲部分文本設置樣式屬性。

    8.表單

    表單是一個包含表單元素的區域。

    表單元素是容許用戶在表單中（好比：文本域、下拉列表、單選框、複選框等等）輸入信息的元素。

    表單使用表單標籤（<form>）定義。

    1
    2
    3
    4
    5
    < form >   
    ...
       input 元素
    ...
    </ form >

    多數狀況下被用到的表單標籤是輸入標籤（<input>）。輸入類型是由類型屬性（type）定義的。

    文本域（type=」text」）

    當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域。

    代碼：

    1
    2
    3
    4
    5
    < form >
    用戶名:
    < input type = "text" name = "firstname" />
    <!--密碼的輸入框（輸入的內容是保密的）-->
    < input type = "password" />

  • 當用戶從若干給定的的選擇中選取其一時，就會用到單選框。

    代碼：

    1
    2
    3
    4
    5
    6
    < form >
         <!--對於input標籤來講只要，radio的name值相同，那麼他們就會互斥-->
         < input type = "radio" name = "sex" value = "male" />男
         < br />
         < input type = "radio" name = "sex" value = "female" />女
    </ form >

  • 注：當name相同的時候爲只能單選不能多選。

    複選框（type=」checkbox」

    當用戶須要從若干給定的選擇中選取一個或若干選項時，就會用到複選框。

  • 表單的動做屬性（Action）和確認按鈕

    當用戶單擊確認按鈕時，表單的內容會被傳送到另外一個文件。表單的動做屬性定義了目的文件的文件名。
    由動做屬性定義的這個文件一般會對接收到的輸入數據進行相關的處理。
    代碼：

    1
    2
    3
    4
    5
    6
    < form name = "input" action = "html_form_action.asp" method = "get" >
    用戶名:
    < input type = "text" name = "user" />
    < input type = "button" value = "button" />
    < input type = "submit" value = "submit" />
    </ form >

  • 提交文件file標籤

    代碼：

    1
    < input type = "file" />

  • 多行文本框

    代碼：

    1
    < textarea style = "height: 100px;width: 100px;" ></ textarea >

  • 案例：

    通常的用戶註冊：

    1
    2
    3
    4
    5
    6
    7
    < form >
         < p >用戶名:< input type = "text" /></ p >
         < p >密碼:< input type = "password" /></ p >
         < input type = "submit" value = "提交" />
         <!--這裏按提交纔有反映，submit是用來提交當前的表單的，固然能夠有多個表單-->
         <!--可是，這個submit須要寫入表單內，那麼提交的時候是提交的當前表單-->
    </ form >

  • 提交給指定接受接口：

  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    < form action = "www.baidu.com" method = "get" >
    <!--這裏action是告訴html提交到那裏-->
    <!--method是經過什麼方法去action指定的地址-->
    < p >
         用戶名:< input type = "text" name = "user" />
         <!--這裏的name="user" 這裏當我們指定的action接收到的數據以後縣會找到是否有這個name標籤-->
         <!--而後把這裏的用戶的輸入複製給name爲一個字典key:value模式-->
    </ p >
    < p >
         密碼:< input type = "password" name = "pass" />
                 <!--這裏的name="pass" 這裏當我們指定的action接收到的數據以後縣會找到是否有這個name標籤-->
         <!--而後把這裏的用戶的輸入複製給name爲一個字典key:value模式-->
    </ p >
    < p >
         愛好:< select name = "department" >
                     < option value = "1" >女</ option >
                     < option value = "2" >男</ option >
         <!--這裏在選擇以後，會把選擇的value值賦予給name，當用戶點擊提交後就會提交到後臺-->
    </ select >
    </ p >
    < input type = "submit" value = "提交" />
    </ form >

    9.select標籤

    第一種：

    1
    2
    3
    4
    5
    6
    < select >
    < option value = "1" >錦州</ option >
    < option value = "2" >瀋陽</ option >
    < option value = "3" selected = "selected" >北京</ option >
    <!--這裏默認是北京由於selected="selected" 這裏設置了默認的！-->
    </ select >

  • 第二種：

    1
    2
    3
    4
    5
    6
    < select size = "2" >
            < option >上海</ option >
         < option >北京</ option >
         < option >錦州</ option >
         < option >阜新</ option >
    </ select >

  • 第三種（多選）：

    1
    2
    3
    4
    5
    6
    < select multiple = "multiple" size = "2" >
         < option >上海</ option >
         < option >北京</ option >
         < option >遼寧</ option >
         < option >錦州</ option >
    </ select >

  • 第四種分組：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    < select >
         < optgroup label = "遼寧省" >
             < option >錦州市</ option >
             < option >瀋陽市</ option >
         </ optgroup >
         < optgroup label = "吉林省" >
             < option >長春市</ option >
             < option >四平市</ option >
         </ optgroup >
    </ select >

    10.label標籤

    代碼以下：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    < div >
         < label for = "name_1" >
             姓名:
             < input id = "name_1" type = "text" />
         </ label >
     
         < label for = "name_2" >
             婚否:< input id = "name_2" type = "checkbox" />
         </ label >
    </ div >


    CSS

    1、css簡介

    css是英文Cascading Style Sheets的縮寫,稱爲層疊樣式表，用於對頁面進行美化，CSS的可使頁面更加的美觀。基本上全部的html頁面都或多或少的使用css。

    存在方式有三種：元素內聯、頁面嵌入和外部引入

    1.元素內聯

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    < html >
    < head lang = "en" >
    < meta charset = "UTF-8" >
    < title ></ title >
    </ head >
         < body >
         < a  style = "color: #b2002e" href = "#" >何潭</ a >
         </ body >
    </ html >

    2.頁面嵌入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< html >
< head lang = "en" >
     < meta charset = "UTF-8" >
     < title ></ title >
     < style >
         <!--定義-->
         .test{
             color: #b2002e;
         }
 
     </ style >
</ head >
< body >
<!--使用-->
< a   class = "test" href = "#" >何潭</ a >
</ body >
</ html >

3.引入外部css文件

新建一個css文件

名字叫作index.css

內容

1
2
3
test{
         color: #b2002e;
     }

新建一個html文件

內容

1
2
3
4
5
6
7
8
9
10
11
12
13
< html >
< head lang = "en" >
     < meta charset = "UTF-8" >
     < title ></ title >
     <!--這裏經過link導入樣式，有點相似與python導入模塊中的import *-->
     < link rel = "stylesheet" href = "index.css" />
</ head >
< body >
<!--使用-->
<!--這裏直接應用指定好的CSS樣式名便可-->
< a   class = "test" href = "#" >何潭</ a >
</ body >
</ html >

2、選擇器

class選擇器

點開頭

1
2
3
.c1{}
< div class = 'c1' > 123</ div >
< div class = 'c1' > 123</ div >

標籤選擇器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
a{
     color:red;
}
div
span
select
input，type=text
 
*****
input[type='text']{
 
}
 
html中全部的a標籤，所有紅色字體

ID選擇器

1
2
3
4
5
#uu{
 
}
< div ></ div >
< div id = 'uu' >123</ div >

層級選擇器

1
2
3
4
5
6
7
8
9
10
11
12
13
.c3 #i8 div .c4{
 
}
 
< div class = 'c3' >
     < a id = 'i8' >
         < div >
             < span class = 'c4' ></ span >
         </ div >
         < span class = 'c4' ></ span >
     </ a >
</ div >
< span class = 'c4' ></ span >

組合選擇器

1
2
3
4
5
6
7
8
9
a{
}
p{
 
}
 
.c3 #i8 div .c4,.c3 #i8 div .c9{
     xxxx
}

3、經常使用屬性

1.background

1
2
3
4
5
6
7
8
9
10
背景顏色
p {background-color: gray;}
背景圖片
body {background-image: url(/i/eg_bg_04.gif);}
背景平鋪
background-repeat: repeat-y;
背景不平鋪
background-repeat: no-repeat;
背景定位
background-position:center;


2.border

1
2
邊框的寬度
p {border-style: solid; border-width: 5px;}



3.Display

1
2
3
4
5
使段落生出行內框：
p.inline
   {
   display:inline;
   }


4.cursor
鼠標停放所顯示的效果

  • css提供的cursor值

pointer || help || wait || move || crosshair

經常使用：

  • 僞造超連接

值爲pointer

  • 自定義(通常不用)

    • mine

5.浮動

1
2
3
4
5
6
7
8
9
10
把圖像向右浮動：
img
   {
   float:right;
   }
 
left    元素向左浮動。
right    元素向右浮動。
none    默認值。元素不浮動，並會顯示在其在文本中出現的位置。
inherit    規定應該從父元素繼承 float 屬性的值。

6.內、外邊距

1
2
3
4
5
標準盒子模型
margin
padding
 
內邊距、邊框和外邊距都是可選的，默認值是零。可是，許多元素將由用戶代理樣式表設置外邊距和內邊距。能夠經過將元素的 margin 和 padding 設置爲零來覆蓋這些瀏覽器樣式。這能夠分別進行，也可使用通用選擇器對全部元素進行設置：





7.定位position

CSS 爲定位和浮動提供了一些屬性，利用這些屬性，能夠創建列式佈局，將佈局的一部分與另外一部分重疊，還能夠完成多年來一般須要使用多個表格才能完成的任務。
定位的基本思想很簡單，它容許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另外一個元素甚至瀏覽器窗口自己的位置。顯然，這個功能很是強大，也很讓人吃驚。要知道，用戶代理對 CSS2 中定位的支持遠勝於對其它方面的支持，對此不該感到奇怪。

1.相對定位
相對定位是一個很是容易掌握的概念。若是對一個元素進行相對定位，它將出如今它所在的位置上。而後，能夠經過設置垂直或水平位置，讓這個元素「相對於」它的起點進行移動。
若是將 top 設置爲 20px，那麼框將在原位置頂部下面 20 像素的地方。若是 left 設置爲 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。

1
2
3
4
5
#box_relative {
   position: relative;
   left: 30px;
   top: 20px;
}


2.絕對定位

使元素的位置與文檔流無關，所以不佔據空間。這一點與相對定位不一樣，相對定位實際上被看做普通流定位模型的一部分，由於元素的位置相對於它在普通流中的位置。
普通流中其它元素的佈局就像絕對定位的元素不存在同樣：

1
2
3
4
5
6
#box_relative {
   position: absolute;
   left: 30px;
   top: 20px;
}
![](http://i.imgur.com/ziYoSIg.png)

8.樣式：overflow

1
2
3
4
5
6
7
設置 overflow 屬性：
div
   {
   width:150px;
   height:150px;
   overflow:scroll;
   }


9.透明度

設置 div 元素的不透明級別：

1
2
3
4
div
{
opacity:0.5;
}

10.文本

1
2
3
4
5
6
7
縮進
p {text-indent: 5em;}
使用百分比
div {width: 500px;}
p {text-indent: 20%;}
水平對齊
text-align:center

11.字體

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
使用通用字體系列
body {font-family: sans-serif;}
指定字體
h1 {font-family: Georgia;}
字體風格
font-style 屬性最經常使用於規定斜體文本。
該屬性有三個值：
normal - 文本正常顯示
italic - 文本斜體顯示
oblique - 文本傾斜顯示
字體加粗
font-weight 屬性設置文本的粗細。
使用 bold 關鍵字能夠將文本設置爲粗體。
關鍵字 100 ~ 900 爲字體指定了 9 級加粗度。若是一個字體內置了這些加粗級別，
那麼這些數字就直接映射到預約義的級別，100 對應最細的字體變形，
900 對應最粗的字體變形。數字 400 等價於 normal，而 700 等價於 bold。
字體大小
font-size 屬性設置文本的大小。

12連接.

可以設置連接樣式的 CSS 屬性有不少種（例如 color, font-family, background 等等）。

連接的特殊性在於可以根據它們所處的狀態來設置它們的樣式。

連接的四種狀態：

a:link - 普通的、未被訪問的連接

a:visited - 用戶已訪問的連接

a:hover - 鼠標指針位於連接的上方

a:active - 連接被點擊的時刻



相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程