Front-end basis -CSS

CSS

　　CSS (Cascading Style Sheet, Cascading Style Sheets) define how to display HTML elements. When the browser reads a style sheet, it will follow this style sheet to format (rendering) document.

　　*** https://cdn.bootcss.com/normalize/8.0.1/normalize.css ### normalize download Clear your browser's default settings can be used to import

 

CSS introduced　　

　　1. written directly inside label style = '1 pattern; Pattern 2;'; the # line style; inline style type is set in the CSS style attribute tag, large-scale use is not recommended;
　　2. style tag in the head by defined above; internal style #
　　3 written in the style css file separately, and then introduced through a link tag in the html file; external style #

 

CSS syntax:

　　Selectors and declarations: CSS styles for each section consists of two components. The statement also includes attributes and attribute values. End with a semicolon after each statement.
　　Style selector {1; 2} Style

 

CSS comments:

　　/ * This is a comment * /

 

CSS tags to find a way (selector)

　　The selector element (tag selector) suitable for batch # \ uniform \ default style
　　　　tag name pattern {1; 2 pattern;}

　　# Set ID selector special style applied to a specific tag
　　　　# ID pattern {1; 2 pattern;}

　　# Class selector applies to some of the same style label set
　　　　class name pattern {1; 2 pattern;}.
　　　　Use: tag class = 'class name'
　　　　Note:
　　　　　　style class name do not start with a number (not recognize some browsers ).
　　　　　　Tag class attribute if you have multiple, use spaces.

　　Universal selector
　　　　* {1 pattern; Pattern 2;}

　　Combination selector
　　　　progeny Selector
　　　　　　Selector sub-tab style {1;}

　　　　Son Selector
　　　　　　Selector> sub-tab style {1;}

　　　　Next sibling selector # adjacent
　　　　　　selector + 1 sub-tab style {;}

　　　　The selector # brother all sibling
　　　　　　selectors ~ style sub-tab {1;}

 

　　Attribute selector
　　　　[Properties] {style 1;} # for selecting elements with the specified attribute

　　　　[= Attribute 'value'] {style 1;} # for selecting elements with the specified attributes and worthwhile

　　　　/ * Find the properties to all the title elements at the beginning * Hello /
　　　　　　[^ = title "Hello"] {Color: Red;}

　　　　/ * Find all the elements to the end of the title attribute * Hello /
　　　　　　[$ title = "Hello"] {Color: Yellow;}

　　　　/ * Find all properties contained in the title (a string containing) Hello elements * /
　　　　　　[* = title "Hello"] {Color: Red;}

　　　　/ * Find all title attribute (value or a plurality of divided spaces) element has a value of hello: * /
　　　　　　[~ title = "hello"] {Color: Green;}

 

