把收藏力拉滿，前端 50 個(gè)優(yōu)質(zhì) Web 在線資源

. Browser Default Styles

可以在 Browser Default Styles 中查詢 HTML 元素在每個(gè)瀏覽器下的默認(rèn)樣式；

2. Clippy

可以在 Clippy 為你的圖片作剪輯，并且生成對應(yīng)的 css clip-path 屬性；

3. CSS keyframes

CSS keyframes 可以幫助你創(chuàng)建 CSS 幀動畫；

4. Neumorphism.io

Neumorphism.io 幫你創(chuàng)建新擬態(tài)的 UI 風(fēng)格；

5. CSS Cursors

CSS Cursors 讓你的光標(biāo)足夠酷；

6. CSS Grid Generator

CSS Grid Generator，作用如其名，幫助創(chuàng)建 CSS Gird；

7. Placeholder Image Generator

Placeholder Image Generator 幫助創(chuàng)建圖片未加載出來的占位信息；

8. Htmldom

Htmldom：純原生 JS 代碼合集，幫助操作 DOM；

9. HTML5 head elements

HTML5 head elements 是 head 標(biāo)簽設(shè)置最強(qiáng)指南，真滴強(qiáng)；

10. Input Type Sandbox

設(shè)置并校驗(yàn) Input 框輸入，Input Type Sandbox 各種類型都有，專精尖；

11. Meta Tags

Meta Tags 幫你自動導(dǎo)出流行社交網(wǎng)絡(luò)（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；

12. Can I Include

Can I Include 幫你確定 HTML 元素之間是否可以嵌套；

13. Key codes

Key codes 幫你輕松找到鍵盤按鍵所對應(yīng)的 keycodes 來設(shè)置事件監(jiān)聽；

14. Color contrast checker

Color contrast checker 幫你檢查網(wǎng)頁設(shè)計(jì)中兩種顏色之間的對比度；

15. Git Command Explorer

Git Command Explorer 幫你充分了解和學(xué)習(xí) Git 命令；

16. Make thumbnails

Make thumbnails 幫你輕松創(chuàng)建圖像縮略圖；

17. Can I Email

Can I Email 幫你查看電子郵件中可支持哪些 HTML 和 CSS 屬性；

18. Trianglify

Trianglify 幫你的網(wǎng)站創(chuàng)作出美麗的背景；

19. CSS Layout

CSS Layout 收集了流行的 CSS 布局，幫你輕松選擇合適的網(wǎng)站設(shè)計(jì)；

20. FANCY-BORDER-RADIUS

FANCY-BORDER-RADIUS 幫你通過使用 CSS BORDER-RADIUS 屬性設(shè)置形狀來設(shè)計(jì)對象；

21. 1loc

1loc 是一個(gè)聚合解決方案網(wǎng)站，幫你解決 JS 編程中經(jīng)常遇到的各類問題；

22. Color Namer

Color Namer 讓每一個(gè)顏色都有一個(gè)獨(dú)特的名字；

23. BrowserFrame

BrowserFrame 給你的網(wǎng)站添加一個(gè)瀏覽器背景；

24. CSS Scan

CSS Scan 收集了超多 box-shadow 效果網(wǎng)站；

25. Favicon

Favicon 幫你創(chuàng)建免費(fèi)的 FavIcon；

26. CSS Filter

CSS Filter 將 CSS Filter 玩出花來；

27. Simple CSS Media Query Generator

Simple CSS Media Query Generator 幫你輕松搞定媒體查詢；

28. Mix Font

Mix Font 通過一種有趣且簡單的方式來發(fā)現(xiàn)、創(chuàng)建新字體；

29. Omatsuri

Omatsuri 設(shè)計(jì)師工具集合網(wǎng)站，例如使用CSS創(chuàng)建三角形、創(chuàng)建網(wǎng)站光標(biāo)顯示樣式、HTML符號等；

30. Underline Generator

Underline Generator 幫你創(chuàng)建美麗的下劃線；

31. Checkboxes & Radios CSS Generator

Checkboxes & Radios CSS Generator 創(chuàng)建 Checkboxes & Radios；

32. Convert Images to Base64

Convert Images to Base64 將圖片轉(zhuǎn)為 base64 格式；

33. Responsively

Responsively 幫你查看多種設(shè)備下的網(wǎng)站效果；

34. UI Design Daily

UI Design Daily：UI 設(shè)計(jì)聚合網(wǎng)；

35. Devdocs

Devdocs：開發(fā)文檔聚合網(wǎng)；

