CSS的一些小练习

合集下载

css基础题目

css基础题目含解答共20道1. 什么是CSS？答案：CSS（层叠样式表）是一种用于描述文档样式（如字体、颜色、间距等）的样式表语言。

2. 解释一下CSS 盒模型。

答案：CSS 盒模型由内容区域、内边距、边框和外边距组成。

这些部分共同形成一个盒子，影响元素在页面上的布局和样式。

3. CSS 中的选择器有哪些？答案：常见的选择器有类选择器（.class）、ID选择器（#id）、元素选择器（element）、后代选择器（ancestor descendant）、子元素选择器（parent > child）、伪类选择器（:hover、:nth-child() 等）等。

4. 如何居中一个元素？答案：-水平居中：使用`margin: 0 auto;` 或`text-align: center;`。

-垂直居中：使用`display: flex; align-items: center;` 或`position: absolute; top: 50%; transform: translateY(-50%);`。

5. 什么是BFC（块级格式化上下文）？答案：BFC 是一个独立的渲染区域，规定了内部的块级盒子如何布局，并与外部毫不相干。

它可以解决一些布局问题，如清除浮动、防止边距折叠等。

6. CSS 中`em` 和`rem` 的区别是什么？答案：`em` 是相对于父元素的字体大小，而`rem` 是相对于根元素（html 元素）的字体大小。

7. 如何隐藏一个元素？答案：使用`display: none;` 或`visibility: hidden;` 来隐藏元素。

8. CSS 中的`position` 属性有哪些值，它们分别是什么意思？答案：常见的`position` 值有static、relative、absolute、fixed 和sticky。

它们分别表示元素的定位方式，例如static 表示静态定位，元素出现在正常的文档流中。

css判断题

css判断题CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。

它可以通过对HTML元素应用样式规则，控制网页的外观和样式。

以下是一些关于CSS的判断题。

1. CSS是一种编程语言。

错误。

CSS并非一种编程语言，而是一种样式表语言。

它用于定义网页元素的外观和样式，但不包含逻辑或算法。

2. 可以使用内联样式将CSS样式直接应用到HTML元素上。

正确。

内联样式是指直接在HTML元素的style属性中定义CSS样式。

它的优先级最高，可以覆盖其他方式定义的样式。

3. CSS选择器用于选择HTML元素并应用样式规则。

正确。

CSS选择器可以根据元素的标签名、类名、ID等属性，选择并应用样式规则。

常用的选择器包括标签选择器、类选择器、ID选择器等。

4. CSS样式规则由选择器和声明块组成。

正确。

CSS样式规则由选择器和声明块组成。

选择器用于选择要应用样式的元素，声明块由一系列属性和值组成，用于定义元素的样式。

5. CSS样式可以通过链接外部样式表进行引用。

正确。

可以使用<link>元素将外部样式表链接到HTML文档中。

外部样式表通常被存储在独立的CSS文件中，使得多个网页可以共享相同的样式规则。

6. CSS可以控制元素的位置和尺寸。

正确。

通过使用CSS的定位和布局属性，可以控制元素在网页中的位置和尺寸。

常用的属性包括position、top、left、width等。

7. CSS样式可以通过嵌套选择器来选择元素的后代或子元素。

正确。

CSS允许使用嵌套选择器，以选择元素的后代或子元素。

例如，可以使用ul li选择所有ul元素下的li元素。

8. CSS样式可以通过选择器的优先级来确定应用顺序。

正确。

当多个选择器同时匹配同一个元素时，CSS会根据选择器的优先级来决定应用哪个样式规则。

选择器的优先级通常由选择器类型、类选择器、ID选择器等决定。

9. CSS样式可以通过继承来应用到子元素。

正确。

CSS中的某些属性具有继承性，即子元素可以继承父元素的样式。

css 练习题

css 练习题CSS练习题CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。

通过CSS，我们可以实现对网页中各个元素的展示样式进行控制，包括字体、颜色、大小、背景等等。

为了帮助大家更好地掌握CSS技能，以下是一些CSS练习题，希望能帮助你进一步熟悉CSS的应用。

题目一：创建一个简单的居中对齐的盒子要求：创建一个宽度为300px，高度为200px的盒子，并水平垂直居中对齐在页面上。

提示：利用`margin`属性和`text-align`属性可以实现盒子的居中对齐。

题目二：添加鼠标悬浮效果要求：当鼠标悬浮在盒子上时，盒子的背景颜色变为橙色，文字颜色变为白色。

提示：可以使用`:hover`伪类选择器为盒子设置悬浮效果，并利用`background-color`和`color`属性来改变背景颜色和文字颜色。

题目三：创建一个三栏布局要求：创建一个三栏布局，左右两栏宽度为200px，中间栏自适应剩余宽度。

左右两栏的背景颜色为灰色，中间栏的背景颜色为白色。

提示：可以使用`float`属性将左右两栏浮动到左右两侧，设置宽度和背景颜色。

对于中间栏，可以利用`margin`属性设置其左右两侧的外边距。

题目四：实现响应式布局要求：创建一个响应式网页布局，当屏幕宽度小于600px时，三栏布局变为垂直排列。

提示：可以使用媒体查询（`@media`）来设置不同屏幕宽度下的样式。

题目五：改变链接样式要求：将网页中所有的链接的文字颜色改为蓝色，并去除链接的默认下划线。

提示：可以使用`color`属性来改变链接文字的颜色，使用`text-decoration`属性来去除下划线。

题目六：实现动画效果要求：为页面中的某个元素添加一个旋转动画效果。

提示：可以使用`@keyframes`和`animation`属性来定义和应用动画效果。

以上是一些CSS练习题，通过这些练习可以帮助你更好地掌握CSS 的应用。

希望你能够积极尝试并不断提升自己的CSS技能，为构建更美观的网页界面打下坚实的基础。

css测试题

css测试题一. 判断题您的姓名： [填空题] *_________________________________所有的主流浏览器均不支持层叠样式表。

（） [单选题] *A. 对B. 错(正确答案)CSS（Cascading style sheets）层叠样式表技术是扩展标签属性的机制。

