Content Builder in CSS

One, Content generator: Contents

Supplemental before and after pseudo-class selectors:

1): Add content before or after each instance of a single or multiple element defined by a selector

2) use with the before selector (similarly, do you think there will be after?) ）；

The role of content:

1, Function: Insert content in front of the content of the selected element;

2, Usage: Use the Content property to specify what you want to insert;

3, you can set the style of the inserted content;

Content usage: Modify the HTML content;

Common values: URL: Add image;

Text

Counter:?

Second, Counter: (Guide language, everyone before if you want to implement to the sequence of non-sequential table plus ordinal how to deal with??? Use the List-style-type: decimal value. Now, we're going to get a new skill with the counter Counter-reset property implementation and it's the same effect)

1), Counter-reset properties:

Action: Sets the value of the counter for a selector occurrence, which defaults to 0. Use this property to set or reset to any value, which can be positive or negative. If number is not provided, the default is 0.

2), use note points:

If you use Display:none, you cannot reset the counter. If you use Visibility:hidden, you can reset the counter.

3), you must combine the counter () function and the Counter-increment property with the

A,counter () function:

The counter () function is used to create a count string for the specified counter;

Syntax: Counter (name): Name for counter

B,counter-increment Property: counter-increment: There are three values: None,id Number,inherit (Specifies that the value of the Counter-increment attribute should be inherited from the parent element) property to set the counter increment for each occurrence of a picker. The default increment is 1.

notation: counter-increment:id number; (ID defines the selector, ID, or class that will increment the count.)

Number defines the increment. Number can be positive, 0, or negative. ）

Demo

Html:

Css:

body{

Counter-reset:demo;

}

h1:before{

Content: "section" Counter (Demo) "chapter" ":";

}

h1{

Counter-increment:demo;

}

Three, multiple columns:

1, (Guide: Let the text appear in multiple columns. We know that when a line of text is too long, the reader is more difficult to read, it is possible to read the wrong line or read the serial; People's viewpoints move from one end of the text to the other and then to the beginning of the next line, and if the eyeballs move too much, their attention will be reduced and easy to read. Therefore, in order to maximize the efficiency of the use of large-screen display, the page design needs to limit the width of the text, so that the text in multiple columns, like the newspaper in the news layout. ）

2, before the line with what???

A: Long word wrapping

Word-wrap:normal/break-word;

Wrap text

Word-break:normal/break-all/keep-all;

3, regardless of how many columns of text you want to display, you need only two properties: Column-count (the number of columns) and Column-width (column width) column-gap (gap spacing between columns) Column-rule (specifies the middle split line width, style, and color rules between columns).

Content Builder in CSS