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样式
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 样式表文件。
6、浮动和清除浮动
- 请将类为"left"的div元素和类为"right"的div元素在同一行上向左浮动，且清除类为"wrap"的父级div元素内部的浮动
<html> <head> <meta charset=utf-8> <style type="text/css"> .wrap { /*补全代码*/ overflow:hidden;/*超出的部分会被隐藏*/ } .left { width: 100px; height: 100px; /*补全代码*/ float:left; } .right { width: 100px; height: 100px; /*补全代码*/ float:left; } </style> </head> <body> <div class='wrap'> <div class='left'></div> <div class='right'></div> </div> </body> </html>
总结：
1、为什么要清除浮动？
- 写的导航条中存在一个问题，那就是使用了float之后，父级盒子的高度变为0
2、清除浮动的方法：
- 1、给父级元素单独定义高度（height）
- 2、在标签结尾处加空div标签 clear:both
- 3、父级div定义 伪类:after 和 zoom
- 4、父级div定义 overflow:hidden
- 5、父级div定义 overflow:auto
来源：https://www.cnblogs.com/yuer20180726/p/11149620.html
7、固定定位（position）
- 请将html模块类为"box"的div元素固定在视口的左上角
<html> <head> <meta charset=utf-8> <style type="text/css"> .box { width: 100px; height: 100px; /*补全代码*/ position:fixed; left:0px; top:0px; } </style> </head> <body> <div class='box'></div> </body> </html>
总结：
position属性：
7、CSS单位（px、em、rem）
- 1、请将html模块中类为"box"的div元素的宽度和高度设置为自身字体大小的4倍
<html> <head> <meta charset=utf-8> <style type="text/css"> .box { /*补全代码*/ font-size:20px; width:4em; height:4em; } </style> </head> <body> <div class='box'></div> </body> </html>
- 2、请将html模块div元素的宽度和高度设置为html根元素字体大小的4倍
<html> <head> <meta charset=utf-8> <style type="text/css"> div { /*补全代码*/ width:4rem; height:4rem; } </style> </head> <body> <div></div> </body> </html>
总结：
| CSS | 常见单位 |
| px | 绝对单位，页面按精确像素展示 |
| em | 相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算 |
| rem | 相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性 |