(A)[单选题] *A. 对(正确答案)B. 错样式规则中的每条声明由冒号分隔的属性值对组成，声明之间用分号分隔，最后的“;”可以省略。

（） [单选题] *A. 对B. 错(正确答案)CSS样式只要书写正确就能应用到HTML元素上产生效果。

（） [单选题] *A. 对B. 错(正确答案)设置16进制值颜色值需要在6位16进制数前加一“#”。

（） [单选题] *A. 对(正确答案)B. 错父元素的所有CSS属性都会被子元素继承。

（） [单选题] *A. 对B. 错(正确答案)产生样式层叠时，处于最前面的CSS样式会被最终应用。

（） [单选题] *A. 对B. 错(正确答案)样式声明中添加“!important”，代表该样式具有最高权值。

（） [单选题] *A. 对(正确答案)B. 错块元素是一个标准的盒子，默认情况下独占一行。

（） [单选题] *A. 对(正确答案)B. 错行内元素是一个标准的盒子，与相邻元素共享一行。

（） [单选题] *A. 对B. 错(正确答案)元素类型是不能相互转换的。

（） [单选题] *A. 对B. 错(正确答案)文档流指文档里各元素的默认排列方式。

（） [单选题] *A. 对(正确答案)B. 错元素选择器，通常就是HTML的元素名称，又称为类型选择器。

（） [单选题] *A. 对(正确答案)B. 错一种元素选择器可以对网页中的各种元素生效。

（） [单选题] *A. 对B. 错(正确答案)后代选择器，又称包含选择器，其祖先元素和后代元素之间用逗号分隔。

（） [单选题] *A. 对B. 错(正确答案)子选择器中的样式只对子元素有效，对孙子以下的后代元素无效。

第3章 CSS基础样式知识点：评估题 (3)[3页]

学习知识点后请完成以下练习题1）以下哪个样式属性可以进行背景图片的设置（）（单选）A、background-imageB、background-colorC、background-attachmentD、background-repeat2）以下哪个样式属性可以进行背景颜色的设置（）（单选）A、background-imageB、background-colorC、background-attachmentD、background-repeat3）以下哪个样式属性可以设置背景图片随着网页内容的滚动而滚动的效果（）（单选）A、background-imageB、background-colorC、background-attachmentD、background-repeat4）以下哪个样式属性可以设置背景图片是否平铺（）（单选）A、background-imageB、background-colorC、background-attachmentD、background-repeat5）border:1px solid red;代码表示的内容是（）（单选）A、边框线宽度为10px，边框线样式是点线，边框线的颜色是红色B、边框线宽度为1px，边框线样式是直线，边框线的颜色是红色C、边框线宽度为1px，边框线样式是破折线，边框线的颜色是蓝色D、边框线宽度为1px，边框线样式是双直线，边框线的颜色是红色6）border-bottom:1px solid red;代码表示的内容是（）（单选）A、左边框线宽度为1px，左边框线样式是直线，左边框线的颜色是红色B、右边框线宽度为1px，右边框线样式是直线，右边框线的颜色是红色C、上边框线宽度为1px，上边框线样式是直线，上边框线的颜色是红色D、下边框线宽度为1px，下边框线样式是直线，下边框线的颜色是红色7）以下说法正确的是（）（单选）A、border-left可以设置左边框线的样式B、border-left可以设置右边框线的样式C、border-left可以设置上边框线的样式D、border-left可以设置下边框线的样式8）以下说法正确的是（）（单选）A、border-width用于设置边框线的高度B、border-width用于设置边框线的宽度C、border-width用于设置边框线的颜色D、border-width用于设置边框线的样式9）给文本添加下划线的样式属性是以下哪一个（）（单选）A、text-alignB、letter-spacingC、text-decorationD、text-indent10）如果要设置字体大小，需要使用的属性是（）（单选）A、font-weightB、font-sizeC、font-colorD、font-family11）width:10px;height:100px;以上代码表示（）（单选）A、设置宽度为100px，设置高度为10pxB、设置宽度为10px，设置高度为10pxC、设置宽度为10px，设置高度为100pxD、设置宽度为100px，设置高度为100px。

htmlcss上机练习题

htmlcss上机练习题<html><head><style>body {font-family: Arial, sans-serif;line-height: 1.5;}h1 {text-align: center;margin-top: 50px;}h2 {margin-top: 30px;}p {text-indent: 2em;}ol {padding-left: 2em;margin-top: 30px;}li {margin-bottom: 10px;}code {background-color: lightgray;padding: 2px 5px;}</style></head><body><h1>HTML和CSS上机练习题</h1><p>在本文中，我们将介绍一些HTML和CSS的上机练习题以帮助你巩固所学的知识。

这些练习题包括HTML标签的使用、CSS样式的应用和简单的页面布局。

</p><h2>题目一：HTML标签的使用</h2><p>请使用合适的HTML标签来实现以下要求：</p><ol><li>创建一个包含标题和段落的HTML文档</li><li>在标题中使用<h1>标签，并在段落中添加一些文本</li> <li>在文档中插入一个图片</li><li>创建一个具有强调效果的文本</li></ol><h2>题目二：CSS样式的应用</h2><p>请根据以下要求使用CSS样式来美化页面：</p><ol><li>更改文本的字体、大小和颜色</li><li>为图片添加边框和阴影效果</li><li>设置段落的背景色和文字对齐方式</li><li>使用外部CSS文件引用样式表</li></ol><h2>题目三：简单页面布局</h2><p>请根据以下要求创建一个简单的页面布局：</p><ol><li>使用<div>标签将页面划分为多个区域</li><li>使用CSS样式设置区域的宽度、高度和背景颜色</li><li>使用CSS样式设置文本在区域内的对齐方式</li><li>在页面中添加一个导航栏和页脚</li></ol><p>通过完成以上练习题，你将能够更好地熟悉HTML和CSS的使用，并且加深对它们的理解。

CSS之CSS3新特性及实践应用_基础知识习题及答案

