前端面试笔试题目-CSS专项练习-CFANZ编程社区

1、标签、类、ID选择器

请将html模块中字体内容是"红色"的字体颜色设置为"rgb(255, 0, 0)"，“绿色"设置为"rgb(0, 128, 0)”，“黑色"设置为"rgb(0, 0, 0)”，且字体大小都为20px

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                color:rgb(255, 0, 0);
                font-size:20px;
            }
            .green{
                color:rgb(0, 128, 0);
            }
            #black{
                color:rgb(0, 0, 0);
            }
        </style>
    </head>
    <body>
        <div>红色</div>
        <div class='green'>绿色</div>
        <div id='black'>黑色</div>
    </body>
</html>

总结：

CSS优先级：!important、内联、ID选择器、类、标签

2、伪类选择器（li:first-child）

请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            li:nth-child(even){
                background:rgb(255,0,0);
            }
        </style>
    </head>
    <body>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </body>
</html>

总结：

1、li样式

样式	怎么写
第一个li的样式	li:first-child { background:rgb(255,0,0); }
最后一个li的样式	li:last-child { background:rgb(255,0,0); }
第n个li的样式	li:nth-child(n) { background:rgb(255,0,0); }
倒数第二个li的样式	li:nth-last-of-type(2){ background:rgb(255,0,0); }
奇数列表	li:nth-child(odd) { background:rgb(255,0,0); }
偶数列表	li:nth-child(even) { background:rgb(255,0,0); }

2、伪类

在已有的元素处于莫个状态时，为其添加相对应的样式，这个状态是根据用户的行为而动态变化的，我们称之为伪类

3、伪元素（div:after）

请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div:after{
                content:"";/*一定要有content，不然不起作用*/
                width:20px;
                height:20px;
                display:block;/*块级元素*/
                background:rgb(255, 0, 0);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

总结：

伪元素

创建一些不存在文档树中的元素，为其添加相对应的样式，我们称之为伪元素，CSS2中的伪元素用一个冒号:，CSS3中的伪元素用两个冒号::，用来区分伪类和伪元素

3、css画圆（border）

请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线
要求：1、圆角属性仅设置一个值。 2、圆角属性单位请使用px

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            div{
                width:100px;
                height:100px;
                border-radius:50px;
                border:1px solid #000;
                
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

总结：

css3之border-radius理解：https://www.cnblogs.com/happymental/p/7891725.html
css3之border理解：https://www.runoob.com/css/css-border.html

4、盒子模型（padding、margin）

请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
            .box{
                width:100px;
                height:100px;
                padding:20px;
                margin:10px;
            }
        </style>
    </head>
    <body>
        <div class="box">
        </div>
    </body>
</html>

5、设置文字颜色（嵌入式-四种方法）

请使用嵌入样式将所有p标签设置为红色文字

<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            /*补全代码*/
		p{
    		color:red;
		}
        </style>
    </head>
    <body>
        <p>欢迎来到牛客网</p>
		<p>在这里，我们为你提供了IT名企的笔试面试题库</p>
		<p>在这里，我们以题会友</p>
    </body>
</html>