CSS字體、文本、列表屬性詳細(xì)介紹
我要評論1.字體屬性
color，規(guī)定文本的顏色，如 div{color:red;}
font-style，規(guī)定文本顯示方式，如 p.normal {font-style: normal;} ，有normal（正常顯示）、italic（斜體顯示，字體結(jié)構(gòu)有一定變化）、oblique（傾斜顯示，僅僅是文本的傾斜版本）
font-variant，設(shè)定小型大寫字母，小型大寫字母不同于一般的大寫字母，也不是小寫字母，實(shí)例 p {font-variant: small-caps; }，屬性值：normal（默認(rèn)值）、small-caps（小型大寫字母）、inherit（從父元素繼承）
font-weight，設(shè)置文本字體粗細(xì)，包含4個屬性值：normal（正常，默認(rèn)值）、bold（粗體）、bolder（更粗）、lighter（更細(xì)），還可以設(shè)置“100~900”9個數(shù)字等級，400相當(dāng)于normal，700相當(dāng)于bold
font-size，設(shè)置文本字體大小，如div {font-size: 30px; }，像素（pixels）通常作為設(shè)定絕對大小的單位，em則作為設(shè)定相對大小的單位，瀏覽器默認(rèn)的文本字體大小是16px=1em
font-family，定義文本的字體類別，如h1 {font-family:宋體, serif;}，為了防止用戶代理上沒有安裝設(shè)定字體，可以通過使用特定字體名 +serif通用字體系列的方式來解決這個問題
類似于background簡寫，也可以使用font簡寫
但不同于background簡寫的是，書寫font簡寫的屬性值必須嚴(yán)格按照官方規(guī)定的順序（上述列示的順序，color不屬于font屬性），同時size屬性值和family屬性值必須有
2.letter-spacing，設(shè)置字符間距，實(shí)例：div {letter-spacing: 3px; }
3.opacity，針對整個元素設(shè)置顏色透明度（包括文本、背景等），屬性值范圍為“ 0~1 ”，1為不透明，0為完全透明，和rgba中的“a”作用相同類似
4.overflow，設(shè)置內(nèi)容溢出元素框時顯示方式，通過設(shè)置屬性值控制，visible（默認(rèn)值，內(nèi)容不會被處理，溢出顯示）、hidden（隱藏）、auto（自動，溢出時顯示滾動條）、scroll（顯示滾動條）
5.text-overflow，設(shè)置文本溢出包含元素時的顯示方式，屬性值：clip（修剪文本）、ellipsis（顯示省略號來代表被修剪的文本）、string（使用給定字符串代表被修剪的文本）
6.white-space，設(shè)置如何處理元素內(nèi)的空白和換行
屬性值：
normal，空白和換行符會被瀏覽器忽略
pre，空白和換行符會被瀏覽器保留
nowrap，文本在同一行顯示，不會換行
pre-wrap，保留空白符，但正常進(jìn)行換行（保留換行符和自動換行）
pre-line，合并空白符，但保留換行符
inherit，從父元素繼承white-space屬性值
7.text-align，文本對齊方式，屬性值：left、center、right，實(shí)例：p {text-align: center; }
8.text-decoration，規(guī)定文字有無裝飾，屬性值：none（默認(rèn)，無）、underline（文字裝飾下劃線）、overline（文字裝飾上劃線）、line-through（文字裝飾貫穿線，類似刪除線）、blink（文字閃爍）
9.text-transform，設(shè)置文本中字母大小寫，屬性值：none（默認(rèn)，無）、capitalize（將每個單子的首字母轉(zhuǎn)換成大寫）、uppercase（全部字母轉(zhuǎn)換成大寫）、lowercase（全部字母轉(zhuǎn)換成小寫）
10.text-indent，設(shè)置首行文本縮進(jìn)，屬性值為數(shù)字，實(shí)例：p {text-indent: 2em; }，屬性值使用像素（px）也可以
11.Word-wrap，設(shè)置當(dāng)前行超過指定容器的邊界是是否換行，屬性值：normal（默認(rèn)，只在允許的斷字點(diǎn)換行）、break-Word（在長單詞或URL地址內(nèi)部進(jìn)行換行）
12.vertical-align，設(shè)置文本的垂直對齊方式，是容器中元素相對于父元素中內(nèi)容的對齊方式，
常用屬性值：top（頂端對齊）、middle（居中對齊）、bottom（底端對齊）、super（垂直對齊文本上標(biāo)）、sub（垂直對齊文本下標(biāo)）
測試代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css導(dǎo)入</title>
<style>
div{
width: 500px;
height: 300px;
background-color: aquamarine;
}
a{
display: inline-block;height: 150px; width: 100px; background-color: blanchedalmond;
vertical-align:bottom; margin: 3em 0em 0em 0em;
}
</style>
</head>
<body>
<div>
測試vertical-align垂直對齊方式
<a href="">空鏈接</a>
</div>
</body>
</html>
測試效果：
13.line-height，設(shè)置對象的行高（不允許使用負(fù)值），屬性值：normal（默認(rèn)）、number（設(shè)置數(shù)字，此數(shù)字會與當(dāng)前字體尺寸相乘來設(shè)置行間距/行高）、length（設(shè)置固定值行間距）
我們一般用行高來使一行文字垂直居中，當(dāng)行高等于容器高度時，文字垂直居中
14.list-style-image，設(shè)置列表項(xiàng)標(biāo)記的圖像（項(xiàng)目符號），只有一個用于引導(dǎo)圖片的url屬性，語法：ul {list-style-image: url("markimg.jpg"); }
整體項(xiàng)目符號重置需作用于<ul>，單個設(shè)置則作用于<li>上
15.list-style-position，設(shè)置列表項(xiàng)標(biāo)記與文本內(nèi)容如何排列，屬性值：outside（默認(rèn)，項(xiàng)目符號放在文本以外）、inside（項(xiàng)目符號放在文本以內(nèi)），語法：ul {list-style-position: inside; }
16.list-style-type，設(shè)置列表項(xiàng)所使用的預(yù)設(shè)標(biāo)記（效果與HTML中ul行內(nèi)屬性style類似），屬性值：none（無符號）、disc（實(shí)心圓）、circle（空心圓）、square（實(shí)心方塊），語法：ul {list-style-type:disc; }
17.list-style簡寫，將之前幾個屬性合并為一個復(fù)合屬性，通過“list-style”一個屬性就可以定義幾種屬性值，屬性值的書寫順序（非嚴(yán)格）：list-style-image list-style-position list-style-type
語法實(shí)例：ul {list-style: url ("markimg.jpg") outside disc; }，前面設(shè)置了圖片，最后還要設(shè)置項(xiàng)目符號的目的是，如果圖片未能正常顯示，可以有項(xiàng)目符號來代替
到此這篇關(guān)于CSS字體、文本、列表屬性的文章就介紹到這了,更多相關(guān)CSS字體文本列表屬性內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了 css常用字體屬性與背景屬性，css可以做出很多使html樣式的改變,今天主要說一說字體樣式與背景樣式，字體樣式的分類根據(jù)名字就可以判斷出來，下面文章的2022-02-25
這篇文章主要介紹了讓我來教你使用css中的字體圖標(biāo)的方法,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-17
CSS font-variation 可變字體的魅力(實(shí)例詳解)
本系列文章圍繞 CSS/Web動畫 展開，涉及一些容易忽視或是十分有趣的 CSS 細(xì)節(jié)。對CSS font-variation 可變字體實(shí)現(xiàn)代碼感興趣的朋友一起看看吧2022-03-03
