CSS secrets (1) coding techniques-DRY and cssdry
1. DRY -- (Don't repeat yourself) It is one of the greatest elements of code maintenance to be edited to minimize changes.
2. instance:
1 .content button{ 2 padding: 6px 16px; 3 border: 1px solid #446d88; 4 background:#58a linear-gradient(#77a0bb,#58a); 5 border-radius:4px; 6 box-shadow:0 1px 5px gray; 7 color: white; 8 text-shadow: 0 -1px 1px #335166; 9 font-size:20px;10 line-height:30px;11 12 }
The CSS style above defines the style of a button and has the following problems:
(1) when we want to make the button bigger, we can change the font-size attribute and change the font to enlarge the button. However, the line-height of the line must also be changed accordingly. (Row Height = font size * 1.5)
(2) font-size is defined as the absolute length value. When we increase the font size of the parent class, the font size of the corresponding child element also needs to increase to coordinate. (So it is better to change the font-size to the percentage or em unit .)
(3) When you want to enlarge a button, the size of attributes such as padding and border-radius also needs to be changed. (So it is better to change the size to the percentage or em unit .)
(4) note that some sizes do not need to be changed. For example: The 1px border of border does not need to be bold as the button grows, so it is still an absolute length.
(5) background: # 58a linear-gradient (# 77a0bb, # 58a); -- the translucent black or white color can be superimposed on the dominant color, that is, it can generate the light and dark variations of the dominant colors.
After thinking above, the author modifies the Code as follows:
1 <!DOCTYPE html> 2Through the above modification: we only need to overwrite the background-color and font-size to get buttons of different colors.
Related Knowledge points:
(1) px, em, rem
(2) hsla
(3) transparent
(4) rgba
(5) linear-gradient
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
