6.DIV CSS typesetting skills_html/css_WEB-ITnose

1. CSS box (CSS box) There is no box attribute in CSS. The CSS box is composed of the following parts: content, padding, border and margin. The content of the box is of course required, but the padding, border and border

1. CSS box (CSS box)

There is no box attribute in CSS . The CSS box is composed of the following parts: content, padding, border and margin. The content of the box is of course required, but padding, borders and borders are all optional. If the CSS box is regarded as a box in real life, then the content is the goods in the box; the filling is the foam or other earthquake-resistant things added to avoid damage to the goods; the border is the box itself; as for the border, it describes the placement of the box When placed, it cannot be placed close to other objects, but there must be a gap. Of course, boxes in CSS are flat.

CSS border (border):

border mainly has the following parameters: none: no border; hidden: hidden border; dotted: dotted line; dashed: dotted line; solid : solid border; double : double border; groove : 3D groove; ridge : diamond border; inset : 3D concave edge; outset : 3D convex edge.
The value of the border will be four. If all four parameter values ​​are provided, the four borders will be applied in the order of top-right-bottom-left.
If only one is provided, it will be used for all four edges.
If two are provided, the first one is for up-down, and the second one is for left-right.
If three are provided, the first one is for top, the second one is for left-right, and the third one is for bottom.
Border and margin are mainly used for positioning. They will be defined by four values: up, down, left and right.

2. Link (a) has four attributes: a:link, a:visited, a:hover and a:active, the order cannot be reversed

CSS links have four attributes : Among them, a:link, a:visited, a:hover and a:active respectively correspond to unvisited links, visited links, mouse-hovered links and activated mouse links (when the left mouse button is pressed). The order of these styles cannot be reversed, otherwise some styles may not be displayed properly. Font attributes, underline, background, etc. can be changed in each style.

3. How to add CSS to a web page: divided into three types: internal style sheet, inline style sheet (embedded style sheet), external style sheet

Mainly divided into Three types: internal style sheets, inline style sheets (embedded style sheets), and external style sheets. Internal style sheets are mainly defined in ; inline style sheets can be directly defined inside tags using the style attribute; when using external style sheets, the CSS file and the web page file (html) are separated, and the separate files must be Link, this is mainly for web pages with many CSS style sheets, especially for web pages with many CSS style sheets. Web page combined with DIV.

4. How to set the text font, color and size?? Using font, you can write it in a line of font attributes (except the color attribute, which needs to be written separately)

font-style setting Fixed italic, such as font-style: italic;
font-weight sets the text thickness, such as font-weight: bold;
font-size sets the text size, such as font-size: 12px; (or 9pt, Please refer to the CSS manual for display issues in different units)
line-height sets the line spacing, such as line-height: 150%;
color sets the text color (not font-color), such as color: red;
font -family sets the font, such as font-family: "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif; (This is a common way of writing)
All of the above can be written in one line of font attributes ( Except the color attribute needs to be written separately):
font: italic bold 12px/150% "Lucida Grande", Verdana, Lucida, Arial, Helvetica, Song Dynasty, sans-serif;

5. How to control paragraph layout ?? Use margin, text-align

Chinese paragraphs use

tags, left and right (equivalent to indentation), and white space before and after paragraphs, you can use margin. For example:
p{
margin: 18px 6px 6px 18px; /*respectively are top, right, bottom, left, clockwise starting at twelve o'clock*/
}
Alignment of text Use text-align, for example:
p{
text-align: center; /*center alignment*/
}
Alignment methods include left, right and justify (align both ends)
PS. Talking about margin, I am used to defining margin: 0; for all tags when writing CSS, because sometimes there are page layout problems caused by the default margin value, and I can’t find the reason (especially pay attention to ul/ ol/p/dt/dd and other tags)

6. Vertical text ?? Use writing-mode

The writing-mode attribute has two values ​​lr-tb and tb- rl, the former is the default left-right, up-down, and the latter is up-down, right-left.
For example:
p{
writing-mode: tb-rl;
}
can be combined with direction typesetting.

