css总结

àì夳堔傛蜴生んèń 2022-06-16 12:16 213阅读 0赞

### What is CSS? ###

1.  CSS stands for Cascading Style Sheets
2.  CSS describes how HTML elements are to be displayed on screen, paper, or in other media
3.  CSS saves a lot of work. It can control the layout of multiple web pages all at once
4.  External stylesheets are stored in CSS files

### CSS Syntax ###

1.  A CSS rule-set consists of a selector and a declaration block:![selectors][]
2.  The selector points to the HTML element you want to style.
3.  The declaration block contains one or more declarations separated by semicolons.
4.  Each declaration includes a CSS property name and a value, separated by a colon.
5.  A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

### Ways to Insert CSS ###

increases by specificity

*  External style sheet：`<link rel="stylesheet" type="text/css" href="mystyle.css">`
 *  Internal style sheet：`<head><style>body {background-color: linen;}</style></head>`
 *  Inline style：`<p style="color:blue;margin-left:30px;">This is a heading</p>`  
    The following list of selector types increases by specificity:
 *  Type selectors (e.g., h1) and pseudo-elements (e.g., :before).
 *  Class selectors (e.g., .example), attributes selectors (e.g., \[type=”radio”\]) and pseudo-classes (e.g., :hover).
 *  ID selectors (e.g., \#example).
 *  Inline styles added to an element (e.g., style=”font-weight:bold”) always overwrite any styles in external stylesheets, and thus can be thought of as having he highest specificity.  
    *Universal selector (*), combinators (+, >, ~, ’ ‘) and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)\*

### HTML Block & inline ###

1.  There are a couple of key differences between block-level elements and inline elements:
2.  By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.Content model
3.  block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create “larger” structures than inline elements.
4.  block： A block-level element occupies the entire space of its parent element (container), thereby creating a “block.”  
    \{ `aside`、`article`、`footer`、`canvas`、`figcaption`、 `figure`、`header` 、 `address`、 `hgroup`、`output`、 `section` 、`video` \}\[html5\]`noscript`、 `ol`、 `form`、 `blockquote`、 `dd`、 `div`、 `dl`、`dt`、 `fieldset`、 `nav`、 `main`、 `li`、 `hr`、 `h1-h6`、`p`、 `pre`、 `table`、 `tfoot`、 `ul`
5.  block： A block-level element occupies the entire space of its parent element (container), thereby creating a “block.”  
    `a`、`b`、`big`、`i`、`small`、`tt`、`abbr`、`acronym`、`cite`、`code`、`dfn`、`em`、`kbd`、`strong`、`samp`、`time`、`var`、`bdo`、`br`、`img`、`map`、`object`、`q`、`script`、`span`、`sub、`sup`、`button`、`input`、`label`、`select`、`textarea\`

### CSS selector ###

([https://developer.mozilla.org/en-US/docs/Web/CSS/CSS\_Selectors][https_developer.mozilla.org_en-US_docs_Web_CSS_CSS_Selectors])

*  Type selectors  
    
    
     *  This basic selector chooses all elements that matches the given name.
     *  Syntax: eltname
     *  Example: input will match any element.
 *  Class selectors  
    
    
     *  This basic selector chooses elements based on the value of their class attribute.
     *  Syntax: .classname
     *  Example: .index will match any element that has the class index (likely defined by a class=”index” attribute or similar).
 *  ID selectors  
    
    
     *  This basic selector chooses nodes based on the value of its id attribute. There should be only one element with a given ID in a document.
     *  Syntax: \#idname
     *  Example: \#toc will match the element that has the id toc (likely defined by a id=”toc” attribute or similar).
 *  Universal selectors  
    
    
     *  This basic selector chooses all nodes. It also exists in a one-namespace only and in an all-namespace variant too.
     *  Syntax: \* ns|\* \*|
     *  Example: \* will match all the elements of the document
 *  Attribute selectors  
    
    
     *  This basic selector chooses nodes based on the value of one of its attributes.
     *  Syntax: \[attr\] \[attr=value\] \[attr~=value\] \[attr|=value\] \[attr^=value\] \[attr$=value\] \[attr\*=value\]
     *  Example: \[autoplay\] will match all the elements that have the autoplay attribute set (to any value).

### CSS layout ###

([https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS\_layout/][https_developer.mozilla.org_en-US_docs_Learn_CSS_CSS_layout])

#### positioning ####

*  Static positioning  
    
    
     *  Static positioning is the default that every element gets — it just means “put the element into it’s normal position in the document layout flow — nothing special to see here”.
 *  Relative positioning  
    
    
     *  Relative positioning is the first position type we’ll take a look at. This is very similar to static positioning, except that once the positioned element has taken its place in the normal layout flow, you can then modify its final position, including making it overlap other elements on the page.
 *  Introducing top, bottom, left, and right  
    
    
     *  top, bottom, left, and right are used alongside position to specify exactly where to move the positioned element to. To try this out, add the following declarations to the .
 *  Introducing z-index
 *  Absolute positioning  
    
    
     *  An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on it’s own layer separate from everything else. This is very seful — it means that we can create isolated UI features that don’t interfere with the position of other elements on the page — for example popup information boxes and control menus, rollover panels, UI features that can be dragged and dropped anywhere on the page, and so on.
     *  they specify the distance the element should be from each containing element’s sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the “containing element”, and 30px from the left.
 *  Fixed positioning  
    
    
     *  This works in exactly the same way as absolute positioning, with one key difference — whereas absolute positioning fixes an element in place relative to the element or its nearest positioned ancestor, fixed positioning fixes an element in place relative to the browser viewport itself. This means that you can create useful UI items that are fixed in place, like persisting navigation menus.
 *  floats  
    
    
     *  Multiple column floated layouts
     *  A three column layout
     *  Float problems
     *  The whole width can be tricky to calculate
     *  Background height of floated items
 *  flexbox([http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html][http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html])  
    ![基本概念][SouthEast]
    
     *  The main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) The start and end of this axis are called the main start and main end.
     *  The cross axis is the axis running perpendicular to the direction the flex items are being laid out in. The start and end of this axis are called the cross start and cross end.
     *  The parent element that has display: flex set on it (the  in our example) is called the flex container.

### CSS3 ###

[selectors]: /images/20220616/fb2feda2fc484101a07eaa8e349381d4.png
[https_developer.mozilla.org_en-US_docs_Web_CSS_CSS_Selectors]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors
[https_developer.mozilla.org_en-US_docs_Learn_CSS_CSS_layout]: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/
[http_www.ruanyifeng.com_blog_2015_07_flex-grammar.html]: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[SouthEast]: /images/20220616/c458f84a3c73458d8a1ebb0fff9854b9.png