CSS3新特性及实践应用_基础知识习题及答案（答案见尾页）一、选择题1. CSS的发展历程和主要特性包括哪些方面？A. 色彩和样式B. 布局和 boxC. 动画和过渡D. 媒体查询和响应式设计2. CSS 的影响和实际应用有哪些？A. 提高网页开发效率B. 提升用户体验C. 减少 JavaScript 代码量D. 以上都是3. 以下哪项不是 CSS 新特性中的颜色与样式方面的内容？A. 颜色空间和变量B. 函数和混合模式C. 上下文继承和伪元素D. 渐变和阴影4. 在 CSS 中，如何实现动画效果？A. 使用 transition 属性B. 使用 @keyframes 规则C. 使用 CSS transitions 属性D. 以上都是5. CSS 中的 Grid 布局有什么特点？A. 采用传统的布局方式B. 支持水平和垂直布局C. 可以在一个容器中创建多个网格D. 以上都是6. CSS 中的 Flex 布局和Grid布局哪个更常用？A. Flex 布局B. Grid 布局C. 都有D. 根据项目需求选择7. CSS 中如何实现响应式设计？A. 使用 media queriesB. 使用 viewport 单位C. 使用 @media 查询D. 以上都是8. 以下哪项不是 CSS 新特性中的布局与 box 方面的内容？A. 弹性盒子布局B. Grid 布局C. 多列布局D. 浮动和定位9. CSS 中如何实现列表和菜单的效果？A. 使用 list-style-type 和 list-style-positionB. 使用 display: block;C. 使用 paddingD. 以上都是10. CSS 中如何设置文本效果和字体？A. 使用 text-decorationB. 使用 font-size 和 font-familyC. 使用 text-align 和 text-transformD. 以上都是11. CSS 的新特性中，颜色与样式方面的主要内容包括哪些？A. 颜色空间和变量B. 函数和混合模式C. 上下文继承和伪元素D. 渐变和阴影12. CSS 中的 layout 属性用于定义哪些布局方式？A. 传统布局方式B. 水平布局C. 垂直布局D. 混合布局13. CSS 中的 @keyframes 规则用于定义哪些动画效果？A. 线性动画B. 曲线动画C. 随机动画D. 以上都是14. CSS 中的 transition 属性用于实现哪些效果？A. 颜色变化B. 背景颜色变化C. 字体大小变化D. 所有上述效果15. CSS 中的 @media 查询用于实现哪些功能？A. 响应式设计B. 页面布局C. 样式调整D. 以上都是16. CSS 中的 flex 属性用于实现哪些布局方式？A. 傳統布局方式B. 水平布局C. 垂直布局D. 混合布局17. CSS 中的 grid 属性用于实现哪些布局方式？A. 傳統布局方式B. 水平布局C. 垂直布局D. 混合布局18. CSS 中的 animations 属性用于实现哪些动画效果？A. 线性动画B. 曲线动画C. 随机动画D. 以上都是19. CSS 中的 variables 属性用于定义哪些样式？A. 颜色B. 字体C. 尺寸D. 所有上述效果20. CSS 中的 function 属性用于实现哪些功能？A. 颜色调整B. 字体调整C. 尺寸调整D. 以上都是21. 如何使用 CSS 设置颜色和样式？A. 使用 color 属性B. 使用 background-color 属性C. 使用 text-color 属性D. 以上都是22. 如何使用 CSS 设置布局和盒模型？A. 使用 display 属性B. 使用 position 属性C. 使用 margin 和 padding 属性D. 以上都是23. 如何使用 CSS 实现动画和过渡效果？A. 使用 CSS transitions 属性B. 使用 CSS animations 属性C. 使用 transform 属性D. 以上都是24. 如何使用 CSS 实现媒体查询和响应式设计？A. 使用 media queries 属性B. 使用 viewport 单位C. 使用 @media 查询D. 以上都是25. 如何使用 CSS 实现列表和菜单？A. 使用 list-style-type 属性B. 使用 list-style-position 属性C. 使用 menu 属性D. 以上都是26. 如何使用 CSS 实现表格和输入框？A. 使用 table 属性B. 使用 tr 和 td 属性C. 使用 form 属性D. 以上都是27. 如何使用 CSS 实现文本效果和字体？A. 使用 text-decoration 属性B. 使用 font-size 属性C. 使用 font-family 属性D. 以上都是28. 如何使用 CSS 实现多列布局？A. 使用 column-count 属性B. 使用 column-width 属性C. 使用 float 属性D. 以上都是29. 如何使用 CSS 实现弹出框和滚动效果？A. 使用 border-radius 属性B. 使用 overflow 属性C. 使用 transition 属性D. 以上都是30. 如何使用 CSS 实现按钮和链接？A. 使用 button 属性B. 使用 a 属性C. 使用 hover 属性D. 以上都是二、问答题1. CSS3的发展历程是怎样的？都有哪些重要版本？2. CSS3的主要特性有哪些？3. CSS3中颜色与样式的新特性有哪些？4. CSS3中的布局与box新特性有哪些？5. 如何在CSS3中实现颜色变化动画？6. 如何使用CSS3实现响应式布局？参考答案选择题：1. D2. D3. C4. D5. D6. D7. D8. D9. D 10. D11. D 12. D 13. D 14. D 15. D 16. D 17. D 18. D 19. D 20. D21. D 22. D 23. D 24. D 25. D 26. D 27. D 28. D 29. D 30. D问答题：1. CSS3的发展历程是怎样的？都有哪些重要版本？CSS3的发展历程经历了多个阶段，从早期的CSS 1.0到CSS 2.0，再到CSS 3.0。

css的练习题

css的练习题CSS（层叠样式表）是用于描述网页样式和布局的语言，通过CSS我们可以美化网页、改变元素的样式以及实现响应式布局等功能。

为了巩固和提高对CSS的理解和应用能力，以下是一些CSS练习题，希望能够帮助你进一步掌握CSS的技巧和知识。

练习题一：改变文本样式1. 创建一个HTML文件，并在里面添加一个段落元素。

2. 使用CSS将段落的字体颜色设置为红色。

3. 将段落的字体大小设置为18像素。

4. 将段落的文字设置为加粗。

5. 将段落的文字居中对齐。

练习题二：调整背景和边框样式1. 创建一个HTML文件，并在里面添加一个div元素。

2. 使用CSS将div的背景色设置为蓝色。

