lesson03_01 how CSS and CSS are set up _ Basic tutorial

Source: Internet
Author: User
3rd Speaking CSS
    • What is CSS
    • Several ways to set up CSS
    • Style Rule Selector
    • Comments and valid scopes for style rules
    • Style properties in detail

What is CSS and how CSS is set up



Author: loncer More Learning resources at: wwww.loncer.cn

What is CSS

CSS is: Cascading style sheets These English words of the abbreviation, Chinese is: Cascading style sheet. In addition to easily set the display location and format of page elements, it can also produce filters, image fades, The gradient effect of a Web page fade. In short, CSS is about the way Web pages are displayed with Word-like typography control.
For example, the following code:

A CSS style is set.

From the above: The Style property of an HTML element can specify a variety of style styles, each style of the name and its settings are separated by a colon, each style style is separated by semicolons. Various "style style names" are called "CSS Properties", and style-style "set value" is called " CSS property value. This is the way that you set the display of a page element to be a CSS.

How CSS is set up

    • Inline style sheet (inline style sheets)
The method of setting the Style property of the HTML square tag directly is called an inline style sheet.
For example:
When using inline style sheets, the HTML4.01 standard advises users on the Web pageAdd one between the labels Label
As follows:
There are two disadvantages to using this method:
1, if you want to set the same style style to all the paragraphs, you have to each

Label to repeat the settings.
2, a Web page can be exported on a variety of media or media, using the style set by the inline style sheet will be in all media output will work, but not for different media to specify a different style sheet.

    • Embedded style sheet (Embedded style sheets)



Media shows what media this style is displayed on
is written for browsers that don't support CSS. In The style rule definition statement between the two is placed in a separate external file, which is an external style sheet file with the extension of this. css. An external style sheet file can be used by the HTTP The label is attached to the HTML document.
Cases:
First build a test.css file with the following code:
p{
"font-size:20px; Color:bule; Font-family: Song body; Background-color:gray; Text-decoration:underline "
}
Write a file to use the style sheet, and set them in the same folder:



type and media are optional, rel and href are required
Using an external style sheet, a Web page creator can change the appearance of the entire network by changing a file. Most browsers save the external style sheet file in a buffer, speeding up the browsing speed of the site.
    • Input style sheet (imported sytle sheets)
You can use CSS @import to enter a CSS file into another CSS file, and the input CSS style rule definition statement becomes part of the input CSS style rule definition statement. You can also use @inport to enter a CSS file into the The label pair. The input CSS style rule definition statement becomes the The definition statement in the label pair.
Cases:
<style type= "text/css" media= "screen" ><br> <!--<br> @import URL (http// ..................); <br> @import url (/xxxx ...);...); <br> p{background:yellow;color:black}<br>--><br> </STYLE&G t;<br> Note: All @import parts should be placed in front
  • 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.