css字體樣式+文本樣式

時間 2020-02-01

標籤 css 字體樣式文本欄目 CSS 简体版

原文原文鏈接

font-family屬性值：具體字體名或者字體集css

若是是中文或者有單詞之間有空格，須要加雙引號html

字體集：web

Serif （有裝飾線）api

Sans-serif （無裝飾線）瀏覽器

Monospace安全

Cursiveweb安全

Fantasy字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        h1{
            font-family: "Times New Roman";
        }
        p{
            font-family: "微軟雅黑","宋體","黑體",sans-serif;
        }
    </style>
</head>
<body>
    <h1>css層疊樣式表</h1>
    <p>什麼是css層疊樣式表呢？</p>
</body>
</html>

font-size 相對單位spa

px （受顯示器分辨率影響，在手機端通常不使用）code

em （針對父元素）

% （針對父元素）

字體顏色

可查詢web安全色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*rgb數字：0~255*/
        h1{
            color:rgb(0,255,0);
        }
        /*rgb百分比：0%~100%*/
        p{
            color:rgb(0%,100%,0%);
        }
        p.spe{
            color:#008800;/*#開頭，六位，0~F*/
            color:#080;/*簡寫*/
        }
    </style>
</head>
<body>
    <h1>css層疊樣式表</h1>
    <p>什麼是css層疊樣式表呢？</p>
    <p class="spe">顏色十六進制</p>
</body>
</html>

font-variant:small-caps 小型大寫字母

css文本樣式

text-align 只對塊級元素有效：能夠在元素外嵌套塊級元素，給外元素添加text-align屬性

margin:0 auto; 也能夠設置元素居中顯示

line-height

實際開發中，行高通常使用em單位，與字體大小相關

瀏覽器默認行高通常是1.2em

行高能夠繼承自父元素，繼承的是計算後的值，而不是直接繼承百分比

首行縮進 text-indent

vertical-align 對行內元素或者單元格元素生效

能夠用在圖片上 vertical-align:middle;

或者能夠用具體的數值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .wrap{
            height:400px;
            width:500px;
            border:1px solid;
            display: table;/*轉爲表格元素*/
        }
        .content{
            vertical-align: middle;
            text-align:center;
            display: table-cell;/*轉爲單元格元素*/
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="content">
            <p>什麼是<span class="sub">css</span>層疊樣式表呢？</p>
            <p>什麼是<span class="super">css</span>層疊樣式表呢？</p>
        </div>
    </div>
    
</body>
</html>