A summary of some of the content in CSS

One, selector

1, selector group: A style can be applied to multiple selectors, only with a different selector in the middle of the comma can be added. Such as:

{  color: green;  }

PS:CSS specifies that all child elements inherit the attributes of the parent element. However, when the style of the child element is modified, the parent element's properties are overwritten.

2. Derivation Selector

Elements are selected by the context of the element, and elements of different levels are separated by spaces, representing elements in the elements that are in the element before the space is selected. Such as:

{    font-style: Italic;     font-weight: normal;  }

Note: A derived selector can select all of the class elements in its descendants, including not only child elements, but also child elements of child elements.

3. ID Selector

The ID is used to find the element, because the ID is unique in one HTML, so a specific element can be selected directly with #id. Such as:

{color:red;}  {color:green;}

4. Class Selector

It is useful to set the same style by using the class name to find the element and to access the element with a. class, because the class name can be duplicated. Such as:

{text-align: Center}

Note: Class names sometimes have spaces in the middle, and spaces indicate that the element is the same class that belongs to both sides of the space. Layout is very useful.

5. Attribute Selector

Set the style by selecting an element with a property. Use [] to select properties such as:

[Title=w3school] {Border:5px solid blue;}

The property selector can match several of the following:

[attribute]	Used to select an element with the specified attribute.
[attribute=value]	Used to select an element with the specified attributes and values.
[attribute~=value]	Used to select the element in the attribute value that contains the specified vocabulary.
[attribute|=value]	Used to select an element with an attribute value that begins with the specified value, which must be the entire word.
[attribute^=value]	Matches each element of the property value to the beginning of the specified value.
[attribute$=value]	Matches each element of the property value to the end of the specified value.
[attribute*=value]	Matches each element of the property value that contains the specified value.

6. Child element Selector

Corresponds to the descendant (derived) selector, which is used to select only the elements in the child element that meet the criteria, as represented by >. Such as:

{color:red;}

Note: The child element selector symbol can have spaces before and after it, and will not be used as a space to derive selectors.

7. Adjacent Brother Selector

You can select the sibling of any one element, selecting only the first element that satisfies the following selector condition, and the selected element is the same as the parent class of the element, and is adjacent to the element, denoted by +. Such as:

{margin-top:50px;}

Note: The same as the child element selector, you can also have spaces.

8, ordinary neighbor Brother Selector

You can select all sibling elements that meet the criteria, expressed in ~. Such as:

Div ~ P {Background-color:yellow;}

Note: The same as the child element selector, you can also have spaces.

9. Pseudo-Class Selector

Pseudo-Class syntax: Selector:pseudo-class {property:value}, using a colon to distinguish an element in a different state.

All pseudo-classes:

Selector

Selector	Example	Example Description
: Link	a:link	Select All not visited links
: Visited	a:visited	Select all the links you have visited
: Active	a:active	Select Active link
: hover	a:hover	Put the mouse on the link state
: Focus	input:focus	Select element input with focus
: First-letter	p:first-letter	Select the first letter of each <p> element
: First-line	p:first-line	Select the first line of each <p> element
: First-child	p:first-child	Selector matches the <]p> element of the first child element that belongs to an arbitrary element
: Before	p:before	Insert content before every <p> element
: After	p:after	Insert content before each <p> element
: lang (language)	p:lang(it)	Select a start value for the <p> element's lang attribute

　　Note: in CSS definitions, a:hover must be placed after A:link and a:visited to be valid. In the CSS definition, a:active must be placed after a:hover to be valid.

In other words, the order is a:link,a:visited,a:hover,a:active.

10. Mixed use of each selector

Different selectors have different functions depending on how they are separated.

When separated by spaces, select for descendants (derivation).

When separated by commas, the selected elements of the selector before and after the comma have the same style for the grouping selection.

