Improvement of front-end programming (5)-css books for you to read.

Improvement of front-end programming (5)-css books for you to read.

I have been practicing iQiYi for several months. I entered this company with iQiYi as a stepping stone. If we say that iQiYi was a temporary assault DIV + CSS at the beginning, we have now experienced that all technologies must be aware of the principles so that we can be an expert. Css attributes and usage are all there, but if they are used well, in addition to practices, it is especially necessary to increase the theoretical accumulation, after this "css book for everyone" was quickly scanned, I encountered an unclear problem in my previous work. So it is necessary to summarize it.

Css Cascade

Css is the abbreviation of a stacked style table. Cascade means that the style is transferred from one level in the document structure to another level. The browser determines the source of the style attribute of a tag.

There are three types of styles: default browser style sheets, user style sheets, and designer style sheets.

The style sheet of the default browser varies according to the browser. When writing styles, you need to write a reset style sheet so that the designer's style is consistent.

The user style sheet is the user's personalized settings in the browser..

The designer style sheet is written by the designer, which is divided into inline style, embedded style, and link style. The Inline style and embedded style do not separate the style from the content, because the style is still included in the same document. Link styles are the only way to truly separate presentation styles from structured tags. The priority of the Three Styles is from high to low: inline styles, embedded styles, and link styles.

With the above style source, the cascade operation principle is as follows: first, find all the declarations of each element and attribute, and sort them by order and importance, that is, order, importance is the weight of the attribute and the priority of each style, and is sorted by importance and then by order.

Align tags in the document hierarchy

One selector can be used in multiple rules. The selector corresponds to the tag from the right to the left. In the context selector, the selector is valid if it is located somewhere above the tag level and appears in the same order. The benefit of class and ID selector is that you do not need to consider the style at the document level. Classes and IDs should be used in a controlled manner. It is common to add block-level elements that contain the main parts, and then select context characters starting with the response ID and class name, access tags in the block-level element.

Sub-selector, adjacent peer selector, attribute selector, pseudo-class, and pseudo-element can be used to quickly locate the problem.

Rule Declaration

Em is calculated based on the character width in a font, and ex is equal to the x height of the letter in the given font. There are two reasons for using em to specify the font size in PC development: inheritance can be fully utilized, and convenience can be used by persons with visual impairment. However, ledi is worried that changing the nested hierarchy may lead to joint problems. So far, ledi still uses pixel units.

Font and text style

Css achieves the separation of webpage structure and style. Speaking of the font category, similar to the fragment, there is still the property of separation of structure and style. Font attributes mainly involve the text size and appearance. Text properties mainly involve the processing of fonts, such as the Row Height and letter spacing.

The font set can be divided into two types: linefeed and linefeed. The main difference is that the character stroke ends. The sans-serif model is more suitable for web design.

Font-variant converts all letters into small uppercase letters. Other font attributes such as font-weight, font-size, and font-style font-family can be seen literally.

In text attributes, you need to understand the concept that css places a box around the text in the element. This box is called a text box. Text-indent is used to set the relative position of a text box relative to the contained element. This attribute is commonly used for first line indent. In addition, the text-indent attribute has an inherited value. If the text-indent value is set in the div, all paragraphs inherit the text-indent value, the Section inheritance indent value is calculated based on the parent element.

Letter-sapacing is used to adjust the distance between letters, and word-spacing is used to adjust the distance between words.

Text-align sets the horizontal alignment with the included element. Therefore, you must set this attribute on the included element.

In addition to setting the line spacing, line-height also provides the technique of centering a single line of text. The method is to set the Row Height to contain the element height to achieve vertical center effect.

Text-transform changes the Chinese text case format of elements.

Vertical-align can move the text up or down relative to the baseline. For example, a chemical expression or equation can be constructed.

Box Model

Positioning elements are divided into three parts: Positioning Control for each element in the box model description mark. The position attribute defines the relationship between these elements on the page. The display attribute defines whether the elements are stacked, side by side, and displayed on the page.

The box model involves three concepts: border, margin (margin), and padding (padding ).

The border has three attributes: width, style, and color. The border will increase the element size, so the border will change the layout.

Padding refers to the distance between the content of the box and the border of the box. The padding is inside the box. You can use the padding to extend the background color.

The margin (margin) specifies the distance between the box and adjacent elements. Most block-level elements have default margins, so Initialization is required.

*{margin：0;padding:0;}

The outer margin of the box has the fold margin problem, that is, when the upper and lower margins meet, they fold each other until an element's outer margin is exposed to another element, in general, the final margin effect is a large margin, rather than accumulation.

