2015 10th Thursday-css Summary

These two days to do the front page to find a person in the CSS front-end method A lot of basic knowledge has forgotten, the evening and search for learning, the relevant content extracts summarized.

A CSS rule consists of two main parts: a selector, and one or more declarations.

selector {declaration1; declaration2; ... declarationn}

Selectors are usually HTML elements that you need to change the style.

Each declaration consists of an attribute and a value.

The property is the style property (style attribute) that you want to set. Each property has a value. Attributes and values are separated by colons.

selector {Property:value}

The next line of code is to define the text color within the H1 element to be red, while setting the font size to 14 pixels.

In this example, H1 is a selector, color and font-size are attributes, and red and 14px are values.

h1 {color:red; font-size:14px;}

The following shows you the structure of the above code:

Tip: Use curly braces to enclose the declaration.

CSS element Selector http://www.w3school.com.cn/css/css_selector_type.asp

h1 {Color:blue;}

Selector grouping http://www.w3school.com.cn/css/css_selector_grouping.asp

h1,h2,h3,h4,h5,h6{  color:green;  }

All the headline elements are green.

Wildcard Selector

CSS2 introduces a new simple selector-a wildcard selector (Universal selector), which is displayed as an asterisk (*). The selector can match any element, as if it were a wildcard character.

For example, the following rules can make each element in a document red:

* {color:red;}

Class Selector: http://www.w3school.com.cn/css/css_selector_class.asp

.center{Text-align:center} All HTML elements that have the center class are centered.

Elements can also be selected based on their classes:

