【翻译】系统性学习 CSS 指南及全 DEMO 练习

[Coco]

本文内容源自：A Sorted List of CSS Code Examples: Master Styling HTML Elements

非完全直译，按照我的理解有所改动。

如果你是一名初学者，并且希望系统性的掌握 CSS，那么这里有一整套可供你理解并且模仿学习的 DEMO(HTML+CSS)，并且是所见即所得。

CSS 知识点拆分

这里，首先我们会将整个 CSS 知识点分拆，分为：

1. Color
2. Backgrounds
3. Borders
4. Margins
5. Padding
6. Height and Width
7. Box Model
8. Outline
9. Text
10. Fonts
11. Links
12. Lists
13. Tables
14. Display
15. Position
16. Overflow
17. Float
18. Inline-Block
19. Align Elements
20. Combinators
21. Pseudo-Class
22. Pseudo-Elements
23. Opacity
24. Navigation Bars
25. Dropdowns
26. Images
27. Attribute Selectors
28. Forms
29. Counters
30. Website Layout
31. Transform
32. Transition
33. Animations
34. Tooltips
35. Buttons
36. Pagination
37. Multiple Columns
38. Grid
39. Flexbox
40. Media Queries
41. Responsive

基于每一个知识点，都提供了完善且充分的 DEMO 可以对照练习。其中的 DEMO 基本涵盖了该属性的所有知识点！

跟着这些 DEMO：

1. 对于刚入门 CSS 的，对照着完整过一篇，可以巩固基础
2. 而对于对 CSS 有一定掌握的，也可以对照选择性练习，查缺补漏
3. 亦可以当做一本字典

Color

All CSS styles include the color property. You can pick color codes from our useful Pickeristic tool.

• ​Assign background-color to an element using color names
• Assign background-color to an element using RGB indicators
• Assign background-color to an element using RGBA indicators
• ​Assign background-color to an element using HEX indicators
• ​Assign background-color to an element using HSL indicators
• ​Assign background-color to an element using HSLA indicators
• ​Specify how opaque or how transparent a color is

Backgrounds

The following list of CSS code examples illustrates different actions you can perform on page backgrounds. Learn to set colors or images as backgrounds and control the way they look on web sites.

• Set background color
• Use background image
• Repeat background image
• Specify background image position
• Use background attachment property
• Background shorthand example
• Set multiple background images
• Use shorthand to set multiple background images
• Resize background image
• Contain and cover background size
• Set size for multiple background images
• Full size background image
• Specify background origin
• Use background clip
• Apply the linear gradient for your background without specifying direction
• Apply the linear gradient for your background from left to right
• Diagonal linear gradient from top left to bottom right
• Linear gradient with a defined angle
• Create the linear gradient background with multiple colors (default direction)
• Create the linear gradient background with multiple colors from left to right
• Linear gradient (left-right) with changing transparency
• Create repeating linear gradient
• Apply the radial gradient with evenly spaced color stops
• Apply the radial gradient with differently spaced color stops
• Set a circle shaped radial gradient
• Manipulate radial gradient size parameters
• Use a repeating radial gradient

Borders

These CSS code examples manipulate borders of HTML elements.

• Set unique CSS border style to each element
• Apply different CSS border style to individual walls
• Specify CSS border width
• Define CSS border color using different color value indicators
• Use border-radius to create rounded borders
• Assign individual styles to each wall of a CSS border
• Use shorthand to define border-width, border-color, and border-style
• Apply style to a single CSS border wall using the shorthand property
• Use an image as a CSS border by stretching it
• Use an image as a CSS border by repeating it
• Use different slice values to create different borders from the same image

Margins

Practice setting the margin property for HTML elements in these CSS examples:

• Determine four different CSS margin values
• Determine three CSS margin values
• Determine only two CSS margin values
• Define just one value for all margins to be equal
• Specify all individual CSS margin values separately
• Use auto value for CSS margin
• Set CSS margin to inherit its value
• Collapse vertical margins

Padding

The CSS code examples below show the options for setting padding. You can use the shorthand or declare values in separate declarations:

• Determine all four CSS padding values in one declaration
• Specify CSS padding-top value individually
• Specify CSS padding-right value individually
• Specify CSS padding-left value individually
• Specify CSS padding-bottom value individually
• Use box-sizing: border-box to avoid width and padding conflict

Height and Width

Learn to set unique height and width properties for HTML elements.

