修飾之美:CSS在表格邊框上的美學應用

2020-12-12 站長之家
首頁

 > 

教程

 > 

關鍵詞

 > 

最新資訊

 > 

正文

修飾之美:CSS在表格邊框上的美學應用

我們知道Dreamweaver在表格製作方面做得非常出色,但是在某些時候還是必須結合css才能達到一些特定效果,下面我們先把有關表格邊框的css語法整理出來,然後另外介紹怎樣用css美化表格的邊框。

有關表格邊框的css語法

具體內容包括:上邊框寬度、右邊框寬度、下邊框寬度、左邊框寬度、邊框寬度、邊框顏色、邊框樣式、上邊框、下邊框、左邊框、右邊框、邊框、寬度、高度、有關標籤等。

1.上邊框寬度

語法: border-top-width: <值>

允許值: thin | medium | thick | <長度>

初始值: medium

適用於: 所有對象

向下兼容: 否

上邊框寬度屬性用於指定一個元素上邊框的寬度。值可以是三個關鍵字其中的一個,都不受字體大小或長度的影響,可以用於實現成比例的寬度。不允許使用負值。也可以用在上邊框、邊框的寬度或邊框的屬性略寫。

2.右邊框寬度

語法: border-right-width: <值>

允許值: thin | medium | thick | <長度>

初始值: medium

適用於: 所有對象

向下兼容: 否

右邊框寬度屬性用於指定元素的右邊框的寬度。值可以是三個關鍵字其中的一個,都不受字體大小或長度的影響,可以用於實現成比例的寬度。不允許使用負值。也可以用在右邊框、邊框的寬度或邊框的屬性略寫。

3.下邊框寬度

語法: border-bottom-width: <值>

允許值: thin | medium | thick | <長度>

初始值: medium

適用於: 所有對象

向下兼容: 否

下邊框寬度屬性用於指定元素的下邊框的寬度。值可以是三個關鍵字其中的一個,都不受字體大小或長度的影響,可以用於實現成比例的寬度。不允許使用負值。也可以用在下邊框、邊框的寬度或邊框的屬性略寫。

4.左邊框寬度

語法: border-left-width: <值>

允許值: thin | medium | thick | <長度>

初始值: medium

適用於: 所有對象

向下兼容: 否

左邊框寬度屬性用於指定元素的左邊框的寬度。值可以是三個關鍵字其中的一個,都不受字體大小或長度的影響,可以用於實現成比例的寬度。不允許使用負值。也可以用在左邊框、邊框的寬度或邊框的屬性略寫。

5.邊框寬度

語法: border-width: <值>

允許值: [ thin | medium | thick | <長度> ]{1,4}

初始值: 未定義

適用於: 所有對象

向下兼容: 否

邊框寬度屬性用一到四個值來設置元素的邊界,值是一個關鍵字或長度。不允許使用負值長度。如果四個值都給出了,它們分別應用於上、右、下和左邊框的式樣。如果給出一個值,它將被運用到各邊上。如果兩個或三個值給出了,省略了的值與對邊相等。 這個屬性是上邊框寬度、右邊框寬度、下邊框寬度和左邊框寬度屬性的略寫。也可以使用略寫的邊框屬性。

6.邊框顏色

語法: border-color: <值>

允許值: <顏色>{1,4}

初始值: 顏色屬性的值

適用於: 所有對象

向下兼容: 否

邊框顏色屬性設置一個元素的邊框顏色。可以使用一到四個關鍵字。如果四個值都給出了,它們分別應用於上、右、下和左邊框的式樣。如果給出一個值,它將被運用到各邊上。如果兩個或三個值給出了,省略了的值與對邊相等。也可以使用略寫的邊框屬性。

7.邊框樣式

語法: border-style: <值>

允許值: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ]{1,4}

初始值: none

適用於: 所有對象

向下兼容: 否

邊框樣式屬性用於設置一個元素邊框的樣式。這個屬性必須用於指定可見的邊框。可以使用一到四個關鍵字。如果四個值都給出了,它們分別應用於上、右、下和左邊框的式樣。如果給出一個值,它將被運用到各邊上。如果兩個或三個值給出了,省略了的值與對邊相等。也可以使用略寫的邊框屬性。