The box size. Based on the definitions of the above padding and margin, we know that the padding and border belong to the box size, while the margin does not, usually, set the width of the element to the width of the box content, rather than the width of the box itself. If you set the padding and border, the width of the box will increase. Pay special attention to this.

Float and clear

Floating principle: as long as the elements with the width are set and the page has enough space, the corresponding elements will be arranged as columns.

In many la S, we do not want any element to move up next to the floating element, that is, keep it below the floating element. That is, clear the floating.

.clearfix:atfer{content:".";display:block;visibility:hidden;height:0;clear:both;}.clearfix{display:inline-block}.clearfix{display:block}

Position attribute

As described above, the position attribute defines the positional relationship between elements on the page. Here we need to understand a key concept: positioning the environment. When top, left, right, and bottom are used to move an element, we will move it with reference to another element. The positioning environment is used as a reference element. That is, the element relative to which the object is moved.

During development, you often set the position attribute of the element's ancestor to relative to modify the positioning environment.

As a static element, relative positioning remains unchanged in space and other elements, that is, it only moves visually and is not separated from the document stream. The position of this element still exists in the document.

The difference between absolute positioning and relative positioning is that it completely removes elements from the document stream. The content of other document streams follows the document stream with the settings of the abosolute.

Fixed positioning is also separated from the document stream, but the positioning environment is the viewport, that is, the browser displays the webpage window.

Display Properties

The difference between display: none and visiblity: hidden is that the former occupies the original space and the latter occupies the space, but is not displayed.

Display: block and inline can modify the display attribute of default Elements Based on Semantic requirements.

Floating Layout

For elements with key width, a good layout method is to nest an internal div layer. Do not directly add visual styles for the divs that constitute the primary partition. To add visual styles, add them to their internal Divs. This is also a further subdivision of the structure and style fragment.

#main_wrapper {width:840px; /* widths of columns will change proportionately as this width is changed */margin-left:auto;  /* centers layout in browser */margin-right:auto; /* centers layout in browser */text-align:left; /* resets the centering hack for IE6 on the body tag */}#header {}#nav {width:22%; /* this width + content width must total 100% */float:left; /* floats on nav and content divs make them sit side by side */}#content {float:left; /* floats on nav and content divs make them sit side by side */width:78%; /* this width + nav width must total 100% */top:0px;}#footer {clear:both; /* makes the footer sit below whichever column is longest */}

The overflow attribute is used to control how elements process the content they contain. The overflow: Den den rule keeps the width of narrow columns unchanged in the preceding cases. This attribute was used to scale down the image processing ratio of ledi.

Two-column streaming Layout

Set the min-width and max-width attributes for the two-column streaming layout so that the layout does not get out of control. At the same time, set the width for the navigation bar to dynamically change the width of the content bar.

Three-Column Layout

Three columns are fixed in width layout. You can set the float and the percentage width of each column.

The three-column streaming layout document streams and key styles are as follows:

#threecolwrap {  float:left;  width:100%;  background:url(../../../chapter_5/code/images/3_col_faux_art_right.gif) repeat-y right;  }#twocolwrap { float:left;width:100%;display:inline; /* stops IE doubling  margin on float*/<span style="color:#ff0000;">margin-right:-170px; /* CWS - neg margin move */</span>background: url(../../../chapter_5/code/images/3_col_faux_art_left.gif) repeat-y left;  } #nav { float:left; <span style="color:#ff0000;">width:150px;</span>display:inline; /* stops IE doubling  margin on float*/ } #content { width:auto; <span style="color:#ff0000;">margin-left:150px; margin-right:170px;</span> }#promo { float:left; <span style="color:#ff0000;">width:170px;</span> }

Set # nav and # promo width, and set the content margin to implement the three-column flow layout.

Design interface components

Table: A table involves tag semantics. The goal of adding a style is to add as few visual factors as possible to ensure your understanding of the data. Table labels use border-collapse to reduce the double border of two default cells to a single border.

Form: forms must be placed in parallel. In terms of semantic relationships, you can use Unordered Lists to perform operations such as alignment.

List: The list varies with the browser. To make up for the difference, set the outer and inner margins of the List to 0 and then add a new style.

When the padding and border of the row element are applied, the inclusion element is not affected. The solution is to set the display attribute.

Recommendations for books learning CSS

The following may not be the best, but you can look at it:

Proficient in CSS
CSS website layout recording
CSS books for reading
Artist myth (CSS website layout and beautification)
Distinctive: DIV + CSS webpage layout and beautification

Who has the document "css book for everyone "?

Wojia