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

Source: Internet
Author: User

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.





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


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" ""> 2 Running Effect display:

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.