　　Pseudo class selector
　　　　/ * unvisited link * /
　　　　　　A: Color Link {: # FF0000}

　　　　/ * Link already visited * /
　　　　　　A: visited {Color: # 00FF00}

　　　　/ * Mouse to move to a link tag is not available * /
　　　　　　a: hover {Color: # FF00FF}

　　　　/ * Selected link is not a tag available * /
　　　　　　a: {Active Color: # 0000FF}

　　　　/ * Get the focus when the input input box style * /　　　　　　

　　　　　　INPUT: Focus {
　　　　　　　　Outline: none; # outer frame
　　　　　　　　background-color: #eee;} # background color

 

　　Pseudo-element selectors
　　　　　　first-letter # initials used to set a special style:
　　　　　　　　P: First-Letter {
　　　　　　　　font-size: 48px;
　　　　　　　　Color: Red;}

　　　　　　before / * Insert before each <p> element * /
　　　　　　　　P : before {
　　　　　　　　Content: "*";
　　　　　　　　Color: Red;}

　　　　　　after / * inserted after each <p> element content * /
　　　　　　　　P: After {
　　　　　　　　Content: "[?]";
　　　　　　　　Color: Blue;}

　　　　　　before and after more than used to remove floating.
　　　　　　From the document flow: float, absolute, fixed

　　Supplementary: content

　　　　Content pseudo-class selector attribute value
　　　　# content attribute generally used :: before, :: after pseudo-element, the pseudo-element content for rendering
　　　　　　content: 'Insert plain character'
　　　　　　Content: URL ( 'Insert Picture address')
　　　　　　Content : attr (insert element attributes)
　　　　　　Content: call method ()

 

CSS attribute grouping

　　When a plurality of elements of the same style, we do not need to be repeated for each element are set style, we can use a comma-separated packet to selector element disposed uniform pattern between a plurality of selectors. 

　　　　A selector, the selector style {1;}

 

CSS property-related

　　Width and height

　　　　width property may be set to a width of the element.

　　　　height property may be set to the height of the element.

　　　　Block-level to set the label width, the width of the inline tag is determined by the contents.

 

　　Font properties　　　

　　　　Text font
　　　　　　font-family can put multiple font names as a "fallback" to save the system. If your browser does not support the first font, it tries the next one. The browser uses the first value it recognizes.
　　　　　　For example:
　　　　　　　　body {font-Family: "in the Microsoft YaHei", "Microsoft elegant black", "Arial", sans-　 serif}

 

　　　　Font size
　　　　　　font-size: num px;
　　　　　　if set to inherit the parent element represented inherited font size value.

　

　　　　Word weight (thickness) of the
　　　　　　font-weight is used to set the font of the word weight (thickness).
　　　　　　Value Description
　　　　　　normal default value, the standard thickness
　　　　　　bold Bold
　　　　　　bolder thicker
　　　　　　lighter finer

　　　　　　100 to 900 set specific thickness, 400 is equivalent to the normal, and is equivalent to 700 Bold
　　　　　　the inherit inherit the parent element font weight value

　　　

　　　Text color color
　　　　　　color attribute is used to set the color of the text.
　　　　　　The color is most often specified by CSS:
　　　　　　　　# In the Browser Check ctrl + shift + c to select text style can find a color wheel to find the color
　　　　　　hexadecimal values - such as: # FF0000
　　　　　　an RGB value - such as: RGB (255,0, 0)
　　　　　　the names of colors - such as: red
　　　　　　there rgba (255,0,0,0.3), a fourth value of alpha, the designated color transparency / opacity, it is in the range of 0.0 to 1.0.

 

　　　　Text attributes
　　　　　　text alignment
　　　　　　　　text-align attribute specifies the horizontal alignment of the text elements.

　　　　　　　　Value Description
　　　　　　　　left left justified Default
　　　　　　　　right right alignment
　　　　　　　　center center alignment
　　　　　　　　justifies justify

 

　　　　Text decorative
　　　　　　text-decoration property to add special effects to text.

　　　　　　　　Value Description
　　　　　　　　none by default. Text defined criteria.
　　　　　　　　a line defined in underline text.
　　　　　　　　a line is defined on the overline text.
　　　　　　　　line-through line is defined through the text.
　　　　　　　　Inherited values inherit text-decoration property of the parent element.

　　　　　　　　Used for removing a label from the scribe default:
　　　　　　　　a {text-Decoration: none;}

　　

　　　　First line indentation
　　　　　　of the first line of a paragraph indent 32 pixels:
　　　　　　P {text-indent: 32px;}

 

　　　　Background Properties
　　　　　　Use background picture a common case is that many sites will allow many small icon on a picture, and then to display pictures based on location. Reduce the frequency of image requests.
　　　　　　/ * Background color * /
　　　　　　　　background-Color: Red;
　　　　　　*** complementary
　　　　　　background-color:! Red important # Set the highest priority

　　　　　　/ * Background image * /
　　　　　　　　background-Image: URL ( '1.jpg');

　　　　　　/ *
　　　　　　Background-repeat
　　　　　　　　repeat (default): tiled background image filled the whole page

　　　　　　　　repeat-x: tiled background image only in the horizontal direction
　　　　　　　　repeat-y: tiled background image only in the vertical direction
　　　　　　　　no-repeat: Do not tile background image
　　　　　　* /
　　　　　　background-REPEAT: NO-REPEAT; # Unique BACKGROUND

　　　　　　/ * Background-position * /
　　　　　　　　background-position: Top right;
　　　　　　　　/ * background-position: 200px 200px; * / # pixel size or percentage;
　　　　　　　　background-Attachment: Fixed; fixed background image #

　　　　　　Support abbreviation:
　　　　　　　　background: #FFFFFF URL ( '1.png') Top right REPEAT-NO;

 

　　Border
　　　　border properties:
　　　　　　border width #-width
　　　　　　border-style # style
　　　　　　border-color # Color

　　　　Support abbreviated
　　　　　　# i1 {border: 2px solid red ;}

　　　　Border Style
　　　　　　Value Description
　　　　　　none no border.
　　　　　　dotted dotted dashed border.
　　　　　　dashed rectangle dashed border.
　　　　　　solid solid border.

　　　　　　In addition to a unified set may be separately provided outside the frame to form one frame, as follows:

　　　　　　　　#i1 {
　　　　　　　　　　border-top-style:dotted;
　　　　　　　　　　border-right-style:solid;
　　　　　　　　　　border-bottom-style:dotted;
　　　　　　　　　　border-left-style:none;
　　　　　　　　　　}

　　　　　　border-radius # effect can be achieved with this attribute of the rounded corners. The border-radius set to be longer or to obtain a high half circle. Set 100%

　　　　

　　　　display attributes
　　　　　　for controlling the display of HTML elements

　　　　　　Value Meaning
　　　　　　display: "none" HTML document element exists, but does not display in the browser. JavaScript code typically used for mating.
　　　　　　display: "block" quick-class default label occupies the entire width of the page, if you specify the width of the set, with the margin remaining part will be filled. (Menu inside a tag may be provided Block)
　　　　　　the display: "inline" display element according to the line, then re-set the element width, height, margin-top, margin-bottom float and properties will not be affected.
　　　　　　display: "inline-block" that the element simultaneously has the characteristics of the element row and the block-level elements.

　　　　　　display: "none" and visibility: hidden the difference:
　　　　　　　　visibility: hidden: hide an element, but hidden element still occupies the same space previously not hidden. In other words, although the element is hidden, but still affects layout.

　　　　　　　　display: none: You can hide an element, and the hidden element will not take up any space. In other words, this element is not only hidden, and the space occupied by the original element will disappear from the page layout.

　　　　Supplementary:
　　　　　　Run the display: Flex layout

　　　　　　　　display: flex is a layout. I.e. it can be applied to the container, or may be applied to the element rows. A new scheme is proposed by W3C, you can simple, complete and responsive to achieve a variety of page layouts. At present, it has been supported by all browsers.

　　　　　　　　Flex is a Flexible Box acronym, meaning "elastic layout", to provide maximum flexibility to the box model. After the set Flex layout, sub-element float, clear, and vertical-align attribute will fail.

　　　　　　　　Six flex properties
　　　　　　　　　　flex-direction determines the direction of the main shaft (i.e., arrangement direction of the item)
　　　　　　　　　　　　. 1: flex-direction: Row; horizontal main direction, starting at the left　　　　　　　　　

　　　　　　　　　　　　2: flex-direction: row-reverse; horizontal main direction, starting at the right

　　　　　　　　　　　　3: flex-direction: column; spindle vertical direction, starting at the upper edge

　　　　　　　　　　　　4: flex-direction: row-reverse; spindle vertical direction, the lower edge of the start point

 

　　　　　　　　　　flex-wrap defines a line (in the default does not wrap)
　　　　　　　　　　　　. 1: flex-wrap: nowrap; (default) element does not wrap, such as: a div 100% width, set this property, two div width automatically into each of 50%;

　　　　　　　　　　　　2: flex-wrap: wrap; wrap element below the first row, for example: a 100% width div, set this property, the second in the second line of div;

　　　　　　　　　　　　3: flex-warp: warp-reverse; transducer element row below the first row

　　　　　　　　　　justify-content defined item aligned on the spindle
　　　　　　　　　　　　1: justify-content: center; Align

　　　　　　　　　　　　2: justify-content: flex- start; Left

　　　　　　　　　　　　3: justify-content: flex- end; Align Right

　　　　　　　　　　　　4: justify-content : space-between; justification, is equal to the spacing between items

　　　　　　　　　　　　5: justify-content: space- around; equal intervals on both sides of each item, i.e., the spacing between the items and the frame is larger than twice the interval projects

 

　　　　　　　　　　align-items defined in the alignment of the cross shaft
　　　　　　　　　　　　1: align-items: flex- start; starting alignment

　　　　　　　　　　　　2: align-items: flex- end; end aligned

　　　　　　　　　　　　3: align-items: center; midpoint alignment

　　　　　　　　　　　　4: align- items: baseline; the first line of text items baseline alignment

　　　　　　　　　　　　5: align-items: stretch; (default value) or if the item is not set to the height of auto, occupies the entire height of the container. 

　　　　　　　　　　align-content defined alignment of a plurality of axes

　　　　　　　　　　　　If the project is only one axis, the property does not work.
　　　　　　　　　　　　Therefore, the container must be provided flex-wrap: ···;

　　　　　　　　　　　　1: align-content: flex- start; cross-axis is aligned with the starting point.

　　　　　　　　　　　　2: align-content: flex- end; end is aligned with the cross shaft.

　　　　　　　　　　　　3: align-content: stretch; axis occupies the entire cross-axis.

　　　　　　　　　　　　4: align-content: center; default values. Cross-axis is aligned with the midpoint

　　　　　　　　　　　　5: align-content: space- between; cross-axis aligned with the ends, the spacing between the axes of evenly distributed;

　　　　　　　　　　　　6: align-content: space-around; equal intervals on both sides of each axis, i.e., twice as large as the spacing between the axis than the spacing of the axis of the frame;

　　　　　　　　flex common attributes summary

　　　　　　　　　　Alignment for Positional
　　　　　　　　　　　　The justify-Content: Center;: center-aligned
　　　　　　　　　　　　justify-content: flex-start; / * start position from the beginning of the line arrangement /
　　　　　　　　　　　　The justify-Content: End-Flex; / arranged starting from a position of end of line * /

 

　　CSS Box Properties from the inside out #
　　　　Content (content): the contents of the box, displaying text and images;
　　　　padding: used to control the distance between the content and the border;
　　　　Border (Borders): the border around the outside of the inner margin and content .
　　　　margin: the distance between the element and the element for controlling; margin most basic purpose is to control the spacing elements surrounding space, spaced apart from the purpose of the viewing angle.　　　　

　　　　*** Different browsers will automatically stay different padding, margin so we need to set the head
　　　　　　* {margin: 0; padding: 0;}

　

　　　　padding内填充
　　　　　　.padding-test {
　　　　　　padding-top: 5px;
　　　　　　padding-right: 10px;
　　　　　　padding-bottom: 15px;
　　　　　　padding-left: 20px;
　　　　　　　　}

　　　　　　Recommended use shorthand:

　　　　　　{Test-.padding
　　　　　　　　padding: 10px 15px 5px 20px;
　　　　　　　　}
　　　　　　order: right lower left

　　　　　　Additional useful shorthand way of padding:

　　　　　　　　A, for the four sides;
　　　　　　　　providing two, one for the first - next, the second for left - right;
　　　　　　　　if provided three, one for the first, second for left - right, for the third;
　　　　　　　　providing four parameter values will be on - Right - lower - left order to act on the four sides;

　　　　　　

　　　　margin外边距
　　　　　　.margin-test {
　　　　　　margin-top:5px;
　　　　　　margin-right:10px;
　　　　　　margin-bottom:15px;
　　　　　　margin-left:20px;
　　　　　　　　}

　　　　　　Recommended use shorthand:

　　　　　　{Test-.margin
　　　　　　　　margin: 10px 15px 5px 20px;
　　　　　　　　}
　　　　　　order: right lower left

　　　　　　Common center:
　　　　　　.mycenter {
　　　　　　　　margin: Auto 0;
　　　　　　　　} # 0 is approximately vertical automatic

　　　　　　added: center
　　　　　　　　style = "text-align: center ;

 

　　float
　　　　in CSS, any element can float.
　　　　Floating element generates a block-level box, regardless of what element itself.

　　　　Floating on two characteristics:
　　　　　　floating box to the left or to the right, until it hit the edge of the outer frame includes a frame or another frame until the float.
　　　　　　Since the general flow of the document is not in the floating box, so the ordinary flow of documents in the block box behave like a floating box does not exist.

　　　　Are three values:
　　　　　　left: left floating

　　　　　　right: right-floating

　　　　　　none: default value, does not float

 

 

　　　Clear
　　　　　Clear attribute specifies on which side element prevents other floating elements.
　　　　　Note: clear property only for their own work, without affecting other elements.

　　　　　Value Description
　　　　　left floating element on the left side is not allowed.
　　　　　right floating elements on the right side is not allowed.
　　　　　both left and right sides are not allowed to float.
　　　　　none default. Allowing the floating element appear on both sides.
　　　　　clear provisions should inherit inherit property values from the parent element.

　　　　　Clear float
　　　　　　　clear float side-effects (collapse parent tag question)
　　　　　　　There are three main ways:

　　　　　　　　　Fixed height
　　　　　　　　　pseudo-element clearance method
　　　　　　　　　overflow: hidden
　　　　　　　　　pseudo-element clearance method (use more):

　　　　　　　　　　　.clearfix: After {
　　　　　　　　　　　　　Content: "";
　　　　　　　　　　　　　the display: Block;
　　　　　　　　　　　　　Clear: both;
　　　　　　　　　　　　　}

 

 

　　　overflow overflow attribute
　　　　Value Description
　　　　visible defaults. Content will not be pruned, there will be elements outside the box.
　　　　hidden content will be trimmed, and the remaining content is not visible.
　　　　scroll content will be trimmed, but the browser will display the scroll bar to view the rest of the content.
　　　　If the content is auto trim, the browser will display the scroll bar to view the rest of the content.
　　　　inherit provisions should inherit the value of the overflow property from the parent element.

　　　　　　overflow (both horizontally and vertically disposed)
　　　　　　overflow-X (horizontally disposed)
　　　　　　overflow-Y (disposed vertically)

 

　　Positioning (position)

　　　　static default value, no positioning, not as absolute positioning reference, and set the left label objects, top of equivalence does not work.

　　　　relative (relative positioning)
　　　　　　located opposite with respect to the original position of the element in the flow of the document, i.e., to their original position as a reference. Interestingly, even if the set of elements and relative positioning of the offset values, elements still has the original position, i.e., the space occupied by the document flow. Document follow the normal stream objects, but will be based on top, right, bottom, left and other properties in the normal offset position of the document flow. Laminating by which the z-index attribute definition.
　　　　　　Note: position: relative of a major usage: absolutely positioned elements found convenient reference.

　　　

　　　　absolute (absolute positioning)
　　　　　　Definition: to absolutely positioned elements box completely removed from the document flow, and relative to the nearest positioned ancestor element positioning, if the element is not already positioned ancestor, then its position relative to the initial containing block (ie, the body element). Original elements in the normal flow of the document space occupied will be closed, as if the elements were not there originally. Generating a block-level element positioned after the frame, regardless of what type of frame it had generated in the normal stream.

　　　　　　Important: If the parent set position attributes, such as position: relative ;, then the child element will be the parent's upper left corner for positioning the original point. This can well solve the problem of adaptive website labels deviate from that parent is adaptive, that my child element is set position: absolute; parent element setting position: relative ;, then Top, Right, Bottom, Left as a percentage width represents.

　　　　　　In addition, the object out of the normal flow of the document, use top, right, bottom, left and other attributes of absolute positioning. Laminating by which the z-index attribute definition

　　　　　　**** top, right, bottom, left = 0 default covered the entire screen

　　　　　　*** top = 50% left = 50% margin-top = half width half as long margin-left = center

 

　　　　Fixed (fixed)
　　　　　　Fixed: document objects out of the normal flow, the use of top, right, bottom, left and other properties window to locate the reference point, when the scroll bar appears, with the object does not scroll. Laminating by which the z-index attribute definition. Precautions: If an element set position: absolute | fixed; the element can not be set float. This is a common-sense knowledge, because these are two different streams, a floating stream, and the other is the "anchor stream." But the relative can. Because the space it had occupied still occupy the document flow.
　　　　　　In theory, is set to fixed element will be located in a designated coordinate browser window, regardless of whether the scroll window, it will be fixed in this position.

 

 

　　opacity # transparency
　　　　to define transparency. In the range from 0 to 1,0 it is completely transparent, 1 is completely opaque.

　　　　Note: the rgba () the difference:
　　　　　　Opacity change the transparency of elements \ child elements
　　　　　　rgba () only change the current transparency

 

　　Laminating order of the objects is provided.
　　　　z-index value indicates Who pressing, small value to cover large pressure value,
　　　　only the positioning of the elements, in order to have z-index, that is to say, regardless of the relative positioning, absolute positioning, fixed positioning, you can use z -index, while floating elements can not use z-index
　　　　z-index value has no units, is a positive integer, the default z-index value of zero if we do not have z-index value, or z-index value is the same, then who wrote in the HTML behind, who pressed upon by others, positioning elements, the elements do not always suppress positioning.
　　　　From the parent phenomenon: the father counsels his son and then regressed useless

　　　　　　z-index
　　　　　　　　#i2 {
　　　　　　　　z-index: 999;
　　　　　　　　}