Basics of getting Started with CSS

Last Update:2016-07-08 Source: Internet

Author: User

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

Understanding CSS
Disadvantages of traditional HTML design page layouts
Features of CSS
CSS layout style

13.1 Understanding CSS

The English full name of the CSS is cascading style Sheets, Chinese can be translated into a threaded style, and the CSS2 specification was also approved and recommended in February 1998, so CSS is not designed for XHTML, CSS can also be used in other markup language to make typesetting samples, such as html,xml files can be applied to CSS, to beautify the design of the Web page, if you learn CSS, in the Html,xhtml,xml file can use.

13.2 Disadvantages of traditional HTML design page layouts

Using traditional HTML control tags to design a Web page is inherently impossible to compare with a typographic sample, because HTML is not entirely focused on the functionality of page layouts, which is especially true for XHTML, because XHTML intentionally abandons the markup or attributes of the page layout in the original HTML, as <font>,<center>,color,background,bgcolor and so on, so for the XHTML file, its layout and display function is weaker than the HTML file, So using XHTML to design a Web page requires a combination of CSS layout samples.

features of 13.3 css

Disadvantages of HTML typesetting:

Setup trouble, modify the trouble, the function is seriously insufficient.

Advantages of CSS style typography:

The Layout property function is complete, the typesetting file can exist independently, can share the typesetting file

Categories of CSS style typography:

Expert typesetting style, inline layout style, and linked typesetting

13.4 CSS Layout style

Inline layout style:

Format:< Tag Name style= "Property 1: Property value 1; Property 2: Property value 2" >...</tag name >

Example: <p style= "Font-size:20pt;color:red;text-align:center" > Typesetting style </p>

Typesetting special marking:<div> and <span>

Div the occupied position is a row, span Occupy how wide the content is, and how wide the space is.

The most obvious difference between the two is DIV is a block element, and SPAN is the inline element ( also translated inline elements ) .

Detailed:1. The so-called block element, is the element that starts to render in another line, the inline element does not need another line, test the following code you will have a more visual understanding:

test <SPAN> immediately preceding " test " display </SPAN><DIV> here will be another line showing </div>

2. Block elements and inline elements are also not immutable, by defining css display

Test <div style= "Display:inline" > Follow the previous " Test " Show </div><span style= "Display:block" > there will be another line here . </span>

Inline Typesetting Sample:

All style definitions in the inline layout must be in <style> </style> between, and <style> </style> must be in

And its function can be divided into three kinds,

Tag Definition type
class-Defined
ID Definition Type

Tag-defined format:

Tag name {

Attribute 1: Attribute value 1;

Attribute 2: Attribute value 2;

}

Tag name {

Attribute 1: Attribute value 2;

Attribute 2: Attribute value 2;

}

</style>

<body>

< tag name >...</tag name >

</body>

Class-defined format (multiple use):

. Define Name {

Attribute 1: Attribute value 1;

Attribute 2: Attribute value 2;

}

. Define name 1,. Define Name 2{

Attribute 1: Attribute value 1;

Attribute 2: Attribute value 2;

}

</style>

<body>

< tag name class= "Definition name" >...</tag name >

</body>

ID-defined format (unique use):

<style>

#定义名称 {

Attribute 1: Attribute value 1;

Attribute 2: Attribute value 2;

}

#定义名称1, #定义名称2 {

Attribute 1: Attribute value 1;

Attribute 2: Attribute value 2;

}

</style>

<body>

< tag name id= "Definition name" >...</tag name >

</body>

Priority of "inline" and "in-line" typographic definitions:

CSS rules, the smaller the scope, the higher the priority.

Arranged by small to large:

in-line
class and ID definition type
Tag Definition line

The priority of the ID is higher than the class class.

External layout style definition:

Stand-alone style layout:

Tag name {Attribute 1: Property value 1; Property 2: Property value 2;}

. definition name {Attribute 1: Property value 1; Property 2: Property value 2;}

Use between

Format:

Use import between

Format:

@import "Style.css"

</style>

Basics of getting Started with CSS

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

Basics of getting Started with CSS

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support