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>

css字体样式+文本样式

 word-spacing 单词间距

 letter-spacing 字母间距

单词的判断以空格为准

text-transform:capitalize | uppercase | lowercase | none 设置文字大小写

text-decoration:underline | line-through | overline | none 设置文字装饰线

也可以设置多个样式 text-decoration:underline overline;

相关推荐