Site Landscaping Common CSS

With the rapid development of the network era, users are not only satisfied with the functional requirements of the software system, but also the requirements of the page display effect and interactive mode of the software system are gradually improved. In particular, the display of the Platform page for the interface to beautify the effect of higher requirements, there is a good saying: HTML is the structure, CSS is decoration, JS is glue (dynamic set CSS). Today we will introduce some of the Web site to beautify the common CSS style and processing techniques.

1 Basic Tutorials 1.1 basic Syntax

Selector Selector

Selectors are usually the elements that need 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 on Li label to Red

3) ID Selector: For example: #member {font-weight:bold;} Description: Bold the font of the label attribute with ID member

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

One/More declarations

Each declaration consists of an attribute and a value;

For example: h1 {color:red; font-size:14px;} ；

Description: Where H1 is the selector, color and font-size are attributes, red and 14px are values; This example defines the text color in the H1 element as red, and the font size to 14 pixels.

1.2 Pseudo-class description

Anchor (anchor) pseudo-class

For example: a:link {color: #FF0000;} Description: Set the non-accessible link to red

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

For example: a:hover {color: #FF00FF;} Description: When the mouse across the link is set 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, and pseudo-class names are not case-sensitive.

First-child pseudo-Class

First-child pseudo-class to select the first child element of an element

For example: P:first-child description: The selector matches the first child element of the P element.

Example: p > I:first-child Description: Select all matching

The first element of an element:

For example: P:first-child I description: The selector matches all of the first child elements as elements of a

All elements in the element

1.3 hierarchy level

Priority level

1) Same weight value

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

2) different weight values

The weight of the label is 1, and the weight of the class selector is 10,id the maximum value of the selector is 100.

For example:

Note: In the Site Settings style there are some special cases that can be resolved with importal such as:

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

Strong level

div > UL >li > P Use ">" to specify the P tag under the UL under the Div under Li only if the page hierarchy relationship satisfies the current level requires that the style is applied and can be understood as equals in Java

Weak levels

Div ul Li P is a "space" specifies that the ul,li,p tag contained under the DIV will refer to the style, not the mandatory definition format, which can be understood as a fuzzy query in Java

2 Style Extensions 2.1 background fill

Common Properties:

Example: Background-image Description: Add a background picture

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

Demo Effect:

Example: Background-size Description: Specify the size of the background image

Example: background-size:80px 60px;

Demo Effect:

Example: Background-origin Description: property specifies the location area of the background image

Note: The background image 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:

Fillet button

Sample code:

Demo Effect:

Mouse hover

Note: The Transition-duration property can set the speed of the "hover" effect

Sample code:

Demo Effect:

Button Shadow

Sample code:

Demo Effect:

2.3 round corner processing

Property Description

Sample code:

Demo Effect:

2.4 Common styles

3 Page Layout 3.1 table layout

Advantages

1) Easy to use: more suitable for beginners.

2) Good readability: sentence writing is relatively simple, the main code is <TABLE></TABLE>, <TR></TR>, <TD></TD> and other statements.

3) Faster development: You can use the tool DW to drag directly into a table much faster than writing a Div.

Disadvantages:

1) Code Redundancy:</table> This is the most basic element that forms a table (this is a row-by-column table), relative

In writing, the code is numerous.

2) Web page Open slow: Too many background code, causing the website to open slowly.

3.2 div+css layout

Advantages:

1) Simple code:

The code is much leaner than table.

2) Faster: For the same page visual effect, the page size using Css+div refactoring is much smaller than the size of the table-encoded page file, the former generally only 1/2 of the latter.

3) Flexible layout: Div+css makes the layout of the page easy to operate flexibly, when the revision only changes the CSS style can realize the page re-layout, without changing the program, thereby reducing the cost of the site revision. Pages are rich in performance, including visual effects and user experience such as drag and pull.

Disadvantages:

1) Poor readability: the user can not immediately see the editing effect when editing, need to preview to see.

2) The operation is cumbersome: compared to beginners or to the code is not very familiar with people, the operation is very troublesome.

3.3 div+table layout

For the front-end novice to want to make the layout of the page is usually a table layout, but this control CSS style is not as flexible as the div layout, so we combine the two page layout with div+table for page composition so that can be flexibly set style, Also avoid the full use of CSS to control the page neatly line-wrap alignment and other layout control cumbersome.

4 Dynamic Styles

In the existing site display is limited to CSS static control style display, more CSS and JS combined with Dynamic control page display style, below we use an example to briefly explain the CSS and JS combination of the subtleties.

CSS Code:

JS Code:

HTML code:

Demo Effect:

When you click the button to add a CSS

Summary of 5 persons

The author as a software project developer has always been focused on the functionality of the software, do not pay attention to the effect of display, but for software users the first contact is the interface, especially for the end-user site, interactive interface is the first sense, The author as a preliminary contact with the front-end CSS and JS style control display of small white summary of this article to share with you, if there are more exchanges welcome to join a number of smooth joint official QQ Group (299719843) together to explore, also can Baidu find the number of smooth joint to learn more relevant information.

Site Landscaping Common CSS