7. Problem with bullets?? Use list-style

In CSS bullets include disc (solid dot), circle (hollow circle), square (solid square), decimal (Arabic numerals), lower-roman (lowercase Roman numerals), upper-roman (uppercase Roman numerals), lower-alpha (lowercase English letters), upper-alpha (uppercase English letters), none (none). For example, set the bullet of a list (ul or ol) to a square, such as:
li{
list-style: square;
}
In addition, list-style also has some values, such as Use some small pictures as bullet points, and just write the url ("picture address") directly in the list-style. Note that if the margin-left of an item list is set to zero, list-style-position: outside (the default is outside) bullets will not be displayed. Unfortunately, the above-mentioned bullets do not seem to be able to set the size, and the dots and squares are always the same. And the vertical alignment cannot be set.

8. Drop Cap ?? Use: first-letter

Pseudo object: first-letter combined with font-size and float can create a drop cap effect.
For example:
p:first-letter{
padding: 6px;
font-size: 32pt;
float: left;
}

9. First letter Line indentation ?? Use text-indent

text-indent to indent the first line in the container by a certain unit. For example, Chinese paragraphs generally have two Chinese characters before each paragraph. You can write it like this:
p{
text-indent: 2em; /*em is a relative unit, 2em is twice the current size of a word*/
}
If the font-size is 12px , then text-indent: 2em will be indented by 24px.

10. About Chinese character phonetic notation?? Use ruby ​​tags and ruby-align attributes

For example, phonetic notationzhu yin, you can use ruby-align to set the alignment. This is seen in the CSS manual. You can check the ruby-align item for details.

11. Fixed-width Chinese character truncation?? Use text-overflow

Use the background language to truncate the field content in the database, for example, 12 Chinese characters (after use ellipses). But sometimes it is necessary to filter html tags, etc., but using CSS to control does not have this problem. For example, apply the following styles to the list:
li{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
But only text can be processed Truncation on one line, cannot handle multiple lines.

12. Fixed-width Chinese character (word) line break ?? Use word-break

For example, if you want to display many place names in a fixed-width container (assuming the following Separated by spaces), in order to avoid the place name being broken in the middle (that is, one character is at the top and the other character is broken to the next line). Then you can use word-break. For example:

Nanjing Shanghai Shanghai Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai

It is worth noting that the spaces inside cannot be replaced by (at least there must be a soft space).

13. Set background attributes ?? Use (background)

The background attribute contains many sub-attributes, such as background-color to set the background color; background-image to set the background image; background- repeat sets the repeat setting of the background image, background-repeat:no-repeat means no repetition, background-repeat:repeat-x means only repeating in the horizontal direction, background-repeat:repeat-y means only repeating in the vertical direction; background-position sets the background The display position of the picture, background-attachment is a fixed picture displayed in a certain position.
The above image attributes can be written together, such as: background:url (absolute path or relative path); background-repeat: no-repeat; background-position: x y coordinates or percentage;

The above are the basic commonly used properties of CSS. Personally, I feel that DIV CSS should not be too superstitious. It is very good and powerful. It is very powerful and convenient as an important auxiliary for making web pages and beautifying web pages. It can make up for many deficiencies in making table frames and tables and shortcomings in art, but it is too time-consuming and labor-intensive to use it exclusively. It is really not suitable for small and medium-sized website owners across the country. I personally think that using table DIV CSS is the best combination and the most time-saving and labor-saving method. Even if you only use tables to make a website, adding some CSS styles to it can indeed bring great convenience. But for portals or other large-scale websites, DIV CSS can have an absolute advantage. All revisions are completed by just changing the CSS file. For portal websites, DIV CSS revision is as easy as changing a piece of clothing. When revising, you don't need to change the entire site's HTML page. You only need to rewrite the CSS, and then overwrite the previous CSS with the new CSS to achieve the revision.