WEB前端第十課——CSS字體、文本、列表屬性

時間 2020-07-25

標籤 web 前端第十 css 字體文本列表屬性欄目 HTML 简体版

原文原文鏈接

1.字體屬性css

　　color，規定文本的顏色，如 div{color:red;}html

　　font-style，規定文本顯示方式，如 p.normal {font-style: normal;} ，有normal（正常顯示）、italic（斜體顯示，字體結構有必定變化）、oblique（傾斜顯示，僅僅是文本的傾斜版本）api

　　font-variant，設定小型大寫字母，小型大寫字母不一樣於通常的大寫字母，也不是小寫字母，實例 p {font-variant: small-caps; }，屬性值：normal（默認值）、small-caps（小型大寫字母）、inherit（從父元素繼承）瀏覽器

　　font-weight，設置文本字體粗細，包含4個屬性值：normal（正常，默認值）、bold（粗體）、bolder（更粗）、lighter（更細），還能夠設置「100~900」9個數字等級，400至關於normal，700至關於boldide

　　font-size，設置文本字體大小，如 div {font-size: 30px; }，像素（pixels）一般做爲設定絕對大小的單位，em則做爲設定相對大小的單位，瀏覽器默認的文本字體大小是16px=1em測試

　　font-family，定義文本的字體類別，如 h1 {font-family: 宋體, serif;}，爲了防止用戶代理上沒有安裝設定字體，能夠經過使用特定字體名 + serif通用字體系列的方式來解決這個問題字體

　　相似於background簡寫，也可使用font簡寫url

　　但不一樣於background簡寫的是，書寫font簡寫的屬性值必須嚴格按照官方規定的順序（上述列示的順序，color不屬於font屬性），同時size屬性值和family屬性值必須有spa

2.letter-spacing，設置字符間距，實例：div {letter-spacing: 3px; }代理

3.opacity，針對整個元素設置顏色透明度（包括文本、背景等），屬性值範圍爲「 0~1 」，1爲不透明，0爲徹底透明，和rgba中的「a」做用相同相似

4.overflow，設置內容溢出元素框時顯示方式，經過設置屬性值控制，visible（默認值，內容不會被處理，溢出顯示）、hidden（隱藏）、auto（自動，溢出時顯示滾動條）、scroll（顯示滾動條）

5.text-overflow，設置文本溢出包含元素時的顯示方式，屬性值：clip（修剪文本）、ellipsis（顯示省略號來表明被修剪的文本）、string（使用給定字符串表明被修剪的文本）

6.white-space，設置如何處理元素內的空白和換行

　　屬性值：

　　　　normal，空白和換行符會被瀏覽器忽略

　　　　pre，空白和換行符會被瀏覽器保留

　　　　nowrap，文本在同一行顯示，不會換行

　　　　pre-wrap，保留空白符，但正常進行換行（保留換行符和自動換行）

　　　　pre-line，合併空白符，但保留換行符

　　　　inherit，從父元素繼承white-space屬性值

7.text-align，文本對齊方式，屬性值：left、center、right，實例：p {text-align: center; }

8.text-decoration，規定文字有無裝飾，屬性值：none（默認，無）、underline（文字裝飾下劃線）、overline（文字裝飾上劃線）、line-through（文字裝飾貫穿線，相似刪除線）、blink（文字閃爍）

9.text-transform，設置文本中字母大小寫，屬性值：none（默認，無）、capitalize（將每一個單子的首字母轉換成大寫）、uppercase（所有字母轉換成大寫）、lowercase（所有字母轉換成小寫）

10.text-indent，設置首行文本縮進，屬性值爲數字，實例：p {text-indent: 2em; }，屬性值使用像素（px）也能夠

11.Word-wrap，設置當前行超過指定容器的邊界是是否換行，屬性值：normal（默認，只在容許的斷字點換行）、break-Word（在長單詞或URL地址內部進行換行）

12.vertical-align，設置文本的垂直對齊方式，是容器中元素相對於父元素中內容的對齊方式，

　　　　　　　　經常使用屬性值：top（頂端對齊）、middle（居中對齊）、bottom（底端對齊）、super（垂直對齊文本上標）、sub（垂直對齊文本下標）

　　測試代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css導入</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，設置對象的行高（不容許使用負值），屬性值：normal（默認）、number（設置數字，此數字會與當前字體尺寸相乘來設置行間距/行高）、length（設置固定值行間距）

　　　　　　　咱們通常用行高來使一行文字垂直居中，當行高等於容器高度時，文字垂直居中

14.list-style-image，設置列表項標記的圖像（項目符號），只有一個用於引導圖片的url屬性，語法：ul {list-style-image: url("markimg.jpg"); }

　　　　　　　　　總體項目符號重置需做用於<ul>，單個設置則做用於<li>上

15.list-style-position，設置列表項標記與文本內容如何排列，屬性值：outside（默認，項目符號放在文本之外）、inside（項目符號放在文本之內），語法：ul {list-style-position: inside; }

16.list-style-type，設置列表項所使用的預設標記（效果與HTML中ul行內屬性style相似），屬性值：none（無符號）、disc（實心圓）、circle（空心圓）、square（實心方塊），語法：ul {list-style-type: disc; }

17.list-style簡寫，將以前幾個屬性合併爲一個複合屬性，經過「list-style」一個屬性就能夠定義幾種屬性值，屬性值的書寫順序（非嚴格）：list-style-image list-style-position list-style-type

　　　　　　　　語法實例：ul {list-style: url ("markimg.jpg") outside disc; }，前面設置了圖片，最後還要設置項目符號的目的是，若是圖片未能正常顯示，能夠有項目符號來代替

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。