您現在的位置是:電腦技術吧?>? 編程技術 ??>??text—decoration,decorative text??>??正文詳情

text—decoration,decorative text

儀弘大2019-11-16 10:10:39 人圍觀
簡介text怎么用定義并使用“文本裝飾”屬性指定添加到文本的裝飾注意:完成的顏色由“顏色”屬性設置表示此屬性允許您設置文本的某些效果,例如下劃線。如果子元素沒有自己的裝飾,

定義和用法  text-decoration 屬性規定添加到文本的修飾。

  注釋:修飾的顏色由 color 屬性設置。

  說明  這個屬性允許對文本設置某種效果,如加下劃線。

如果后代元素沒有自己的裝飾,祖先元素上設置的裝飾會延伸到后代元素中。

不要求用戶代理支持 blink。

  默認值: none  繼承性: no  可能的值  none 默認。

定義標準的文本。

  underline 定義文本下的一條線。

  overline 定義文本上的一條線。

  line-through 定義穿過文本下的一條線。

  blink 定義閃爍的文本。

  inherit 規定應該從父元素繼承 text-decoration 屬性的值。

  實例  設置 h1、h2、h3、h4 元素的文本修飾:  h1 {text-decoration:overline}  h2 {text-decoration:line-through}  h3 {text-decoration:underline}  h4 {text-decoration:blink}  進階  文字可以有更多裝飾  例如:  CSS Code復制內容到剪貼板  a {  text-decoration: underline overline;  }

  可以看到在Almanac 中text-decoration修飾的內容,更具體點,它給子屬性text-decoration-line添加多個屬性值。

  改變裝飾的顏色  下劃線的顏色默認為文本設置color的屬性值,但你可以改變:  CSS Code復制內容到剪貼板  a {  text-decoration-color: #f06d06;  }

  觀察在Almanac中 text-decoration-color修飾的內容。

  注意在Gecko里下劃線是呈現在字體的下面,然而在WebKit/Blink里下劃線呈現在字體的上面:

  如今處理彩色下劃線普遍使用border來代替text-decoration。

邊框可以比text-decoration更好的獨立控制下劃線的顏色,寬度以及位置。

  但有一些事情border是做不了的,就像......  改變裝飾的樣式  border無法實現下面的樣式!  CSS Code復制內容到剪貼板  a {  text-decoration-style: wavy;  }

  觀察Almanac 中text-decoration-style修飾的內容。

  它會變得更好  現如今已經有很多方法可以更好的實現帶下劃線的文本。

例如,使用skip可以更好的增強閱讀性,就像下面一樣:

  上面例子是用 text-decoration-skip實現的,可是并不是所有瀏覽器都支持。

同時,使用較寬松的下劃線以及減少contrast-y的值可能會更好,這里使用了rgba():

  隱藏下劃線只是它的(text-decoration)的一個功能,此外,你也可以用skip修飾一些行內元素,空格,甚至控制edges。

  需要注意的是Safari/iOS瀏覽器似乎會使用默認的skip值。

版權聲明:本文由 儀弘大 整理編輯。

原標題:text-transform,textdecorate

轉載注明出處:http://www.dn9ww09s.icu/program/12799.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 火貓,火貓a杖

    火貓,火貓a杖 相關圖片火貓下載大多數人看直播平臺是為了鎖定幾個大品牌。事實上,還有一些其他的小型直播平臺也相當精彩,比如火烈鳥的直播。火烈鳥的直播以游戲視頻為主,覆蓋了國內外多個電子競...

  • Flash,Flash插件

    Flash,Flash插件 相關圖片nor flash每個人都喜歡漂亮的Flash動畫,但是制作起來有一些技術上的困難。你知道嗎,Dreamweaver作為一個網頁制作工具,也可以創建有趣的flash相冊。今天我們安卓 flash...

  • mv音悅臺,音悅臺MTV都看不了

    mv音悅臺,音悅臺MTV都看不了 相關圖片音悅臺怎么沒有了那些喜歡跟蹤明星八卦、歌手新歌和MV的人,大多會鎖定音樂劇舞臺。藝悅臺是一個專注于高清MV在線欣賞與傳播的音樂分享平臺。緊跟新歌發行速度,通過篩選網友提...

  • IE瀏覽器如何升級到IE11,如何切換到IE瀏覽器

    IE瀏覽器如何升級到IE11,如何切換到IE瀏覽器 相關圖片ie11瀏覽器怎么降到91)如何將Dreamweaver集成到IE瀏覽器中?Dreamweaver安裝程序將在上下文菜單中添加“使用Dreamweaver編輯”命令。我們還可以修改wiie瀏覽器跳轉到谷歌瀏覽器...

  • 免root黑域,黑域免補丁免root

    免root黑域,黑域免補丁免root 相關圖片黑域免root 免adb中國的Android應用程序并不是以標準的方式設計的。許多應用程序,即使不使用它們,也會在后臺啟動。它們不僅占用內存和CPU,而且消耗電力。因此,有許多工具可以免...

  • 文件引用格式,引用文件規定的格式

    文件引用格式,引用文件規定的格式 相關圖片js引用另一個文件的方法CSS外部引用使用外部CSS文件,一般瀏覽器都有緩存功能,所以用戶不需要每次都下載這個CSS文件。與內部參考文獻和內部參考文獻相比,外部參考文獻在節省帶寬...

  • vlookup函數的使用方法詳解,vlookup函數的使用舉例

    vlookup函數的使用方法詳解,vlookup函數的使用舉例 相關圖片excel找兩列不重復數據很多用戶使用Excel僅僅是為了使用表記錄功能,而大量的數據,讓人頭疼。事實上,對于Excel的高級用戶來說,他們將使用函數來處理數據并提高效率。今天我們將...

  • 飛鴿傳書如何使用,怎么用飛鴿傳書傳文件

    飛鴿傳書如何使用,怎么用飛鴿傳書傳文件 相關圖片飛鴿傳書在手機上怎么使用鴿子信使是一款經典的企業即時通信軟件,由于它支持企業即時通信的通用功能,不需要服務器的支持,因此操作簡單,深受企業管理者的喜愛。但是你知道...

  • css3 transition,transitioncss3多個

    css3 transition,transitioncss3多個 相關圖片css3本文通過實例說明了基于CSS3屬性轉換的菜單導航效果。與您分享以供參考。具體如下:CSS3導航菜單,當你的運動層在顯示層下面時,由于在CSS動畫的初始渲染中chcss3on...

  • wifi萬能鑰匙可查看密碼,wife萬能鑰匙怎么看密碼

    wifi萬能鑰匙可查看密碼,wife萬能鑰匙怎么看密碼 相關圖片萬能鑰匙怎么知道無線密碼有時手機流量不夠,而WiFi萬能鑰匙可以緩解這種情況。很多人使用WiFi萬能鑰匙來解決一些熱點問題,但有一點不好,就是這樣,你也不能與其他設備共享密碼...