• Set height and width of an element using px
• Set height and width of an element using %
• Specify a max-width value of an element
• Center an element using width and margin: auto
• Understand difference between width and max-width

Box Model

CSS box model indicates that browsers see HTML elements as rectangular boxes.

• Set all CSS properties that make up CSS box model
• Compare elements with and without padding
• Add box-sizing: border-box to manage dimensions of certain elements
• Apply box-sizing: border-box to all elements at once
• Create an element with resizable width
• Create an element with resizable height
• Create an element with resizable width and height
• Disable resizing on elements that are resizable by default

Outline

The following CSS code examples show the ways to control the outline property.

• Set different outline-style values
• Specify outline color using a color keyword value
• Specify outline width using a size in px or a predefined keyword value
• Set outline offset property to create space between border and outline
• Use outline shorthand for outline-width, outline-style, and outline-color

Text

CSS styles the text content with the following options:

• Specify the color of your text using color keyword name and HEX indicator
• Align text left, center, right or justified
• Try all types of text decoration
• Use text-transform to set all uppercase, lowercase or capitalized characters
• Specify the indentation of your text
• Use custom letter spacing to make your words more spacious out or compact
• Use word spacing to make your text more spacious or compact
• Adjust line height to create more space between lines
• Set text direction right to left
• Define shadow radius and color for your text
• Specify how text overflow (text that doesn’t fit) is displayed
• Display full overflow text when hovered on
• Make long text wrap when it doesn’t fit in a line
• Use word-break to break-all or keep-all words
• Add multiple shadows to your text separated by commas

Fonts

CSS code examples below show how to use fonts, specify font families, apply bold or italic effects, and so much more.

• Specify font family for your text
• Specify font style for your text
• Define font size using predefined keywords, percentage or length indicators
• Specify font weight to create bold effect
• Use font variant to make characters appear as small caps
• Use @font-face rule to apply non-CSS font family fonts
• Use font-weight with @font-face rule

Links

You can also style links by setting colors, controlling states, etc.

• Set a color for your link
• Set different colors for different states of links
• Specify custom link background colors for different states
• Make your link a CSS button

Lists

Control the way lists are presented on your web pages by following the CSS code examples below.

• Specify item markers for lists
• Use images for item markers of lists
• Define item marker position outside the list
• Use list-style shorthand to set type, position and image
• Set various color and layout styles to your lists
• Create lists with background and borders
• Create a bordered list without item markers

Tables

The following CSS code examples help you change the default settings of tables.

• Specify border width, color and style for a table
• Collapse table borders
• Use border spacing on uncollapsed borders
• Create a caption text for the table
• Add empty cells in a table
• Define auto, fixed or initial table layout
• Set specific table width and height
• Specify text alignment in a table
• Specify vertical content alignment in a table
• Set padding for your table content
• Set only horizontal borders for a table
• Create table cells with a hover effect
• Specify table colors
• Create a zebra-striped table design

Display

Practice hiding HTML elements and otherwise manipulating them with display with these CSS code examples:

• Override the default display value to inline
• Override the default display value to block
• Hide an element using display: none
• Hide an element using visibility: hidden

Position

The following CSS code examples control the position of HTML elements.

• Set static position for an element
• Set relative position for an element
• Set fixed position for an element
• Set absolute position for an element

Overflow

Learn to deal with text overflowing its content box.

• Set overflow text to ellipsis
• Show overflown text when hovered on
• Set overflow-y to hidden
• Set overflow-x to hidden

Float

The CSS code examples below float elements to specified sides.

• Float an element to the left
• Float an element to the right
• Use float: none to keep an element in its original place
• Use clear to determine where elements shouldn’t float
• Use overflow: auto to fix issues with overflow

Inline-Block

These CSS code examples show the use of inline-block.

• Setting CSS display: inline block and setting width and height
• Another basic use of CSS display: inline-block

Align Elements

CSS styles elements by indicating their alignment.

• Center vertically with position and transform
• Center vertically with line-height
• Center vertically and horizontally using padding
• Center vertically with padding
• Fix image overflow with clearfix
• Align an element to the left with float
• Align an element to the left with position
• Center an image my using auto margin on a block element
• Center text using text-align
• Center an element inside a container with margin

Combinators

By using combinators, you can select specific HTML elements to style according to their relations to other elements.

• Select only direct child elements
• Select all descending elements
• Select all the sibling elements
• Select only adjacent sibling elements

Pseudo-Class

Practice using pseudo classes for styling elements in certain states.

