CSS文本屬性
CSS text（文字）屬性是設定文字的外觀，例如字型顏色、對齊方式、縮排、行間距等。
- 文字顏色
屬性名稱：color。
屬性值：
顏色英文單字：color：red;
16進位顏色值：color：#000000;
RGB程式碼：color: rgb(255,255,255)或rgb(100%,0%,0%)
一般在開發中常用的是十六進位寫法。
程式碼範例：
<head> <style> /* 文字顏色屬性*/ .red { color: red; } .colorNum { color: #f00; } .colorRgb{ color: rgb(255, 0, 0 ); } </style> </head><body> <!-- 文字顏色屬性--> <p class="red">我是文字屬性的單字顏色設定</ p> <p class="colorNum">我是文字屬性的16進位顏色設定</p> <p class="colorRgb">我說文字屬性的rgb顏色設定</p> </body>
程式碼運行介面
- 文字對齊方式
屬性名稱 ：text-align。
屬性值：
「text-align: left」：預設值，文字左對齊。
「text-align：center」：文字居中對齊。
「text-align：right」：文字右對齊。
程式碼範例：
<head> <style> /* 文字對齊方式*/ .l { text-align: left; } .cen { text-align: center; } .ri { text-align: right; } </style> </head><body> <!-- 文字對齊方式--> <p class="l">文字左對齊</p> <p class= "cen">文字會居中對齊</p> <p class="ri">文字右對齊</p></body>運行介面：
- 文字裝飾
屬性：text-decoration。
屬性值：
「text-decoration：none」：預設值，沒有裝飾線。
「text-decoration：underline」：為文字加上底線。
注意：a標籤中自帶底線，可以使用預設值屬性去除a標籤的底線。
「text-decoration：overline」：為文字加上上劃線。
「text-decoration：line-through」：為文字新增刪除線。
程式碼範例：
<head> <style> /* 文字裝飾線*/ .nor { text-decoration: none; } .underl { text-decoration: underline; } .upl { text-decoration: overline; } .lineTh { text-decoration: line-through; } </style> </head><body> <!-- 文字裝飾--> <p class="nor">文字裝飾線：預設狀態</p> <p class="underl">文字裝飾線：文字新增底線</p> <p class="lineTh">文字裝飾線：文字新增刪除線< ;/p> <p class="upl">文字裝飾線：文字加上上劃線</p> <a href="#">我是超連結標籤，文字自帶底線< /a><br> <a href="#" class="nor">我是超連結標籤，文字附帶底線。使用預設值屬性，可移除文字底線</a></body>運行介面：
- 文字縮排
屬性名稱 ：text-indent。通常指段落首行縮排。
屬性值：px或em。
em是一個相對單位，
如果目前元素已經設定文字大小，就依照目前元素1個文字的大小顯示縮排。
如果目前元素中沒有設置，則依照父元素的1個文字大小，即1個em=16px顯示縮排。
程式碼範例：
<head> <style> /* 文字縮排*/ .indEm { text-indent: 2em; /* em是相對單位， 在沒有設定文字大小時，依照預設字體大小，即16px顯示。設定了文字大小，則依照設定的文字大小，幾個em就是幾個文字大小來顯示。 */ } .indPx { /* 像素是絕對單位，設定幾就是幾*/ text-indent: 32px; } </style> </head><body> <!-- 文字縮排-- > <p class="indPx">我是段落標籤，試試看首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。 </p> <p class="indEm">我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。我是段落標籤，試試首行縮排屬性。一般指的是首行縮進，段落的第一行進行縮排。 </p></body>運行介面：
- 行間距
屬性名稱： ling-height。用於設定文字的行高。即行與行之間的距離。
行間距=文字高度+上間距+下間距。 （上間距=下間距）
行間距調整就是設定的上下間距的高
屬性值：px或em。
程式碼範例：
<head> <style> /* 行間距*/ .lH { line-height: 3em; } </style> </head><body> <!-- 行間距--> <p class="lH"> 我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。我是段落標籤，測試行間距屬性。 </p></body>運行介面：
CSS引進方式
分為三類：行內樣式表（行內式）、內部樣式表（內嵌式）、外部樣式表（連結式）
- 行內樣式表：
位置 ：直接寫在元素的開始標籤中。
特色：書寫內容少，權重等級高，只能控制一個標籤，結構樣式混亂。
語法：style=”color: red;”
注意：多個屬性之間使用空格分隔。
程式碼範例：
<p style="color: red;">行內樣式表：在使用屬性的元素開始標籤中直接設定屬性。如給字體設定紅色屬性。 </p><p style="color: red; font-size:28px;">行內樣式表：在使用屬性的元素開始標籤中直接設定屬性。如給字體設定紅色屬性和字體28px。 </p>- 內部樣式表（內嵌式）
特點：部分結構與樣式分離，還是在同一html檔上。
文法：
<style>p {color: red;font-size: 28px;}</style>程式碼範例：
<head> <title></title> <style> .styleP { color: red; font-size: 32px;; } </style></head>< body> <!-- 內部樣式表--> <p class="styleP">內部樣式表：樣式屬性寫在同一個html檔案中的head標籤裡，和title標籤並列。 </p></body>- 外部樣式表（連結式） < /ul>
第一步：建立index.css文件，在文件中輸入樣式屬性，不用任何標籤。
第二步：在html檔案的head標籤中，加入link標籤，引入css檔案。
第三步：為html檔案中需要新增屬性的元素新增選擇器名稱。
特點：結構和樣式全域分離，一個css檔案可以控制多個html頁面。
注意：css檔案中只有樣式沒有標籤，也就是直接書寫標籤器和屬性，不要寫style標籤。
程式碼範例：
第一步：新建index.css文件，設定樣式屬性。
* { margin: 0; padding: 0;}.linC { font-size: 32px; color: blue;}第二步：在html檔案的head標籤中加入link標籤引用css檔案。
<head> <title>CSS樣式引入方式</title> <!-- 外部樣式表--> <link rel="stylesheet" href="./index. css"></head>第三步：在標籤中呼叫屬性。
<body> <!-- 外部樣式表--> <p class="linC"> 外部樣式表：<br> 第一步：新建一個css文件，文件中直接編輯樣式屬性，不需要新增style標籤。 <br> 第二步：使用css文件的html文檔，應該在其head標籤中添加link標籤選擇css文件的存儲位置,<br> 第三步：調用css文件中的樣式。 </p></body>運行介面：
以上就是今天學習的內容，明天繼續學習CSS的相關內容，今天就到這裡了，各位晚安！
文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/chu-shi-CSS-wen-ben-shu-xing-he-yin-yong-fang-shi.html
支付宝扫一扫 
评论列表（196条）
测试