When there are no symbols separated, the elements that are the co-selectors and the front and back selectors are the final selected elements. Such as:

  {color : red }h1  {color :  #00ff00 }p #tt  {color : rgb (0,0,255) }p.ex#tt  { Span style= "color: #ff0000;" >color : rgb (0,0,255) ;} </style> 

The last p.ex#tt represents an element that satisfies three conditions, that is, the element is P, and class= "Ex", and Id= "tt".

PS: Wildcard selector *, which means selecting all the elements, although not common, but in most cases we have omitted him.

Add: All selectors (from W3cschool)

Selector

Selector	Example	Example Description	CSS
. class	.intro	Select all elements of class= "Intro"	1
#ID	#firstname	Select all elements of id= "FirstName"	1
*	*	Select all elements	2
Element	p	Select all <p> elements	1
Element,element	div,p	Select all <div> elements and <p> elements	1
element element	div p	Select all <p> elements within the <div> element	1
element>element	div>p	Select parent <div> element of all <p> elements	2
element+element	div+p	Select all <p> elements immediately following the <div> element	2
[attribute]	[target]	Select all elements with the target property	2
[attribute=value]	[target=-blank]	Select all elements that use target= "-blank"	2
[attribute~=value]	[title~=flower]	Select the Title property contains all elements of the word "flower"	2
[attribute|=language]	[lang|=en]	Select the starting value of a lang attribute = all elements of "EN"	2
: Link	a:link	Select All not visited links	1
: Visited	a:visited	Select all the links you have visited	1
: Active	a:active	Select Active link	1
: hover	a:hover	Select mouse over link	1
: Focus	input:focus	Select the INPUT element with focus	2
: First-letter	p:first-letter	Select the first letter of each <P> element	1
: First-line	p:first-line	Select the first line of each <P> element	1
: First-child	p:first-child	Specifies a style only if the <p> element is the first child of its parent.	2
: Before	p:before	Insert content before each <p> element	2
: After	p:after	Insert content after each <p> element	2
: lang (language)	p:lang(it)	Select the starting value of a lang property = all <p> elements of "it"	2
element1~element2	P~ul	Select each UL element after the P element	3
[attribute^=value]	a[src^= "https"]	Select the element with the value of each SRC attribute beginning with "https"	3
[attribute$=value]	A[src$= ". pdf"]	Select the element that ends with a ". pdf" value for each SRC attribute	3
[attribute*=value]	A[src*= "44lan"]	Select the value of each SRC attribute that contains the element "44lan" of the substring	3
: First-of-type	P:first-of-type	Select each P element to be the first P-element of its parent	3
: Last-of-type	P:last-of-type	Select each P element is the last P element of its parent	3
: Only-of-type	P:only-of-type	Select each P element to be the only P element of its parent	3
: Only-child	P:only-child	Select each P-element to be the only child of its parent	3
: Nth-child (n)	P:nth-child (2)	Select each P-element is the second child of its parent	3
: Nth-last-child (n)	P:nth-last-child (2)	Select the second child element of each P-element that is its parent, counting from the last subkey	3
: Nth-of-type (n)	P:nth-of-type (2)	Select each P element is the second P element of its parent	3
: Nth-last-of-type (n)	P:nth-last-of-type (2)	Select the second P element for each P element that is its parent, counting from the last subkey	3
: Last-child	P:last-child	Select each P-element to be the last child of its parent.	3
: Root	: Root	Select the root element of the document	3
: Empty	P:empty	Select each P element without any children (including text nodes)	3
: Target	#news: Target	Select the currently active #news element (the URL of the click that contains the anchor name)	3
: Enabled	Input:enabled	Select each INPUT element that is enabled	3
:d isabled	Input:disabled	Select each of the disabled input elements	3
: Checked	Input:checked	Select each selected INPUT element	3
: Not (selector)	: Not (P)	Select each element that is not a P element	3
:: Selection	:: Selection	Matches the part of the element that is selected by the user or is in the highlighted state	3
: Out-of-range	: Out-of-range	INPUT element that matches the value outside the specified interval	3
: In-range	: In-range	INPUT element that matches the value within the specified interval	3
: Read-write	: Read-write	Used to match readable and writable elements	3
: read-only	: read-only	The element used to match the setting "ReadOnly" (read-only) attribute	3
: Optional	: Optional	Used to match optional input elements	3
: Required	: Required	Used to match elements that have the "required" property set	3
: Valid	: Valid	Used to match elements with input values that are legal	3
: invalid	: invalid	Used to match an element with an invalid input value	3

Second, element positioning

1. Basic knowledge

For a Web page, it is extremely important to arrange the location of each element as it is displayed directly to the visitor. CSS in the location of the element can be very convenient control, which in the past can only use the table is difficult to achieve.

CSS provides properties for positioning and floating, which allow you to set up a column layout, overlap parts of the layout with another part, and complete tasks that you typically need to work with multiple tables over the years.

The basic idea of positioning is simple, which allows you to define where the element box should appear relative to its normal position (relative relative positioning), or the position of the parent element (absolute absolute positioning), another element (floating), or even the browser window itself (fixed pinned positioning). There is also a static statically positioned position, which is positioned by default, by the way the block and inline are positioned in the document flow.

To understand the relevant content of positioning, you need to first understand the block-level elements and inline elements.

Div, H1, or p elements are often referred to as block-level elements. This means that these elements appear as a piece of content, the "block box". In contrast, elements such as span and strong are called "inline elements," because their content is displayed in the row, which is the "inline box." You can use display:?; To change the type of the element, block is the blocks level element, inline is an inline element, none is not generated box, equivalent to directly do not display content, not occupy the page location, unlike visibility, visibility is not displayed, but still occupies the location.

However, in one case, block-level elements are created, even if they are not explicitly defined. This happens when you add some text to the beginning of a block-level element, such as a Div. Even if the text is not defined as a paragraph, it is treated as a paragraph:

< Div > some text < P > Some more text. </ P > </ Div >

In this case, this box is called the Nameless block box because it is not associated with a specially defined element.

A similar situation can occur with the text line of a block-level element. Suppose you have a paragraph that contains three lines of text. Each line of text forms a nameless box. You cannot apply a style directly to a nameless block or a row box, because there is no place to apply the style (note that the row and inline boxes are two concepts). However, it helps to understand that everything you see on the screen forms some kind of box.

2. Positioning mechanism

There are three basic positioning mechanisms for CSS: normal flow, floating, and absolute positioning.

Unless specifically specified, all boxes are positioned in the normal stream. That is, the position of an element in a normal stream is determined by the position of the element in the (X) HTML.

Block-level boxes are arranged from top to bottom, and the vertical distance between boxes is calculated from the vertical margin of the box.

The inline box is arranged horizontally in a row. You can use horizontal padding, borders, and margins to adjust their spacing. However, vertical padding, borders, and margins do not affect the height of the inline box. A horizontal box formed by a row is called a line box, and the height of the row box is always sufficient to hold all the inline boxes it contains. However, setting the height of the row can increase this box.

3. Position Properties

By using the Position property, we can select 4 different types of positioning, which affects how the element box is generated.

Position the meaning of the property value:

Static

The

element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

The

default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).

　　