• Set different link states using pseudo classes
• Change element color upon CSS hover with pseudo classes
• Change background color upon CSS hover with pseudo classes
• Match pseudo class to the first child element
• Match pseudo class to every first child element
• Match pseudo class to all specified elements in all first child elements
• Define special rules for different languages using pseudo class :lang

Pseudo-Elements

The following CSS codes show how pseudo-elements style specific parts of elements.

• Set style for the first line
• Set style for the first letter
• Insert specific content before an element
• Insert specific content after an element
• Style a specified portion of an element
• Combine multiple pseudo elements in one document

Opacity

Set opacity for HTML elements and make them transparent.

• Specify opacity to make an image transparent
• Apply opacity settings upon hover
• Create transparent box
• Specify transparency with RGBA
• Manipulate text in a transparency box

Navigation Bars

The following CSS code examples show how to create and style navigation bars.

• Build a navigation bar from HTML links
• Remove default browser settings from your navigation bar
• Specify text and background colors for hover effect
• Create basic vertical navigation bar
• Specify the style for your active navigation links
• Add borders and alignment to your navigation list
• Create a fixed vertical navbar
• Create a horizontal navigation bar
• Create a horizontal navigation bar using float
• Create a horizontal navbar with a changing color upon hover
• Add a class to inform users about selected navigation item
• Align navigation links to the right
• Create a navbar with individual dividers
• Create a fixed top horizontal navbar using position
• Create a fixed bottom horizontal navbar using position
• Create a fully functioning navigation bar

Dropdowns

By following the CSS codes below, you can create dropdown menus for your websites.

• Create a basic dropdown menu
• Create a dropdown menu with links
• Align your dropdown menu to the right

Images

CSS styles images as galleries, lets you create image sprites and manipulate such content in other ways.

• Create an image gallery using CSS styling properties
• Define a part of image to display
• Make a navigation bar using image sprite
• Use image sprites with hover effect
• Set image width to 100%
• Set image max-width to 100%
• Keep aspect ratio: contain background-size
• Specify background-size to stretch and fill
• Set background image to cover the area & keep aspect ratio
• Display different images depending on screen size
• Use @media rule to make images responsive
• Use HTML5 element

Attribute Selectors

These CSS code examples teach you how to select and style elements according to their attributes.

• Select all elements with specified attribute
• Select elements with specified attribute & value
• Select elements with specified value regardless of its placement
• Select elements that start with a specified value
• Select elements that start with a specified value describing just part of it
• Select elements that end with a specified value
• Select elements with a specified value anywhere in the attribute
• Apply styling properties using CSS selector

Forms

CSS styles forms by indicating how input fields, submit buttons and text areas look.

• Select all input elements
• Use padding to create space around input field
• Add and style a border for a CSS form
• Add only a bottom border for a CSS form
• Specify a background color for your input field
• Specify a background color for a focused input
• Specify a border style for a focused input
• Add an icon to your input field
• Create an animated stretching input field
• Style a text area
• Style a dropdown menu
• Style input buttons

Counters

The following code examples show the use of counters.

• Create a simple list with CSS counters
• Make a table of contents using CSS counters
• Create an outlined list with CSS counters

Website Layout

Control website layout by following the examples below.

• Build a responsive website layout using CSS columns
• Create a flexible website layout using flex properties

Transform

Learn to use the transform property to rotate elements and create simple animations.

• Rotate an element around its horizontal axis
• Rotate an element around its vertical axis
• Rotate an element around its depth axis

Transition

The CSS code examples below reveal the use of transitions to create animation effects on elements.

• Create a width transition effect upon hover
• Create a transition with width and height properties
• Specify different speed curves for your transition
• Create a transition with delay effect
• Create a transition with transform and set its duration
• Specify individual transition properties in separate declarations
• Specify all transition properties in a single declaration

Animations

CSS can create animations for HTML elements by making them fade out, fade in, etc.

• Assign animation rule to an element
• Set changes using percentages for a smoother animation effect
• Change animation position using percentage
• Create fade in animation
• Specify animation delay
• Set animation to repeat
• Set an infinite animation
• Run animation in reverse
• Run animation forwards then backwards
• Run animation backwards then forwards
• Specify an animation speed curve
• Set animation fill mode forwards
• Set animation fill mode backwards
• Set animation fill mode forwards and backwards
• Use six major animation properties
• Use animation shorthand property

Tooltips

The following CSS codes illustrate the creation, styling, and positioning of tooltips.

