笔记

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

• css Data Type
  https://developer.mozilla.org/en-US/docs/tag/CSS%20Data%20Type

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