Relative

The

element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

creates a relative positioned element, positioned relative to its normal position.

therefore, "left:20" adds 20 pixels to the left position of the element.

　　

Absolute

The

element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block.

The space that the

element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor.

The

position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

　　

Fixed

the element box behaves like the position is set to absolute, but its containing block is the window itself.

generates an absolutely positioned element that is positioned relative to the browser window.

The

position of the element is defined by the "left", "Top", "right" and "bottom" attributes.

Tip: Relative positioning is actually considered part of the normal flow positioning model, because the position of the element is relative to its position in the normal stream.

Add: When the content is very large, but we do not want him to occupy the entire page, you can set the overflow property, and set the size of the block, when the content exceeds the size of the block, with the value of overflow in the processing, scroll or auto or none. If the text contains a picture, we want the text to align in the middle of the image, and you can set the Vertical-align property to center. The Z-index property is used to adjust the case of a block in a layer, top or bottom, and so on.

4. Relative positioning

Use a graph to illustrate that, when using relative positioning, the elements still occupy the original space, whether or not they are moved. Therefore, moving an element causes it to overwrite other boxes.

　　

5. Absolute positioning

The positioning type is special and removes the positioned element directly from the document stream.

An element box set to absolute positioning is completely removed from the document flow and is positioned relative to its containing block, which may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element had not existed. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Absolute positioning makes the position of an element independent of the document flow and therefore does not occupy space. This is different from relative positioning, where relative positioning is actually considered part of the normal flow positioning model because the position of the element is relative to its position in the normal stream.

The position of an absolutely positioned element is relative to the nearest positioned ancestor element, and if the element does not have a positioned ancestor element, then its position is relative to the original containing block.

Note: Depending on the user agent, the original containing block might be a canvas or HTML element.

Tip: Because absolutely positioned boxes are independent of the document flow, they can overwrite other elements on the page. You can control the stacking order of these boxes by setting the Z-index property.

6. Floating

is also a special way of positioning, the floating box can be moved left or right until its outer edge touches the bounding box or the border of another floating box. Because the float box is not in the normal flow of the document, the Block box in the normal flow of the document behaves as if the floating box does not exist.

By a separate property of float:?; To achieve floating, can be none, left, right, Inhert.

Use diagrams to illustrate floats:

When you float box 1 to the right, it moves out of the document stream and shifts to the right until its right edge touches the right edge of the containing box:

　　

When box 1 floats to the left, it moves out of the document stream and shifts to the left until its left edge touches the left edge of the containing box. Because it is no longer in the document flow, it does not occupy space, actually covers box 2, so that box 2 disappears from view.

If you move all three boxes to the left, the box 1 floats to the left until it touches the containing box, and the other two boxes float to the left until you hit the previous float box.

　　

PS: Here seems to correct an error, above the left side of the picture, Box 2 does not disappear, but will be in the floating element after the floating element in the same block after the floating layout is completed, the box 2 will be arranged according to the floating elements to fit their position, the floating element is actually in the layout process does not occupy space, Occupy space after the layout is complete.

If the inclusion box is too narrow to accommodate three floating elements arranged horizontally, the other floating blocks move down until there is enough space. If the height of the floating elements is different, then they may be "stuck" (really magical) by other floating elements when they move down:

　　

Line boxes and cleanup:

The row box next to the float box is shortened to make room for the floating box, and the row box surrounds the float box. Therefore, creating a floating box allows the text to surround the image:

　　

To prevent a row box from wrapping around a floating box, you need to apply the clear property to the box. The value of the clear property can be left, right, both, or none, which indicates which sides of the box should not be next to the floating box.

To achieve this effect, add enough space on the top margin of the element to be cleaned so that the topmost edge of the element drops vertically below the floating box:

　　

　　

A summary of some of the content in CSS