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

This article mainly explains "what are the CSS cascading styles". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what CSS cascading styles are.

CSS Cascading Style Sheet cascading style sheet

Set the style of the html page

Html is responsible for display css is responsible for style display and style separation

Where to write the css:

1 inside the label

2 on the page

Selector {

Attribute: valu

Attribute: valu

}

3 external css files (.css) in html by importing css files-most commonly used

Selector {

Attribute: valu

Attribute: valu

}

Selector: function? Used to select tags on the page

There are many kinds of selectors for css.

The three most commonly used:

1 tag selector tag {} div {} Select all div tags on the page p {}

2 id selector all tag id attributes on the same page do not have the same value

# tag id attribute value {

}

3 class selector (class selector) is defined before referencing

.aaa {} AAA

Properties commonly used in css:

Color Color

Font-size font size

Font-family font

Font-weight font weight

Font-style font style italic (italic)

Font: weight style size font

Line-height (row height)

Text-align (alignment)

Letter-spacing (character spacing)

Text-decoration (text retouching)

Cursor:pointer hand icon (of course, you can specify other shape icons)

Width width

Height height

Background-color:#FF0

Background-image:url (flower4.jpg)

Background-repeat:no-repeat

Background-position:300px 300px

Background:#3FF url (flower4.jpg) no-repeat 400px 400px

About the css of lists

List-style: decimal/lower-latin/ lower-roman/lower-greek

Circle/square/disc

None

Floating layout: break the feature that block-level tags occupy a single line in html

Float:left/right

-

Box model:

Border every html tag has a border border

Outer margin margin

Set the margin-left:100px of a tag

There can be no other tags in the left border 100px of this tag.

Margin-left

Margin-right

Margin-top

Margin-bottom

Margin: 1 value up and down, left and right 4 directions

Margin: 2 values above or below

Margin: 3 values up, left, right and down

Margin: 4 values up, right, down, left

The margin:100px auto; is about 100 in the center.

Inner margin padding

Set the inside margin padding-left:100px of the label

What is adjusted is the distance of the element contained in the tag to its left border (not to the set value, but to the set value).

Four states of hyperlink styl

Unaccessed status (a:link)

Accessed status (a:visited)

Mouse up status (a:hover)

Activate selected state (a:active)

Css of the picture:

Img {filter:gray} only ie is valid

Image rotation: transform:rotate (60deg) firefox

About hidden and displayed css

Display:none hiding

Inline does not have a single line

Block has a single line

Selector in CSS:

1 tag selector

2 ID selector

3 class selector

4 * the universal selector selects all the tags on the page

5E F descendant selector selects F tag F tag is the descendant of E tag

6 E > F parent-child relationship selector selects F tag F tag is a child of E tag

7 the direct afterbrother selector chooses F F if E's brother.

8 the general post-brother of Elaine

9 E [foo] Select to the E tag with the foo attribute

10 E [foo= "xxx"] Select the E tag where the value of the foo attribute is xxx

11 E [Foo ^ = "xxx"] Select to the E tag whose foo attribute value begins with xxx

12 E [foo$= "xxx"] Select to the E tag whose foo attribute value ends in xxx

13 Erecom FJG Select all E and F and G tags on the page

14 pseudo-class selector:

E:first-child

E:link

E:visited

E:active

E:hover

E:focus

Thank you for your reading, these are the contents of "CSS cascading style". After the study of this article, I believe you have a deeper understanding of what the CSS cascading style has, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.