CSS 基础训练

CSS 基础训练

Cascading Style Sheets (CSS) is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course, Christina Truong demonstrates the concepts that form the foundation of CSS, explaining what you need to know to tweak existing CSS and write your own. Christina explains how to add colors and other design elements to take your webpages beyond just black text on a white background. She shows how to use selectors, how the box model defines the spacing and sizing of page elements, and how to style text and manage basic layouts with Flexbox and Grid. She also covers working with advanced selectors, creating fluid layouts, and determining when to use the float and position properties. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.

Topics include:

  • Writing basic selectors
  • Setting properties
  • Cascade and inheritance
  • Setting a font family, font size, text color, and more
  • Working with the box model
  • Leveraging Grid and Flexbox
  • Using the float and position properties
  • Working with advanced selectors
  • Creating fluid layouts


  • 英文名称:CSS Essential Training
  • 时长:4小时29分
  • 字幕:英语


  1. Styling documents consistently
  2. What you should know
  3. Tools and sample projects
  4. HTML and CSS
  5. Browser developer tools
  6. Referencing CSS
  7. Project overview and setup
  8. Optimizing images and retina displays
  9. Project: Relative paths
  10. Absolute paths
  11. CSS specifications and the W3C
  12. CSS syntax and terminology
  13. CSS values and units
  14. The color and property values
  15. Type and universal selectors
  16. Class and ID selectors
  17. Class and ID selector exercise
  18. Descendant selectors
  19. Grouping selectors
  20. Inheritance and specificity
  21. The cascade and importance
  22. Project: Adding colors
  23. Pseudo-class selectors and links
  24. Project: Styling links
  25. Introduction to the box model
  26. Inline, block, and display
  27. The box model properties
  28. The box properties syntax and usage
  29. Debugging the box model
  30. Padding, margin, and border
  31. Margin and layouts
  32. Project: Adding content wrappers
  33. Project: Margin and padding
  34. Typography for the web
  35. Changing the font-family
  36. Font-weight and font-style
  37. Web fonts with @font-face
  38. Web fonts with Google Fonts
  39. Project: Google Fonts
  40. The font-size property
  41. Font shorthand
  42. Text-decoration, text-align, and line-height
  43. Project: Typography styles
  44. Introduction to float
  45. The float and clear properties
  46. Float and collapsed container
  47. Layouts and the box model
  48. Project: Float and box model fix
  49. Position
  50. Position and z-index
  51. Introduction to Grid and Flexbox
  52. Introduction to Flexbox
  53. Flexbox: Orientation and ordering
  54. Flexible sizing
  55. Flexbox exercise
  56. Flexbox: Alignment
  57. Project: Flexbox alignment
  58. Introduction to CSS Grid
  59. The explicit grid
  60. The implicit grid
  61. Grid placement properties
  62. Project: Grid columns and Firefox Grid Inspector
  63. Introduction to advanced selectors
  64. Relational selectors: Combinators
  65. Project: Updates with combinators
  66. Pseudo-class selectors: First and last
  67. Project: Advanced selectors
  68. Introduction to responsive design
  69. Project: Creating fluid layouts
  70. Flexible background images
  71. Project: Flexible background image
  72. Introduction to media queries
  73. Media queries, widths, and breakpoints
  74. Testing responsive layouts
  75. Project: Media queries and responsive layout
  76. Next steps