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>
总结：
- 1、行内样式：使用 HTML 标签的 style 属性定义 CSS 样式；
- 2、内嵌样式：使用
<style>标签在 HTML 文档头部（<head>和<head>之间）定义 CSS 样式； - 3、链接式：使用
<link>标签引入外部 CSS 样式表文件。 - 4、导入式：使用 @import 命令导入外部 CSS 样式表文件。
