CSS笔记 from MDN

Presence and value attribute selectors

These attribute selectors try to match an exact attribute value:

• [attr] : This selector will select all elements with the attribute attr, whatever its value.
• [attr=val] : This selector will select all elements with the attribute attr, but only if its value is val.
• [attr~=val]: This selector will select all elements with the attribute attr, but only if the value val is one of a space-separated list of values contained in attr‘s value, for example a single class in a space-separated list of classes.

Substring value attribute selectors

• font-style: Used to turn italic text on and off. Possible values are as follows (you‘ll rarely use this, unless you want to turn some italic styling off for some reason):
• • normal: Sets text to normal font (turns existing italics off.)
  • italic: Sets text to use the italic version of the font if available; if not available, it will simulate italics with oblique instead.
  • oblique: Sets text to use a simulated version of an italic font, created by slanting the normal version.
• font-weight: Sets how bold the text is. This has many available values available in case you have many font variants available (such as -light, -normal, -bold, -extrabold, -black, etc.), but realistically you‘ll rarely use any of them except for normal and bold:
• • normal, bold: Normal and bold font weight
  • lighter, bolder: Sets the current element‘s boldness to be one step lighter or heavier than its parent element‘s boldness.
  • 100–900: Numeric boldness values that provide finer grained control than the above keywords, if needed. 
• text-transform: Allows you to set your font to be transformed. Values include:
• • none: Prevents any transformation.
  • uppercase: Transforms ALL TEXT TO CAPITALS.
  • lowercase: Transforms all text to lower case.
  • capitalize: Transforms all words to Have The First Letter Capitalized.
  • full-width: Transforms all glyphs to be written inside a fixed-width square, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like Chinese, Japanese, Korean.)
• text-decoration: Sets/unsets text decorations on fonts (you‘ll mainly use this to unset the default underline on links when styling them.) Available values are:
• • none: Unsets any text decorations already present.
  • underline: Underlines the text.
  • overline: Gives the text an overline.
  • line-through: Puts a strikethrough over the text.
•  

  text-shadow: 4px 4px 5px red;

  1. The horizontal offset of the shadow from the original text — this can take most available CSS length and size units, but you‘ll most comonly use px. This value has to be included.
  2. The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.
  3. The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS length and size units.
  4. The base color of the shadow, which can take any CSS color unit. If not included, it defaults to black.

   

  The text-align property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:
  

  • left: Left justifies the text.
  • right: Right justifies the text.
  • center: Centers the text.

   

  The line-height property sets the height of each line of text — this can take most length and size units, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the font-size is multiplied to get the line-height. 
  

   

  The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. You won‘t use these very often, but might find use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most length and size units.
  

   

  Many font properties can also be set through the shorthand property font. These are written in the following order:  font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

   

  
  list-style-type: Sets the type of bullets to use for the list, for example square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.
  list-style-position: Sets whether the bullets appear inside the list items, or outside them before the start of each item.

  ol {
    list-style-type: upper-roman;
    list-style-position: inside;//outside 
  }

  list-style-image: Allows you to use a custom image for the bullet, rather than a simple square or circle.

  ul {
    list-style-image: url(star.svg);
  }

  The start attribute allows you to start the list counting from a number other than 1.

  The reversed attribute will start the list counting down instead of up.

  <ol start=“4" reversed>
    <li>Toast pitta, leave to cool, then slice down the edge.</li>
    <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
    <li>Wash and chop the salad.</li>
    <li>Fill pitta with salad, humous, and fried halloumi.</li>
  </ol>

  The value attribute allows you to set your list items to specific numerical values. 

  <ol>
    <li value="2">Toast pitta, leave to cool, then slice down the edge.</li>
    <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li>
    <li value="6">Wash and chop the salad.</li>
    <li value="8">Fill pitta with salad, humous, and fried halloumi.</li>
  </ol>

   

  • Link (unvisited): The default state that a link resides in, when it isn‘t in any other state. This can be specifically styled using the :link pseudo class.
  • Visited: A link when it has already been visited (exists in the browser‘s history), styled using the :visited pseudo class.
  • Hover: A link when it is being hovered over by a user‘s mouse pointer, styled using the :hover pseudo class.
  • Focus: A link when it has been focused (for example moved to by a keyboard user using the Tab key or similar, or programmatically focused using HTMLElement.focus()) — this is styled using the :focus pseudo class.
  • Active: A link when it is being activated (e.g. clicked on), styled using the :activepseudo class.

  a {
  
  }
  
  
  a:link {
  
  }
  
  a:visited {
  
  }
  
  a:focus {
  
  }
  
  a:hover {
  
  }
  
  a:active {
  
  }

  顺序很重要： lvfha

   

   

   

   

  <div class="one"></div>
  <div class="two"></div>

  html {
    font-family: sans-serif;
    background: #ccc;
  }
  
  .one, .two {
    background: red;
    width: 300px;
    height: 150px;
    padding: 20px;
    border: 10px solid black;
    margin: 20px auto;
  }
  
  .two {
    box-sizing: border-box;
  }

  var one = document.querySelector(‘.one‘);
  var two = document.querySelector(‘.two‘);
  
  function outputWH(box) {
    var width = box.offsetWidth;
    var height = box.offsetHeight;
    box.textContent = ‘Width: ‘ + width + ‘px, Height: ‘ + height + ‘px.‘
  }
  
  outputWH(one);
  outputWH(two);

  当你想生成一个border-box的时候（换言之，想生成一个以border作为box外边界、而非content的box的时候——所给他设置的padding和border被包含在box内部）https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap