Html+css+div notes

Last Update:2015-07-16 Source: Internet

Author: User

Tags comment tag

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Html

key attributes of the <body> tag :

*bgcolor: Set the page background color, such as:bgcolor="#CCFFCC"

*background: Set the page background image, such as:background="Images/bg.gif"

*bgproperties= "fixed": causes the background picture to scroll without scrolling with the scroll bar

*text: Sets the text color of the body of the document, such as:text="#FF6666"

Segment markers:<p> paragraph text <p>

Body title: body title text

Body Title text

Horizontal divider Line:

Comment tag:<! -Comment Text --

Document Header information:

<title>: Setting the window caption

<META>: Set metadata information for the current page

Text Format:

<b>: Bold

<i>: Italic

<del>: Middle Line of text indicates delete

<ins>: text underline indicates fill content

<sub>: subscript

<sup>: superscript

<pre>: display As-is, keep spaces and line breaks

Font:

properties of the <font> tag:

Face: setting font type

Size: Set the font size

Color: Set the font color

List:

There are sequence tables:

<li> List entry </li>

</ol>

Unordered list:

<ul>

<li> List entry </li>

</ul>

Form:

User name:<input type="text" name= "username" ><br>

Password:<input type="password" name= "PSW" ><br>

</form>

The information in the action indicates where the form information will be submitted

The information in method indicates how the form information is uploaded to the server

Form formation:

Single-line text input box:<input type="text" name= "age" value= "0" >

Password entry box:<input type="password" name= "PSW" >

radio button:<input type="Radio" name= "Gender" value= "male" checked> male

<input type= "Radio" name= "Gender" value= "female" > female

Submit button:<input type="Submit" name= "Submit" value= "Submission" >

Css

Cascading Style Sheets

Inline style:given in the form of anattribute directly in an HTML tag, to set the actual effect of the information defined by the tag

Inline styles are only valid for the tag in which they are located

<p style= "font-size:16px;color:red" > first paragraph of text </p>

<p style= "Font-size:italic;font-size:20px;color: #bb22cc" > second paragraph of text </p>

</body>

Internal style sheet (Internal style Sheet)

Given in the header information element of the HTML page , you can set the actual effect of the information defined by multiple tags at the same time

The internal style sheet is only valid for the page where it resides

body{text-indent:21.0000pt; margin-bottom:0pt; margin-top:0pt; ">p.mystyle{font-size:20px;color:ble}}

P.mystyle{font-size:40px;color: #dd44aa; Text-align:center}

</style>

<body>

<p class= "Mystyle1" > first paragraph of text </p>

<p class= "Mystyle1" > second paragraph of text </p>

</body>

External style sheet (External style Sheet)

External style sheets save style settings to separate external files, and then reference them in an HTML page to use those styles

External style sheet is plain text file, suffix ". css"

External style sheets can be applied to multiple pages

M1.css as follows:

body{margin-top:0pt; ">p.mystyle{font-size:20px;color:ble}}

P.mystyle{font-size:40px;color: #dd44aa; Text-align:center}

Ex.html as follows:

<body>

<p class= "Mystyle1" > first paragraph of text </p>

<p class= "Mystyle1" > second paragraph of text </p>

</body>

Style precedence: inline style, inner style sheet, external style sheet, browser default style

CSS Basic Syntax :

CSS styles consist mainly of three parts: Selector, property name, attribute value

For example:

P{color: #1166cc}

H2{text-align:center; color:red}

p.mystyle1{font-size:20px; Color:blue}

DIV Tag

DIV(Division) is an HTML tag that represents an area of a piece of realistic HTML information

If you don't apply any CSS styling,thediv tag has the same effect as the segment Mark p

<div> First paragraph of text </div>

<div align= "center" > Second paragraph of text </div>

Use Css+div to implement structured page layouts

Html+css+div notes

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More