码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-09-24 14:13:09      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:span   alt   效果   javascrip   同时存在   表达方式   应用   weight   idt   

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;
        }

效果如下:

技术图片

 

文本样式的其他属性

技术图片

 

 

 

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

标签:span   alt   效果   javascrip   同时存在   表达方式   应用   weight   idt   

原文地址:https://www.cnblogs.com/helloCindy/p/11577833.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!