• Create a basic tooltip
• Create a tooltip on the right
• Create a tooltip on the left
• Create a tooltip above an element
• Create a tooltip below an element
• Create a tooltip with a bottom arrow
• Create a tooltip with a top arrow
• Create a tooltip with a left arrow
• Create a tooltip with a right arrow
• Create a tooltip with a fade in effect

Buttons

Learn to create and style buttons with different properties.

• Assign colors to buttons
• Define text size for buttons
• Specify padding for buttons
• Make your button corners rounded
• Add different color borders to your buttons
• Create a button with hover effect
• Create buttons with a shadow
• Make a button appear inactive
• Define width of the button
• Align several buttons together using float
• Add borders to grouped buttons
• Create a vertical button group
• Add a button on an image using position
• Create a button with an arrow animation
• Create a pressed button effect
• Create a fade in button
• Create a button with a ripple effect

Pagination

Learn to organize many links with these CSS pagination examples.

• Create a simple pagination style
• Assign hover and active effects on your pagination list
• Apply border-radius to create rounded corners
• Create a transition effect on hover
• Create a pagination list with borders
• Add space around page links
• Specify pagination text size
• Center your pagination list
• Create breadcrumbs from an unordered HTML list

Multiple Columns

These CSS code examples show how content can be divided into columns and styled with additional properties.

• Divide elements to separate columns
• Specify the width of a column
• Specify the width between columns
• Set the style of column borders
• Specify the weight of column borders
• Specify the color of column borders
• Use shorthand for column border style, weight and color
• Span across multiple columns

Grid

These code examples show how to manipulate grid (the layout of a web page).

• Build a responsive grid with CSS columns
• Build a responsive grid with two CSS columns
• Build and style CSS columns
• Set the box-sizing property to create CSS columns

Flexbox

Analyze these CSS code examples to learn how to create responsive websites by using flexbox.

• Create flexible boxes
• Make image grid responsive using flexbox
• Create a responsive website layout with flexbox
• Set flex-direction: column
• Set flex-direction: column-reverse
• Set flex-direction: row
• Set flex-direction: row-reverse
• Define flex-wrap: wrap
• Define flex-wrap: nowrap
• Define flex-wrap: wrap-reverse
• Use flex-flow shorthand for flex-direction and flex-wrap
• Align flex items in a container with justify-content: center
• Align flex items in a container with justify-content: flex-start
• Align flex items in a container with justify-content: flex-end
• Align flex items in a container with justify-content: space-around
• Align flex items in a container with justify-content: space-between
• Center flex items vertically using align-items: center
• Align flex items at the top of a container with align-items: flex-start
• Align flex items at the bottom of a container with align-items: flex-end
• Stretch the container’s space to contain flex items using align-items: stretch
• Use align-items: baseline
• Set justify-content and align-items to center flex item perfectly
• Align flex lines using align-content: space-between
• Align flex lines using align-content: space-around
• Align flex lines using the default option align-content: stretch
• Align flex lines in the middle of a container using align-content: center
• Align flex lines in the beginning of a container with align-content: flex-start
• Align flex lines in the end of a container with align-content: flex-end
• Create flexible items inside a container
• Specify in what order flex items should be displayed
• Specify how much a flex item should grow in relation to other flex items
• Specify how much a flex item should shrink in relation to other flex items
• Determine the initial length of a flex item
• Use flex shorthand for flex-grow, flex-shrink, and flex-basis properties
• Align an item inside a flexible container using align-self: center
• Align individual flexible items with align-self: flex-start and flex-end

Media Queries

Learn to make your website mobile-friendly by including @media and breakpoints.

• Change background color based on screen width
• Create a responsive navigation menu
• Align elements based on screen width
• Create a responsive layout with flex properties
• Hide unnecessary elements for small screen devices
• Adjust font size based on screen size
• Use media queries to create a flexible image gallery
• Create a flexible website using media queries
• Change layout orientation when a screen rotates
• Assign several min- and max- properties to a single @media rule

Responsive

These CSS code examples reveal additional options for creating responsive web pages.

• Set viewport meta tag
• Keep the aspect ratio of an image when scaling
• Set image to cover area but keep aspect ratio
• Use different images based on device used
• Set min-device-width to respond to device viewport width
• Define HTML5
• Set a video player to scale up and down
• Add a responsive video

[明夷居士]

m

[尼克狐尼克]

好像一篇都没有翻译呀