/css3-learn

css3练习

Primary LanguageHTML

HOW TO ORGANIZE CSS

1️⃣ SASS INHERITANCE

@extend @mixin,e.g.clearfix

2️⃣ GENERATED CONTENT

content

3️⃣ POSITION AND LAYOUT

position z-index top bottom left right Flexbox properties float clear

4️⃣ DISPLAY AND VISIBILITY

display opacity transform

5️⃣ CLIPPING

overflow clip

6️⃣ ANIMATION

animation transition

7️⃣ BOX MODEL (FROM OUTSIDE IN)

margin box-shadow border border-radius box-sizing width height padding

8️⃣ BACKGROUND

background cursor

9️⃣ TYPOGRAPHY

font-size line-height font-family font-weight font-style text-align text-transform word-spacing color

🔟 PSEUDO-CLASSES & PSEUDO-ELEMENTS (NESTED RULES)

:hover :focis :active :before :after :first-child :last-child

😇would be like this

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff
  
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;
}