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

This article shows you what the little knowledge of CSS is, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

The color property of 1.CSS is not limited to text display.

I believe all Web developers have used the color property of CSS. If you are not a very experienced person

Check programmers, I believe you may not know that the color attribute can be used in addition to text display, can also be used in other places. it

You can change everything on the page. For example:

The alt text of the picture that cannot be displayed, the border of the list element, the dot in front of the unordered list element, the number in front of the ordered list element, the hr element, etc.

XML/HTML Code copies content to the clipboard

# div1 {width: 375px; height: 265px; border: 1px solid blue;}

One, two, three.

There is a picture as proof:

The visibility attribute in 2.CSS has a collapse attribute value: collapse

For the visibility attribute in CSS, I'm sure you've used it hundreds of times. Most of the time, you set its value.

To visible (which is the default value for all page elements), or hidden. The latter is equivalent to display: none, but still

However, it takes up page space. In fact, visibility can have a third value, which is collapse.

New attribute values have been added to 3.CSS 's background shorthand.

In CSS2.1, the abbreviation of the background attribute contains five attribute values-background-color, background-

Image,background-repeat, background-attachment, and background-position . Starting with CSS3, three new attribute values have been added, adding up to eight. The following is what they mean in order:

Background: [background-color] [background-image] [background-repeat] [background-attachment]

[background-position] / [background-size] [background-origin] [background-clip]; notice the backslash inside, which

The use of backslashes in abbreviations in font and border-radius is similar. Backslashes can be found in browsers that support this type of writing

Position is followed by background-size. In addition, you can add two other attribute values that describe it: background-

Origin and background-clip. Its syntax looks like this:

CSS Code copies content to the clipboard

.example {background: aquamarine url (img.png) no-repeat scroll center center / 50% content-box content-box;}

The clip attribute of 4.CSS takes effect only on elements that are absolutely positioned

Add to style

CSS Code copies content to the clipboard

Img {width: 200px; height: 200px; clip: rect (0px 50px 200px 0px)}

In HTML

1:

Found that it was not cut.

Absolute positioning of img

CSS Code copies content to the clipboard

Img {width: 200px; height: 200px; position: absolute; clip: rect (0px 50px 200px 0px)}

Clip is valid:

5. The vertical percentage of the element is set relative to the width of the container, not the height

When you set the width of an element as a percentage, it is calculated relative to the width of the parent container, but for attributes that represent vertical distances, such as padding-top,padding- bottom,margin-top,margin-bottom, and so on, when you set them as a percentage, they are also based on the width of the parent container, not the height. Add a padding-top to the picture:

1: padding-top: 10%

According to the effect and the estimated distance, it can be proved that it is calculated according to the width.

The 6.border-width property can use predefined constant values

In addition to using standard width values (such as 5px or 1em), the border-width property can accept predefined constant values: medium, thin, and thick. In fact, if you do not assign a value to the border-width property, its default value is "medium".

7. Do you know the empty-cells attribute in table?

The empty-cells attribute in css is supported by all browsers, even IE8, which is used like this:

1: table {empty-cells: hide;}

I guess you've figured out what it does semantically. It serves HTML table. It tells the browser to hide a table cell when there is nothing in it.

However, empty-cells is only used in the "detach border" mode, that is, border-collapse:separate

8. Oblique attribute value of font-style

For the font-style attribute with css, I estimate that every time you see it, you use the value of "normal" or "italic". But in fact, you can also assign it to "oblique".

9. Word-wrap and overflow-wrap are equivalent

Word-wrap is not a very common CSS attribute, but it is really useful in a particular environment. One example we often use is to wrap a line when a long url is displayed on the page, rather than breaking the page. Add a child div to the original div and set the word-wrap property

CSS Code copies content to the clipboard

My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger

Effect.

Instead of cropping the long words, the long words are displayed in a separate line as a whole. Replace word-wrap with overflow-wrap, and the effect is the same.

However, it is important to note that the word-break property, which cuts long words,

CSS Code copies content to the clipboard

My father was a self-taught mandolin player. He was one of the best string instrument players in our town. He could not read music, but if he heard a tune a few times, he could play it. When he was younger

Effect.

Attached: value of word-wrap:

Value of word-break:

The above is what is the little knowledge of CSS? have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to 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.