自学内容网 自学内容网

CSS基础学习练习题

编程题

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>

效果图:

 


原文地址:https://blog.csdn.net/qq_74474809/article/details/143888234

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!