CSS基础练习500题-答案

2017-12-30  本文已影响0人  雨和眼泪

说明：答案不是唯一的，欢迎大家提出不一样的答案~

基础部分

  1. 浏览区缺省设置，外部样式表，内部样式表，内联样式，这四个的优先度如何。

优先度由高到底分别是：内联样式，内部样式表，外部样式表，浏览器缺省设置。

  1. 颜色的表示方式有哪些。

第一种：RGB的方式，例如：color: rgb(100,100,100)
第二种：RGBA的方式，例如：color: rgba(100,100,100,.5);
第三种：使用颜色名字，例如： color: blue;
第四种：十六进制表示法，color: #FFF;

  1. 怎样同时使用多个选择器
/*这个表示同时选中h1元素和h2元素*/
h1,h2 {}
  1. 使用一下ID选择器
#demo {}
  1. 使用一下类选择器
.demo {}
  1. 现有10个div，有的有title属性，有的没有，使用属性选择器选中有title这个属性的div
div[title] {}
  1. 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值是demo的div。
div[title = "demo"]
  1. 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值中包含demo的div。
div[title ~= "demo"] {}
  1. 现有10个div，有的有title属性，有的没有这个属性，带有title属性的，值也不一样，现使用属性选择器选中属性值是zh或者是zh-开头的
div[title |= "zh"] {}
  1. 现在有10个input元素，选中属性type是text的input
input[type = "text"] {}
  1. 选中某属性值以zh开头的
input[type ^= "zh"] {}
  1. 选中某属性值以zh结尾的
input[type $= "zh"] {}
  1. 选中某属性值包含zh的
input[type *= "zh"] {}
  1. 在head中手写一个连接外部样式表的方法吧
<link type = "text/css" ref = "stylesheet" href = "./style.css"></link>

背景篇

  1. 给p标签设置一个背景颜色
p {
  background-color: red;
}
  1. 给a标签设置一个背景图片
a {
  background-image: url("./bg.jpg");
}
  1. 设置背景图片纵向重复
a {
  background-image: url("./bg.jpg");
  background-repeat: repeat;
  /*可选参数还有no-repeat，repeat-y，repeat-x*/
}
  1. 把背景图像定位在中间，为了保证这个属性在opera和firefox中正常运行，还要添加一个什么设置？写出来，记住。
body {
  background-image: url("./bg.jpg");
  background-repeat: no-repeat;
  background-position:center;
  /*为了保证在属性正常运营，需要加入下面这一行*/
  background-attachment:fixed;
}
  1. 设置背景图像在左上，右下。
body {
  background-image: url("./bg.jpg");
  background-repeat: no-repeat;
  background-position: left top;
  background-attachment:fixed;
}
  1. 使用百分比值把背景图像设置在中间的位置
body {
  background-image: url("./bg.jpg");
  background-repeat:no-repeat;
  background-position: 50% 50%;
}
  1. 使用像素单位设置背景图像的位置。
body {
  background-img: url("./bg.jpg");
  background-repeat: no-repeat;
  background-position: 100px 200px;
}

*22. 怎样防止背景图像随着页面滚动条而滚动

body {
  background-image: url("./bg.jpg");
  background-repeat:repeat;
  background-attachment:fixed;
}

*23. 怎样把背景图像，颜色，重复，定位，是否滚动放在一个声明中。

body {
  background: #fff url("./bg3.png") repeat fixed center;
}

文字篇

*24. 给一段文字添加一个缩进，在块级元素和内联元素中，缩进的方式是否有不同，都演示一下看看。
块级元素：

p {
  text-indent: 2em;
}

行内元素使用外边距的形式
*25. 演示一下缩进的继承

<div id="box">
 <p>....</p>
<div>

#box {
  text-indent: 2em;
}
/*p元素也会继承这个属性*/

*26. text-align到底是干嘛的？另外针对阿拉伯语和希伯来语之类的语言，该怎样做。

对于p、h1~h6这种类型的标签，设置text-align属性，元素内的文本可以按照属性值来进行对其，同时这个属性可以继承。属性值常用的有：center，left，right，justify。对于一些特殊的语言，可以设置text-align为right，是右对齐，符合从右向左阅读的语言的习惯。

  1. text-algin和center标签的异同。

