CSS中的字體樣式和文本樣式

CSS中的字體樣式：

在手機端設置大小的時候，一般不使用px

 

CSS字體顏色三種表達方式：

1.具體顏色名稱         例：color:red;

2.數字 0~255，百分比：0%~100%        例：color:rgb(0%,100%,0%)

3.十六進制：#開頭，六位，0~F         例：color:#00880a

 

font-weight文字粗細：

font-weight:normal |bold | bolder |lighter | 100~900

400相當於normal，700相當於bold，一般用的就是normal和bold，默認也是normal

 

font-style文字樣式：

font-style:normal |italic |oblique

italic斜體，oblique傾斜

 

font屬性（簡寫）

font: font-style font-variant font-weight font-size/line-height font-family

說明：值之間空格隔開，注意書寫順序，font-size和line-height同時存在要用/隔開

 

 

CSS中的文本樣式：

text-align，設置元素內文本的水平對齊方式

text-align:left |right |center |justify     justify為兩端對齊

注：該屬性對塊級元素設置有效，像span這種的無效

 

line-height，行高

 

vertical-align，設置元素內容的垂直方式，用於行內元素和表格中，不能用於塊級元素中

vertical-align:baseline |sub |super |top |text-top |middle |bottom |text-bottom |長度 |百分比

 

 

垂直居中應用

1.單行文字垂直居中

代碼如下：

html

    <div class="wrap">
        <p>welcome</p>
    </div>

css

        * {
            margin: 0;
        }
        .wrap {
            border: 1px solid greenyellow;
            height: 100px;
            width: 100px;
            line-height: 100px;
            text-align: center;
        }        

效果如下：

 

 

 

2.多行文字垂直居中（因為vertical-align不能用於塊級元素，所以改成表格布局，父元素也要設置成表格布局）

html

    <div class="wrap">
        <div class="content">
            <p>welcome</p>
            <p>css</p>
        </div>
    </div>

css

        * {
            margin: 0;
        }
        .wrap {
            border: 1px solid paleturquoise;
            height: 100px;
            width: 100px;
            display: table;
        }
        .content {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

效果如下：

 

文本樣式的其他屬性