none:無樣式;

dotted:點線;

dashed:虛線;

solid:實線;

double:雙線;

groove:槽線;

ridge:脊線;

inset:內凹;

outset:外凸;

相關焦點

  • CSS在表格邊框上的美學應用
    首頁 > 教程 > 關鍵詞 > 最新資訊 > 正文 CSS在表格邊框上的美學應用
  • css樣式如何美化表格和邊框的外觀?
    如今大家習慣了使用DIV+CSS布局頁面,其實table+css曾經也是流行的頁面布局方式。下面深圳市博納網絡信息技術有限公司介紹css樣式如何美化表格和邊框的外觀。1.表格邊框:使用border屬性可用設置表格的邊框。例如下面這段代碼,使用border屬性設置了<table>、<bh>和<td>的邊框屬性,效果如圖。2.摺疊邊框:使用border-collapse屬性設置是否表格邊框摺疊為單一邊框。
  • 【教程】html+css零基礎入門教程之CSS邊框
    CSS border 屬性允許你規定元素邊框的樣式、寬度和顏色。CSS 邊框通過使用 CSS 邊框屬性,我們可以創建出效果出色的邊框,並且可以應用於任何元素。每個邊框有 3 種屬性:寬度、樣式,以及顏色。CSS 邊框與背景CSS 規範指出,邊框繪製在"元素的背景之上"。
  • CSS表格樣式
    CSS中的表格樣式有caption-side(表格標題位置)、border-collapse(表格邊框合併)、border-spacing(表格邊框間距)。 DOCTYPE html><html>    <head>        <meta charset="UTF-8" />        <title>表格標題位置</title>        <style type="text/css">
  • 網頁設計:關於CSS框架網頁的設計!
    b) 布局 layout.css   定義頁面是二欄還是三欄,是全屏還是1024×768……   一個網站的設計可能有很多種布局,但是大多數都是由幾個具有復用性的布局組成,選擇性的引入所需要的布局,可以很快地應用所期望的頁面布局。
  • 表格對決CSS--一場生死之戰
    一個客戶/伺服器(client/server) 應用程式,它通過執行FTP傳輸,遠程登錄(remote login), Archie 查找等,把所有信息以菜單形式顯示給最終用戶(end-user),使用戶能瀏覽大量信息。這樣用戶訪問 Internet資源時可以不需要知道(或輸入)其地址。
  • HTML之表格布局與美化
    本文主要討論表格的布局及美化。首先我們通過表1來看HTML中表格包含哪些標籤及屬性以及表2中表格的css屬性。表2:表格css屬性其中有幾個屬性是我們常用來實現表格布局及美化的:1、rowspan和colspan分別規定單元格橫跨的行數和列數
  • 網頁設計之css+div PK table+css
    首頁 > 教程 > 關鍵詞 > CSS最新資訊 > 正文 網頁設計之css+div PK table+css
  • 表格中數據格式設置對齊方式與邊框底紋的設置—想像力電腦應用
    一、表格文本對齊方式的設置在Word 2013的表格中,提供了9種對齊方式,分別是:靠上兩端對齊、靠上居中對齊、靠上右對齊、中部兩端對齊、水平居中對齊、中部右對齊、靠下兩端對齊、靠下居中對齊和靠下右對齊,我們可以根據自己的需要進行設置。
  • 網頁布局:CSS控制表格嵌套
    網頁設計應用中,當我們不能完全放棄表格的使用時,為了達到預期的效果,不免要用到表格嵌套(特別是多層嵌套)方式來進行布局。可能很多同仁都遇到過這樣的問題,對了達到顯示效果要為每一個(每一層)的表格寫不同的CSS代碼或加不同的屬性值。這樣寫出來的代碼可讀性非常差,不便修改和管理。學會用CSS中的偽類這個問題就迎刃而解了,看一看我的處理方法吧。
  • 前端開發必備的CSS命名規範與常用CSS代碼集合
    6)、給每一個表格和表單加上一個唯一的、結構標記id,給圖片加上alt標籤7)、儘量使用英文命名原則,儘量不縮寫,除非一看就明白的單詞二、CSS命名規則參考表CSS樣式命名說明#wrapper頁面外圍控制整體布局寬度#container或#content容器,用於最外層
  • CSS教程之超級快速入門教程
    css是一種用來表現HTML(標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁,還可以配合各種腳本語言動態地對網頁各元素進行格式化。
  • HTML CSS整理筆記
    /"表示上上級目錄15.超連結的應用場合: (1)頁面間連結:如<a href="login.html" target="_blank">為您跳轉到登錄頁</a> (2)錨連結: 先在目標位置B設置標記如:<a name="new">這裡是目標位置</a>, 然後在A位置設置連結路徑
  • 詳解DIV+CSS與表格建站的區別
    而且既然都是生成HTML,那對伺服器來說影響的效果是一樣的,只要你的虛擬主機網絡穩定,那麼在table和div+css上就沒差別。但是使用table製作網頁框架和表格時,全是選擇化製作的,也就是說不用大家去寫代碼,很簡單輸入邊框和行數列數就可以達到製作出來的要求,但是使用div+CSS時,完全是靠手寫代碼,一個表格寫四行代碼的話,如果一個頁面涉及十多個div表格生成,手寫代碼將超過50行,而且如果你數學不好,或是邏輯思維能力不強的話,你手寫出來的表格將是亂78糟,出現表格重疊和位置完全不正確。
  • 03.HTML頭部/CSS/圖像/表格/列表
    內聯樣式當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下實例顯示出如何改變段落的顏色和左外邊距。CSS修飾標籤的樣式,有 "內聯" 和 "外引" 兩種方式。對於大部分標籤,以上兩種方法均可,且修改父級標籤,子級標籤特性也會改變。但某些標籤確無法通過修改父級標籤來改變子級標籤特性,如a標籤,修改其顏色特性,必須直接修改 a 標籤的特性才可。
  • JYFrontEndTutorial-html5+css3^1.0.0【第1節】
    css=>裝修裝飾)知識點解析:1、css是用來修飾html樣式的 2、html本身是有一些默認樣式,如果我們想改變html標籤的樣式,就需要藉助css 3、html+css構成了我們網頁的基本頁面結構和樣式
  • CSS沒那麼難,入門篇(一)
    CSS不僅可以修飾網頁,還可以配合Javascript等各種腳本語言動態地對網頁各元素進行格式化。(雙線邊框)、groove(3D凹槽邊框)、ridge(3D壟狀邊框)、inset(3Dinset邊框)、outset(3Doutset邊框),部分瀏覽器不支持以上部分邊框;border-color定義邊框顏色;border-top定義上邊框;border-top-width
  • web前端學習路線css屬性
    還有必須學一些框架,比如VUE、angular、react等等,這些就會難理解一些,但是公司是需要要求你會框架的,目前國內的公司應用VUE比較多,建議至少學兩個框架,這是找到的基本需求。Ajax技術是web前端工作者必須掌握的技能。還有html5、css3、canvas、svg等技術,這些都是現在找web前端必須掌握的東西。
  • 用CSS邊框圖像讓你的網站更漂亮
    值得一提的是,你使用的圖片不需要匹配邊框的寬和高,一張小圖片就可以裝飾你的網站,如例子中的element可任意調整其圖片的大小並且可以自動識別適應屏幕的尺寸。 border-image-slice 屬性 在你使用border-image-source 屬性選擇一張圖片之後,你可以應用border-image-slice 屬性。
  • CSS核心基礎之CSS基礎知識介紹
    樣式表是由一系列樣式選擇器和CSS屬性組成,它支持字體屬性、顏色和背景屬性、文本屬性、邊框屬性、列表屬性以及精確定位網頁元素屬性等,增強了網頁的格式化功能。CSS樣式實際上可以看成是屬性的集合。2. CSS的特點除了可擴展HTML的樣式設定外,CSS的特點主要包含如下幾點:1.減少圖形文件的使用。2.集中管理樣式信息。3.共享樣式設定。4.將樣式分類使用。3.