'CSS Website Layout Record' Study Notes (6)_html/css_WEB-ITnose

Chapter 6 Advanced CSS Applications and Techniques

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 public attributes supported by XHTML and are also its core attributes. The main function of class is to set the style of objects, and id can not only define the style, but also become a special identifier for the interactive behavior of the service website. For each object with an id name defined, its id name can appear only once on each page.

6.1.2 How to use id

When you do not consider using JavaScript scripts, but XHTML code and CSS style applications, you should use the id attribute selectively To identify elements, the following principles should be followed in specific use.

Style is only used once: If there is a style code that can only be used once in the page, it can be identified by id.

Used to identify areas of the page: Using id to identify a certain area on the page helps the readability of the XHTML structure.

6.1.3 What is class

Class is literally translated as class and type. Class is another attribute relative to id. id is the identification of an individual element, while class is the identification of a type of element. In contrast to ids, each class name is allowed to be reused in the same page.

6.1.4 Where to use class

Appear multiple times on the same page

Common and frequently used elements

6.1.5 Using multiple classes at the same time

XHTML allows you to use more than one class name at the same time in the class attribute setting of the tag, and use spaces to separate multiple class style names.

6.2 div and span

Many people tend to confuse the real uses of div elements and span elements. So how to use them? Let’s first have a look at W3C on them. The official definition:

div: generic language/style container.

span: generic language/style container.

In the W3C’s brief description of div and span, you can See the same description - Container for defining styles. Although W3C explains the same usage in the description of div and span, it is very accurate. In fact, there are still big differences in the usage of div and span.

In the case of the same CSS style, line breaks appear between divs, and spans are in a left-to-right relationship. This is the usage difference between them. The reason for the difference lies in the difference in the default display mode. You can modify the display mode of the element through the display attribute.

Summary: The default display mode of div objects is display: block; block elements. The default display mode of span objects is display: inline; inline elements.

6.3 CSS selector naming

6.3.1 Case sensitivity

XHTML is not case sensitive sensitive. CSS is also case-insensitive for object selectors (such as body, td, div), but CSS is case-sensitive for names of id and class selectors.

6.3.2 Legal characters and combinations

In CSS and XHTML, class and id must start with an uppercase or lowercase letter, and then any letters and numbers can be used , connecting line or underline.

6.3.3 Naming suggestions

Use semantic naming

Use a combination of uppercase and lowercase letters

Use underscores and hyphens when naming

Customize the naming rules according to the needs of the website

6.4 CSS file structure design and optimization

Although CSS can achieve the separation of performance and content, it also causes Another new problem arises - CSS files are getting larger and larger. When this happens, it will directly lead to two fatal problems for the website:

The website is slow for the first time

Maintenance is difficult

Of course, the designers of CSS have already thought of this. One point, an import command is provided so that style sheets can be imported from other places, which facilitates the later maintenance of the website.

6.4.1 Import structure

The @import import command is a practical command provided by CSS. Its main function is to import a style sheet file based on the path and be able to specify the style. The device type that the table serves. In this way, other style sheets can be imported into the current style sheet, so that the style sheet files do not have to be written in the same file. The usage method is: @import url("xxx.css");

In addition, the @import command can also specify a device type for the imported style sheet and indicate what the current style sheet is used for. . For example: @import url("xxx.css") print;

6.4.2 Structural optimization

For the style design of large websites, you can use @import The separation technology of commands allows different types of styles to be written in separate files, thus achieving structural optimization at the CSS code level. Several commonly used structural patterns and how to use them are discussed below.

Design CSS structure according to style characteristics

Design CSS structure according to function

Conduct CSS import and combination according to page needs

6.5 Use CSS abbreviations

The CSS abbreviation refers to a writing method that combines multiple CSS properties into one line. This method can reduce a large amount of code and make the code easier to read and understand.

6.5.1 Font abbreviation

Font abbreviation is an abbreviation for font style, including font, font size and other attributes. The usage method is as follows:

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

For the style abbreviation of the font, just use font as the attribute Name, followed by the value of each attribute, separated by spaces.

6.5.2 Abbreviations of margin and padding

By default, the abbreviations of margin and padding need to provide 4 parameters, in order, they are top, right, Down, left. Here is an example: (Here we take margin as an example, the setting method of padding is exactly the same as margin)

Use one parameter alone: ​​p {margin: 20px; } means that the outer margins around the p object are all 20px

Use two parameters: p { margin: 20px 10px; } means the top and bottom margins are 20px, and the left and right margins are 10px

Use three parameters: p { margin: 20px 10px 100px; } Indicates that the top margin is 20px, the left and right margins are 10px, and the bottom margin is 100px

uses four parameters: p { margin: 20px 10px 10px 20px; } indicates that the top margin is 20px, the right margin is 10px, and the bottom margin is 10px, and the left margin is 20px

Note: The margin/padding settings are completely clockwise.

6.5.3 border abbreviation

The border object contains four sides of different widths, different colors, and different styles. Therefore, not only can the border abbreviation be performed on the entire object, but also on individual edges. The usage is as follows:

　border: border-width | border-style | color

6.5.4 list list abbreviation

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

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

6.5.5 background Background abbreviation

Background abbreviation is used to abbreviate the background of an object to control its related properties. The usage is as follows:

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

6.5.6 color Color abbreviation

CSS’s color abbreviation for objects is mainly for hexadecimal colors. Color abbreviations can be used when A and B, C and D, E and F have the same number. For example, #FFFFFF can be abbreviated to #FFF, and #2255BB can be abbreviated to @25B.

6.6 CSS code optimization

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

6.6.1 Increase code reuse

Sometimes, although the same attribute appears in multiple areas at the same time, the purpose of use is different in each area. , so when simplifying CSS, we cannot generalize. We must conduct reasonable analysis and configuration based on the structure of the current page and expectations for future expansion, and ultimately achieve the purpose of simplifying CSS.

6.6.2 Use style overrides to simplify

If CSS applies multiple style codes to a certain element, the latter code often replaces the previous code. Using this feature, you can use coverage to reuse code.