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