text-algin只是针对文字对其，或者操作一些内联元素，center不仅操作文字和内联元素，也会把这个元素居中在浏览器中。

  1. 设置单词之间的间距
p {
  word-spacing:2px;
}
  1. 设置字母的间距
p {
  letter-spacing: 2px;
}
  1. 设置全部英文大写
p {
  text-transform: uppercase;
}
  1. 设置全部英文小写
p {
  text-transform: lowercase;
}
  1. 设置首字母大写
p {
  text-transform: capitalize;
}
  1. 修改文本修饰，去除文本修饰，添加下划线，添加上划线，添加贯穿线，添加闪动效果。
/*去除文本修饰*/
p {
  text-decoration: none;
}
/*添加下划线*/
p {
  text-decoration: underline;
}
/*添加上划线*/
p {
  text-decoration: overline;
}
/*添加贯穿线*/
p {
  text-decoration: line-through;
}
/*添加闪动效果*/
p {
  text-decoration: blink;
}
  1. 怎样去除文字中多余的空格
p {
  white-space: normal;
}
  1. 怎样保留文字中多余的空格
p {
  white-space: pre;
}
  1. 怎样使文字不可以换行，除非使用了br
p {
  white-space: nowrap;
}
  1. 怎样可以使文字可以保留空格同时可以自动换行。
p {
  white-space: pre-wrap;
}
  1. 怎样可以使文字去除空格但是保留换行，同时允许自动换行。
p {
  white-space: pre-line;
}

  1. 针对以上，放一个小小的参考


    参考
  2. direction是干嘛的，怎么使用，适用于什么元素。

direction 是控制文本的方向的。有ltr和rtl两个属性。

  1. 给文字设置一个阴影
p {
  text-shadow: 1px 1px #000;
}

字体篇

  1. css中五种通用的字体系列都是什么，请默写出来。
  • Serif
  • Sans-serif
  • Monospace
  • Cursive
  • Fantasy
  1. 怎样设置字体
p {
  font-family: "微软雅黑"
}
  1. 怎样设置多个字体，设置多个字体的时候要注意什么？
p {
  font-family: Times,"New York"
}
/*注意：有些字体名称之间存在空格，所以要使用引号给包围起来*/
  1. font-style属性是干嘛的，有哪些值？
p {
  font-style:   italic/normal/oblique;
/*分别是斜体、正常、斜体*/
}
  1. 怎样把文字设置成下面这样的？ 示例 
p {
  font-variant: small-caps;
  /*定义小型大写字母*/
}
  1. 设置字体大小
p {
  font-size: 16px;
}
  1. 设置字体加粗，以值的形式设置
p {
  font-weight: blod;
}
  1. px，em，rem这几个单位有什么不同。
  • px 物理单位，像素。
  • em 根据浏览器计算出来的一个文字的大小单位，根据浏览器的不同，这个单位对应的值也不同。
    任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。
  • rem 是根据父级元素中的font-size计算出来的一个相对单位，1rem=父元素中font-size的值。

链接篇

  1. 设置未被访问过链接的样式
a: link {
  color: red;
}
  1. 设置已经被访问过链接的样式
a: visited {
  color: gray;
}
  1. 设置鼠标移动上去的时候链接的样式
a: hover {
  color: yellow;
}
  1. 设置正在点击的时候的链接的样式
a: active {
  color: orange;
}
  1. 这4中状态有什么要求。

link和visited顺序必须固定
hover和active顺序必须固定

列表篇

  1. 怎样修改列表项中的标志类型
ul {
  /*2种方式，可以设置在ul内，也可以设置在li内*/
  list-style-type: square;
}
  1. 有哪些标志类型

circle 空心圆
square 实心方块
decimal 数字
decimal-leading-zero 0开头的数字
lower-roman 大写罗马数字
upper-roman 小写罗马数字
lower-alpha 小写英文字母
upper-alpha 大写英文字母
lower-greek 小写希腊文字母
lower-latin 小写拉丁字母
upper-latin 大写拉丁字母
等等····
参考地址

  1. 怎样把标志类型设置为图像
li {
  list-style-image: url("./1.jpg");
}
  1. 怎样简写列表样式