3. 将div的边框样式设置为实线，颜色为红色，边框宽度为2像素。

4. 将div的内边距设置为10像素。

5. 设置div的外边距为20像素。

练习题三：列表样式1. 创建一个HTML文件，并在里面添加一个无序列表。

2. 使用CSS将无序列表的项目符号改为实心圆。

3. 将无序列表的项目文本颜色设置为绿色。

4. 将无序列表的项目文本字体大小设置为14像素。

5. 将无序列表的项目文本添加下划线。

练习题四：盒模型调整1. 创建一个HTML文件，并在里面添加一个div元素。

2. 使用CSS将div的宽度设置为300像素，高度设置为150像素。

3. 将div的内边距设置为20像素。

4. 将div的边框样式设置为虚线，颜色为灰色，边框宽度为1像素。

5. 设置div的外边距为30像素。

练习题五：浮动与定位1. 创建一个HTML文件，并在里面添加两个div元素。

2. 使用CSS将第一个div的宽度设置为200像素，高度设置为200像素，并让其浮动到左侧。

3. 使用CSS将第二个div的宽度设置为400像素，高度设置为200像素。

4. 使用CSS将第二个div的定位方式设置为相对定位，并将其上移30像素、左移50像素。

5. 使用CSS将第二个div的背景色设置为黄色。

css3练习题

css3练习题CSS3练习题CSS（层叠样式表）是一种用于描述网页样式的语言，它可以让我们对网页进行美化和布局。

CSS3是CSS的升级版本，引入了许多新的特性和功能，使得网页设计更加灵活和丰富。

下面是一些CSS3练习题，帮助你巩固和提升你的CSS 技能。

一、圆角盒子使用CSS3的border-radius属性，创建一个带有圆角边框的盒子。

可以尝试不同的数值来调整圆角的大小和形状。

二、阴影效果使用CSS3的box-shadow属性，给一个盒子添加阴影效果。

可以尝试调整阴影的颜色、模糊程度和偏移量，以获得不同的效果。

三、渐变背景使用CSS3的gradient属性，给一个盒子添加渐变背景。

可以尝试线性渐变和径向渐变，调整渐变的起始和结束颜色，以及渐变的方向和形状。

四、过渡效果使用CSS3的transition属性，给一个元素添加过渡效果。

可以尝试不同的属性和时长，实现平滑的动画效果。

五、动画效果使用CSS3的animation属性，创建一个简单的动画效果。

可以尝试不同的关键帧和时长，实现各种各样的动画效果。

六、响应式布局使用CSS3的媒体查询（media queries）功能，创建一个响应式布局。

可以尝试在不同的屏幕尺寸下，调整布局和样式，以适应不同的设备。

七、字体图标使用CSS3的@font-face属性，引入一个字体图标库，并将图标应用到网页中的元素上。

可以尝试不同的图标和样式，实现独特的图标效果。

八、多列布局使用CSS3的多列布局（multicolumn layout）功能，创建一个多列的文本布局。

可以尝试不同的列数和间距，以及调整文本在列中的分布方式。

九、变形效果使用CSS3的transform属性，给一个元素添加变形效果。

可以尝试旋转、缩放、倾斜和平移等操作，以实现各种各样的效果。

十、过滤效果使用CSS3的filter属性，给一个元素添加过滤效果。

可以尝试不同的滤镜，如模糊、灰度、亮度和对比度等，以实现独特的视觉效果。

css练习答案

6.
题干
下面关于CSS表述正确的是
A、CSS是一种制作网页的新技术，现在已经为大多数的浏览器所支持，成为网页设计必不可少的工具之一。
B、层叠样式表是HTML的辅助工具，缺点是设计者设计的网页缺少动感，网页内容的排版布局上也有很多困难
C、使用CSS能够简化网页的格式代码，加快下载显示的速度，也减少了需要上传的代码数量，大大减少了重复劳动的工作量。
下列哪个css属性能够设置文本加粗？
A.font-weight:bold B.style:bold C.font:b D.font=bold
A
15
题干
在CSS设置背景图片的时候，不想让背景图片重复出现可以使用的属性是( )
A.background-colorB.background-repeat
C.background-position D.background-image
多选
1
题干
CSS 中的选择器包括（）
A．超文本标记选择器 B．类选择器 C．标签选择器 D．ID 选择器
BCD
2
题干
以下引入CSS过程中，属于正确的是（）
A．在当前页面内部使用<style>标签
B．在HTML元素中使用style属性
C．将CSS定义到外部的一个.css扩展名的文件，使用link标签引入
D、CSS是Cascading Stylesheets的缩写，中文意思是层叠样式表
ACD
7
题干
CSS选择器有：
A、ID选择器
B、类选择器
C、对象选择器
D、元素选择器
ABD
8
题干
<div>
<a>A1</a>

css样式基本知识练习题

css样式基本知识一、CSS核心基础如果希望网页美观、大方，并且升级轻松、维护方便，就需要使用CSS，实现结构与表现的分离。

1. CSS样式规则{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}在上面的样式规则中，用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。

其中，属性和属性值以“键值对”的形式出现，用英文“:”连接，多个“键值对”之间用英文“;”进行区分。

2. 引入CSS样式表的方式有哪些？(1)行内式也称为内联样式，是通过的属性来设置元素的样式。

语法格式< ="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容</ >并没有做到结构与表现的分离，所以一般很少使用。

通常，只有在样式规则较少且只在该元素上使用一次，或者需要临时修改某个样式规则时使用。

(2)内嵌式内嵌式是将CSS代码集中写在HTML文档的头部标记中，并且用标记定义。

语法格式<><type="text/css">选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}</></>内嵌式CSS样式只对其所在的HTML页面生效，因此，仅设计一个页面时，使用内嵌式是个不错的选择。

但如果是一个网站，不建议使用这种方式，因为它不能充分发挥CSS代码的重用优势。

(3)链入式链入式是将所有的样式放在一个或多个以为扩展名的外部样式表文件中，通过< />标记将外部样式表文件链接到HTML文档中。

语法格式<head>< ="CSS文件的路径" ="text/css" ="stylesheet" /> </head>链入式最大的好处是同一个CSS样式表可以被不同的HTML页面链接使用，同时一个HTML 页面也可以通过多个< />标记链接多个CSS样式表。

