Html basics (3) -- css style sheets and html basic css style sheets

Html basics (3) -- css style sheets and html basic css style sheets

 

 CSS(Cascading Style Sheet, Stacked style sheets ).HTMLWebpage.

/* Comment area */This is the comment syntax

I. Style Sheets

(1) classification of Style Sheets

1.Inline style sheet

Combined display with HTML, precise control, but poor reusability, more redundancy.

For example, <p> as an independent area embedded in a webpage, it must be written in the head label.

<Style type = "text/css">

P // The format takes effect on the p tag.

{

Style;

}

</Style>

3.External style sheet

Create a new CSS file to place the style sheet. To call a style sheet in an HTML file, right-click the style sheet in the HTML file, select CSS style sheet, and append the style sheet. Link connection is generally used.

Note: style labels are not required in css files.

Some labels have default margins. Generally, the style sheet code is removed first (other styles can be set), as shown below:

Note: The margin and spacing are removed first.

(2) Selector

1.Tag selector. Use the tag name as the selector.

2. classSelector. All are".".

Note: The class selector can be superimposed with the label selector to display different effects.

 

3. IDSelector. To"#".

Note: The ID selector can be superimposed with the tag selector to display different effects.

<Div id = "style name">

 

4.Compound Selector

(1) separated by commas (,), indicating the parallel operation.

 

(2) Use spaces to separate the child.

 

(3) filter ".".

Ii. style attributes

(1) Background and prospects

1.Background:

2.Foreground Font:

 

(2) border and border

Border(Table border, style, etc ),Margin(Outer table spacing ).Padding(Content and cell spacing ).

(3) List and square

Width,Height,(Top,Bottom,Left,Right) Is only useful in absolute coordinates.

 

Code display of the css style sheet:

Css file code:

1 @ charset "UTF-8"; 2/* CSS Document */3 */* All labels work, margins and spacing are set to 0px */4 {5 margin: 0px; 6 padding: 0px;} 7 p, span/* directly write a tag name, indicating that all p tags execute this style */8 {9 background-color: # F6C; 10 color: #0F0;} 11 p. sp12 {13 background-color: # FF0; 14 color: red; 15 font-size: 36px;} 16. main/*. start with, use class to reference this style sheet */17 {18 height: 50px; 19 width: 300px; 20 background-color: # 0FF; 21 font-size: 45px;} 22. main p/* indicates that if there is a p label in the label using class = main, execute this style */23 {24 width: 400px; 25 font-size: 36px ;} 26 # main/* starting with #, use the id selector to reference this style sheet */27 {28 height: 60px; 29 width: 500px; 30 background-color: # 60C; 31 font-size: 36px ;}View Code

Html file code:

1 <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 Running Effect display: