Shulou(Shulou.com)06/03 Report--

This article is to share with you about the css front-end knowledge points, the editor feels very practical, so share with you to learn, I hope you can learn something after reading this article, do not say much, follow the editor to have a look.

1. The concept of css: (CascadingStyleSheet cascading style table)

Advantages: 1. Content is separated from performance. (the xhtml can be separated from the appearance with the content of the web page)

two。 Imagery unity

3. A rich style

4. Reduce web page code

5. Using css independent of web pages

two。 Selector

1. Tag selector

Label signature {attribute: attribute value;}

two。 Class selector

. Class name {attribute: property value;}

Tag content

3. Id selector

# ID name {attribute: attribute value;}

4. Union selector

Sign your name. Class name, # ID name {attribute: attribute value;}

5. Descendant selector

The descendant selector is written with the outer label at the front and the inner label at the back, separated by a space. When tags are nested, the inner tag becomes the descendant of the outer tag.

P span {attribute: attribute value;}

Tags are nested within tags.

The descendant of the label, separated by a space

6. Intersection selector (note: there is no space between intersection selectors) this can be determined to be a certain label

Label name. Class name {}

7. Global selector

* {style;}

Comments in Css can only be in the form of / * comment * /

3. The method of introducing css style into HTML

1. Inline formula

two。 Embedded system

Write the style in head

H1 {font-size:18px;}

3. Imported and linked, (external css style)

Linked:

Introduction:

@ import "style.css"

The difference between the two is that the link loads the style first and then the page, and vice versa.

4. Priority of the styl

Between basic selectors: ID selector > class selector > tag selector

Between style sheets: inline style > embedded style > external style

Between Css styles: in the same selector, two identical declarations, the latter declaration will overwrite the previous declaration

5. Box model

Total box model size = border-width-padding+margin+ content size (width or height)

6. Floating attribute

Float: value (left,right,none,inherit (not supported by IE and not recommended)

Another attribute, clear, used in conjunction with the float attribute, is used to determine which side of the element does not allow other floating elements. There are five values for the clear attribute, as shown below:

Left does not allow floating elements on the left

Right: floating elements are not allowed on the right

Both: floating elements are not allowed on both the left and right sides

None default value, which allows floating elements to appear on both sides

Inherit: specifies that the value of the clear attribute should be inherited from the parent element, which is not supported by IE browsers and is not recommended. Generally, when it is used to clear floats, the value of the both attribute is often used, that is:

Clear:both

7. Positioning attributes:

1. Absolute positioning

Position:absolute; Zmuri index 2; (stacking order)

Background-color: background color. Transparent represents a transparent background color

Background-attachment: determines whether the background image scrolls with the class volume. Set to fixed to be fixed and scroll to scroll.

two。 Relative positioning: position:relative

8. Control the way elements are displayed

1. Display method display: valu

two。 Handle overflow in the box: overflow: value

3. Set the shape of the cursor: cursor:pointer (small hand)

4. Hyperlink style:

A:link {color:#ff0000;} / / unvisited links

A:visited {color:#00CC00} / / visited links

A:hover {color:#000FF} / / move the mouse pointer over the link

A:active {color:#FF00FF} / / selected link

The definition style must be: linklinks visible styles hoverware active

Lesson: an inline tag can be included in a block-level tag as a child of it, but the reverse is not true.

Convert display:block; to block-level elements

The above are the front-end knowledge points of css, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.