熱評文章

  • win10沒有mmc文件,win10沒有mmc

    win10沒有mmc文件,win10沒有mmc 相關圖片什么是mmc一些用戶遇到了這樣的情況:MMC或MMC.exe進程在使用win10的過程中報告了一個錯誤。這是一個什么樣的過程?是否可以禁止或刪除?Mmc.exe是系統管理程mmc是誰...

  • mov mp4轉換,mov怎么轉換mp4

    mov mp4轉換,mov怎么轉換mp4 相關圖片格式工廠mov轉換為mp4大多數用戶不熟悉mov格式文件,即QuickTime電影格式。它是蘋果公司開發的一種音頻和視頻文件格式,用于存儲常見的數字媒體類型。對于計算機平臺,可以很容易地...

  • css3彈性盒模型,css的彈性伸縮模型

    css3彈性盒模型,css的彈性伸縮模型 相關圖片html5css3盒子模型Flexbox是一個布局模塊,而不是一個簡單的屬性,它包含父元素和子元素的屬性。flexbox布局的主要思想是可以改變相似元素的大小以適應可用空間。當可用空間變css3盒模...

  • nvcpl,sesvc是什么進程

    nvcpl,sesvc是什么進程 相關圖片啟動nvcpldll時出現問題在進程表中,您對nvcpl感興趣嗎?nvcpl是什么過程?nvcpl是什么啟動項?Nvcpl.dll是NVIDIA顯卡的相關動態鏈接庫文件。因此,nvcpl進程進程是什么...

  • 網頁模板怎么應用,網頁模板與應用

    網頁模板怎么應用,網頁模板與應用 相關圖片html5手機網頁模板為了簡化生產過程。它通常用于先制作頁面,然后應用模板的簡單步驟:打開包含內容的頁面,打開“資源”面板,單擊“模板”按鈕,選擇模板,單擊“應用程序”按...

  • 抖音怎么切換鏡頭,抖音切換鏡頭怎么拍

    抖音怎么切換鏡頭,抖音切換鏡頭怎么拍 相關圖片抖音切換鏡頭視頻教程對于同一個短視頻,有些人可以采取不同的模式,例如,有些用戶可以切換鏡頭,使短視頻更有趣。所以有些用戶想知道如何在短視頻和自助餐之間切換?短視頻...

  • 堅果手機怎么樣,堅果pro3怎么樣

    堅果手機怎么樣,堅果pro3怎么樣 相關圖片錘子手機堅果pro怎么樣5月15日以后,沒有靈魂的蘋果將瘋狂地復制我們。錘子技術創始人羅永浩成功地將外界的目光吸引到了錘子新機螺母R1上。這款革命性的旗艦手機能讓蘋果瘋狂地復...

  • 技巧,快三技巧

    技巧,快三技巧 相關圖片男人 技巧Dreamweaver是一個WYSIWYG網頁編輯器,它集成了網頁制作和網站管理。由于DW的強大功能,我們可以直接在DW中定義CSS(樣式表),這給了我一個小問應用中心...

  • steam failed,steam安裝failed

    steam failed,steam安裝failed 相關圖片steamsetup一些玩家在絕地生存過程中遇到初始化蒸汽失敗的錯誤。原因是什么以及如何解決steam安裝不了...

  • div背景色,div背景色透明度

    div背景色,div背景色透明度 相關圖片打印div背景色代碼如下:div class=header divclass=header﹐leftheader﹐left/div divclass=header﹐rightdcss 背景色...

關注微信

变脸官网查询