CSS中的字体样式和文本样式

Posted 2022-11-28 hellocindy

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;
        

效果如下：

 

文本样式的其他属性