Study Notes on CSS website layout recording (6)

Chapter 6 CSS advanced applications and skills

6.1 id and class

6.1.1 what is id

Id is an attribute of the XHTML element used to identify the object name. Both class and id are common attributes supported by XHTML and are also its core attributes. The main function of class is to set the style of the object. In addition to defining the style, the id can also be a special identifier for service website interaction. For each object with a defined id name, its id name can only appear once on each page.

6.1.2 how to use id

When JavaScript scripts are not used, but XHTML code and CSS style applications are used, the id attribute should be selectively used to identify the elements. The following principles should be met for specific use.

• Style only once: if a piece of style code can only be used once in the page, you can use id for identification.
• Used to identify the area of the page: id is used to identify a area of the page, which facilitates the readability of the XHTML structure.

6.1.3 what is a class?

The literal translation of class is class and type. Class is another attribute relative to id. Id is the identifier of a single element, while class is the identifier of a class of elements. Unlike id, each class name on the same page can be reused.

6.1.4 where to use class

• The same page appears multiple times
• Common and frequently used elements

6.1.5 use multiple classes at the same time

XHTML allows you to use more than one class name in the class attribute settings of tags and separate multiple class style names with spaces.

6.2 div and span

Many people may confuse the real use of div elements and span elements, so how to use them first comes to W3C's official definition of them:

• Div: generic language/style container.
• Span: generic language/style container.

In W3C's brief description of div and span, you can see the same description-the container used to define the style. Although W3C describes the same usage in div and span, It is very accurate. In fact, the usage of div and span is quite different.

In the case of the same CSS style, a line break occurs between Divs, and a span is the relationship between the left and right sides of the same row. This is the difference between them. The reason for the difference is that the default display mode is different. You can use the display attribute to modify the display mode of the element.

Summary:The default display mode of the div object is display: block and block element. The default display mode of the span object is display: inline; inline element.

6.3 CSS selection character name

6.3.1 case sensitive

XHTML is not case sensitive. CSS is case-insensitive for object selection characters (such as body, td, and div), but CSS is case-sensitive for id and class selection characters.

6.3.2 valid characters and combinations

In CSS and XHTML, the class and id must start with an upper or lower-case letter. Then, you can use any letter, number, connection line, or underline.

6.3.3 naming recommendations

• Use a semantic name
• Use a combination of upper and lower case names
• Use underlines and connection lines for naming
• Customize naming rules based on website requirements

Although CSS can achieve separation of performance and content, it also raises another new problem-the growing size of CSS files. In this case, the website has two fatal problems:

• Slow initial manned website
• Difficult Maintenance

Of course, CSS designers have come up with this point and provided import commands to import style sheets from other places, which facilitates the post-Maintenance of the website.

6.4.1 import structure

@ Import command is a practical Command provided by CSS. The main function is to import a style sheet file according to the path and define the device type of the style sheet. In this way, you can import other style sheets to the current style sheet so that the style sheet file does not have to be written in the same file. Usage: @ import url ("xxx.css ");

In addition, the @ import command can also create a device type for the imported style sheet to specify the purpose of the current style sheet. For example: @ import url ("xxx.css") print;

6.4.2 Structure Optimization

For style design of large websites, you can use the @ import command to separate different types of styles into independent files, in this way, the structure of CSS code is optimized. The following describes several common structure modes and usage methods.

• CSS Structure Design Based on Style Features
• CSS Structure Design Based on Functions
• CSS import and Combination Based on page requirements

6.5 use CSS abbreviations

CSS abbreviation refers to the compilation of multiple CSS attributes in one row. This method can reduce a lot of code and make the code easy to read and understand.

6.5.1 font abbreviations

A font abbreviation is an abbreviation of a font style. It contains attributes such as the font size and font size. The usage is as follows:

　　Font: font-style | font-variant | font-weight | font-size | line-height | font-family

For the style abbreviations of fonts, you only need to use font as the attribute name, followed by the values of each attribute, each attribute value is separated by a space.

6.5.2 abbreviation of margin and padding margin

By default, the abbreviation of margin and padding requires four parameters, which are top, right, bottom, and left in order. The following is an example: (Here we use margin as an example. The padding setting method is the same as that of margin)

• A separate parameter: p {margin: 20px;} indicates that the margin around the p object is 20px.
• The following two parameters are used: p {margin: 20px 10px;}, indicating that the top and bottom margins are 20px and the left and right margins are 10px.
• Use three parameters: p {margin: 20px 10px 100px;} to indicate that the top margin is 20px, the left margin is 10px, and the bottom margin is 100px.
• Use four parameters: p {margin: 20px 10px 10px 20px;} to indicate that the top margin is 20px, the right margin is 10px, the bottom margin is 10px, and the left margin is 20px.

The settings of margin/padding are completely set in clockwise direction.

6.5.3 abbreviation of border

The border object contains different widths, colors, and styles of the four edges. Therefore, not only can the entire object be abbreviated as border, but also a single edge can be abbreviated. The usage is as follows:

　　Border: border-width | border-style | color

6.5.4 abbreviation of list

The abbreviation of list is for list-style-type, list-style-position, and other list attributes used for ul. The usage is as follows:

　　List-style: list-style-type | list-style-position | list-style-image

6.5.5 abbreviation OF background

The abbreviation of background is used to control the background of an object. The usage is as follows:

　　Background: background-color | background-image | background-repeat | background-attachment | background-position

6.5.6 abbreviation of color

CSS stands for the color of objects mainly for hexadecimal colors. Color abbreviations can be used when numbers A and B, C and D, and E and F are the same. For example, # FFFFFF can be abbreviated as # FFF, and # 2255BB can be abbreviated as @ 25B.

6.6 CSS code optimization

Code optimization is one of the important principles of software development. It is very important for CSS style layout design.

6.6.1 increase code reuse rate

Sometimes, although the same attribute occurs in multiple regions at the same time, the CSS cannot be generalized because each region has different purposes, make sure to make reasonable analysis and configuration based on the structure of the current page and the expectation of future expansion, so as to simplify CSS.

6.6.2 simplified style Overwrite

If CSS applies multiple style codes to an element, the latter code replaces the previous code. With this feature, code can be reused by overwriting.