前端面试题-入门css
作者：互联网
9.请将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: green;
}
#black{
color: black;
}
</style>
</head>
<body>
<div>红色</div>
<div class='green'>绿色</div>
<div id='black'>黑色</div>
</body>
</html>
10.请将html模块中ul列表的第2个li标签和第4个li标签的背景颜色设置成"rgb(255, 0, 0)"。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
ul>li:nth-child(2n){
background-color: rgb(255,0,0);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
11.请给html模块的div元素加一个后伪元素，且后伪元素的宽度和高度都是20px，背景颜色为"rgb(255, 0, 0)"。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div::after{
content:"";/*需要显示内容*/
width: 20px; height: 20px; background-color: rgb(255,0,0);
display: block;/*默认为行内元素*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
12.请将html模块的div元素设置为一个半径是50px的圆，且边框为1px的黑色实线。
要求：
(1)圆角属性仅设置一个值
(2)圆角属性单位请使用px
注意：由于圆角属性设置广泛且都可以实现题目效果，所以请按照要求规范书写。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
div{
width: 100px; height: 100px; background-color: red; border-radius: 50px; border: 1px solid black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
13.请将html模块类为"box"的div元素宽度和高度都设置为100px，且内间距为20px、外间距为10px。
<html>
<head>
<meta charset=utf-8>
<style type="text/css">
/*补全代码*/
.box{
width: 100px; height: 100px;
margin: 10px; padding: 20px
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
74.请将下面这句话以段落的形式展示在浏览器中——“牛客网是一个专注于程序员的学习和成长的专业平台。”
html:
<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>
javascript:
let bodyP = document.querySelector('body');
bodyP.innerHTML = '<p>牛客网是一个专注于程序员的学习和成长的专业平台。</p>'
75.请使用嵌入样式将所有p标签设置为红色文字
标签：面试题,入门,color,rgb,html,20px,div,css,255 来源： https://www.cnblogs.com/blueberryGargamel/p/16389571.html