The basic knowledge of the css,xhtml that is probably understood

Source: Internet
Author: User

First, xhtml CSS Basic Knowledge

    1. Document type
    2. Language coding
    3. HTML tags
    4. CSS Styles
    5. CSS Precedence
    6. CSS Box Model composition

1 ) Document Type

When we use Dreamweaver to create a new HTML-formatted document, we look at the source code, and we find the following sentence at the top of the code:

This statement indicates that this document is a transition type, as well as a framework and a strict type, the transition type is generally used, because the browser's parsing of XHTML is more lenient, allowing the use of tags in HTML4.01, but must conform to XHTML syntax. Many friends in the production of the page, often like to delete this sentence, here is recommended that you must keep this sentence, delete it may cause some style sheet failure or other unexpected problems.

2 ) language encoding

Next we will find this sentence:

It indicates the language encoding of the document. As we usually say in Chinese and English. The gb2312 here tells the browser that this document is encoded in Simplified Chinese, and that a commonly used encoding is UTF-8 encoding, which is an internationally-accepted encoding. Regardless of which encoding we use, one thing is that the CSS stylesheets and other files that are included must also be encoded in this document, or garbled.

3 ) HTML label

HTML tags must end in the page. Paired labels End with a "/tag name", and some single tags end up at the end of themselves, which is the specification for XHTML code writing.

Paired Tags:

{...}
{...}

{...}


{...}

{...}


......

A single label:




.......

It is also important to note that by XHTML specification, labels must be lowercase.

4 ) CSS style

There are four types of CSS styles loaded:

    • External styles
    • Internal style
    • inline style
    • Import Style

This form is to write the CSS in a separate CSS file, and then link in the source code. The advantage is that not only this page can be called, other pages can also be called, is the most common form.

This form is an internal style sheet, which is written in the head tag of the source code at the end. This style sheet is valid only for this page. cannot be used for other pages.

Internal style

This is the inline style marked with style in the tag, and the inline style is only valid for the elements within the tag, because it is not separated from the content, so it is not recommended.

@importurl ("/css/global.css");

A link style is an external style sheet that is linked with a @import URL tag, which is typically used inside another style sheet. If LAYOUT.CSS is the style used for the home page, then we can put the common styles needed for the whole world into a global.css file, and then link the global style in the form of @import URL ("/css/global.css") in Layout.css. This makes the code good reusability.

5 ) CSS Priority Level

    • ID priority higher than class
    • The following style overrides the previous
    • The specified higher than the inheritance
    • inline style above internal or external style
    • Summary: the single (ID) is higher than the common (class), has the specified with the specified, without specifying the inheritance from its nearest

6 ) CSS Box Model Composition

A different point of the CSS box model and table layout. Learning Web standards, the first thing to understand is the box model, this is the core of Div typesetting. The traditional table layout is to locate the content of the typesetting page by nesting tables and tables in different sizes, and then using CSS to format the pages by nesting the boxes and boxes of different sizes defined by CSS. The layout of the page code concise, performance and content separation, maintenance is convenient, can be compatible with more browsers, such as PDA devices can also be viewed normally.

So why is it called a box? Let's first talk about the property names we often hear in web design: content, padding (padding), Borders (border), boundaries (margin), CSS box patterns.

We can think of it as a box above the opening of the reality, and then look down from the top, the border is equivalent to the thickness of the box, the content of the box with respect to the space of the object, and fill it, the equivalent of shock and in the box filled with foam, the border is equivalent to the box around to set aside a certain amount of space Is it so easy to understand the box model.

So the width of the whole box model in the page is composed of left Border + left box + Left padding + content + right padding + right border + right boundary, and width in CSS style is only the width of the content section, which is a lot of friends easy to confuse the place

Here the boundary we also call: margin, outer patch; padding is also called: Inner margin, inner patch.

The basic knowledge of the css,xhtml that is probably understood

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: 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.