36. Shortcode

Shortcode 幫你用簡短的代碼解決編程中的常見問題；

37. Public-apis

Public-apis 為你的網(wǎng)站提供免費(fèi)的 API，接入免費(fèi)數(shù)據(jù)；

38. CSS Grid Layout Generator

CSS Grid Layout Generator 幫你用CSS快速構(gòu)建復(fù)雜的網(wǎng)格系統(tǒng)；

39. CSS Duotone Generator

CSS Duotone Generator 幫你設(shè)置圖像的CSS屬性，例如圖像的距離、不透明度、模糊、顏色等；

40. CSS3 Generator

CSS3 Generator 幫你快速創(chuàng)建復(fù)雜的 CSS3 屬性，例如長方體陰影、漸變、過渡效果等。此外，對于每個(gè)屬性，還提供了不同瀏覽器支持的詳細(xì)信息；

41. Box Model

Box Model 幫你更直觀的查web 對象填充設(shè)置、邊距和邊框?qū)傩缘龋?/p>

42. Animated CSS Background Generator

Animated CSS Background Generator 幫你借用顏色創(chuàng)建動畫背景。此外，還提供一些其它屬性配置，如計(jì)數(shù)、大小、平均速度等；

43. Web Code Tools

Web Code Tools ，通過輸入屬性值來設(shè)置CSS中的公共屬性，并能直接預(yù)覽效果；

44. Enjoy CSS

Enjoy CSS 幫你設(shè)置樣式，設(shè)置即預(yù)覽，享受它吧~

45. CSS Portal

CSS Portal，是一個(gè) CSS 各類生成器集合站點(diǎn)；

46. CSS3 Generator OverDesign

CSS3 Generator OverDesign 幫你設(shè)置web設(shè)計(jì)中的常用屬性；

47. HTML Table Generator

HTML Table Generator 幫你輕松設(shè)計(jì)網(wǎng)站表格；

48. Making CSS

Making CSS 是一個(gè)工具聚合網(wǎng)站，幫你輕松實(shí)現(xiàn) CSS；

49. CSS Masonry Generator

CSS Masonry Generator 幫你實(shí)現(xiàn)可配置的圖片瀑布流；

50. Generator of CSS background patterns

Generator of CSS background patterns 幫你輕松構(gòu)建不同類型的網(wǎng)站背景；

小結(jié)

OK，以上便是本篇分享；請把收藏力拉滿，拿走不謝！！

歡迎點(diǎn)贊+轉(zhuǎn)發(fā)+關(guān)注！大家的支持是我分享最大的動力！！！

TML基礎(chǔ)簡介
超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。您可以使用 HTML 來建立自己的 WEB 站點(diǎn)，HTML 運(yùn)行在瀏覽器上，由瀏覽器來解析。

HTML是一個(gè)網(wǎng)頁文件的拓展名，和txt、jpg、mp3一樣，是一個(gè)文件格。.html文件就是網(wǎng)頁文件。

2.html 的格式化標(biāo)簽

<!DOCTYPE>
<html>
--html是一個(gè)雙標(biāo)簽開始標(biāo)簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標(biāo)題
</head>
<body>--用來存放頁面中的內(nèi)容
</body>
</html> --結(jié)束標(biāo)簽

DOCTYPE----文檔類型聲明
meta標(biāo)簽----設(shè)置頁面編碼格式，關(guān)鍵字，以及頁面的描述
<title></title>--------->標(biāo)題部分
<head></head>------>頁面的頭部分
<body></body>------>頁面的主體部分

2.內(nèi)容標(biāo)簽

這其中<hr> <br> 是單標(biāo)簽
<div></div> <span></span> 無意義區(qū)塊容器標(biāo)簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網(wǎng)頁標(biāo)題</h1></div>

HTML標(biāo)記—注釋標(biāo)記

<!--注釋語句-->

標(biāo)題：
<h1>這是一個(gè)標(biāo)題</h1>
<h2>這是一個(gè)標(biāo)題</h2>
<h3>這是一個(gè)標(biāo)題</h3>

段落：
<p>這是一個(gè)段落。</p>
<p>這是另外一個(gè)段落。</p>

HTML 鏈接