li {
  list-style: type，position，image，
}
/*例如*/
ul {
  list-style: square, inside, url("./1.jpg")
}
  1. list-style-position是干嘛的，怎么使用

是定位列表的位置的，有inside和outside两个值

 ul {
  list-style-position: inside;
}
  1. 怎样在一个声明中定义所有列表属性

同58题

表格篇

  1. 完成这个效果


    演示 
<!DOCTYPE html>
<html>
<head>
    <title>ceshi</title>
    <meta charset="utf-8">
    <style type="text/css">
        table,th,td {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>Firstname</th>
            <th>Lastname</th>
        </tr>
        <tr>
            <td>Bill</td>
            <td>gates</td>
        </tr>
        <tr>
            <td>Steven</td>
            <td>Jobs</td>
        </tr>
    </table>

</body>
</html>
  1. border-collapse这个属性是干嘛的
    这个是属性是设置单元格的边框与相邻的边框合二为一的。
  2. 实现下面这个效果 演示 
table {
  border-collapse: collapse;
}
  1. 给表格添加一个高度和宽度
table {
  height: 100px;
  width: 200px;
}
  1. 设置表格内文字对其方式
table {
  text-align: center;
}
  1. 设置表格内文字的水平对其方式
td {
vertical-align: bottom;
}
/*放在td和th中才有效果*/
  1. 给每个单元格一个内边距！
td {
    padding: 20px;
}
  1. 给表格一个背景颜色！
table {
    background-color: red;
}
  1. 设置表格每个单元格之间的距离！
table {
    border-collapse: separate;
    border-spacing: 10px 20px;
}
  1. 设置表格标题的位置！参考 
table {
    caption-side: bottom;
}
  1. 设置是否显示空白的单元格，参考 
table {
    empty-cells: hide;
}
  1. table-layout是干嘛的，有哪些值？
    设置单元格的值是固定的值还是随着元素的大小而自动适应，有2个值，fixed是固定大小，auto是随着大小自己变换。

轮廓篇

  1. 现在有个段落p，给这个段落一个边框，然后再给一个轮廓，tip：outline，设置样式，颜色，宽度
p {
  border: 1px solid #ccc;
  outline: solid #f09 2px;
}

框模型/盒模型

概述

  1. 描述一下框模型

我自己的理解，不标准答案
每一个元素都是一个盒子模型的存在，由内到外是content，padding，border，margin，不同的浏览器对盒模型的解析方式也不同。
根据盒模型的层次，从外到又划分为border-box，content-box,分别规定了盒模型的宽度高度的计算方式。

  1. 框模型的宽度和高度是怎么计算的
    普通的盒模型的宽度和高度是content的宽高度+padding的宽高度。IE盒模型是content+padding+border的宽高度。
  2. 如何改变框模型的宽度高度计算方式
    使用box-sizing的方式来计算。

内边距篇

  1. 内边距是什么？怎么设置？
    内边距是content和border之间的距离，写做padding

边框篇

  1. 边框是什么，怎么设置？
    边框是border。

外边距篇

  1. 外边距是什么，怎设置，使用2个值的时候，顺序是怎么样的。
    外边距是margin，使用2个值的时候，第一个值代表的上下，第二个值代表的左右

外边距合并篇

  1. 什么是外边距合并，显示一下，有几种情况会发生外边距合并？都写出来。

简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。
注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

  1. 外边距合并的意义在哪？举一个例子。
    例如在多个段落（p）中，外边距合并可以让段落之间的距离相等。

定位

概述

  1. 什么定位可以使元素脱离文档流？
    absolute，float
  2. 描述position中的四个属性的意思。
  1. 怎样处理溢出元素，设置成隐藏，滚动，自动。
div {
  overflow: hidden;
  overflow: auto;
  overflow: scroll;
}
  1. 怎样剪切一个图像，case 
img {
    position: absolute;
    clip: rect(0px 100px 100px 0px);
}

  1. 图片和文字对其方式怎么设置？


    演示 
img {
  vertical-align:text-top;
}

相对定位篇

  1. 解释一下什么是相对定位，会不会脱离文档流，位置计算是怎样的？
    相对定位是相对于本身进行定位的，不会脱离文档流，如果不对文档进行位置设置的话，将保持不变，进行位置设置的话，将参考元素本身的位置进行定位。

绝对定位篇

  1. 解释一下什么是绝对定位，会不会脱离文档流，是怎样计算位置的？
    绝对定位会脱离文档流，它的定位方式是以最近的“被定位的元素”为参考进行定位的。

浮动

  1. 浮动会不会脱离文档流？
    会。
  2. 解释一下浮动的原理是什么。
    设置浮动的元素会脱离文档流，然后一直向设置浮动的方向移动，直到碰到包含框或者另外一个浮动框的边缘为止。
  3. 多个元素一起浮动会发生什么情况？
    互相停靠在边缘，可以制作自适应网页。
  4. 如果容器的宽度不够了会发生什么？
    会自动换行。
  5. 清除浮动的原理是什么?
    指定clear的元素，在指定的方向上，不允许存在浮动元素。

  6. 实现这个效果


    演示

  7. 实现这个效果


    演示

  8. 完成这个效果


    演示
  9. 使用浮动完成这个布局， 演示

    参考html：

<div class="container">

<div class="header"><h1 class="header">W3School.com.cn</h1></div>

<div class="left"><p>"Never increase, beyond what is necessary, the number of entities required to explain anything." William of Ockham (1285-1349)</p></div>

<div class="content">
<h2>Free Web Building Tutorials</h2>
<p>At W3School.com.cn you will find all the Web-building tutorials you need,
from basic HTML and XHTML to advanced XML, XSL, Multimedia and WAP.</p>
<p>W3School.com.cn - The Largest Web Developers Site On The Net!</p></div>

<div class="footer">Copyright 2008 by YingKe Investment.</div>
</div>

CSS选择器

元素选择器篇

  1. 选中文档中的h1标签。
h1 {
}
  1. 同时选中文档中的h2和p元素
h2,p {
}

选择器分组篇

类选择器篇

  1. 选中文档中的demo类
.demo {
}
  1. 选中p标签中包含的demo类
p.demo {
/*不包含空格*/
}
  1. 选中即包含demo类的又包含hello类的元素
.demo.hello {
/*注意2个类之间没有空格*/
}

ID选择器篇

  1. 使用一个ID选择器吧~
#demo {
}