(完整版)CSS综合练习50选择题(单、多)

CSS综合练习50选择题（单、多）基本信息： [矩阵文本题] [必答题]姓名：________________________学号：________________________班级:________________________1.CSS是利用（）XHTML标签构建网页布局。

[单选题] [必答题] ○ A. <dir>○ B.<div>(正确答案)○ C.<dis>○ D.<dif>2.在CSS语言中下列哪一项是“左边框”的语法（） [单选题] [必答题] ○ A.border-left-width:<值>○ B.border-top-width：<值>○ C. border-left:<值>(正确答案)○ D. border-top-width:<值>3.在下列CSS语言中（）适用对象是“所有对象”。

[单选题] [必答题] ○ A.背景附件(正确答案)○ B.文本排列○ C.纵向排列○ D.文本缩进4.下列（）不属于CSS文本属性。

[单选题] [必答题]○ A.font-size○ B.text-transform○ C.text-align○ D.line-through(正确答案)5.下列哪一项是CSS正确的语法构成（） [单选题] [必答题]○ A.body:color=black○ B.{body;color:black}○ C.body{color:black}(正确答案)○ D.{body:color=black}6.下面哪个CSS属性是用来改变背景颜色的（） [单选题] [必答题]○ A.background-color:(正确答案)○ B.bgcolor:○ C.color:○ D.text:7.怎样给所有的<h1>标签添加背景颜色（） [单选题] [必答题]○ A. .h1 { background-color:#ffffff }○ B. h1 { background-color; }(正确答案)○ C. h1.all { background-color:#ffffff }○ D. #h1 { background-color:#ffffff }8.下列哪个CSS属性可以更改样式表的字体颜色（） [单选题] [必答题] ○ A.text-color=○ B.fgcolor:○ C.text-color:○ D.color:(正确答案)9.下列哪个CSS属性可以更改字体大小（） [单选题] [必答题]○ A.text-size○ B.font-size(正确答案)○ C.text-style○ D.font-style10.下列哪段代码能够定义所有P标签内文字加粗（） [单选题] [必答题]○A.<p style=”text-size:blod”>○ B.< p style=”font-size:blod”>○ C.p{ text-size:bold; }○ D.p{ font-weight:bold; }(正确答案)11.下面哪个方法可以去掉文本超链接的下划线（） [单选题] [必答题]○ A. a{ text-decoration:no underline; }○ B. a{ underline:none; }○ C. a{ decoration:no underline; }○ D. a{ text-decoration:none; }(正确答案)12.下列哪个CSS属性能够更改文本字体（） [单选题] [必答题]○ A.f;○ B.font=○ C.font-family:(正确答案)○ D.text-decoration:none;13.下列哪个CSS属性能够设置文本加粗（） [单选题] [必答题]○ A.font-weight:bold(正确答案)○ B.style:bold○ C.font:b○D.font=”bold”14.下列哪个CSS属性能够设置盒子模型的填充为10、20、30、40、(顺时针方向)（） [单选题] [必答题]○ A.padding:10px 20px 30px 40px(正确答案)○ B. padding:40px 30px 20px 10px○ C.padding:10px 40px 30px 20px○ D. padding:20px 10px 40px 30px15.下列哪个属性能够设置盒子模型的左侧边界（） [单选题] [必答题]○ B.indent:○ C.margin-left:(正确答案)○ D.text-indent:16.（）能够定义列表的项目符号为实心矩形。

Css复习题

1、关于内容、结构和表现说法正确的是（ABD ）A、内容是页面传达信息的基础B、表现使得内容的传达变得更加明晰和方便C、结构就是对内容的交互及操作效果D、内容就是网页实际要传达的信息，包括文本、图片、音乐、视频、数据、文档等。

2、关于XHTML基本语法说法正确的是（ABC ）A、在文档开始要定义文档类型B、在根元素中应声明命名空间C、所有标签需闭合的，空标签要加“ /”来关闭D、注释语句为：/**/3、关于CSS基本语法说法正确的是（ AC ）A、属性必须要包含在{}号之中B、属性和属性值之间用等号链接C、当有多个属性时，用“；”进行区分D、如果一个属性有几个值，则每个属性值之间用分号分隔开4、以下声明可将文本大小设为12px的有：（ABC）A、font-size:12px;B、font-size:9pt;C、font-size:0.75em;D、font-size:0.75;5、关于样式表的优先级说法正确的是：（ABC ）A、直接定义在标记上的css样式级别最高B、内部样式表次之C、外部样式表级别最低D、当样式中属性重复时，先设的属性起作用6、关于浏览器默认样式说法错误的是：（ABCD ）A、IE默认页边距为10px，通过body的margin属性设置。

B、FF默认页边距为8px,通过body的padding属性设置。

C、IE默认列表左缩进为40px，通过ul、ol的margin属性设置。

D、FF默认列表左缩进为40px，通过ul、ol的padding属性设置。

7、关于CSS为什么会出现Bug说法正确的是：（ABC）A、CSS作为表现标准语言，需要在不同浏览器中实现表现层统一B、各大主流浏览器由于不同厂家开发，所有的核心构架和代码也很难重和C、各大厂商处于自身利益而设种种技术壁垒D、网页设计师定义的命名空间不一样8、CSS样式文件的类型有（ ABC ）A、内部样式表B、内联样式表C、外部样式表D、包含样式表9、以下哪些Bug在FF中不会出现（ ABCD ）A、双补浮向BugB、图片间隙 BugC、项目符号隐藏 BugD、多余字符Bug10、DIV/CSS布局模型包括（ ABC ）A、Flow Model（流动模型）B、Float Model（浮动模型）C、Layer Model （层模型）D、box Model (盒模型)11、关于CSS基本语法说法正确的是（ AC ）A、属性必须要包含在{}号之中B、属性和属性值之间用等于号链接C、当有多个属性时，用“；”进行区分D、如果一个属性有几个值，则每个属性值之间用分号分隔开12、以下声明可将文本大小设为12px的有：（ABCD）A、font-size:12px;B、font-size:9pt;C、font-size:0.75em;D、font-size:0.75;13、关于样式表的优先级说法正确的是：（ABC）A、直接定义在标记上的css样式级别最高B、内部样式表次之C、外部样式表级别最低D、当样式中属性重复时，先设的属性起作用14、关于Hack说法正确的是：（ ABC ）A、Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法B、它们都属于个人对CSS代码的非官方的修改C、也有人称之为patch(补丁)D、以上说法都不对15. 关于横导航链接为什么要用UL+LI，以下说法正确的是（ ABC ）A．导航从其本意上说，不是一个段落P，更不是一些个标题Hx，也不是一个DIV，DIV 只是部分与分区。

css练习题

css练习题CSS练习题CSS（层叠样式表）是一种用于描述网页外观和样式的标记语言。

掌握CSS对于前端开发者来说至关重要。

为了提高自己的CSS技能，下面将介绍一些CSS 练习题，帮助大家巩固和拓展对CSS的理解。

一、盒子模型练习1. 创建一个带有红色背景颜色的div，宽度为200px，高度为100px。

2. 创建一个带有蓝色边框的div，边框宽度为2px，边框样式为实线，边框颜色为蓝色。

3. 创建一个带有50px内边距的div，内边距上下左右均为10px。

4. 创建一个带有20px外边距的div，外边距上下左右均为20px。

二、选择器练习1. 选中所有class为"box"的元素，并将它们的背景颜色设置为黄色。

2. 选中id为"header"的元素，并将它的字体颜色设置为红色。

3. 选中所有p元素中的第一个，并将它的字体大小设置为20px。

4. 选中所有p元素中的最后一个，并将它的字体大小设置为16px。

三、布局练习1. 创建一个两列布局，左侧宽度为30%，右侧宽度为70%。

2. 创建一个三列布局，左侧宽度为20%，中间宽度为60%，右侧宽度为20%。

3. 创建一个固定在页面底部的footer，宽度为100%。

4. 创建一个居中对齐的div，宽度为300px，高度为200px。

四、动画练习1. 创建一个渐变动画，元素的背景颜色从红色过渡到蓝色，动画持续时间为3秒。

2. 创建一个旋转动画，元素顺时针旋转360度，动画持续时间为2秒。

3. 创建一个缩放动画，元素从初始大小缩小到一半大小，动画持续时间为1秒。

4. 创建一个闪烁动画，元素的透明度在0和1之间循环变化，动画持续时间为2秒。

五、响应式设计练习1. 创建一个响应式网页布局，当屏幕宽度小于600px时，将导航栏隐藏。

2. 创建一个响应式图片布局，当屏幕宽度小于800px时，将图片缩小为原来的一半大小。

3. 创建一个响应式表格布局，当屏幕宽度小于400px时，将表格的列数减少为一列。

学前端练习题

学前端练习题学习前端开发是如今IT行业中非常热门的一个方向，掌握前端技术可以使你在职场上更加有竞争力。

为了帮助读者更好地学习和练习前端技术，本文将提供一些学前端的练习题。

1. HTML练习题HTML是构建网页的基础，掌握HTML的基本语法和标签是学习前端的第一步。

请完成以下题目：1.1 创建一个简单的HTML网页，包含标题头、段落和图片。

1.2 制作一个无序列表，并给其中的每一项添加超链接。

1.3 创建一个表格，包含多行多列的数据，并给表格添加边框。

2. CSS练习题CSS是前端开发的样式语言，用于控制网页的布局和样式。

请完成以下题目：2.1 设置一个div块的背景颜色、宽度和高度。

2.2 为一个按钮添加鼠标悬停样式。

2.3 制作一个动画效果，使一个图像在页面中移动。

3. JavaScript练习题JavaScript是一种脚本语言，用于为网页添加交互和动态效果。

请完成以下题目：3.1 创建一个JavaScript函数，实现两个数字相加并返回结果。

3.2 判断一个字符串是否为回文。

3.3 实现一个简单的倒计时功能，从10秒开始倒计时。

4. 综合练习题综合练习题会综合运用HTML、CSS和JavaScript，要求读者结合前面所学知识完成以下练习题：4.1 创建一个网页，包含一个导航栏和内容区域，点击导航栏菜单可以显示对应的内容。

4.2 制作一个简单的表单验证功能，要求对用户输入的信息进行必填项验证和格式验证。

4.3 利用Ajax实现一个简单的图片加载功能，点击按钮可以从服务器获取一张图片并显示在网页上。

通过以上练习题的完成，你可以逐渐提高对前端技术的理解和掌握。

在实际学习过程中，可以根据自己的兴趣和实际需求来加深对前端技术的学习和练习。

希望本文对你学前端有所帮助！。

CSS综合练习50选择题(单、多)

[单选题] [必答题] ○ A.背景附件(正确答案)○ B.文本排列○ C.纵向排列○ D.文本缩进4.下列（）不属于CSS文本属性。

CSS选择器餐厅练习

CSS选择器餐厅练习下载地址：通过CSS餐厅来练习⼀些常⽤的选择器第⼀关：元素选择器plateplate元素select the plates第⼆关：元素选择器bentobento元素select the bento plate第三关：ID选择器#fancyid为fancy的元素select the fancy plate第四关：后代选择器plate appleplate祖先元素下的后代元素appleselect the apple on the plate第五关：结合后代和ID选择器#fancy pickleid为fancy的祖先元素下的pickle元素select the pickle on the fancy plate第六关：类选择器.small类名为small的元素select the small apple第七关：结合类选择器orange.small同时满⾜类名为small且为orange的元素select the small orange第⼋关：后代选择器和类选择器bento orange.smallbento⽗元素下⾯类名为small的orange的⼦元素select the small orange in the bentos第九关：逗号选择器plate,bento在div元素中的plate和bento元素selector all the plates and bentos第⼗关：通配选择器*在主体中的所⽤元素select all things第⼗⼀关：结合通⽤选择器plate *plate⽗元素的所有⼦元素select everyting on a plate第⼗⼆关：相邻兄弟选择器plate+appleplate元素的后⼀个元素selelc evey apple that's next to a apple第⼗三关：通⽤兄弟选择器bento~picklebento元素后的多个pickle元素select the pickle beside the bento第⼗四关：后代选择器plate>appleplate⽗元素下⾯的apple⼦元素select the apple directly on a plate第⼗五关：:first-childorange:first-child第⼀个orange元素select the top orange第⼗六关：:only-childplate :only-child选择plate中唯⼀种类的⼦元素select the apple and the pickle on the plate注意：only-child 选择器匹配属于⽗元素中唯⼀⼦元素的元素第⼗七关：:last-child#fancy :last-child,pickle:last-childselect the small apple and the pickle选择id为fancy的元素最后⼀个⼦元素和pickle元素的最后⼀个元素第⼗⼋关：:nth-childplate:nth-child(3)select the 3rd plate选择第三个plate元素第⼗九关：:nth-last-child(a)bento:nth-last-child(3)倒数从第三个开始的bento元素select the 1st bento第⼆⼗关：:first-of-typeapple:first-of-type第⼀个apple元素select first apple第⼆⼗⼀关：:nth-of-typeplate:nth-of-type(even)选择所有偶数个的plateselect all even plates第⼆⼗⼆关：:nth-of-type(An+B)plate:nth-of-type(2n+3)从第三个元素起，每隔⼀个选择⼀个plate元素select evey 2nd plate，starting from the 3rd第⼆⼗三关：:only-of-typeplate apple:only-of-typeplate元素中仅有⼀个的apple元素select the apple on the middle plate注意：only-of-type 选择器匹配属于其⽗元素的特定类型的唯⼀⼦元素的每个元素第⼆⼗四关：:last-of-typeorange:last-of-type,apple:last-of-type选择最后⼀个orange元素和最后⼀个apple元素select the last apple and orange第⼆⼗五关：:emptybento:emptyselect the empty bentos注意：:empty选择器匹配没有⼦元素（包括⽂本节点空格）的每个元素第⼆⼗六关：:not(X)apple:not(.small)选择类名不为small的apple元素select the big apple注意：:not()选择器匹配没和元素是不是指定的元素/选择器第⼆⼗七关：[attribute] 属性选择器[for]有for属性的所有元素select the items for someone注意：[attribute] 属性选择器选择有相应属性的元素第⼆⼗⼋关：A[attribute] 属性选择器plate[for]有for属性的plate元素select the plates for someone第⼆⼗九关：[attribute='value'][for='Vitaly']选择for属性值为Vitaly的元素select Vitaly‘s meal注意：[attribute='value']属性选择器选择属性为指定值的元素第三⼗关：[attribute^='value'][for^='Sa']for属性值以Sa开始的所有元素select the items for names that start width ’Sa'注意：[attribute^='value'] 属性选择器选择所有属性值以指定字母开始的元素第三⼗⼀关：[attribute$="value"][for$='ato']选择for属性值以ato结尾的元素select the items for names that end width ‘ato'注意：[attribute$="value"] 属性选择器后⾯的后⼏个字母需要以 value结尾第三⼗⼆关：[attribute*="value"][for*='obb']选择for属性值中包含obb的元素select the meals for names that contain ’obb'注意：[attribute*="value"]选择器匹配元素属性值包含指定值的元素。

CSS餐厅练习

CSS餐厅练习餐厅选择器练习地址：元素选择器第1关plate选中 plate 元素第2关bento选中 bento 元素id选择器第3关#fancy选中 id = “fancy” 的元素后代选择器第4关plate apple选中 plate 祖先元素下的 apple 后代元素第5关#fancy pickle选中 id = “fancy” 祖先元素下的 pickle 后代元素类选择器第6关.small选中 class = “small” 的元素第7关orange.small选中 orange 组中的 class = “small” 的元素第8关bento orange.small选中 bento ⽗元素下 class = “small” 的orange⼦元素选择器分组（并集选择器）第9关plate,bento同时选中 plate,bento 对应的元素通配符选择器第10关*选中页⾯中的所有元素第11关plate *选中 plate 中的所有⼦元素关系选择器第12关plate+apple选择下⼀个兄弟，即 plate 元素的后⼀个元素第13关bento~pickle选择下边的所有兄弟，即 bento 下边的所有 pickle 兄弟⼦元素选择器第14关plate>apple选中指定⽗元素的指定⼦元素,即⽗元素 plate 中的⼦元素 apple伪类选择器第15关plate orange:first-child选中 plate 中的第⼀个 orange 元素第16关plate :only-child选中 plate 中那个唯⼀的元素第17关#fancy apple:last-child,pickle:last-child选中 apple 元素的最后⼀个和pickle元素的最后⼀个第18关plate:nth-child(3)选中 div 中的第3个孩⼦ plate第19关bento:nth-last-child(3)选择⼦元素中的倒数第三个，即选中 div 中倒数第3个孩⼦ bento第20关apple:first-of-type选中类型为 apple 的第⼀个元素第21关plate:nth-of-type(even)同类型偶数位，即选中类型为 plate 的偶数位上的元素第22关plate:nth-of-type(2n+3)同类型的，每2个选择⼀个 plate，从第3 个开始，包括第3个第23关plate apple:only-of-type在任意 plate 中选择⼀个有唯⼀的 apple 的元素第24关orange.small:last-of-type,apple.small:last-of-type选中 orange.small、apple.small 的最后⼀个元素第25关bento:empty选择没有⼦元素的元素，即 bento 为空的元素第26关apple:not(.small)选择所有与否定选择器不匹配的元素，即选所有没有 class=“small” 的 apple 属性选择器第27关apple[for],plate[for],bento[for]属性选择器选中有 for 属性的元素第28关plate[for]选中有 for 属性的 plate第29关bento[for=Vitaly]选中 for 的属性值为 Vitaly 的 bento第30关plate[for^=S],bento[for^=S]选中 for 的属性值以 S 开头的元素第31关bento[for$=o],plate[for$=o]选中 for 的属性值以 o 结尾的元素第32关bento[for*=odd]选中 for 的属性值中包含 odd 的元素。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS练习CSS的英文是Cascading Style Sheets，中文可以翻译成串联式样式表（层叠样式表）。

CSS按其位置可以分成三种：∙内嵌样式(Inline Style) （行内式）∙内部样式表(Internal Style Sheet) （嵌入式）∙外部样式表(External Style Sheet) （链接式、导入式）内嵌样式(Inline Style)Inline Style是写在标记里面的。

内嵌样式只对所在的标记有效。

<P style="font-size:20pt; color:red">这个Style定义</p><p>里面的文字是20pt字体，字体颜色是红色。

</p>内部样式表(Internal Style Sheet)内部样式表是写在HTML的<head></head>里面的。

内部样式表只对所在的网页有效。

<HEAD><STYLE type="text/css">H1.mylayout {border-width:1;border:solid;text-align:center;color:red；}</STYLE></HEAD>外部样式表(External Style Sheet)如果很多网页需要用到同样的样式(Styles)，用什么方法呢？将样式(Styles)写在一个以.css为后缀的CSS文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。

比如可以用文本编辑器建立一个叫home的文件，文件后缀不要用.txt，改成.css。

文件内容如下：H1.mylayout {border-width: 1; border: solid; text-align: center;color:red}然后你建立一个网页，代码如下：<HEAD><link href="../asdocs/css_tutorials/home.css" rel="stylesheet"type="text/css">（链接式）</HEAD>外部文件也可以用@import导入。

如果单独从外部引用css来说，他们的作用是基本一样。

优先级：行内式》嵌入式》导入式Html主要用来定义网页的内容，而css主要用来定义网页的表现。

CSS样式表可以控制许多仅使用HTML无法控制的属性。

可以实现代码的重用。

CSS盒子模型：在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。

填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。

在CSS中，我们可以对盒子的属性进行设计。

Margin：10px;Margin：10px 20px；Margin：10px 20px 30px 40px；Margin-top：10px；Margin-left：40px；Margin-right：20px；Margin-bottom：30px；Padding：10px;Padding：10px 20px；Padding：10px 20px 30px 40px；Padding-top：10px；Padding-left：40px；Padding-right：20px；Padding-bottom：30px；Border：颜色、线形、线宽，四边可以不同定义上边框样式--border-top:medium double green;定义右边框样式--border-right:medium solid red;定义下边框样式--border-bottom:thin dotted black;定义左边框样式--border-left:thick dashed orange;四边同时定义—border：12px double #667785；线宽：medium (是缺省值)thin (比medium细)thick (比medium粗)用长度单位定值。

线形：none (没有边框，无论边框宽度设为多大)dotted (点线式边框)dashed (破折线式边框)solid (直线式边框)double (双线式边框)groove (槽线式边框)ridge(脊线式边框)inset (内嵌效果的边框)outset (突起效果的边框)单边边框属性上下左右四个边框不但可以统一设定，也可以分开设定。

设定上边框属性，你可以使用border-top, border-top-width, border-top-style, border-top-color。

设定下边框属性，你可以使用border-bottom, border-bottom-width,border-bottom-style, border-bottom-color。

设定左边框属性，你可以使用border-left, border-left-width, border-left-style, border-left-color。

设定上边框属性，你可以使用border-right, border-right-width, border-right-style, border-right-color。

CSS伪类：a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */CSS选择器：标签选择器：顾名思议，标签选择器是直接将HTML标签作为选择器，可以是p、h1、dl、strong等HTML标签。

p { font:12px;}em { color:blue;}dl { float:left; margin-top:10px;}id选择器：（同一个页面只能使用一次）我们通常给页面元素定义id。

例如定义一个层 <div id="menubar"></div>然后在样式表里这样定义：#menubar {margin:0 auto;background:#ccc;color:#c00;}类（class）选择器：（同一个页面中可以多次引用）在CSS里用一个点开头表示类别选择器定义，例如：.da1 {color:#f60;font-size:14px ;}在页面中，用class="类别名"的方法调用： <span class="da1">14px大小的字体</s pan> 这个方法比较简单灵活，可以随时根据页面需要新建和删除。

也可以同时引用多个类选择器<span class="da1 da2 da3">群组选择器：（并集选择器）当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

如：p, td, li {line-height:20px;color:#c00;}#main p, #sider span {color:#000;line-height:26px;}使用组群选择器，将会大大的减化CSS代码，将具有多个相同属性的元素，合并群组进行选择，定义同样的CSS属性，这大大的提高了编码效率与CSS文件体积。

后代选择器：后代选择器也叫派生选择器。

可以使用后代选择器给一个元素里的子元素定义样式，例如这样：li strong {font-style:italic;font-weight:800;color:#f00;}就是给li下面的子元素strong定义一个斜体加粗而且套红的样式。

复合选择器就是两个或多个基本选择器，通过不同方式连接而成的选择器。

复合选择器之一——交集选择器交集选择器是由两个选择器直接连接构成，结果是选中二者各自元素范围的交集。

第一个必须是标记选择器，第二个必须是类选择器或者ID选择器。

两个选择器之间不能有空格，必须连续书写。

比如：p#test{属性:属性值} p#test定义的风格，仅仅适用于<p id="test">的标记，而不影响使用了#test的其他标记P标记是HTML标记,#test是ID选择器。

用这种方式构成的选择器，将选择中同时满足前后两者定义的元素，也就是说前者所定义的标记类型，并且制定了后者的类或者ID的元素，所以被成为交集选择器。

CSS元素定位：CSS元素绝对定位、相对定位布局和浮动等1. position:static|无定位position:static是所有元素定位的默认值, 一般不用注明，除非有需要取消继承的别的定位#div-1 { position:static; }2. position:relative|相对定位使用position:relative，就需要top,bottom,left,right4个属性来配合，确定元素的位置。

如果要让div-1层向下移动20px,左移40px:#div-1 {position:relative;top:20px;left:40px;}如果用到相对定位，紧随他的层是不会出现在div-1的下方，而是和div-1在同一个高度出现。

可见，position:relative;并不是很好用。

3. position:absolute|绝对定位使用position:absolute;,能够很准确的将元素移动到你想要的位置，将div-1a 移动到页面的右上角:#div-1a {position:absolute;top:0;right:0;width:200px;}使用绝对定位的div-1a层前面的或者后面的层会认为这个层并不存在，丝毫不影响到他们。