<a >這是一個(gè)鏈接</a>
當(dāng)您點(diǎn)擊 HTML 頁面中的某個(gè)鏈接時(shí)，對應(yīng)的 <a> 標(biāo)簽指向萬維網(wǎng)上的一個(gè)地址。
一個(gè)統(tǒng)一資源定位器(URL) 用于定位萬維網(wǎng)上的文檔。
URL - 統(tǒng)一資源定位器
scheme - 定義因特網(wǎng)服務(wù)的類型。最常見的類型是 http
host - 定義域主機(jī)（http 的默認(rèn)主機(jī)是 www）
domain - 定義因特網(wǎng)域名，比如 runoob.com
:port - 定義主機(jī)上的端口號（http 的默認(rèn)端口號是 80）
path - 定義服務(wù)器上的路徑（如果省略，則文檔必須位于網(wǎng)站的根目錄中）。
filename - 定義文檔/資源的名稱

這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉(zhuǎn)到了一個(gè)有下載功能的頁面。

常見的 URL Scheme

HTML 圖像

alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。

3.HTML屬性

屬性實(shí)例:

HTML 鏈接由 <a> 標(biāo)簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個(gè)鏈接</a>

4.HTML 表格

表格由 <table> 標(biāo)簽來定義。每個(gè)表格均有若干行（由 <tr> 標(biāo)簽定義），每行被分割為若干單元格（由 <td> 標(biāo)簽定義）。字母 td 指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標(biāo)簽進(jìn)行定義。

<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<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>

5.HTML 表單

表單是一個(gè)包含表單元素的區(qū)域。

表單元素是允許用戶在表單中輸入內(nèi)容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復(fù)選框(checkboxes)等等。

文本域（Text Fields）

文本域通過<input type="text"> 標(biāo)簽來設(shè)定
當(dāng)用戶要在表單中鍵入字母、數(shù)字等內(nèi)容時(shí)，就會用到文本域
密碼字段
密碼字段通過標(biāo)簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>

單選按鈕（Radio Buttons）

<input type="radio"> 標(biāo)簽定義了表單單選框選項(xiàng)
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時(shí)需要設(shè)置默認(rèn)選項(xiàng),需要設(shè)置checked屬性:
<input type="radio" name="sex" checked="checked"/>男

復(fù)選框（Checkboxes）

<input type="checkbox"> 定義了復(fù)選框. 用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設(shè)置默認(rèn)選項(xiàng),如果要設(shè)置,也是設(shè)置checked屬性

提交按鈕(Submit Button)

<input type="submit"> 定義了提交按鈕.

當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會被傳送到另一個(gè)文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個(gè)文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。:

<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達(dá)到效果
action 設(shè)置表單提交參數(shù)路徑
method 當(dāng)前請求方式(同iOS開發(fā)網(wǎng)絡(luò)請求一樣,get/post)

假如您在上面的文本框內(nèi)鍵入幾個(gè)字母，然后點(diǎn)擊確認(rèn)按鈕，那么輸入數(shù)據(jù)會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結(jié)果。

圖片按鈕(使用不多)

Select下拉框

selected默認(rèn)選項(xiàng)
<select>
<option selected="selected" >選項(xiàng)一</option>
<option>選項(xiàng)二</option>
</select>

Textarea文本域

<textarea></textarea>

6.HTML 列表

HTML 支持有序、無序和定義列表:

無序列表使用 <ul> 標(biāo)簽
<ul>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
<li>列表項(xiàng)</li>
</ul>
有序列表始于 <ol> 標(biāo)簽。每個(gè)列表項(xiàng)始于 <li> 標(biāo)簽。
列表項(xiàng)項(xiàng)使用數(shù)字來標(biāo)記。
<ol>
<li>第一個(gè)列表項(xiàng)</li>
<li>第二個(gè)列表項(xiàng)</li>
<li>第三個(gè)列表項(xiàng)</li>
</ol>
自定義列表以 <dl> 標(biāo)簽開始。每個(gè)自定義列表項(xiàng)以 <dt> 開始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點(diǎn)去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}

7.內(nèi)聯(lián)樣式- 在HTML元素中使用"style" 屬性

HTML樣式實(shí)例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個(gè)標(biāo)題</h2>
<p style="background-color:green;">這是一個(gè)段落。</p>
</body>

HTML 樣式實(shí)例 - 字體, 字體顏色，字體大小

我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:

HTML 樣式實(shí)例 - 文本對齊方式

<h1 style="text-align:center;">居中對齊的標(biāo)題</h1>

而關(guān)于其他CSS內(nèi)容,這里就簡單介紹一下:

內(nèi)部樣式表

當(dāng)單個(gè)文件需要特別樣式時(shí)，就可以使用內(nèi)部樣式表。你可以在<head> 部分通過 <style>標(biāo)簽定義內(nèi)部樣式表:

