Common CSS and css for website beautification

Common CSS and css for website beautification

With the rapid development of the Internet era, users not only meet the functional requirements of the software system, but also have increasingly higher requirements on the page display effect and Interaction Mode of the software system. In particular, platform pages of the display nature have higher requirements for interface beautification. In one sentence, Html is the structure, CSS is the decoration, and JS is the glue (Dynamic CSS setting ). Today, we will introduce some common CSS styles and processing methods for website beautification.

1 Basic tutorial 1.1 Basic syntax

Selector

The selector is usually an element that needs to change the style;

1) element selector: for example, html {color: red;} Description: Set html to red.

2) class selector: for example:. ul. li {color: red;} Description: Set ul in li label to red

3) ID selector: for example: # member {font-weight: bold;} Description: bold the font of the label attribute whose id is member

4) attribute selector: for example, a [href] [title] {color: red;} Description: Set the text with both href and title as red.

One or more declarations

Each statement consists of an attribute and a value;

Example: h1 {color: red; font-size: 14px ;};

Note: h1 is the selector, color and font-size are attributes, and red and 14px are values. In this example, the text color in h1 is defined as red, set the font size to 14 pixels.

1.2 Description

Anchor (Anchor) pseudo class

Example: a: link {color: # FF0000;} Description: Set the unaccessed link to red.

Example: a: visited {color: #00FF00;} Description: The accessed link is set to green.

For example: a: hover {color: # FF00FF;} NOTE: When the mouse is over the link, set it to purple

Example: a: active {color: # 0000FF;} Description: The selected link is set to blue.

Note: a: hover must be placed after a: link and a: visited, which is valid. a: active must be placed after a: hover; the names of pseudo classes are case-insensitive.

First-child pseudo-class

The first-child pseudo-class is used to select the first child element of an element.

For example: p: first-child Description: The selector matches

For example, p> I: first-child: select all matched

The first element of the element:

For example, p: first-child I Description: The selector matches all

All elements in the element

1.3 Level

Priority

1) Same weight

Inline style sheet (inside label)> embedded style sheet (in current file)> external style sheet (in external file)

2) different weights

The label has a weight of 1, the class selector has a weight of 10, and the ID selector has a weight of up to 100.

For example:

 

Note: in some special cases, you can use importal to set styles on the website, for example:

P {color: red! Important;} important is a style with the highest priority.

Strong hierarchy

Div> ul> li> p use ">" to specify the p tag under the ul under the div. Only when the page hierarchy meets the current hierarchy requirements will the style be applied, it can be understood as equals in java

Weak level

Div ul li p is a space that specifies the ul, li, and p tags contained in the div will all reference this style. it is not mandatory to define the format in order, it can be understood as a fuzzy query in java

2. Style Extension 2.1 Background Filling

Common attributes:

Example: background-image Description: Add a background image

Example: background-image: url('paper.gif ');

 

Demo effect:

 

Example: background-size description: Specifies the size of the background image.

Example: background-size: 80px 60px;

 

 

Demo effect:

 

Example: background-origin Description: The attribute specifies the location and region of the background image.

 

Note: Background images can be placed in the content-box, padding-box, and border-box areas.

Example: background-origin: content-box;

 

 

 

Demo effect:

2.2 Button Style

Button color

Sample Code:

 

Demo effect:

Rounded corner button

Sample Code:

Demo effect:

 

Hover

Note: The transition-duration Attribute can set the "hover" effect speed.

Sample Code:

Demo effect:

Button shadow

Sample Code:

Demo effect:

2.3 Rounded corner Processing

Attribute description

 

Sample Code:

Demo effect:

2.4 Common styles

 

3. Page Layout 3.1 Table Layout

Advantages

1) ease of use: Suitable for beginners.

2) good readability: statements are easy to write. The main code is <TABLE> </TABLE>, <TR> </TR>, and <TD> </TD>.

3) fast development: it is much faster to drag a TABLE directly into the tool DW than to write a DIV.

Disadvantages:

1) code redundancy: </TABLE> This is the most basic element of a TABLE (this is a TABLE with one row and one column ).

For writing, there are many codes.

2) webpage opening speed is slow: too much background Code leads to slow website opening speed.

3.2 Div + CSS layout

Advantages:

1) the code is concise:

The code is much simpler than that of TABLE.

2) fast: For the visual effect of the same page, the size of the page reconstructed by CSS + DIV is much smaller than that of the page file encoded by TABLE. The former is generally only 1/2 of the size of the latter.

3) Flexible layout: DIV + CSS makes the page layout easy to operate and flexible. During the revision, you only need to change the CSS style to re-layout the page without modifying the program, thus reducing the cost of the website revision. Rich page effects, including visual effects and user experience, such as drag.

Disadvantages:

1) Poor Readability: users cannot view the editing effect immediately during editing. You need to preview the edited effect to see it.

2) complicated operations: Compared with beginners or people who are not familiar with the code, operations are very troublesome.

3.3 Div + Table layout

For new front-end users who want to make the page layout neat, they usually use the table for layout, but the CSS style is not as flexible as the div layout, therefore, we can flexibly set styles by using Div + Table for page layout, and avoid the tedious layout control such as page neat and line-feed alignment with CSS.

4. Dynamic Style

The display on the existing website is limited to the static control style display of CSS. More is the dynamic control page display style of CSS and JS, the following is an example to briefly describe the subtlety of CSS and JS combination.

CSS code:

 

JS Code:

 

HTML code:

 

Demo effect:

Click the button to add CSS

5 Summary

As a software project developer, I have always paid attention to the functionality of the software but not the display of results. However, for software users, the first contact is the interface, in particular, for end users, the interactive interface is the first concept. As a preliminary introduction to front-end CSS and JS style control display, I will share this article with you, if you have more discussions, please join the official QQ group of shutong changlian (299719843). You can also search Baidu for shutong changlian for more information.