Getting Started with CSS Basics D1

Module review

Introduction of 1.CSS

2.CSS Selector

3. Common text Styles

First, the introduction of CSS

Introduction: HTML can mark the page document in the format of paragraphs, headings, tables, links, etc., but with the development of the network, the user needs increased, especially the interactive situation needs, HTML more and more can not meet the needs of more document style, not solve this problem, need more powerful front-end design tools, that is CSS.

1.CSS concept

CSS is cascading style Sheets, translated as "cascading style sheets", built into the style sheet. Style refers to the page text size, color, image location and other formats, "cascade" means that when the HTML reference to a number of style files (CSS files), when the style file in the style of conflict, the browser will be processed according to the stacking order.

CSS can:

① more control over the layout of the page.

② makes up for the lack of HTML on the format of the Web page, play the role of typesetting and positioning.

③ can implement dynamic update of page format.

How to introduce 2.CSS

① Inline: In the label with the Style property settings < label name style= "Style 1: value; Style 2: Value" ></tag name >

② Embedded: Add <style> </style> in head tag

③ link to an external style sheet (common): Use the <link> tag link in the HTML file, and the <link> tag must be placed in the

④ Importing external style sheets: referencing an external style sheet file within the style area of the stylesheet, similar to linking to an external style sheet, is required to be declared using @import when importing. @import are usually placed in

Second, the CSS selector

1.id selector: Set the id attribute in the tag such as <p id= "P1" ></p>, in the introduction, you can edit the id attribute, for example: #id ={Property}. Each ID selector has only one name and cannot be duplicated, similar to the ID number, which can be set multiple times, but the ID value of each setting cannot be the same. The ID selector is the fastest-highest-priority selector.

2.class Selector: Set the Class property in the tag, for example: <p class= "P2" ></P> In the introduction, you can edit the class property, such as the. class{property Value}. Class can be repeated, representing a class, the priority is below the ID, the application is wide.

3. Element selector: Set tag properties directly in the introduction, such as p{property value}.

4. There are three ways of selecting between selectors:

1. Tie-in relations
Selector 1, selector 2{style 1: value; Style 2: Value}
2. Brotherly relations
Selector 1+ selector 2{style 1: value; Style 2: Value}
3. Parent-Child relationship
Selector 1 selector 2{style 1: value; Style 2: Value}

Iii. Common text Styles

1. Font Font:<font-style>: Specifies text font style <FONT-VARIANT>: Specifies whether the text is a small uppercase letter <font-weight>: Specifies the thickness of the text font < FONT-SIZE>: Specifies the text font size <LINE-HEIGHT>: Specifies the line height of the text font <font-family>: Specifies that the text uses a font or a font sequence

2. Text Text:<text-indent>: First line indent, <text-decroation>: Specify underline style,

3. Color: Specifies the color.

4. Background background:

Background-color	Set or retrieve the background color of an object
Background-image	Set or retrieve the background image of an object
Background-repeat	Sets or retrieves the background image of an object how to layout a fill
Background-attachment	Sets or retrieves whether the background image of an object is scrolled or fixed with the object's contents
Background-position	Set or retrieve the background image position of an object
Background-origin	Sets or retrieves the origin of the object's background image display
Background-clip	Retrieves or sets the area of an object that is cropped out of the background
Background-size	Retrieves or sets the size of the background image of an object
Multiple background	Retrieving or setting multiple background images for an object

5. Frame border:

<border-width: Sets or retrieves the object border width. < Border-style;: Sets or retrieves the object border style. < Border-color;: Sets or retrieves the object border color.

For example:

Getting Started with CSS Basics D1