使用HTML添加表格3（間距與顏色）-零基礎自學網頁制作

格空間設置

通過為<table></table>標簽的cellspacing進行賦值可以調整單元格與單元格之間的空間距離。

示例代碼如下：

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

頁面效果如下：

下面我們刪除cellspacing = "50"這段代碼看看變化，如圖：

通過對比，大家應該明白cellspacing這個屬性的作用了吧。

通過為<table></table>標簽的cellpadding進行賦值可以調整單元格邊框與單元格內容之間的空間距離。

示例代碼如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20">

頁面效果如下：

通過與上圖對比，我們不難發現變化。

設置表格顏色

這里我們要介紹一個全局屬性style，對，你沒看錯！就是freestyle的那個style！英文翻譯過來是"樣式"、"風格"的意思。我們通過這個屬性可以為表格設置顏色。實際上，可以為任何html元素設置顏色、大小、排列等不同屬性！

值得一提的是把style信息如果寫到一個獨立文件中，并保存為css文件，就是以后我們要學的CSS層疊樣式列表了。

這里我們先來簡單了解一下它作為html的一個全局屬性的用法。

示例代碼如下：

<table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">

頁面效果如圖所示：

我們來分析一下這段代碼，寫法和其他屬性大同小異。

首先也是才有"屬性"="數值"的寫法，具體是：style=""

是不是和其他屬性寫法一樣？

但是到了雙引號里面就不同了，比如width屬性只需要為其賦值就可以，比如width="100%"。

而style是在雙引號里面再指定屬性。例如：style="background-color"。

然后我們再為background-color（背景顏色）屬性賦值。

這時，賦值的寫法就發生變化了，不是使用=號，而是使用：。

例如style="background-color ： #00ffff；"

大家注意的是為其賦值后，要用；結尾。這個；必須要添加，因為，通過style可以指定多個不同的樣式屬性，在指定多個樣式屬性時，我們使用；分割。

#00ffff這個符號是色彩的16進制表示方法，這個顏色是藍色。

#000000這個符號的顏色是黑色。

#ffffff這個符號是白色。

這個顏色的算法我們會在下一期中詳細講解，感興趣的小伙伴請關注！

大家想一想。如何為一列單元格指定背景顏色呢？

示例代碼如下：我們為表格標題欄賦予綠色。

<tr style = "background-color: #00ff00;"><th>姓名</th><th>年齡</th></tr>

頁面效果如圖所示：

下面我們為"一列一行"、"二列一行"賦予紅色。

示例代碼如下：

<tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
</tr>
<tr>
    <td style = "background-color: #ff0000;">二列一行</td>
    <td>二列二行</td>
</tr>

頁面效果如下：

今天的內容到此結束了，一下是今天示例的全部代碼：

<!DOCTYPE HTML>
  <html>
  <head> 
  <title>第一個網頁</title>
  </head> 
  <body>
  <h1>第一個網頁</h1><hr>
  <h2>表格元素</h2><hr>
  <table border = "1" width = "100%" cellspacing="10" cellpadding = "20" style = "background-color: #00ffff;">
  <caption>表格標題</caption>
  <tr style = "background-color: #00ff00;">
  <th>姓名</th>
  <th>年齡</th>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">一列一行</td>
  <td>一列二行</td>
  </tr>
  <tr>
  <td style = "background-color: #ff0000;">二列一行</td>
  <td>二列二行</td>
  </tr>
  </table>
  </body> 
  </html>

明天將繼續為大家講解頁面制作中16進制的顏色指定方式和另外一種表格顏色指定方式。

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

HTML完整學習目錄

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

HTML是什么？——零基礎自學網頁制作

第一個HTML頁面如何寫？——零基礎自學網頁制作

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

初識meta標簽與SEO——零基礎自學網頁制作

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

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

HTML元素中的屬性1——零基礎自學網頁制作

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

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

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

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

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

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

HTML中的塊級元素與內聯元素——零基礎自學網頁制作

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

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

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

HTML表單元素初識1——零基礎自學網頁制作

