basic of css
- css if s stylesheet language that describes the presentation of web pages
- colors , backgrounds , font sizes, layouts
*content layer(html) , present layer(css), behavior layer(javascript) - css reference :
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
https://docs.webplatform.org/wiki/css
http://www.w3.org/Style/CSS/
http://caniuser.com - Methods of Adding Author Styles
- Inline Styles
- Internal Styles
- External Style Sheet
- css 引用:
A4AC327A-EEB5-476B-A4FE-30275A953F13.png
- universal selector:
C72C8AF9-B602-4F90-8AAB-A75967688B71.png
- selector:
281F386C-76D7-4852-A6BC-D13B9B630BF2.png
- id selector :
BD7064E0-C274-4FD1-9A7D-0F199E868DEB.png
- class selector:
DB6126C5-23E6-41B9-9A0B-216B42944A0A.png
- 一个元素可以有多个css class :
CAF29F3F-6268-4EA0-84D7-D838052E602F.png
- group selector:
4F615869-2CA2-464E-9902-A78A0FF5CB08.png
id比class更消耗,尽量使用class,避免id和class中属性重复
descendant selectors:
2F754D35-1F6F-4248-AAE6-36A9B2C27E69.png
- Pseudo -classes:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
37FBE4FB-C210-4FC3-82BE-8AE782546F78.png
B407171F-68EA-47E1-A92D-8F80262E40B4.png
C8068562-900F-4BC5-8B1F-78018EA4208A.png
- Pixel Units - css pixel "px" : An abstract reference unit
F0B69EE6-B37F-4226-B100-C4F493B65F4A.png
Percentages - the percentage value is measured relative to a parent element`s length
Em Units - 1em is equal to the font-size value of the parent element;
Rem Units - equal to the the font-size value of the root element
color units
text Styles : text-transform, text-decoration, font-weight
-
font Properties: font-falmily
20CB2E0A-E0B6-4E5A-8412-3564E4A59489.png
(依次查询哪个可用)
Line Height
- box model : padding,boder,margin,display values(inline, block)
![Uploading 7BB597CA-70A9-4F55-960B-E11D007A3F6A_646930.png . . .]
8046FC60-D483-429C-8135-CC62FEB62E57.png
2AD466E3-ADBF-4FDC-B4A6-2308E39B1D55.png
box-sizing:border-box
background: background-color background-image backgrount-repeat background-position background-size
38C4201A-A0DC-4635-8B46-212954292302.png