全部学科
Python全栈
python
NodeJS全栈
nodejs
小程序首页
📝 1 篇文章 15 道配套习题

CSS样式属性专题

专题说明

CSS样式属性决定元素的视觉表现。本专题系统讲解背景边框、文本样式、动画过渡三大核心模块,帮助学习者掌握页面视觉设计的基础技能。

学习目标

  1. 熟练使用背景相关属性设置元素背景效果
  2. 掌握文本样式属性控制文字显示效果
  3. 理解过渡和动画原理实现交互效果
  4. 学会transform变换实现元素变形

学习内容

本专题涵盖三大样式模块:

  • 背景与边框:background系列属性、border-radius圆角
  • 文本样式:color、font系列、text-align、line-height
  • 动画与过渡:transition过渡、animation动画、transform变换

学习建议

  1. 背景和文本是基础,先掌握核心属性再学习高级特性
  2. 过渡适合简单交互,动画适合复杂效果,理解两者区别
  3. transform性能优越,优先用于移动端动画开发
  4. 注意animation简写属性的子属性顺序

📝 发现内容有误?点击此处直接编辑

📝 配套习题(15 题)

1
判断题

CSS中的background是一个简写属性,可以一次性设置background-color、background-image、background-repeat等多个背景相关属性。

A

B

2
单选题

下列哪个CSS属性用于设置元素的圆角边框?

A

border-style

B

border-radius

C

border-width

D

border-color

3
填空题

CSS中,设置背景图片不重复的属性是_________________,设置背景图片位置的属性是___________________

4
判断题

CSS中的color属性用于设置元素的背景颜色。

A

B

5
单选题

下列哪个CSS属性用于设置文本的字体大小?

A

font-weight

B

font-family

C

font-size

D

font-style

6
填空题

CSS中,设置文本水平对齐方式的属性是__________,设置文本行高的属性是___________

7
判断题

CSS的transition属性可以实现元素从一种样式平滑过渡到另一种样式的效果。

A

B

8
判断题

CSS的transitionanimation都可以创建动画效果,但transition需要触发条件(如hover),而animation可以自动播放。

A

B

9
单选题

在CSS中,定义动画关键帧使用的关键字是?

A

@animation

B

@keyframes

C

@frames

D

@transition

10
单选题

下列哪个CSS属性可以实现元素的旋转效果?

A

rotate

B

transform

C

animation

D

transition

11
填空题

CSS过渡的简写属性是__________,其四个子属性分别是transition-property、___________________、transition-timing-function和transition-delay。

12
单选题

下列哪个属性用于设置CSS动画的播放次数?

A

animation-duration

B

animation-delay

C

animation-iteration-count

D

animation-direction

13
单选题

下列关于CSS transform属性的说法,正确的是?

A

transform只能设置一个变换函数

B

transform的变换原点默认是元素的中心点

C

transform会影响文档流中其他元素的位置

D

transform的变换效果会触发重排(reflow)

14
多选题

下列哪些是CSS transition-timing-function的有效值?

A

ease

B

linear

C

ease-in-out

D

smooth

15
多选题

CSS的animation简写属性可以包含以下哪些子属性?

A

animation-name

B

animation-duration

C

animation-timing-function

D

animation-fill-mode

← 上一个专题 CSS架构最佳实践
下一个专题 → CSS盒模型专题

📝 发现内容有误?点击此处直接编辑

想查看更多习题和详细解析?
小程序提供完整的题库和详细解析

长按或扫描二维码,立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库