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

Web development is easy to ignore what CSS features, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

Case insensitive

Although we usually write CSS in lowercase, CSS is not case-sensitive.

.test {

Background-COLOR:#a00

Width:100px

Height: 100px

}

Although background-color is written as background-COLOR, it will still take effect. It is written in lowercase because of the xhtml standard, but it is better to write lowercase even if it is not xhtml. It is beautiful, easy to read and can cope with possible conversion requirements.

Selector priority

When both rules apply to the same html element, if the defined attributes conflict, then whose value should be used? CSS has a set of priority definitions.

Different levels

1. Using! important after the attribute overrides the element style defined anywhere on the page.

two。 A style written within an element as a style attribute

3.id selector

4. Class selector

5. Tag selector

6. Wildcard selector

7. Browser customization or inheritance

Same level

Those written later in the same level will overwrite the style written first.

The above levels are easy to understand, but sometimes some rules are a combination of multiple levels, like this.

Document div.test {background-COLOR:#a00; width:100px; height: 100px;} .test.test2 {background-COLOR:#0e0; width:100px; height: 100px;}

In the end, which rule does div apply? there is a simple method of calculation. (as suggested by gardeners, the weight is not actually in decimal system, but is only expressed in numbers, and the weight of 10,000 class is not as high as that of an id.)

The weight of an inline style sheet is 1000

The weight of the ID selector is 100

The weight of the Class class selector is 10

The weight of the HTML tag selector is 1

We can add the rules in the selector and compare the weights. If the weights are the same, then the latter will overwrite the previous one. The weight of div.class is 1: 10. 11, while the weight of .test1. Test2 is 10: 10. 20, so div will apply .test1. Test2.

Turn green

Some attributes of inline elements

Not all attributes are valid for in-line elements.

1. The inline element does not apply the width attribute, and its length is supported by the content

two。 Inline elements do not apply the height attribute, and their height is also supported by the content, but the height can be adjusted by line-height

3. The padding attribute of an inline element takes effect only with padding-left and padding-right. Padding-top and padding-bottom will change the element range, but will not affect other elements.

4. Only margin-left and margin-right are valid for margin attributes of inline elements, while margin-top and margin-bottom are invalid.

5. The overflow attribute of the element in the line is invalid, which is needless to say

6. The vertical-align attribute of the inline element is invalid (the height attribute is invalid)

123456789123456789

123456789

As can be seen from the example, the width and height attributes we set for span do not take effect, margin-top and margin-bottom are invalid, and padding-top and padding-bottom change the element range (the background area becomes larger), but do not affect the position of the following elements.

Some mutually exclusive elements

1. For elements positioned by absolute and fixed (fixed size, with width and height attributes set), if top and left attributes are set, setting bottom and left values will have no effect. It should be high priority for top and right.Otherwise, it is written how the browser knows who to locate.

two。 For elements located by absolute and fixed, the margin attribute will not work if the values of top, left, bottom and right are set.

3. For elements located by absolute and fixed, the float attribute will also be invalid if the values of top, left, bottom and right are set.

4. Block element if the float attribute is set or the absolute or fixed positioning is set, the vertical-align attribute no longer works

Font-size unit

The units we often use when writing font sizes are

Px

Pt

Em

Rem

What are the meanings of these fonts?

1.px is the abbreviation of pixel, which is based on pixels. In the process of browsing the web, the text and pictures on the screen will change with the resolution of the screen. A picture of the width of a 100px, at 800 × 600 resolution, accounts for 1max 8 of the width of the screen, but under 1024 × 768, it only accounts for about 1max 10. So if you use px as a unit when defining font size, once the user changes the display resolution from 800 to 1024, the text actually seen by the user will become "smaller" (natural length unit), or even blurred, affecting browsing.

2.pt is an acronym for point, a fixed-length unit of measurement with a size of 1 to 72 inches. If you use pt as units of text on web, the font size is the same on different screens (the same resolution), which may have an impact on typesetting, but it is quite convenient to use pt in Word. Because the main purpose of using Word is not for screen browsing, but for output and printing. When printing to an entity, the pt is convenient and practical as a natural unit of length: for example, ordinary documents in Word use "Verdana 9pt", the title is "boldface 16pt", etc., no matter how the computer is set up, the print is always this big.

3.em: is a relative unit, is a relative unit of length, originally refers to the width of the letter M, so it is called em, now refers to the multiple of the width of the character, the use of similar percentage, such as: 0.8em, 1.2em.2em and so on. Usually 1em=16px (browser default font size 16px), em refers to the font size of the parent element. Given the font size of a parent element on a page, you can change the size of all elements proportionally by adjusting one element. It can be scaled freely, such as to make scalable stylesheets. Similarly, there is the concept of ex, the height of ex relative to the character "x", which is usually half the font size.

4.rem:rem is a new addition to CSS, and em sets the font size relative to its parent element, so there is a problem. Any element setting may need to know the size of his parent element. When used many times, it will bring unpredictable error risk. While rem is relative to the root element (r:root), with rem we only need to determine a reference value in the root element, and then we can control all the fonts of the entire html page.

Checked selector range

We know: checked will choose the selected checkbox and radio. Take a look at an example.

Document

: checked {

Margin: 10px

}

Test

Test2

We are not surprised that the first two margin have become 10px, but when we look at the option of select, we will find that the edge of the selected option has become 10px, and the option that has not been selected has not changed!

Yes: checked will also choose the selected option

Not all pictures will be loaded.

We know that img tags written on the page will load images regardless of whether they are displayed or not. So try to save network traffic by display:none pictures. ), we also often use css attributes such as backgroung-image to add pictures to the page. Are these pictures bound to be loaded? take a look at an example.

CSS Code copies content to the clipboard

Document

.useless {

Background-image: url (images/0.jpg)

}

.hidden {

Background-image: url (images/1.jpg)

}

.none {

Background-image: url (images/2.jpg)

}

.parentHidden {

Background-image: url (images/3.jpg)

}

.parentNone {

Background-image: url (images/4.jpg)

}

Take a look at the network surveillance. (how did Liu Yan's photo get smaller? it feels weird. )

We can find that pictures 0 and 4 are not downloaded, 0 is not used when CSS,4 is the parent container's display is set to none. In these two cases, the pictures referenced by CSS will not be loaded, while the parent container setting the visibility property to hidden will still load pictures. Don't get confused.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.