[Front-end Web development knowledge] - CSS (4)

CSS concepts and principles

What is CSS

Cascading Style Sheets (English: Cascading Style Sheets, abbreviated CSS), also known as string style list, cascading style sheets, Cascading Style Sheets, Cascading Style Sheets, A method for structured documents (such as HTML or XML document application ) add style (fonts, colors and spacing, etc.) computer language, defined by the W3C and maintenance. The latest version is CSS2.1, as a W3C Recommendation. CSS3 has now been supported by most modern browsers, and the next version of CSS4 still under development.
CSS can not be used alone, must work in conjunction with HTML or XML, for decoration as HTML, or XML. In this paper, used for decoration HTML page CSS technology. Which is responsible for determining what HTML pages in there, CSS determine in what appearance (size, weight, color, alignment and location) to show these elements. CSS can be used to set the page layout, set the style page elements, settings apply to all pages of the global style. CSS can be scattered directly on the page to add an element of style to be applied, can also be built into a centralized web pages, links-style introduction of web pages as well as the introduction of lead-in type.

CSS works

When a browser displays the document, it must combine the document's content with its style information. In two stages:
1. The browser is converted into HTML and CSS DOM (Document Object Model), DOM document represents in computer memory, which combines document content and its style;
2. The browser displays the contents of the DOM;
works as:

The use CSS

• External style sheet: In the head section plus link HTML file, add a link css styles, use more ;
• Internal stylesheet: placed in the style element;
• Inline styles: CSS declaration affects only one element.

---

---

---

---

---

CSS box model

What is the box model (Box Model))

Box model to understand the concepts and principles of great help in understanding the concept of CSS modification, therefore, before learning CSS, we first explain what is the box model:
All HTML elements can be considered as box in CSS, "box model "this term is used to design and layout, a box, a package surrounding HTML elements on the nature of the CSS box model, comprising: margin, border, padding, and the actual content, the cartridge model allows us and other elements the space between the element's bounding box placed around the elements.

Examples box model

To Google browser, for example, to open my blog , right-click the page, click on the "check" in the lower right "styles" option to leave the bottom of the display, you can see the CSS box model, as shown:
The following are the parameters Some explanation:

• Margin (margins) - clear the area outside of the frame, it is transparent from the outside.
• Border (Borders) - around the inner and outer margins content border.
• Padding (padding) - clear the area around the content, padding is transparent.
• The Content (content, i.e., the picture auto × auto) - the contents of the box, displaying text and images.

---

---

---

---

---

Selector

What choice is

CSS selectors are part of a first CSS rules. It is an element and a combination of other items, to tell the browser which HTML elements should be selected as the attribute values of the rule is applied in the CSS. Elements are selected, then the selector, to be called the "selector object."
As shown, the figure "h1" and "p" is the simple selectors, which defines the elements of "color, background-color" property.

Type selector

• Simple selector (Simple selectors) * sses): one or more elements in the matching state is determined, such as by hovering the mouse pointer element, or the currently selected or not selected the checkbox, or element is a DOM tree first child node of the parent node.
• Pseudo elements (Pseudo-elements): in matching one or more elements related to determining location, for example the first word of each segment, or an element generated before the content.
• Combiner (Combinators): where not only the selection itself, as well as in an efficient manner very specific method of selecting a combination of two or more choices for. For example, paragraphs immediate child nodes you can select only divs, or directly behind the paragraph headings of.
• Multi selector (Multiple selectors): these are not separate selector; this idea is comma-separated in a plurality of selectors CSS rules below, is applied to a set of statements selected by the selector from these all elements.
  For more knowledge to select the relevant device, you can be both sites selectors Introduction 1 , Introduction selector 2

---

---

---

---

---

CSS style collection presentation

colour

CSS color is defined using a combination of the RGB color values ​​(RGB) hexadecimal (hex) notation, the minimum value of the light source is disposed may be 0 (hexadecimal 00), the maximum value is 255 (X hex FF).

• Hexadecimal color
  with three double-digit written, and begin with the # symbol, such as the # 0000ff value is displayed in blue
• RGB color
  rgb (red, green, blue) . Each parameter (red, green and blue) defining a color intensity may be an integer, or a percentage value between 0 and 255 (from 0% to 100%), rgb (0,0,255) and RGB (0 %, 0%, 100%)
• RGBA color
  is extended RGB color values, with an alpha channel - it specifies the object's opacity parameter alpha is from 0.0 (fully transparent) to 1.0 (fully opaque) digital rgba (255,0,0,0.5) ;
• HSL color
  HSL refers Hue (hue), saturation (saturation), lightness (luminance) - cylindrical coordinate represents a color notation hsl (hue, saturation, lightness) Hue is the degree of the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue.
  Saturation is a percentage value; 0% means gray, and 100% of full color. Lightness is the same percentage; 0% is black, white 100% Examples: hsl (120,65%, 75% );
• HSLA color
  than a multi-HSL alpha channel - it specifies the object's opacity hsla (hue, saturation, lightness, alpha), Example: hsla (120,65%, 75% , 0.3);

Borders (Border)

We are here to share a good debugging web site , you can debug on this website style he or she wants, and then added his own code, here I am to tell you about ways to use:
can everyone this site select the corresponding sections (modules shown in blue): click to enter may see the following interface: you can debug the style you want (as shown in the red box section) on the left, then click on "use this" (red arrow part ), can be used to generate code selected.
Debug frame part of Border, Box Shadow of two parts.

Background (Background)

Debugging is a background Background, Gradient two parts.

Text (Text)

Debugging text for Font, Text Shadow in two parts.

Picture of operation

Reference page picture of operation

Page layout

As more knowledge of the layout, the author is not limited to the level of the author's own narrative, and here to share a few links, you can go to the corresponding website to learn about.

1. position
   Reference website: normal layout
2. float
   Reference website: Floating layout
3. flexbox
   Features:

• Make layout become flexible and intuitive;
• Container decide how to evenly distribute its element - including the size of the spacing between sub-element and another;
• Sub-element automatically adjusts the height and width, to fill any good display device in different screen sizes available display space;
• Suitable for application components and a minor proportion layout;
• flex item (flex item) from left to right along the spindle;

Reference website: elastic box layout
4. grid
features:

• Powerful, flexible, simple
• Structure and performance of separation
• For a large proportion of the target layout
  reference website: grid layout