一篇文章說了HTML，現(xiàn)在再來說一說CSS，所謂CSS是指層疊樣式表 (Cascading Style Sheets)，通過引入樣式表，從而極大的提高了工作效率。

搭配視頻觀看效果更佳~~

Web前端開發(fā)零基礎(chǔ)入門HTML/CSS/JavaScript

https://www.ixigua.com/6907467670300393988

什么是CSS？

Cascading Style Sheet

層疊樣式表語言（不是編程語言，屬于樣式表語言，沒有變量、數(shù)據(jù)類型、控制語句...）

CSS其實是專門用來修飾HTML的，讓HTML更好看。

CSS是HTML的化妝品。

CSS是為HTML服務(wù)的，所以HTML還是主體，CSS是依附在HTML上的，

所以進行CSS的開發(fā)，我們還是需要新建html/htm文件。

在HTML中怎么嵌入CSS樣式呢？

第一種方式：內(nèi)聯(lián)定義

第二種方式：定義內(nèi)部樣式塊對象

第三種方式：鏈入外部樣式表文件（這種方式最常用！）

關(guān)于選擇器的優(yōu)先級：

• 標(biāo)簽選擇器優(yōu)先級最低。
• 其次是類選擇器。
• 最高優(yōu)先級是id選擇器。

CSS設(shè)置背景(background)

• 背景顏色 background-color
• 背景圖片 background-image
• 背景重復(fù) background-repeat:repeat-x/repeat-y
• 背景位置 background-position:bottom/left/top/right/center
• 背景關(guān)聯(lián) background-attachment:fixed/scroll

綜合寫法：

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;}

CSS設(shè)置文本格式

通過文本屬性，您可以改變文本的顏色、字符間距，對齊文本，裝飾文本，對文本進行縮進，等等。

文本縮進 ：Text-indent:2em

文本對齊方式：Text-align:left/right/center/ justify

文本修飾：Text-decoration:underline/line-through/overline/none

字符間距：Word-spacing:px/em 英文單詞之間的間隔；

Letter-spacing:px/em漢字和英文字母之間的間隔；

文本轉(zhuǎn)換：Text-transform:uppercase/lowercase/ capitalize

行與行間距：Line-height:px/%

垂直對齊圖像： vertical-align：text-top/text-bottom

文本陰影：text-shadow:水平偏移，垂直偏移 顏色

字體

字體類型:font-family:”sans-serif”;

字體樣式:font-style:normal ;

字體大小:font-size:20px/3.75em/100%;默認(rèn)大小為16px,字體為宋體

字體加粗:font-weight:normal;

字體的轉(zhuǎn)變:font-variant:normal/smallcaps;

CSS鏈接

鏈接的四種狀態(tài)

