DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 英文css教程:Introduction CSS
英文css教程:Introduction CSS
編輯:CSS進階教程     

網頁制作WEB文章簡介:CSS actually means Cascading Style Sheets. Styles are used to define how HTML elements are displayed. They are usually stored in STYLE SHEETS and were first seen included in HTML 4.0, with the purpose of solving a problem that appeared. These are bas

Few people really know what CSS really is. That is why we need to discuss this in the following set of tutorials that we will hand out as fast as possible. We will cover basic, medium and advanced CSS in a set of CSS Tutorials that you will surely enjoy utilizing. Remember that you do need basic knowledge about HTML/XHTML in order to work with CSS. This is highly important and if you do not know HTML then you should first focus on that and then on learning from CSS Tutorials.

What is CSS?

CSS actually means Cascading Style Sheets. Styles are used to define how HTML elements are displayed. They are usually stored in STYLE SHEETS and were first seen included in HTML 4.0, with the purpose of solving a problem that appeared. These are basically external, in the sense that they are not actually included in your HTML coding. External Style Sheets are used in order to SAVE YOU WORK. CSS files are utilized to store them and you need to understand that we have the advantage of using multiple style definitions that will eventually cascade in just one.

Why did CSS appear?

As already mentioned, CSS was developed in order to solve a problem with HTML. Regular HTML tags have been built to define the actual content of one document. We were faced with simple HTML tags like <h1>, <table>, <p> etc. There was no need to use formatting tags because the actual document was taken care of by your browser. As time passed we were faced with browsers adding HTML attributes and tags. This complicated everything and eventually led to difficulty in creating web sites. The statement is extremely true when talking about sites that showed a separation between the actual presentation and the content. As a result of this problem STYLES were added to HTML 4.0 by W3C. Now we can clearly notice that all of the main web browsers out there support CSS.

Time Saved through CSS

Style sheets will save you time because they will define how some or all HTML elements are displayed. The most basic examples of HTML elements’ appearance that can be controlled stands in the color tag and font tag, which appeared in HTML 3.2. In most cases the web master/designer/admin will store all styles in .css files. These are basically the External Style Sheets mentioned above. The actual time saving comes from the fact that you will just need to edit on .css file instead of many of your web pages. For instance, let us think that you will want to change the color of the links on all of your html files. You would normally do this by doing modifications on every single file. Through the use of CSS you will just need to modify ONE FILE. You will be able to define one style for each web element that you want. Then the style can be applied to as many html files as needed. A global change is done in just one file.

What is the deal with Multiple Styles Cascading in One?

We did notice that there is a little problem with understanding this concept so we do need to add it to our CSS tutorial introduction. All style sheets will allow you to define info about style and the info can be given in various ways. You can specify styles in External Style Sheets, in an HTML element inside the web page or in one HTML element. There is a posibility to have more than one style defined for 1 HTML element. In this case we are faced with order cascading. Every style present will be read by the browser and cascade into one new styles sheet, which we can consider virtual. This is done by obeying a simple list of order defined by priority. The way you see an element will be given by the element with the highest priority. The order is:

1.Inline Style (defined inside the HTML element)
2.Internal Style Sheet (defined inside a tag)
3.External Style Sheet
4.Browser default settings.

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved