HTML+CSS Study Notes

Source: Internet
Author: User

I. The relationship between HTML and CSS

1.HTML is a hypertext format, it can contain ordinary text, pictures, video, Sound of the Web page, CSS is the HTML page text size, color, border size, color decoration, in general, the CSS is equivalent to the HTML of the cloak;

Ii. four ways to introduce CSS into HTML

1. In-line
Inline is a CSS style written in the style property of the labeled HTML tag. This method has the highest level effect.

<style= "color:red"> inline </div>

2. Embedded:

Embedded is a set of CSS styles that are written in the

<Head>    <style>. Item{Color:Green;       }    </style></Head><Body>        <Divclass= "Item">Embedded</Div></Body>

3. Link-type

Introduce an external file in the. css format into an HTML file, which we typically use in this way, with the following syntax:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <Linkhref= "Mystyle.css"rel= "stylesheet" /></Head><Body></Body></HTML>

4. Import type

Import an external file in a. css format into an HTML file

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <styletype= "Text/css">@import "Style.css"; </style></Head><Body></Body></HTML>

Third, CSS Selector

1. The element selector------format as follows (all DIV tags in the HTML file will be styled with the P tag style)

<styletype= "Text/css">Div{Color:Black;      }P{Color:Red;      }    </style>

2. The class selector-------format as follows:

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <styletype= "Text/css">. Item{Color:Black;      }. Item-one{Color:Green;      }    </style></Head><Body>     <Divclass= "Item">Class Selector</Div>     <Divclass= "Item-one">Class Selector</Div></Body></HTML>

The 3.id selector-------format as follows (ID selectors are unique in the same HTML file and cannot have two IDs of the same name)

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <styletype= "Text/css">#my-id{Color:Black;      }    </style></Head><Body>     <DivID= "My-id">ID Selector</Div></Body></HTML>

I can't do it anymore ...

HTML+CSS Study Notes

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: info-contact@alibabacloud.com 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.