css字体样式+文本样式

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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>