<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>

外部樣式表

當(dāng)樣式需要被應(yīng)用到很多頁面的時(shí)候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML 樣式標(biāo)簽

最后提一下什么是Web安全色?

數(shù)年以前，當(dāng)大多數(shù)計(jì)算機(jī)僅支持 256 種顏色的時(shí)候，一系列 216 種 Web 安全色作為 Web 標(biāo)準(zhǔn)被建議使用。其中的原因是，微軟和 Mac 操作系統(tǒng)使用了 40 種不同的保留的固定系統(tǒng)顏色（雙方大約各使用 20 種）。

216 跨平臺 web 安全色被用來確保：當(dāng)計(jì)算機(jī)使用 256 色調(diào)色板時(shí)，所有的計(jì)算機(jī)能夠正確地顯示所有的顏色。

文為Django技術(shù)學(xué)習(xí)筆記，相關(guān)教材為清華大學(xué)出版社出版的《Django開發(fā)寶典》。

這一節(jié)介紹Django開發(fā)的前端技術(shù)，主要為HTML相關(guān)知識點(diǎn)補(bǔ)記。

1.1 初識HTMl

1.1.1 HTML的定義

HTML是用來描述網(wǎng)頁的一種語言。

HTML是指超文本標(biāo)記語言（Hyper Text Markup Language）。
HTML不是一種編程語言，而是一種標(biāo)記語言（Markup Language）。
標(biāo)記語言是一套標(biāo)記標(biāo)簽（Markup Tag），HTML使用標(biāo)記標(biāo)簽來描述網(wǎng)頁。

1.1.2 HTML標(biāo)簽

HTML標(biāo)記標(biāo)簽通常被稱為HTML標(biāo)簽（HTML Tag）。

HTML標(biāo)簽是由尖括號括起來的關(guān)鍵詞，如<html>。
HTML標(biāo)簽通常是承兌出現(xiàn)的，如<b>和</b>。
標(biāo)簽對中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽；開始標(biāo)簽和接數(shù)標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽。

1.1.3 HTML元素

HTML元素是指開始標(biāo)簽（Start Tag）到接數(shù)標(biāo)簽（End Tag）的所有代碼。

1.2 走進(jìn)HTML

1.2.1 HTML編輯器

可以是用專業(yè)編輯器來編輯，推薦使用文本編輯器來學(xué)習(xí)HTML。

1.2.2 HTML標(biāo)題

HTML標(biāo)題（Heading）是通過<h1>~<h6>等標(biāo)簽進(jìn)行定義的。例如：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h2>This is a heading</h2>

1.2.3 HTML段落

HTML段落是通過<p>標(biāo)簽進(jìn)行定義的。例如：

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

1.2.4 HTML鏈接

HTML使用超級鏈接與網(wǎng)絡(luò)上的另一個(gè)文檔相連。幾乎在任何一個(gè)網(wǎng)頁中都能找到超級鏈接，單擊超級鏈接可以從一張頁面跳轉(zhuǎn)到另一張頁面。

通過使用<a>標(biāo)簽可以在HTML中創(chuàng)建超級鏈接，具體有一下兩種使用/標(biāo)簽的方式。

1. 通過使用href屬性創(chuàng)建指向另一個(gè)文檔的鏈接。

1. 通過使用name屬性創(chuàng)建文檔內(nèi)的標(biāo)簽。

使用target屬性可以定義被超級鏈接的文檔要在何處顯示。下面的這行會在新窗口打開文檔：

<a  target="_blank">百度一下，你就知道</a>

1.2.5 HTML圖像

要在頁面上顯示圖像需要使用（src），src是指"source"。源屬性的值是圖像的URL地址。定義圖像的語法是：

< img src="url" /> //URL指存儲圖像的位置

1.2.6 HTML表格

表格由<table>標(biāo)簽來定義。每個(gè)表格均有若干行（由<tr>標(biāo)簽定義），每行被分割為若干單元格（由<td>標(biāo)簽定義）。字母td是指表格數(shù)據(jù)（table data），即數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。

<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>

1.2.7 HTML列表

HTML支持有序列表、無序列表和自定義列表。

1）有序列表

無序列表是一個(gè)項(xiàng)目的列表，此列表項(xiàng)目使用粗體原點(diǎn)（典型的小黑圓圈）進(jìn)行標(biāo)記。無序列表始于<ul>標(biāo)簽，每個(gè)列表項(xiàng)始于<li>標(biāo)簽。

<ul> 
<li>Coffee</li>
 <li>Milk</li>
