css css基础知识

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css css基础知识相关的知识,希望对你有一定的参考价值。

/*A SPACE = a descendent*/
  p a {
    /*will only affect links inside of a paragraph*/
  }
  
/*A COMMA just groups the selectors*/
  h1, h2, h3 {
    color: red; /*all 3 are now red*/
  }

/*A PSEUDO selector uses a : to select a STATE*/
  a:hover {}
  
  a:focus {
    outline: 1px solid black;
  }  
/*this can be used to highlight form fields when tabbing thru*/
  
/*INHERITANCE
Some elements will not inherit, such as links, because they have a default style already applied. You would need to specifically target the links.
W3C has a full list: www.w3c.org/TR/CSS21/propidx.html (look for the 'iherited' column)

SPECIFICITY Ranking: determines which CSS rule is applied by the browsers.
1. Every selector has a ranking
2. The higher rank (or highest specificity) will be applied
• Type selectors have the lowest: h1, h2...
• Class selectors: .example
• ID selectores have the highest: #example
http://cssspecificty.com
specificity calculator: specificity.keegan.st

TYPOGRAPHY
type-face: is the set of fonts that make up a family
font: is a particulat weight or style in that type-face

Font Size:
Relative font sizes are based on nearest ancestor element (rem, em, %.
Absolute values are not (px.

px: absolute value, browser default: 16px

em: relative value, named after letter 'm' and historically measured width but now refers to the height of the font. 
1em = 1 inherited font-size, if no font-size is declared then 1em = default = 16px

rem: like em but relative ONLY to the root element (don't need to worry about nearest ancestor)
If no font-size declared, then 1rem = default = 16px. 1rem will always be 16px thruout site.
If root (set in html or body tag) font-size = 14px, then 1rem = 14px, 1.5rem = 21px, .5rem = 7px....etc.


  

以上是关于css css基础知识的主要内容,如果未能解决你的问题,请参考以下文章

CSS基础知识总结

css 基础知识CSS 2018

css css基础知识

CSS CSS:基础知识

前端基础CSS 入门

CSS基础