搜尋
首頁web前端css教學css文字設定主要有哪幾項屬性

css文字設定主要的屬性有:font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction等等。

css文字設定主要有哪幾項屬性

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

css文字各種屬性集合

#1、字型屬性

  • font-family:『微軟雅黑'  指定字體Css屬性設定樣式

  • font-size:設定字體大小。

  • font-weight:設定文字的粗細

  • #font-style:設定字體傾斜,可能的屬性有normal、italic、oblique;

  • line-height:設定字型的行間距;

#color 字型顏色

## 2、文字屬性
  • text-align:控製文字的對齊方式
  • text-indent :控製文字首行的縮進,px或%都可;
  • white-space:文檔中的空白處

      屬性值:
    • noraml: 預設忽略多個空格,只輸出一個空格.
    • nowrap: 強制不換行
    • #pre:空格/縮排/換行會給保留
    • pre-line:合併空表(多個空格只會輸出一個空格)
    • pre-warp:保留空白/縮排,正常換行;
  • letter-spacing:控製字母之間的距離;
    • text-overflow:當文字溢出包含元素時發生的事情;
    • 屬性值:
    • clip  修剪文字。
    • ellipsis  顯示省略符號來代表被修剪的文字。
    • string  使用給定的字串來代表被修剪的文字。
  • word-spacing :控制單字間空格的距離,以空格來區分單詞,中英都OK;

3、底線屬性

    text-decoration :控製文字是否有底線,可能值有
  • none  沒有底線
  • overline  定義文字上的一條線。
  • line-through  定義穿過文字下方的一條線。
  • underline  定義文字下的一條線。

4、轉換大小寫

text-transform:

    屬性值:
  • #none(預設) 無轉換;
  • capitalize:每個單字第一個字母為大寫;
  • upercase :轉換成大寫;
  • lowercase:轉換成小寫;

【推薦教學:

CSS影片教學

#5、邊框屬性描述簡寫屬性,用來把針對四個邊的屬性設定在一個宣告。 用來設定元素所有邊框的樣式,或是單獨設定邊框樣式。 簡單寫屬性,用於為元素的所有邊框設定寬度,或單獨地為各邊邊框設定寬度。 簡寫屬性,設定元素的所有邊框中可見部分的顏色,或為 4 個邊分別設定顏色。 簡寫屬性,用來把下邊框的所有屬性設定到一個宣告中。 設定元素的下邊框的顏色。 設定元素的下邊框的樣式。 設定元素的下邊框的寬度。 簡寫屬性,用來把左邊框的所有屬性設定到一個宣告中。 設定元素的左邊框的顏色。 設定元素的左邊框的樣式。 設定元素的左邊框的寬度。 簡寫屬性,用來把右邊框的所有屬性設定到一個宣告中。 設定元素的右邊框的顏色。 設定元素的右邊框的樣式。 設定元素的右邊框的寬度。 簡寫屬性,用來把上邊框的所有屬性設定到一個宣告中。 #設定元素的上邊框的顏色。 設定元素的上邊框的樣式。 設定元素的上邊框的寬度。
屬性
border
border-style
border-width
border-color
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
######

6、盒子陰影

box-shadow:盒子陰影;

可以有五個值  ( h-shadow水平陰影位置,v-shadow垂直陰影位置,blur模糊距離,spread陰影尺寸, color, inset/outset內外陰影) 

eg:

box-shadow: 10px 5px 10px red inset;

7、文字超出換行

  • Word-warp:允許長字轉換到下一行

  • Word-break :允許在單字內轉行(自動換行)

8、文字擺放形式

direction: 文字擺放方向

屬性值:

  • ltl:從左往右

  • rtl:從右往左

9、文字超出換行

  • #Word-warp:允許長字轉換到下一行

  • Word-break:允許在單字內轉行(自動換行) 

#10、文字陰影

  • text-shadow:參考盒子陰影

11、文字單行超出顯示省略號

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

12、多行文字超出用省略號取代限制行數 

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

更多程式相關知識,請造訪:程式設計影片! !

以上是css文字設定主要有哪幾項屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
我們如何標記Google字體並創建Goofonts.com我們如何標記Google字體並創建Goofonts.comApr 12, 2025 pm 12:02 PM

Goofonts是由開發人員和設計師丈夫簽名的附帶項目,它們都是版式的忠實擁護者。我們一直在標記Google

永恆的Web開發文章永恆的Web開發文章Apr 12, 2025 am 11:44 AM

Pavithra Kodmad向人們詢問了他們認為是關於網絡開發的一些最永恆的文章的建議

與部分元素的交易與部分元素的交易Apr 12, 2025 am 11:39 AM

同一天發表了兩篇文章:

使用JavaScript API練習GraphQl查詢使用JavaScript API練習GraphQl查詢Apr 12, 2025 am 11:33 AM

學習如何構建GraphQL API可能具有挑戰性。但是您可以學習如何在10分鐘內使用GraphQL API!碰巧的是,我得到了完美的

組件級CMS組件級CMSApr 12, 2025 am 11:09 AM

當一個組件生活在數據查詢居住在附近的數據查詢的環境中時,視覺組件和

將類型設置在圓上...帶偏移路徑將類型設置在圓上...帶偏移路徑Apr 12, 2025 am 11:00 AM

這裡是Yuanchuan的一些合法CSS騙局。有此CSS屬性偏移路徑。曾幾何時,它被稱為Motion-Path,然後被更名。我

'恢復”在CSS中有什麼作用?'恢復”在CSS中有什麼作用?Apr 12, 2025 am 10:59 AM

Miriam Suzanne在Mozilla開發人員的視頻中解釋了該主題。

現代戀人現代戀人Apr 12, 2025 am 10:58 AM

我喜歡這樣的東西。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解鎖Myrise中的所有內容
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能