The beginner of CSS Learning

Source: Internet
Author: User

first, basic learning 1, what is CSS

CSS is the abbreviation for cascading style Sheets (cascading style sheets),   is a markup language that does not need to be compiled and can be executed directly by the browser (which belongs to the browser-interpreted language).

CSS file can also be said to be a text file , it contains some CSS tags, css files must use CSS as the filename suffix , you can change the CSS file by simply changing the overall form of the page , Can reduce our workload, so she is a required course for every web designer.

2. Grammar 2.1 References

Linked (href

               HREF--Specifies the address URI of the resource (CSS file) to be loaded
               REL--Specify link type
               Type--Contains the types of content, generally using type= "Text/css"

Import Style (@import


Inline Type

<style type= "Text/css" >/*----------Text style start----------*//* Dream Capital White 12 pixel text */.dreamduwhite12px {color:white; font-size:12px; }/* Dream Capital Black 16 pixel text */.dreamdublack16px {color:black; font-size:16px;} /*----------Text style end----------*/</style>

               Note: The style tag should be inside the head tag.


inline Style

<p style= "font-size:10px; Color: #FFFFFF; " > Using CSS inline references to represent paragraphs .</p>
               The CSS style is directly scoped to the XHTML tag.

2.2 Selector

CSS Selectors are the names of CSS styles, and a CSS is used when a CSS style is represented in an XHTML document.

Tag Selector


category selector

ID selector


Example Summary

A summary of the use of ID and class selectors in CSS and XHTML

The wording in CSS

The wording in XHTML

Tag Selector

p{font-size:12px;}

<p>www.dreamdu.com</p>

ID Selector

#id_selector {font-size:12px;}

<p id= "Id_selector" > Dream Capital </p>

Class Selector

. class_selector{font-size:12px;}

<p class= "Class_selector" > Dream Capital </p>


3. Advantages

content and performance are separated , with CSS, the content of the Web page (XHMTL) and performance can be separated.

using CSS can reduce the amount of Web page code and increase the speed of page browsing


Second, summary

1. Guide Map

2. Analysis of difficulties 2.1 External references the difference between a linked link and an imported style (@import) in CSS

(1) different categories.

Link is an XHTML tag, and @import is completely a way to provide CSS.
In addition to the link tag can be loaded CSS, but also can do a lot of other things, such as the definition of RSS, the definition of REL connection properties, @import can only load CSS.
(2) difference in loading order.

When a page is loaded (when viewed by the browser), the CSS referenced by the link is loaded at the same time, and the CSS referenced by @import waits until the page has been downloaded and loaded. So sometimes browsing @import loading CSS page when there will be no style (that is flashing), the speed of the slow time is quite obvious.
(3) Differences in compatibility.

because @import is CSS2.1 proposed by the old browser does not support, @import only in IE5 above the ability to identify, and link tag does not have this problem.
(4) The difference when using the DOM to control styles.

when using JavaScript to control the DOM to change styles, you can only use the link tag, because @import is not controlled by the DOM.

2.2the difference between a table and a form

tables are used for layout, forms are used to transfer data , and forms can be included in the form, and forms can be included in the form, and tables are used to layout the data in the form.

If you have data available to a daemon, such as an input box, text box, and so on, these elements are usually placed in a form so that the data can be submitted.

3. Message of the small series CSS is primarily used to control the style of Web page display. Through the CSS can let the content of the HTML show a gorgeous effect, like to give a person make up, with the appropriate, the effect is good.

This article just some simple content of CSS to do a bit of finishing, as for the other powerful features also need us to continue to explore, in the later study gradually in-depth.


Related reading: CSS Primer Basics Classic Tutorial

CSS Tutorials


The beginner of CSS Learning

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.