CSS stuff. 1 CSS selectors and management

Combined with the present as a net programmer, difficult to find work situation, first learn the front-end knowledge, the front-end has now become a web and app intersection, Web frontend, app using H5 technology frontend, as for what background database cache Message Queuing If there is no large project platform for the construction of the opportunity is very difficult to cut into a large depth, just the front end by writing the public number as a point of entry, I hope no longer can not find work, can no longer jump nest embarrassing situation.

1 CSS Syntax

The syntax for the selector {property: Value}css is very simple.

2 Common shorthand for CSS

color: #ffffff, Color:rgb (255,255,255), Rgba (233,233,233,90), or RGB (20%,30%,40%), as directly using the value of the enumeration color:red, White

border: width, style, color border:1px solid red; I often use it to view the footprint of DIV elements

background: By default, the properties listed below are

Background-color;

Background-image:url (HTTP:///DSADSA);

Background-repeat: Background tiling settings

Background-attachment:fixed, whether fixed or scrolled along with the scroll bar

Background-position:x,y, percent can be used, where the number is used, the percentage can be used, if the percentage does not work, then see if the ancestor element does not have a percentage of the setting

Font:

Fony-style: Font style, such as italic

Font-variant:small-caps for the English alphabet

Font-weight: Bold or not

Font-size: Size

Font-height: Text line height

Font-family: Fonts such as "Song Body"

list Item li

List-style-type:square (square) List bullet type

List-style-position:inside Bullet Location

List-style-image: Picture used by list item bullets

2 Important and changeable selectors

The selector is primarily used to match the document element object, which is to select a document element object and set it to CSS properties

2.1 Wildcard characters

* Setting all element properties of the page is also the simplest

Class 2.2 Selectors

. Using a dot notation, a class representing all elements referencing this class will enjoy this CSS property setting, which is often used for CSS code reuse

2.3 Include selectors

Using an empty Glyd representation, mainly consists of a selection of child elements contained within the element, such as P strong, all strong tags inside the p tag

2.4 Sub-selectors

> use a greater than symbol to denote a sub-selector that contains only one child element within the element, such as Body>strong, the first strong below the body, if the body>p>strong is not the same, note the difference Container level

2.5 Adjacent selectors

+ Use a plus sign to represent the next element under the same parent element of an element, such as P+strong, which represents the strong element that is the same level as P and after P

<p> you are my little Jas Apple <strong> I am a child of P can use sub-selectors to select me haha </strong></p>

<strong> I was P's neighbor haha </strong>

2.6 ID Selector

# is a very simple selector using # notation

2.7 Combo Selector

Selectors have a lateral and inclusive relationship in which you can combine multiple selection payments in any relationship, except that the combination of peers uses a comma delimiter, while the inclusion relationship uses a space symbol, such as all elements of the p.content:p tag that use the content inside the class

And the p,h1,h2:p H1 H2 they work together on a CSS style setting.

2.7 Pseudo-Class

A:link the style of a tag before it is accessed

A:hover a tag when the mouse is sliding up the style

A:visited a tag after the access style

A:active a tag in the mouse click, and before the mouse release style

2.8 Pseudo-objects

: The content before the before element p:before{content: "I am the content in front of P"}

: After element content p:after{content: "I am the content behind p, sometimes I am also a font graphic"}

3 CSS Priority calculation method

Element Selector Priority +1

Class Selector Priority +10

ID Selector Priority +100

In-line style priority +1000

!important Priority above all

4 CSS File Management

CSS files are introduced into HTML documents via the link tag, can also be imported into a document using @import, or imported into a CSS file like dependencies, but the imported CSS file is usually parsed at the end, but @import must be written at the front of the CSS question.

This is mainly used for the reuse of CSS files, but also facilitates the integration of multiple CSS, conducive to maintenance

Write here today, tomorrow to see the next chapter, in short this time must insist ah, the front-end foundation to fill up into the H5 can be developed, back to adhere to the Web

CSS stuff. 1 CSS selectors and management