td.fancy{color: #f60; background: #666;}

In the example above, a table cell with the class name fancy will be orange with a gray background.

class="fancy">

CSS Multi-Class Selector

.important.warning {background:silver;}

CSS ID Selector Detailed http://www.w3school.com.cn/css/css_selector_id.asp

The ID selector can specify a specific style for an HTML element that is labeled with a specific ID.

The ID selector is defined as "#".

The following two ID selectors, the first one can define the color of the element to be red, the second defines the color of the element as green:

#red{color:red;} #green {Color:green;}

Property Selector http://www.w3school.com.cn/css/css_selector_attribute.asp

The following example sets the style for all elements with the title property:

[title]{color:red;}

Properties and Value selectors

The following example sets the style for all elements of title= "W3school":

[title=W3School]{border:5px solid blue;}

[title~=hello]{color:red;} property values separated by spaces

[Lang|=en] {color:red;} property values separated by hyphens

CSS descendant Selector http://www.w3school.com.cn/css/css_selector_descendant.asp

The descendant selector (descendant selector) is also known as the containing selector.

Descendant selectors can select elements that are descendants of an element.

If you write UL em {color:red;}, this syntax selects all EM elements inherited from the UL element, regardless of how deep the nesting level of EM is

CSS child element Selector http://www.w3school.com.cn/css/css_selector_child.asp

Child selectors can only select elements that are child elements of an element, as compared to descendant selectors.

For example, if you want to select a strong element that is only a child of the H1 element, you can write:

H1 > Strong {color:red;}

CSS Neighbor Sibling Selector http://www.w3school.com.cn/css/css_selector_adjacent_sibling.asp

The adjacent sibling selector (adjacent sibling selector) selects the element immediately following the other element, and both have the same parent element.

For example, if you want to increase the top margin of a paragraph that appears immediately after the H1 element, you can write:

H1 + P {margin-top:50px;}

CSS pseudo-Class (pseudo-classes) http://www.w3school.com.cn/css/css_pseudo_classes.asp

CSS pseudo-classes are used to add special effects to certain selectors

Grammar

Syntax for pseudo-classes:

Selector:pseudo-class {Property:value}

CSS classes can also be used in conjunction with pseudo-classes.

Selector.class:pseudo-class {Property:value}

Anchor pseudo-Class

In CSS-enabled browsers, the different states of a link can be displayed in different ways, including: active, accessed, not accessed, and mouseover.

a:link{color: #FF0000}/* link * a:visited /{color: #00FF00}/* visited * a:hover /{color: #FF00FF}/* mouse move to link * a:active /{color: #0000FF}/* Selected Link */

CSS2-: first-child pseudo-Class

This p is the first child element. Modifier pli:first-child {text-transform:uppercase;}

Priority of the selector:

1. Using!important after a property overrides the element style defined anywhere within the page.
2. Styles written as style attributes within an element
3. ID Selector
4. Class Selector
5. Tag Selector
6. Wildcard Selector
7. Browser customization or inheritance

Post-write overrides in the same level will overwrite the first-written style

Not all attributes can take effect on inline elements

1. Inline elements do not apply the Width property, which is the length of the content
2. Inline elements do not apply the Height property, and the heights are also stretched by the content, but the height can be adjusted by line-height
3. The Padding property of the inline element takes effect only with Padding-left and Padding-right, and Padding-top and Padding-bottom change the range of elements but do not affect other elements
4. The margin property of the inline element is valid only for Margin-left and Margin-right, Margin-top and margin-bottom are not valid
5. The overflow property of the inline element is not valid, this is not much to say.
6. Invalid Vertical-align property for inline element (height property is not valid)

Some mutually exclusive elements

1. For absolute and fixed positioning (fixed size, set width and height property) elements, if the top and left properties are set, then setting the bottom and the right values will not work, it should be top and left priority high, Otherwise write the browser how to know according to who location
2. For absolute and fixed positioned elements, the margin property does not work if you set the value of top, left, bottom, and right.
3. For absolute and fixed positioned elements, the float property is also invalidated if the value of top, left, bottom, and right is set
4. Block elements if the float property is set or absolute, fixed positioning, then the Vertical-align property no longer works

Take advantage of inheritance

CSS inheritance mechanism can also help us to a certain extent to reduce the number of bytes, we know that CSS has a lot of properties can be inherited is the parent container set the dictation property, the child container will default also use these properties, so if we want full-text font size is 14px, large can not be set for each container, You just need to set it on the body. Applying this technique, it is possible to use CSS properties to refer to the parent container to save us CSS bytes, by the way, which properties can inherit

• All elements can be inherited: visibility and cursor
• Inline elements and block elements can be inherited: Letter-spacing, Word-spacing, White-space, line-height, color, font, font-family, Font-size, Font-style, Font-variant, Font-weight, Text-decoration, Text-transform, direction
• Block elements can be inherited: Text-indent and Text-align
• List elements can be inherited: List-style, List-style-type, List-style-position, List-style-image
• Table elements can be inherited: Border-collapse
• Non-inheritable: display, margin, border, padding, background, height, min-height, max-height, Width, min-width, max-width, overflow , position, left, right, top, bottom, z-index, float, clear, table-layout, Vertical-align, Page-break-after, Page-bread-before and Unicode-bidi

Block-level elements and inline elements

First, we talk about the block-level elements and inline (inline) elements that people often refer to.

P, UL, form, Div and other elements are called block-level elements, these elements appear as a piece of content (will be wrapped), span, input and other elements called inline elements, the main difference is that the block-level elements from top to bottom one by one vertical arrangement, each from a row, while the inline elements in a row horizontally arranged , the height of the inline element is stretched by its contents and cannot be set to its height, which is why we set the Height property on span again and again.

With this knowledge, let's take a look at some of the properties that are commonly used in display.

Value	Describe
None	This element is not displayed.
Block	This element is displayed as a block-level element with a newline character before and after this element.
Inline	This element is displayed as an inline element with no line break before or after the element.
Inline-block	Inline block element. (CSS2.1 new value)

When we show the hidden elements, we often use the display set to None or ', set to none effect is obvious, is to let the element out of the document flow, not display, does not occupy the document space, and set as ' is the element default attribute block or inline, The Inline-block property is CSS2.1 new, IE8 and other mainstream browsers have been supported, it can make elements like inline elements of the horizontal arrangement, but the contents of the box conform to block-level element behavior, can display settings wide, high, internal and external margins. Very interesting.

It's also interesting to change the type of the element's generated box through different assignments, that is, by setting the display property to block, you can make the inline element behave like a block-level element, and vice versa.

Positioning

To understand the CSS element positioning you need to understand the position property, the position attribute has several common values as follows

Value	Property
Inhert	Specifies that the value of the position property should be inherited from the parent element.
Static	The default value . No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Relative	Generates relatively positioned elements that are positioned relative to the normal position of the element itself . Therefore, "left:20" adds 20 pixels to the left position of the element.
Absolute	Creates an absolutely positioned element that is positioned relative to the first ancestor element other than the static anchor . The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Fixed	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.

CSS has three basic positioning mechanisms: normal flow, floating, and absolute positioning

The normal flow is the default positioning method, the position of the element box in the normal stream is determined by the position of the element in the HTML, the element position property is static or the static of the inheritance will be positioned according to normal flow, which is our most common way.

Relative positioning is relatively simple, corresponding to the relative value of the position attribute, if an element is relative positioning, it will appear in his position, and then you can set the vertical or horizontal position, so that the element relative to its own movement, when using relative positioning, regardless of whether the element is moved , the element occupies the original space in the document flow, but the performance changes.

Normal Flow:

<div style= "Border:solid 1px #0e0; width:200px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px; ">        </div>    </div>

Relative positioning:

<div style= "Border:solid 1px #0e0; width:200px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  position:relative; top:20px; left:20px; " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

As can be seen in the above example, the green div relative positioning, the right shift, move down 20px after the second Red Div position does not change, but in the original position, the green div obscured part of the red Div.

Relative positioning can be regarded as a special ordinary flow positioning, the element position is relative to his position in the normal flow changes, and the absolute positioning of the position of the element is independent of the document flow, and does not occupy the document flow space, the element layout in the normal flow as if the absolute positioning element does not exist.

The position of an absolutely positioned element is determined relative to the position of his nearest non-static ancestor element. if the element does not have an ancestor element that has been positioned, then his position is relative to the element that initially contains the block (body or HTML god horse).

Because absolute positioning is independent of the document flow, an absolutely positioned element can override other elements on the page, control the stacking order through the Z-index property, and Z-index the higher the element position.

Or just the example, a little change, so that the green Div absolute positioning, in order to clearly display, the second red Div changed to yellow.

<div style= "Border:solid 1px #0e0; width:200px; position:relative; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  Position:absolute; top:20px; left:20px; " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

As you can see, the green div is shifted relative to the parent element, the green box Div, while the red and yellow div are laid out as if the green Div does not exist.

The last thing to say is the fixed attribute, the application fixed is also called stationary positioning, fixing positioning is absolute positioning, fixed positioning elements are not included in the normal document flow, the difference is the element of the elements of the viewport is the viewport (s), Often see a number of pages such as Renren online friends that module is always in the lower right corner of the window, it is estimated that a similar technology

Fixed positioning:

<div style= "Border:solid 1px #0e0; width:200px; " >        <div style= "height:100px; width:100px; ">        </div>        <div style=" height:100px; width:100px;  position:fixed; bottom:20px; left:20px; " >        </div>        <div style= "height:100px; width:100px; ">        </div>    </div>

Visible Hongse and yellow div layouts are not affected by the green Div, regardless of whether the page's vertical scrollbar is at the top or bottom of the page, the Green Div is always in the lower left corner of the viewport

Co-write CSS

In addition to the compression method, we can also reduce the CSS byte by writing less CSS properties, to take the most common example

. test{Background-color: #000; Background-image:url (image.jpg); Background-position:left top; Background-repeat: No-repeat;}

We can rewrite the CSS above to achieve the same effect

. test{  

There are many similar properties in CSS that can be written together

Font

Margin/padding

{padding-top:5px; padding-right:10px; padding-bottom:5px; padding-left:10px;} {padding:5px 10px} {padding-top:5px; padding-right:5px; padding-bottom:5px; padding-left:5px;} {padding:5px;}

Background

Border

{border-width:2px; border-style:solid; Border-color: #000;} {border:2px solid #000;}

{border-top:2px; border-right:5px; border-left:10px; border-bottom:3px;} {border:2px 5px 10px 3px;}

2015 10th Thursday-css Summary