初級前端語言

含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代碼：

.first span{color:red;}

這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變?yōu)榧t色。

請注意這個選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用于元素的第一代后代，空格作用于元素的所有后代。

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：

* {color:red;}

更有趣的是偽類選擇符，為什么叫做偽類選擇符，它允許給html不存在的標簽（標簽的某種狀態(tài)）設置樣式，比如說我們給html中一個標簽元素的鼠標滑過的狀態(tài)來設置字體顏色：

a:hover{color:red;}

上面一行代碼就是為 a 標簽鼠標滑過的狀態(tài)設置字體顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入鼠標滑過字體顏色變?yōu)榧t色特效。

關于偽選擇符：

關于偽類選擇符，到目前為止，可以兼容所有瀏鑒器的“偽類選擇符”就是 a 標簽上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能兼容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標簽上，比如說 p:hover，但是它們的兼容性也是很不好的，所以現(xiàn)在比較常用的還是 a:hover 的組合。

當你想為html中多個標簽元素設置同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標簽同時設置字體顏色為紅色：

h1,span{color:red;}

它相當于下面兩行代碼：

h1{color:red;}

span{color:red;}

CSS的某些樣式是具有繼承性的，那么什么是繼承呢？繼承是一種規(guī)則，它允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。比如下面代碼：如某種顏色應用于p標簽，這個顏色設置不僅應用p標簽，還應用于p標簽中的所有子元素文本，這里子元素為span標簽。

p{color:red;}

三年級時，我還是一個膽小如鼠的小女孩。

可見右側結果窗口中p中的文本與span中的文本都設置為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;

p{border:1px solid red;}

三年級時，我還是一個膽小如鼠的小女孩。

在上面例子中它代碼的作用只是給p標簽設置了邊框為1像素、紅色、實心邊框線，而對于子元素span是沒用起到作用的。

佳謙科技是一家專注于軟件開發(fā)的高新技術企業(yè)。擁有一支掌握先進技能，協(xié)作能力強，昂揚向上的創(chuàng)造性隊伍。業(yè)務主要涉及微公眾平臺、手機ＡＰＰ定制、人工智能、物聯(lián)網(wǎng)、車聯(lián)網(wǎng)、無人駕駛等等。

我們以高新技術為實體，誠信、服務至上為方向，堅持客戶需求決定一切，始終把客戶放在第一位，用實際行動得到得到客戶的認可肯定。

我們的每個思想在我們網(wǎng)店都有一個案例，每個案例都是我們的思想，我們有專業(yè)的策劃人員，滿足客戶的所有需求，專業(yè)的技術人員，保障按照項目進度完成每個項目，優(yōu)秀的后勤維修人員，隨時解決項目后期維護出現(xiàn)的問題；歡迎關注我們的網(wǎng)店，我們會誰是更新我們的理念，有大家分享！

https://shop370148096.taobao.com/?spm=a230r.7195193.1997079397.2.40Yub7

、什么是css

css的英文全稱是：Cascading Style Sheets，翻譯過來叫：層疊樣式表。

這其中有兩個關鍵字，一個是層疊一個是樣式。

樣式指的是給html調整樣式

層疊指的是可以疊加調整，給一個html的a標簽指定5條樣式，5條樣式疊加起來作用到html的標簽上。

舉個更容易理解的例子：（在index.html中寫一個a標簽）

用css給a標簽加樣式，一共加了五條，具體看圖片中的注釋。

5條樣式都加到了a標簽上面，都生效，這就是層疊的意思了。

二、css的作用

從上面的例子中也可以明顯地感受到，css的主要作用就是美化html的。使用css可以讓html變得更加的豐富多彩。如果學了JavaScript的話就可以讓html動起來。

在正式開講css前，先補充一點關于sublime text的快捷使用方法，這樣我們寫代碼的速度就會變得快起來。

如果還有不知道sublime text是什么的同學，可以返回頭去看看《踏上編程之路的必經(jīng)之路之html篇二》，其中用動圖的方式仔細講解了如何下載它。

