前端⾯试笔试题⽬-CSS 专项练习（基础）
1、标签、类、ID 选择器
请将html模块中字体内容是"红⾊"的字体颜⾊设置为"rgb(255, 0, 0)"，“绿⾊"设置为"rgb(0, 128, 0)”，“⿊⾊"设置为"rgb(0, 0,0)”，且字体⼤⼩都为20px 总结：
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 ">            /*补全代码*/            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 >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
总结：
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)"。            /*补全代码*/            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 >
5
6
7
8
9
10
11
12
13
html ul标签
14
15
16
17
18
19
总结：伪元素
创建⼀些不存在⽂档树中的元素，为其添加相对应的样式，我们称之为伪元素，CSS2中的伪元素⽤⼀个冒号:，CSS3中的伪元素⽤两个冒号::，⽤来区分伪类和伪元素
3、css 画圆（border ）请将html模块的div元素设置为⼀个半径是50px的圆，且边框为1px的⿊⾊实线
要求：1、圆⾓属性仅设置⼀个值 。 2、圆⾓属性单位请使⽤px 总结：
4、盒⼦模型（padding 、margin ）            /*补全代码*/            div:after {                content :"";/*⼀定要有content ，不然不起作⽤*/                width :20px ;                height :20px ;                display :block ;/*块级元素*/                background :rgb (255, 0, 0);            }        </style >    </head >    <body >        <div ></div >    </body ></html >
5
6
7
8
9
10
11
12
13
14
15
16
17
18<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 >
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
请将html模块类为"box"的div元素宽度和⾼度都设置为100px，且内间距为20px、外间距为10px 5、设置⽂字颜⾊（嵌⼊式-四种⽅法）
请使⽤嵌⼊样式将所有p标签设置为红⾊⽂字总结：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 ">            /*补全代码*/            .box {                width :100px ;                height :100px ;                padding :20px ;                margin :10px ;            }        </style >    </head >    <body >        <div class ="box ">        </div >    </body ></html >12
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1718<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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
总结：1、为什么要清除浮动？
写的导航条中存在⼀个问题，那就是使⽤了float之后，⽗级盒⼦的⾼度变为02、清除浮动的⽅法：1、给⽗级元素单独定义⾼度（height）2、在标签结尾处加空div标签 clear:both 3、⽗级div定义 伪类:after 和 zoom 4、⽗级div定义 overflow:hidden
5、⽗级div定义 overflow:auto
7、固定定位（position ）
请将html模块类为"box"的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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。