Web Front-end study notes, practice (3) basic CSS attributes

Weight:

1. The value of a tag is 1 point.

2. The value of a class selector is 10 points.

3. The value of an ID selector is 100 points.

4. The value of a built-in style is 1000 points.

The weight problem is that if there are three fonts or three colors in a style attribute, then who will act on the label? This is the weight issue. A set of formulas has been provided in CSS to determine which value is assigned to the label. The following is a column:

<H1 id = "de" class = "Dell">

H1 {border: 2px #000 slide;} // 1 point

# De {border: 4px #000 slide;} // 100 points

. Dell {border: 4px #000 slide;} // 10 points

In this example, the border of border is defined for all three attributes. The final winner is ID after weight value calculation. Therefore, there will be 4 pixels on the border and black visual feedback.

Initialization word information:

Font: font-family: Arial; font-family:; for more information about font, see http://www.codestyle.org/font-family

Text color:

Color: #3e8888; [color can be taken using Photoshop tools] hexadecimal color.

Color: RGB (100%, 100%, 100% ). Color: Aqua;

[For the color value, see the webpage designer color book.] I will not introduce it, because I write JS drops...

Font Size:

Font-size: 12px; [multiple domestic pixel values]

Font-size: 1em; [em is used in many foreign countries]

Font-size: 100%; percentage is used for the font size. This attribute comes with the font size defined by the browser.

Font-size: Large; [keyword]

Format Font:

Font-style: italic; Italic

Font-style: normal; non-italic

Font-weight: bold; bold

Text-transform: // This attribute is used for uppercase and lowercase letters.

Text-Decoration: // This style has four attributes, such as underline, median, and no underline. Underline, overline, line-through blink none

Letter-Spacing: pixel value. This attribute controls the distance between texts.

Text-align: // The Center, left, and right alignment attributes that are commonly used in this attribute.

Text-index: pixel value. This attribute is used for indentation.

For details about other attributes, see the third edition of CSS authoritative guide.

The concept of the Box Model:

 

In HTML, tags such as Div span can be represented at the block level. In the entire model, margin padding identifies the outer padding to control. Example:

. De {width: 1322px; Height: 679px ;}

<Div class = "de"> </div>

You can think of it as a box with a width of 1322 and a height of 679. The margin attribute can control the distance between the box and another box. The padding attribute controls the distance between the content in the box and the box.

Note: the concept of the box model is crucial for DHTML development.

For more information about the box model concept, see the third edition of the CSS authoritative guide.