在sublime text這款編輯器里面可以快速生成html的主要結構（頭部、體部），接下來看動圖演示：

沒錯，只要輸入一個“!”，按tab鍵就能快速生成html的主要結構代碼了（下圖紅框的框住的就是tab鍵）

除了可以快速生成上面代碼，還以快速生成經(jīng)常使用的各種標簽代碼：（如下圖演示）

如果你要寫一個a標簽，只需要寫a再按tab鍵，sublime text就會自動給你補全代碼。

當然了，還有更快捷的

（接下來快捷生成<a href="https://www.baidu.com">百度</a>）

在“[]”里面寫要給a標簽添加的屬性，在{}里面寫a標簽的文字。如果有多個屬性的就寫兩個“[]”。

具體看動圖演示：

接下來再看看ul和li標簽如何快速生成（ul里面包含5個li）

新聞后面的$用于生成一個序號，當然你也可以不寫，也可以寫兩個，寫兩個的話生成的就會是新聞01、新聞02

在sublime text中只要是html的標簽就可以快捷生成，那在來試一試table

我們學過很多的html標簽，你都可以拿來嘗試一下，要想事半功倍，熟練使用sublime text是個有效的途徑。

三、css的基本格式

在css的初始階段，建議大家把css代碼寫在html的head標簽中。

css代碼的樣式代碼寫在style標簽中。

具體看一下圖：

寫一個a標簽，讓a標簽中的字變?yōu)榧t色

在style中寫css代碼，沒有style，是不會有效果的。style可以寫在任意位置，但是為了代碼規(guī)范，約定俗成都寫在head標簽中。

style中我們先要指定給哪一個標簽添加樣式，這里我們指定了a。這種方式也叫做css選擇器，就是你要給誰添加樣式，你得先指定或者選定一個標簽，然后再寫你要添加的樣式代碼。我們這里選定a，給a添加字體變紅的的樣式。

上面代碼在瀏覽器中的效果如下：

好了，今天的內容就這么多。記得要勤動手練習。

顏色設置的簡便方法

昨天我們在《使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作》（目錄在結尾）中學習了設置單元格以及其中內容的空間間距和背景顏色。

其中添加列向單元格背景顏色只需要修改對應的<tr>標簽中的style屬性，而修改行向標簽需要修改不同<tr></tr>標簽中的<td>標簽的style屬性，這樣操作起來就非常的麻煩，那有沒有簡便的修改行向單元格背景顏色的方法呢？

當然有！

開發(fā)團隊給出了<colgroup><col></col></colgroup>這樣的組合來解決這個問題，下面讓我們詳細學習。

<colgroup></colgroup>標簽是一個給行向單元格打組的標簽，在頁面中不會顯示。

<col></col>標簽是來具體設置行向單元格數(shù)量和顏色的標簽。

示例代碼如下：

<colgroup><col span="1" style="background-color:#ff0000;"></col></colgroup>

這段代碼添加到"第一個頁面.html"當中就可以，具體代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

頁面效果如圖：

因為第一列和最后一列只有一行所以，也都變紅了。

其中span的數(shù)量代表行數(shù)。

如果把span等號后面的數(shù)改成2，因為表格只有兩行，所以整個表格都紅了。

表格嵌套

我們可以通過向表格中添加表格實現(xiàn)表格嵌套。表格嵌套可以把一個單元格分成行向或列向分割單元格。

代碼示例如下：我們把"一列一行"分割成列向兩個單元格。

<tr><td><table border="1" width="100%"><tr><td>1</td><td>2</td></tr></table></td>

使用

<table border="1" width="100%">

<tr>

<td>1</td>

<td>2</td>

</tr>

</table>

這段代碼替換文字"一列一行"即可。

頁面效果如圖所示：

留個思考題，大家可以思考一下行向分割單元格怎么寫。

今天的內容結束了。