属性选择器篇

  1. 选中含有title属性的所有元素
*[title] {
}
  1. 选中所有带有href的a元素
a[href] {
}
  1. 选中所有带有href和title属性的a元素
a[href][title] {
}
  1. 选中所有带有alt属性的img元素
img[alt] {
}
  1. 演示一下怎么在XML文档中使用属性选择器
  2. 选中href等于“http://www.baidu.com”的a元素
a[href="http://www.baidu.com"] {
}
  1. 选中class值是demo hello的p元素
p[class="demo hello"] {
}
  1. 选中class的值中包含demo值的p元素
p[class="demo"]
  1. 选中title中以en开头的p元素
p[title ^= "en"] {
}
  1. 选中title中以en结尾的p元素
p[title $= "en"] {
}
  1. 选中title中包含en的p元素
p[title *= "en"] {
}
  1. 选中title中属性值等于en或者以en-开头的p元素
p[title |= "en"]  {
}

p[title ~= "en"] {
/*这个代表p标签中，在title这个属性中必须包含这个en，且en是一个单独的单词*/}

后代选择器篇

  1. CSS选择器中有空格和有空格有啥区别
    没有空格表示“向下查找”，有空格表示“同时包含”，例如：
.demo .hello {
  /*  这个存在空格，表示包含demo类下面的包含hello类的子元素*/
}
.demo.hello {
/*这个不存在空格，表示同时包含demo和hello的两个类的元素*/
}
  1. 后代选择器是什么，怎么用。
    选择器中带有空格的，就是后代选择器。参考上一道题。

子元素选择器篇

  1. 写一个子元素选择器
p > .demo {
/*选择p标签中包含demo类的子元素*/
}
  1. 子元素选择器必须选择直接子元素吗？
    必须是直接子元素。

相邻兄弟选择器篇

  1. 选择紧接在h1元素后面的p元素。
h1 + p {
/*兄弟选择器代表两个元素是平等的关系，不存在包含关系*/
}