HTML表單元素初識2——零基礎自學網頁制作

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

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

HTML列表制作講解——零基礎自學網頁制作

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

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

HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作

內容首發于工粽號：程序員大澈，每日分享一段優質代碼片段，歡迎關注和投稿！

大家好，我是大澈！

本文約 1100+ 字，整篇閱讀約需 2 分鐘。

今天分享一段優質 CSS 代碼片段，應用灰度效果，讓頁面變成黑白顯示。

老規矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評論區留下你的見解！


body {
  filter: grayscale(1); // 1相當于100%
}

分享原因

這段代碼展示了如何使用 CSS 濾鏡來將整個網頁變為灰度效果。

在特殊的日子里，網頁有整體變灰色的需求，可以使用這段代碼，這個需求很有必要。

再就是做一些老照片或黑白電影的效果，也可以使用這段代碼。

代碼解析

1. 選擇器 body

這一部分選擇了 HTML 文檔的 <body> 元素，即整個網頁的主體。

CSS 的 filter 屬性通常用于圖像，但也可以應用到其他任何 HTML 元素上。

2. grayscale(1);

grayscale 濾鏡將元素的顏色變成灰度效果。

參數 1 表示 100% 灰度，參數 0 表示無灰度效果。

3. filter 所有屬性值大盤點！

CSS 的 filter 屬性提供了多種圖形效果，且這些屬性值可以組合用起來，且可以應用于任何元素。

以下是 filter 屬性的所有值及其詳細解釋：

blur()

功能：應用模糊效果。

參數：接受一個長度值（如 px、em），默認值是 0。

示例：filter: blur(5px);

brightness()

功能：調整圖像的亮度。

參數：接受一個數值，1 為原始亮度。值小于 1 會降低亮度，值大于 1 會增加亮度。

示例：filter: brightness(0.5);

contrast()

功能：調整圖像的對比度。

參數：接受一個數值，1 為原始對比度。值小于 1 會降低對比度，值大于 1 會增加對比度。

示例：filter: contrast(200%);

drop-shadow()

功能：應用陰影效果。

參數：類似于 box-shadow，包括偏移量、模糊半徑和顏色。

示例：filter: drop-shadow(10px 10px 10px #000);

grayscale()

功能：將圖像變為灰度。

參數：接受一個 0 到 1 之間的數值，0 為無灰度，1 為完全灰度。

示例：filter: grayscale(1);

hue-rotate()

功能：旋轉圖像的色相。

參數：接受一個角度值，單位為度（deg）。

示例：filter: hue-rotate(90deg);

invert()

功能：反轉圖像的顏色。

參數：接受一個 0 到 1 之間的數值，0 為無效果，1 為完全反轉。

示例：filter: invert(1);

opacity()

功能：調整圖像的透明度。

參數：接受一個 0 到 1 之間的數值，0 為完全透明，1 為完全不透明。

示例：filter: opacity(0.5);

saturate()

功能：調整圖像的飽和度。

參數：接受一個數值，1 為原始飽和度。值小于 1 會降低飽和度，值大于 1 會增加飽和度。

示例：filter: saturate(2);

sepia()

功能：將圖像變為棕褐色。

參數：接受一個 0 到 1 之間的數值，0 為無效果，1 為完全棕褐色。

示例：filter: sepia(1);

url()

功能：引用 SVG 濾鏡。

參數：接受一個 URL，指向一個包含 SVG 濾鏡的文件。

示例：filter: url(#filter-id);

- end -

TML 樣式實例 - 背景顏色

background-color 屬性為元素定義了背景顏色：

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML樣式：好看的顏色字體是有方法的

在線咨詢

上一篇：javascript自學記錄：表單腳本2
下一篇：程序員都應該了解的一種數據格式之 JSON

您的項目需求

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

整合營銷服務商

使用HTML添加表格3（間距與顏色）-零基礎自學網頁制作

格空間設置

HTML完整學習目錄

TML 樣式實例 - 背景顏色

您的項目需求