跳转到帖子
在手机APP中查看

一个更好的浏览方法。了解更多

OKCCN - XenForo & IPS Plugin Marketplace

主屏幕上的全屏APP,带有推送通知、徽章等。

在iOS和iPadOS上安装此APP
  1. 在Safari中轻敲分享图标
  2. 滚动菜单并轻敲添加到主屏幕
  3. 轻敲右上角的添加按钮。
在安卓上安装此APP
  1. 轻敲浏览器右上角的三个点菜单 (⋮) 。
  2. 轻敲添加到主屏幕安装APP
  3. 轻敲安装进行确认。
  • 选择语言

CSS Exercises

推荐的帖子

  • 行政经理

CSS Exercises


Test your CSS skills with exercises from all categories:

Exercises

Tip: Sign in to track your progress.

0/152 done

Syntax6 exercises

Done

Selectors6 exercises

Done

Selectors Grouping3 exercises

Done

How To4 exercises

Done

How To - Internal2 exercises

Done

How To - Inline2 exercises

Done

How To - Multiple and Cascade3 exercises

Done

Comments5 exercises

Done

Colors5 exercises

Done

RGB5 exercises

Done

HEX7 exercises

Done

HSL6 exercises

Done

Background Color7 exercises

Done

Background Image6 exercises

Done

Background Repeat6 exercises

Done

Background Attachment5 exercises

Done

Background Shorthand6 exercises

Done

Border5 exercises

Done

Border Width6 exercises

Done

Border Color6 exercises

Done

Border Sides5 exercises

Done

Border Shorthand5 exercises

Done

Rounded Borders5 exercises

Done

Margins8 exercises

Done

Margin Collapse3 exercises

Done

Padding7 exercises

Done

Padding box-sizing1 exercises

Done

Height and Width5 exercises

Done

Height and Width3 exercises

Done

Box Model8 exercises

Done

Outline4 exercises

Done

Outline Width6 exercises

Done

Outline Color6 exercises

Done

Outline Shorthand3 exercises

Done

Outline Offset4 exercises

Done

Text5 exercises

Done

Text Alignment7 exercises

Done

Text Decoration7 exercises

Done

Decoration Styles4 exercises

Done

Text Transformation5 exercises

Done

Text Spacing6 exercises

Done

Text Shadow5 exercises

Done

Font Family6 exercises

Done

Web Safe Fonts5 exercises

Done

Font Style8 exercises

Done

Font Size7 exercises

Done

Font Shorthand3 exercises

Done

Icons3 exercises

Done

Lists8 exercises

Done

Tables6 exercises

Done

Table Size4 exercises

Done

Table Alignment7 exercises

Done

Table Style6 exercises

Done

Table Responsive5 exercises

Done

Display6 exercises

Done

Display / Hide3 exercises

Done

Max Width5 exercises

Done

Position Static / Relative5 exercises

Done

Position Fixed / Absolute5 exercises

Done

Position Sticky4 exercises

Done

Z-index6 exercises

Done

Overflow6 exercises

Done

Overflow X/Y4 exercises

Done

Float4 exercises

Done

Clear7 exercises

Done

Inline-block4 exercises

Done

Align Horizontal5 exercises

Done

Align Vertical5 exercises

Done

Combinators9 exercises

Done

Pseudo Classes Interactive8 exercises

Done

Pseudo Classes Structural5 exercises

Done

Pseudo Elements Text5 exercises

Done

Pseudo Elements Content7 exercises

Done

Opacity9 exercises

Done

Vertical Navbar4 exercises

Done

Horizontal Navbar4 exercises

Done

Dropdowns4 exercises

Done

Advanced Dropdowns4 exercises

Done

Attribute Selectors5 exercises

Done

Attribute Selectors Advanced5 exercises

Done

Form Inputs5 exercises

Done

Form Focus/Icons4 exercises

Done

Form Elements4 exercises

Done

Counters4 exercises

Done

Counters Nested3 exercises

Done

Units Absolute4 exercises

Done

Units Relative6 exercises

Done

Specificity5 exercises

Done

Specificity Hierarchy3 exercises

Done

!important5 exercises

Done

Math Functions9 exercises

Done

Rounded Corners8 exercises

Done

Border Images6 exercises

Done

Multiple Backgrounds9 exercises

Done

Colors9 exercises

Done

Color Keywords7 exercises

Done

Linear Gradients8 exercises

Done

Radial Gradients8 exercises

Done

Conic Gradients4 exercises

Done

Shadow Effects7 exercises

Done

Box Shadow5 exercises

Done

Text Effects9 exercises

Done

Web Fonts5 exercises

Done

2D Transforms5 exercises

Done

2D Transform Scale4 exercises

Done

2D Transform Skew4 exercises

Done

3D Transforms6 exercises

Done

Transitions4 exercises

Done

Transition Timing5 exercises

Done

Animations3 exercises

Done

Animation Timing5 exercises

Done

Animation Properties4 exercises

Done

Tooltips4 exercises

Done

Tooltip Arrows4 exercises

Done

Images5 exercises

Done

Image Effects4 exercises

Done

Image Hover4 exercises

Done

Image Centering4 exercises

Done

Image Filters8 exercises

Done

Image Shapes8 exercises

Done

Object Fit6 exercises

Done

Object Position3 exercises

Done

Masking5 exercises

Done

Buttons5 exercises

Done

Button Hover4 exercises

Done

Button Groups4 exercises

Done

Pagination4 exercises

Done

Pagination Styles4 exercises

Done

Multiple Columns4 exercises

Done

Multiple Column Rules5 exercises

Done

User Interface4 exercises

Done

Variables6 exercises

Done

The property Rule4 exercises

Done

Box Sizing5 exercises

Done

Media Queries6 exercises

Done

Flexbox3 exercises

Done

Flex Container4 exercises

Done

Flexbox Justify4 exercises

Done

Flexbox Align4 exercises

Done

Flex Items6 exercises

Done

Flex Responsive3 exercises

Done

Grid Columns and Rows7 exercises

Done

Grid Container8 exercises

Done

Grid Align Content4 exercises

Done

Grid Item6 exercises

Done

RWD Intro3 exercises

Done

RWD Viewport4 exercises

Done

RWD Grid View3 exercises

Done

RWD Media Queries4 exercises

Done

RWD Images4 exercises

Done

RWD Videos3 exercises

Done

Log in to track your progress

If you haven't already, sign up to become a W3Schooler, and get points for every exercise you complete.

As a logged-in W3Schools user you will have access to many features like having your own web page, track your learning progress, receive personal guided paths, and more.


The Exercise

The exercises are a mix of "multiple choice" and "fill in the blanks" questions.

There are between 3 and 9 questions in each category.

The answer can be found in the corresponding tutorial chapter.

If you're stuck, or answer wrong, you can try again or hit the "Show Answer" button to see the correct answer.


Kickstart your career

Get certified by completing the course

Get certified

参与讨论

你可立刻发布并稍后注册。 如果你有帐户,立刻登录发布帖子。

游客
回帖…

帐户

导航

搜索

搜索

配置浏览器推送通知

Chrome (安卓)
  1. 轻敲地址栏旁的锁形图标。
  2. 轻敲权限 → 通知。
  3. 调整你的偏好。
Chrome (台式电脑)
  1. 点击地址栏中的挂锁图标。
  2. 选择网站设置。
  3. 找到通知选项并调整你的偏好。