前端系列之CSS(文本样式)

一.字体样式

前端系列之CSS(文本样式)_第1张图片

前端系列之CSS(文本样式)_第2张图片

前端系列之CSS(文本样式)_第3张图片

前端系列之CSS(文本样式)_第4张图片

前端系列之CSS(文本样式)_第5张图片

前端系列之CSS(文本样式)_第6张图片

前端系列之CSS(文本样式)_第7张图片

前端系列之CSS(文本样式)_第8张图片

二.文本样式

前端系列之CSS(文本样式)_第9张图片

前端系列之CSS(文本样式)_第10张图片

前端系列之CSS(文本样式)_第11张图片

前端系列之CSS(文本样式)_第12张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性title>
    <style type="text/css">
        p{
            background-color: #ececec;
            height: 150px;
            text-align: center;
            line-height: 150px;
        }
        .text1{
            color: #c9394a;
            font-size: 80px;
            font-weight: bold;
        }
        .text2{
            font-size: 40px;
            color: gray;
            text-decoration:underline;
            letter-spacing: 5px;
            vertical-align: 15px;
        }
        .text3{
            font-size: 80px;
            color: gray;
            font-style: oblique;
        }
    style>
head>
<body>
<p><span class="text1">慕课网span>  <span class="text2">只学有用的span><span class="text3">span>p>
body>
html>

你可能感兴趣的:(前端)