当前位置：首页 > article >正文

CSS基础学习练习题

article 2025/2/22 5:28:58

编程题

1.为下面这段文字定义字体样式，要求字体类型指定多种、大小为14px、粗细为粗体、颜色为蓝色。

“有规划的人生叫蓝图，没规划的人生叫拼图。”

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" type="text/css" href="index.css"> -->
     <style type="text/css">
       p{font-family:"宋体","微软雅黑",Arial, Helvetica, sans-serif;font-size:14px;font-weight:bold;color:blue;}
     </style>
</head>
<body>
   <p>有规划的人生叫蓝图，没规划的人生叫拼图</p>
</body>
</html>

效果图：

2.下面有一段代码，请在这段代码的基础上使用正确的选择器以及这两章学到的字体样式、文本样式来实现图所示的效果。

代码:

<!DOCTYPE html>
<html>
    <head>
        <title>文本样式练习题</title>
        <meta charset="UTF-8">
        <style type="text/css">
            p{
                font-size:14px;
                text-indent:28px;
                text-transform: uppercase;

            }
            span{
                font-weight:bold;
                text-decoration:underline;
            }

        </style>
    </head>
    <body>
        <p>
            很多人都喜欢用战术上的勤奋来掩盖战略上的懒惰，事实上这种“<span>低水平的勤奋</span>”远远比懒惰可怕。
        </p>
        <p>Remember: no pain,no gain!</p>
    </body>
</html>

效果图：