css字體樣式+文本樣式_ZenDei技術網路在線

css字體樣式+文本樣式

-Advertisement-

font-family屬性值：具體字體名或者字體集如果是中文或者有單詞之間有空格，需要加雙引號字體集： Serif （有裝飾線） Sans-serif （無裝飾線） Monospace Cursive Fantasy <!DOCTYPE html> <html lang="en"> <head> ...

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

如果是中文或者有單詞之間有空格，需要加雙引號

字體集：

Serif （有裝飾線）

Sans-serif （無裝飾線）

Monospace

Cursive

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 相對單位

px （受顯示器解析度影響，在手機端一般不使用）

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>

word-spacing 單詞間距

letter-spacing 字母間距

單詞的判斷以空格為準

text-transform:capitalize | uppercase | lowercase | none 設置文字大小寫

text-decoration:underline | line-through | overline | none 設置文字裝飾線

也可以設置多個樣式 text-decoration:underline overline;

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

position定位及實際應用

position: static; 靜態定位 / 常規定位 / 自然定位忽略top/right/bottom/left/z-index的影響，使元素回到自然流中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl ...
2019年度前端知識點總結

本文旨在整理和記錄 2019年度從事前端工作的過程中遇到的問題以及解決問題的思路。內容偏新手且敘述不深，整理的目的是為了方便以後快速查閱之前遇到過的問題。 ...
float浮動以及案例演示

浮動元素會影響後邊的元素，但不會影響前邊的元素清除浮動：方法一：在浮動元素後面添加一個空元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ ...
jQuery---offset方法和position方法

offset方法和position方法獲取元素的相對於document的位置 //獲取元素的相對於document的位置 $(".son").offset(); console.log($(".son").offset()); 獲取元素相對於有定位的父元素的位置 //獲取元素相對於有定位的父元素的 ...
jQuery---小火箭返回頂部案例

小火箭返回頂部案例 1. 滾動頁面，當頁面距離頂部超出1000px，顯示小火箭。封裝在scroll函數里，當前頁面距離頂部為$(window).scrollTop >=1000 小火箭顯示和隱藏用fadeIn和fadeOut //當頁面超出1000px的時候，讓小火箭顯示，如果小於1000px，則 ...
css背景顏色、背景圖片，以及列表的多種樣式

背景樣式 • background-color 設置元素的背景顏色。• background-image 把圖像設置為背景。• background-position 設置背景圖像的起始位置。• background-attachment 背景圖像是否固定或者隨著頁面的其餘部分滾動。• backgr ...
css的盒子模型

width和height是指content內容的寬高當width的值小於min-width時，則寬度為min-width 當width的值大於max-width時，則寬度為max-width min-width和max-width存在相容性問題，在IE6以下不支持哪些元素可以設置寬高屬性塊級元 ...
vue(五)--雙向綁定（v-model）

1.簡單使用：當input裡面的值發生變化的時候，就會自動把變化後的值，綁定到Vue對象上去了 <body> <div id="app"> <input v-model="name" />{{name}}<br /> <textarea v-model="t"></textarea>{{t}}<b ...