笔记

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

你可能感兴趣的:(笔记)