全部示例代碼如下：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網(wǎng)頁</title>
  </head> 
  <body>
  <h1>第一個網(wǎng)頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border="1" width="100%">
  <thead>
  <tr>
  <td colspan="2">表格的頭部信息</td>
  </tr>
  </thead>
  <tfoot>
  <tr>
  <td colspan="2">表格的腳部信息</td>
  <tr>
  </tfoot>
  <tbody>
  <caption>表格標題</caption>
  <colgroup>
  <col span="1" style="background-color:#ff0000;"></col>
  </colgroup>
  <tr>
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td>
  <table border="1" width="100%">
  <tr>
  <td>1</td>
  <td>2</td>
  </tr>
  </table>
  </td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td>二列一行</td>
  <td>二列二行</td>
  </tr>
  </tbody>
  </table>
  </body> 
  </html>

喜歡的小伙伴請關注我，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！

學到這里，相信大家已經(jīng)有獨立讀懂HTML代碼說明的能力了，明天我會為大家講解16進制顏色表示方法。之后會給大家推薦html代碼參考手冊的鏈接。如果您是零基礎的話，學完16進制顏色表示方法后，基本上就可以無障礙的閱讀html代碼參考手冊了，如果閱讀起來還是有困難，請繼續(xù)看后面我為大家講解一些常用元素及屬性的文章，已及html中特殊符號的輸入方法，全部做完后再結束這套教程。

如果您有任何疑問或不解歡迎關注并私信我。

HTML完整學習目錄

HTML序章（學習目的、對象、基本概念）——零基礎自學網(wǎng)頁制作

HTML是什么？——零基礎自學網(wǎng)頁制作

第一個HTML頁面如何寫？——零基礎自學網(wǎng)頁制作

HTML頁面中head標簽有啥用？——零基礎自學網(wǎng)頁制作

初識meta標簽與SEO——零基礎自學網(wǎng)頁制作

HTML中的元素使用方法1——零基礎自學網(wǎng)頁制作

HTML中的元素使用方法2——零基礎自學網(wǎng)頁制作

HTML元素中的屬性1——零基礎自學網(wǎng)頁制作

HTML元素中的屬性2（路徑詳解）——零基礎自學網(wǎng)頁制作

使用HTML添加表格1（基本元素）——零基礎自學網(wǎng)頁制作

使用HTML添加表格2（表格頭部與腳部）——零基礎自學網(wǎng)頁制作

使用HTML添加表格3（間距與顏色）——零基礎自學網(wǎng)頁制作

使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網(wǎng)頁制作

16進制顏色表示與RGB色彩模型——零基礎自學網(wǎng)頁制作

HTML中的塊級元素與內聯(lián)元素——零基礎自學網(wǎng)頁制作

初識HTML中的<div>塊元素——零基礎自學網(wǎng)頁制作

在HTML頁面中嵌入其他頁面的方法——零基礎自學網(wǎng)頁制作

封閉在家學網(wǎng)頁制作！為頁面嵌入PDF文件——零基礎自學網(wǎng)頁制作

HTML表單元素初識1——零基礎自學網(wǎng)頁制作

HTML表單元素初識2——零基礎自學網(wǎng)頁制作

HTML表單3（下拉列表、多行文字輸入）——零基礎自學網(wǎng)頁制作

HTML表單4（form的action、method屬性）——零基礎自學網(wǎng)頁制作

HTML列表制作講解——零基礎自學網(wǎng)頁制作

為HTML頁面添加視頻、音頻的方法——零基礎自學網(wǎng)頁制作

音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網(wǎng)頁制作

HTML中使用<a>標簽實現(xiàn)文本內鏈接——零基礎自學網(wǎng)頁制作

在線咨詢

上一篇：如何快速搭建完整的視頻直播系統(tǒng)？- Gitee 項目
下一篇：jQuery第三十一天練習

您的項目需求

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

整合營銷服務商

初級前端語言

顏色設置的簡便方法

HTML完整學習目錄

您的項目需求