</ul>

2）無序列表

有序列表是一個(gè)項(xiàng)目的列表，此列表項(xiàng)目使用數(shù)字進(jìn)行標(biāo)記。有序列表始于<ol>標(biāo)簽，每個(gè)列表始于<li>標(biāo)簽。

<ol> 
<li>Coffee</li> 
<li>Milk</li>
</ol>

3）自定義列表

自定義列表不僅是一個(gè)項(xiàng)目的列表，也是項(xiàng)目及其注釋的組合。自定義列表以<dl>標(biāo)簽開始，每個(gè)自定義列表項(xiàng)以<dt>標(biāo)簽開始，每個(gè)自定義列表項(xiàng)的定義以<dd>標(biāo)簽開始。

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd> 
<dt>Milk</dt> 
<dd>White cold drink</dd>
</dl>

1.2.8 HTML表單和輸入

1）表單

HTML表單用于收集不同類型的用戶輸入信息。表單使用表單標(biāo)簽（<form>）定義。

<form>... input 元素...</form>

2）輸入

多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>），輸入類型是由類型屬性（type）定義的。大多數(shù)經(jīng)常被用到的輸入類型如下。

（1）文本域（Text Fields）。當(dāng)用戶要在表單中輸入字母、數(shù)字等內(nèi)容時(shí)，就會用到文本域。

<form>
First name: 
<input type="text" name="firstname" />
Last name: 
<input type="text" name="lastname" />
</form>

（2）單選按鈕（Radio Buttons）。當(dāng)用戶需要從若干給定的選擇中選取其一時(shí)，就會用到單選按鈕。主義，只能從中選取其一。

<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
</form>

（3）復(fù)選框（Checkboxes）。當(dāng)用戶需要從若干給定的選擇中選取一個(gè)或若干選項(xiàng)時(shí)，就會用到復(fù)選框。

<form>
<input type="checkbox" name="bike" /> I have a bike
<input type="checkbox" name="car" /> I hava a car
</form>

3）表單的動作屬性（Action）和確認(rèn)按鈕

當(dāng)用戶單擊確認(rèn)按鈕時(shí)，表單的內(nèi)容會被傳送到另一個(gè)文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個(gè)文件通常會對接收到的輸入數(shù)據(jù)進(jìn)行相關(guān)的處理。

<form name="input" action="html_form_action.asp" method="get">
Username:<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>

1.2.9 HTML背景

<body>擁有兩個(gè)配置背景的標(biāo)簽，背景可以是顏色或者圖像。

1）背景顏色（Bgcolor）

背景顏色屬性將背景設(shè)置為某種顏色，屬性值可以是十六進(jìn)制數(shù)、RGB值或顏色名。

<body bgcolor="#00000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

2）背景（Background）

背景屬性將背景設(shè)置為圖像，屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個(gè)瀏覽器窗口進(jìn)行復(fù)制。

<body backgroud="clouds.gif">
<body backgroud="http://www.w3school.com.cn/clouds.gif">

1.2.10 HTML樣式

當(dāng)瀏覽器讀到一個(gè)樣式表，它就會按照這個(gè)樣式表來對文檔進(jìn)行格式化。有以下3種方式來插入樣式表。

1）外部樣式表

當(dāng)樣式需要被應(yīng)用到很多頁面時(shí)，外部樣式表將是理想的選擇。使用外部樣式表，用戶就可以通過更改一個(gè)文件來改變整個(gè)站點(diǎn)的外觀。

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2）內(nèi)部樣式表

當(dāng)單個(gè)文件需要特別樣式表時(shí)，就可以使用內(nèi)部樣式表。用戶可以在head部分通過<style>標(biāo)簽定義內(nèi)部樣式表。

<head> 
<style type="text/css">
body {backgroud-color:red} 
p {margin-left:20px} 
</style>
</head>

3）內(nèi)聯(lián)樣式

當(dāng)特殊的樣式需要應(yīng)用到個(gè)別元素時(shí)，就可以使用內(nèi)聯(lián)樣式。使用內(nèi)聯(lián)樣式的方法是在相關(guān)的標(biāo)簽中使用樣式屬性。樣式屬性可以包含任何CSS屬性。以下示例顯示出如何改變段落的顏色和左外邊距。

在線咨詢

上一篇：簡直不要太硬了！一文帶你徹底理解文件系統(tǒng)
下一篇：你還在用靜態(tài)線性羅列知識點(diǎn)復(fù)習(xí)？《滑輪》思維導(dǎo)圖來了

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商