伪类篇

  1. 使用伪类完成，链接的样式，包括未点击，点击过，鼠标滑过，鼠标按下的样式
  2. 伪类结合类用一下
  3. focuse这个伪类是怎么使用的
  4. 现有10个li，选中第一个，
  5. 同上，选最后一个
  6. 同上，选偶数
  7. 同上，选奇数
  8. lang这个伪类怎么使用？

伪元素篇

  1. 给文本的第一个字母添加特殊样式。
  2. 给文本的首行添加特殊样式
  3. 给元素之前添加特殊样式
  4. 给元素之后添加内容

高级

对齐篇

  1. 使用margin居中对其一个块元素
  2. 把一个元素垂直居中对其
  3. 把一个元素放置在另外一个元素正中央，可以使用flex。

  4. 使用float完成这个


    演示

尺寸篇

  1. 使用元素的最大尺寸有什么意义？
  2. 行高有什么意义，有哪些具体的使用场景。

分类篇

  1. 内联元素和块级元素到底有什么异同
  2. 把鼠标样式设置为小手

导航栏篇

  1. 写一个水平导航条
  2. 写一个垂直导航条

图片库篇

图片透明篇

  1. 把一张图片设置为办透明的。
  2. 实现这个效果 演示

媒介类型篇

  1. 媒介查询都有哪些属性，分别是干嘛的？
  2. 演示一下媒介查询的屏幕查询

注意事项篇

CSS3

边框篇

  1. 给一个矩形添加一个圆角
  2. 给一个矩形添加一个阴影，并且说明每个值的意义
  3. 给一个div添加一个边框图片。 演示
    素材

背景篇

  1. 调整一个body的背景图像的大小
  2. context-box,padding-box,border-box都是什么？
  3. 怎样利用以上这几个属性规定背景图像的起源。
  4. 给一个body同时添加两个背景图像看看会发生什么？
  5. background-clip是干嘛的，演示一下

文本效果篇

  1. 给图片添加一个阴影。
  2. word-wrap这个属性是干嘛的，怎么使用？
  3. word-break是干嘛的，怎么使用？
  4. 如果一个容器的文本溢出了怎么处理成显示···
  5. text-justify属性是干嘛的？

字体篇

  1. 定义一个自己的字体吧！要求要有多个格式的文件。
  2. 在定义一个自己的字体，要求要设置自己加粗。
  3. 运用一下自定义的字体吧！

2D转换篇

  1. 把一个div从原本的位置沿x轴移动100px，沿着y轴移动50px。
  2. 把一个div从原本的位置顺时针旋转30度
  3. 把一个div横向方法2倍，纵向放大3倍。
  4. 摆一个元素沿x轴斜切30度，沿y轴斜切60度。
  5. 解释一下这行代码的意思：
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
  1. transform-origin是什么属性，是干嘛的，怎么使用？

3D转换篇

  1. 使div围绕x轴旋转120度。
  2. 使div围绕Y轴旋转100度。

过度篇

  1. 一个提示，过渡是transition，说明一下这个属性怎么使用。
  2. 怎么可以让动画效果延迟2s出现？

动画篇

  1. 定义一个动画，背景颜色从红色变成绿色。
  2. 应用这个动画，设置动画执行的时间。
  3. 使用百分比的方式定义一个四步的动画。
  4. 设置动画延迟2s后执行。
  5. 设置动画反复执行。
  6. 设置动画无限循环。
  7. 简写动画执行方式，提示：动画名，运行时间，运行方式，延迟执行时间，是否循环执行，是否下一个动画周期逆向播放。

多列篇

  1. 把一个div中的文字分为三列。
  2. 设置每列文字的间隙是40px。
  3. 设置每列之间的分割线的样式。
  4. 设置分割线的颜色和宽度。
  5. 设置文字跨越3列。
  6. 把宽度和列数写到一起。

用户界面

  1. 写一个div，并且允许用户更改div的大小。
  2. 更改盒模型的计算方式。
  3. 给元素设置一个outline，设置距离元素的距离。

站外资源，flex布局等。

  1. 描述flex是什么东西。使用一个看看。
上一篇下一篇

猜你喜欢

热点阅读