a:link {color:#FF0000;}     /* 未被訪問的鏈接 */
a:visited {color:#00FF00;}  /* 已被訪問的鏈接 */
a:hover {color:#FF00FF;}    /* 鼠標(biāo)指針移動到鏈接上 */
a:active {color:#0000FF;}   /* 正在被點擊的鏈接 */

【注意】當(dāng)為鏈接的不同狀態(tài)設(shè)置樣式時，請按照以下次序規(guī)則：

a:hover 必須位于 a:link 和 a:visited 之后

a:active 必須位于 a:hover 之后

去掉a鏈接默認(rèn)的下劃線

text-decoration:{none/underline}

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

創(chuàng)建鏈接塊

display:block;

列表樣式

在一個無序列表中，列表項的標(biāo)志 (marker) 是出現(xiàn)在各列表項旁邊的圓點。在有序列表中，標(biāo)志可能是字母、數(shù)字或另外某種計數(shù)體系中的一個符號。

要修改用于列表項的標(biāo)志類型，可以使用屬性 list-style-type：

ul {list-style-type : square;}

上面的聲明把無序列表中的列表項標(biāo)志設(shè)置為方塊。

列表項圖像

你可能想對各標(biāo)志使用一個圖像，這可以利用 list-style-image 屬性做到：

ul li {list-style-image : url(xxx.gif);}

列表標(biāo)志位置

ul{
  list-style-position:inside;
  }

CSS表格

表格邊框

table,th,td{border:1px solid red;}

折疊邊框

border-collapse:collapse;

• 表格的寬度和高度

width,height

• 表格的文字水平對齊

text-align:center/right/left;

• 表格的文字垂直對齊

vertical-align:bottom;

• 表格的內(nèi)邊距

padding

• 表格的背景顏色

background

盒子模型

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制塊級元素之間的距離, 它們是透明不可見的。

根據(jù)上, 右, 下, 左的順時針規(guī)則, 簡寫為

margin: 40px 40px 40px 40px;

為便于記憶, 請參考下圖：

當(dāng)上下, 左右margin值分別一致, 可簡寫為:

margin: 40px 40px;

前一個40px代表上下margin值, 后一個40px代表左右margin值.

當(dāng)上下左右margin值均一致, 可簡寫為:

margin: 40px;

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制塊級元素內(nèi)部, content與border之間的距離

【注意】當(dāng)你想讓兩個元素的content在垂直方向(vertically)分隔時, 既可以選擇padding-top/bottom, 也可以選擇margin-top/bottom, 在此建議你盡量使用padding-top/bottom來達到你的目的, 這是因為css中存在Collapsing margins(折疊的margins)的現(xiàn)象.

邊框

• 邊框樣式：border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden
• 邊框?qū)挾龋篵order-width
• 邊框顏色：border-color

綜合寫法：

border:1px solid red;

輪廓(outline)

可以按順序設(shè)置如下屬性：

• outline-color
• outline-style
• outline-width

CSS所有尺寸

• 寬度

width/min-width/max-width

• 高度

height/min-height/max-height

• 行高

line-height

display顯示類型

隱藏元素—–display:none或者visibility:hiddden

display通常可以設(shè)置為none、inline、block

visibility通常可以設(shè)置為hidden、visible

二者的區(qū)別在于display會將元素隱藏掉，并且位置不再被占據(jù)，而visibility則是占據(jù)原來的位置。

CSS塊級元素和內(nèi)聯(lián)元素—-display:block/inline/inline-block;

CSS定位(position)

position 屬性值的含義：

static

元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。

relative

元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

CSS浮動

設(shè)置浮動：float:left/right;

清除浮動：clear:both/left/right/null;

浮動的兩個影響因素：1、文檔流 2、顯示類型

元素內(nèi)容溢出

• 溢出滾動條

overflow:scroll（不管是否溢出都會有滾動條）、auto（自動添加）

• 溢出隱藏

overflow:hidden;

CSS的相關(guān)特性

1、繼承性

它不僅允許樣式應(yīng)用于某個特定的html標(biāo)簽元素，而且還可引用于其后代；

2、CSS層疊

當(dāng)有相同權(quán)重的樣式存在時，會根據(jù)這些CSS樣式的前后順序來決定，處于最后面的CSS樣式會被應(yīng)用，后面的CSS樣式會覆蓋前面的樣式。

總而言之：內(nèi)聯(lián)樣式表(標(biāo)簽內(nèi)部)>嵌入樣式表(當(dāng)前文件中)>外部樣式表(外部引入文件)

TML 或超文本標(biāo)記語言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創(chuàng)建動態(tài)功能。

HTML有很多用例，即：

1. 網(wǎng)頁開發(fā)。開發(fā)人員使用 HTML 代碼來設(shè)計瀏覽器如何顯示網(wǎng)頁元素，例如文本、超鏈接和媒體文件。
2. 互聯(lián)網(wǎng)導(dǎo)航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關(guān)頁面和網(wǎng)站之間導(dǎo)航和插入鏈接。
3. 網(wǎng)絡(luò)文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
4. 還值得注意的是，HTML 現(xiàn)在被視為官方 Web 標(biāo)準(zhǔn)。萬維網(wǎng)聯(lián)盟 (W3C)維護和開發(fā) HTML 規(guī)范，同時提供定期更新。

本文將介紹 HTML 的基礎(chǔ)知識，包括它的工作原理、優(yōu)缺點以及它與 CSS 和 JavaScript 的關(guān)系。

什么是 HTML？

HTML（代表超文本標(biāo)記語言）是構(gòu)成大多數(shù)網(wǎng)頁和在線應(yīng)用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標(biāo)記語言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。

HTML 是如何工作的

html文件

平均每個網(wǎng)站包含幾個不同的信息 HTML 頁面。例如，主頁、關(guān)于頁面和聯(lián)系頁面都將具有單獨的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。

元素的三個主要部分是：

• 開始標(biāo)簽 - 用于說明元素開始生效的位置。標(biāo)簽用左尖括號和右尖括號包裹。例如，使用開始標(biāo)簽 <p> 創(chuàng)建一個段落。
• 內(nèi)容——這是其他用戶看到的輸出。
• 結(jié)束標(biāo)簽 - 與開始標(biāo)簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結(jié)束一個段落。

這三個部分的組合將創(chuàng)建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關(guān)鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標(biāo)識用戶想要添加的附加信息，并且屬性值給出進一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現(xiàn)相同的樣式，請在每個開始標(biāo)記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數(shù)元素都有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因為它們沒有內(nèi)容：

< img src= "/" alt= "圖像" >

這個圖像標(biāo)簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內(nèi)容，也沒有結(jié)束標(biāo)簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標(biāo)簽和 HTML 元素

目前，有 142 個 HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。

第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個主要元素——塊級元素和內(nèi)聯(lián)元素。

塊級元素

塊級元素占據(jù)頁面的整個寬度。它總是在文檔中開始一個新行。例如，標(biāo)題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標(biāo)簽：

• <html>標(biāo)簽是定義整個 HTML 文檔的根元素。
• <head> 標(biāo)簽保存頁面標(biāo)題和字符集等元信息。
• <body>標(biāo)簽包含了頁面上出現(xiàn)的所有內(nèi)容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標(biāo)簽包括：

• 標(biāo)題標(biāo)簽 - 這些范圍從 <h1> 到 <h6>，其中標(biāo)題 h1 的大小最大，當(dāng)它們向上移動到 h6 時變得越來越小。
• 段落標(biāo)簽——全部使用 <p> 標(biāo)簽括起來。
• 列表標(biāo)簽——有不同的變體。<ol> 標(biāo)簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標(biāo)記將各個列表項括起來。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素格式化塊級元素的內(nèi)部內(nèi)容，例如添加鏈接和強調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。

例如，一個 <strong> 標(biāo)簽會以粗體呈現(xiàn)一個元素，而 <em> 標(biāo)簽會以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來指示鏈接目標(biāo)的內(nèi)聯(lián)元素：

<a href="https://www.icodingdeu.com/" >點我！</a> 

HTML 演變——HTML 和 HTML5 有什么區(qū)別？

HTML 的第一個版本由 18 個標(biāo)簽組成。從那時起，每個新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。

HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。

HTML 的優(yōu)點和缺點

就像任何其他計算機語言一樣，HTML 有其優(yōu)點和局限性。以下是 HTML 的優(yōu)缺點：

優(yōu)點：

• 初學(xué)者友好: HTML 具有干凈且一致的標(biāo)記，以及較淺的學(xué)習(xí)曲線。
• 支持領(lǐng)域廣：該語言被廣泛使用，擁有大量資源和龐大的社區(qū)。
• 無障礙：它是開源的并且完全免費。HTML 在所有 Web 瀏覽器中本機運行。
• 靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機語言一樣，HTML 有其優(yōu)點和局限性。以下是 HTML 的優(yōu)缺點：

缺點：

• 靜止的 該語言主要用于靜態(tài)網(wǎng)頁。對于動態(tài)功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
• 單獨的 HTML 頁面 用戶必須為 HTML 創(chuàng)建單獨的網(wǎng)頁，即使元素相同。
• 瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現(xiàn)較新的標(biāo)簽。

HTML、CSS 和 Javascript 是如何相關(guān)的

HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。

• CSS 負(fù)責(zé)樣式，例如背景、顏色、布局、間距和動畫。
• JavaScript 添加了動態(tài)功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發(fā)的基礎(chǔ)。

結(jié)論

HTML 是 Internet 上的主要標(biāo)記語言。每個 HTML 頁面都有一系列創(chuàng)建網(wǎng)頁或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。

HTML 是一種對初學(xué)者友好的語言，有很多支持，主要用于靜態(tài)網(wǎng)站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請在評論部分告訴我們。

入門到精通：掌握 CSS 的全程指南

Cascading Style Sheets（層疊樣式表），簡稱 CSS，是前端開發(fā)中不可或缺的一部分。它為網(wǎng)頁提供了美觀和一致的外觀，同時也為用戶提供了更好的用戶體驗。本文將引導(dǎo)你從 CSS 的基礎(chǔ)入門到精通，幫助你成為一名優(yōu)秀的前端開發(fā)者。

CSS 基礎(chǔ)入門

1. 什么是 CSS？