The use of CSS in detail

 Cssthe use of

CSS can reduce our workload by simply changing the CSS file and changing the overall form of the Web page, so she is a required course for every web designer .

Introduction to CSS

(1) CSS is used for layout and beautification of Web pages. (Color, font)

(2) CSS is the abbreviation of cascading style sheets, that is, cascading style sheets

(3) The CSS language is a markup language, so it does not need to be compiled and can be executed directly by the browser (which is a browser-interpreted language).

(4) The CSS file is a text file that contains some CSS markup that the CSS file must use. css as the filename suffix.

(5) CSS is case insensitive, CSS is the same as CSS.

(6) CSS is generated and maintained by the CSS Working Group.

Why cascading Style Sheets (CSS) is required

The style sheet can separate the content from the style, facilitate the team development,

Take a look at two Web pages that look different but have the same style:

CSS Composition

(1) Syntax:

CSS definitions are made up of: selectors, attributes, and attribute values, respectively.
Format: Selector{property:value}

(2) Unit:

relative length units:

px Pixels (Pixel). div{font-size:12px;}

The font size of the EM relative to the text within the current object.

Div{font-size:1.2em;}

% percent div{font-size:80%;}

Absolute length unit:

PT Point.

CM cm (centimeter).

mm mm (millimeter).

(3) Notes

The contents of the comment are ignored by the browser and can be used to annotate and debug the style sheet.

The CSS comment format is as follows:/* CSS Comments */

(4) Color units

#rrggbb (e.g., #ffcc00)

#rgb (e.g., #fc0)

RGB (X,X,X) where x is an integer value of 0-255, such as RGB (255,204,0)

RGB (x%,x%,x%) where x is an integer value of 0-100, such as RGB (100%,80%,0)

Place CSS in HTML mode

We use the following three ways to play the image displayed in the Web page

(1) Inline type

With inline is to hit these words, is 40px, blue font for:

(2) embedded type

A few words in the inline type, 40px, blue font:

......

......

(3) external link type

In the HTML document is the

In the CSS document is the

div+css The layout of the page

One. Box model

to help understand the need to understand the box model, each HTML element can be thought of as a box that contains a box with width and height (height) and a padding (padding) between the contents of the box and the box's border. The box itself has a border (border), and there is a border (margin) between the box border and the other boxes. as follows

two . Floating Settings

Although you can use absolute positioning to achieve page layout, it is not the preferred way to layout because the location of other chunks does not change as you adjust a block box. Instead, use the floating block box to move left or right until its outer edge touches the border that contains its chunk or the border of another floating box. And because the float box is not in the normal flow of the document (the original document flow), the block box in the normal flow of the document behaves as if the floating box does not exist. Floating settings

three . Line boxes and cleanup

When you make a page layout, you often need to set up multiple block boxes and arrange them in a row. The most common way to do this is to use the Float property, and then move the Block box to the left or right by moving it with the back or down value. However, when the total width of the block box is less than 100% of the box, it leaves a certain width in the row box, and one of the following block boxes exactly satisfies the width, which is likely to be lifted upward, and the block boxes on the previous line are arranged in the same row. And this is not the result we want, so you can use the clear property to solve the problem, the value of which can be left, right, both, or none, which indicates which sides of the box should not be next to the floating box. The example diagram is as follows

four . floating frame basic style

Single float frame

Double float Frame

Multi-Float frame

Comprehensive Practice Examples

Make a comprehensive example of a simple CSS layout

The code in the HTML text is

The code in the CSS is

This essay is here and will continue to be written next week. If you have mastered HTML and CSS, the Web page layout can basically be done.

Thank you for reading.

The use of CSS in detail