紫雨的能量运动

Law of Attraction ~ One Law And Rules Them All !

A Beginner’s Guide to CSS 四月 21, 2006

Filed under: Wordpress & Blog — PurpleRain @ 1:37 下午

A Beginner’s Guide to CSS

A Beginner’s Guide to Cascading Stylesheets

What are Stylesheets?

Originally published January, 2001

Stylesheets, or Cascading Stylesheets (CSS) are a form of html code that can be included in web pages to offer greater control over the visual appearance of the page. Stylesheets allow you to specify your visual appearance in one area, while keeping your content seperate in another area. This makes changing the visual appearance of a page much easier than by using older techniques such as invisible .gif files and the <font> tag. Additionally, multiple pages can all be directed to use the same external stylesheet. Any time this single file is changed, so does the visual style of any pages are linked to it. Having a consistent style or a “common look and feel” is important for creating a professional web site.

Why should you bother?

In addition to making it easier to change a page, stylesheets make it easier to create new pages as well. Instead of needing to place <font> tags around each element on the page, CSS can be used to set the visual style of any html tag on that page. In this manner, you could set all the <H2> or <p> tags to have a particular look. As you continue to add content to the page, the new sections of code automatically gain any style you have already specified.

This will also encourage you to start using “good” document structure, so that your titles will be inside <H1> or <H2> tags instead of <font face> and <b> tags. Properly structured documents make it easier for many search engines, as well as non-standard browsers to be able to properly display your pages. Screen readers, text only browsers, as well as many new wireless devices can not make use of advanced typography to change the size and fonts of a web page’s text. By keeping your layout inside a stylesheet, the regular HTML can be properly interpretted by these devices.

How much work is it to use Stylesheets?

It’s not much work to begin using a stylesheet that someone else has designed. If your page is properly structured and coded, you only need to add the following code to the <head> of your document:

<LINK REL=stylesheet HREF=”point_to_your_file/yourstylesheet.css” TYPE=”text/css”>

Once the .css file is in place on the web server, any files that link to it will share the same style.

How hard is it to create my own Stylesheets?

Linked CSS Files

CSS files are simply text files with the extension .css that you can easily create in any text editor. The code is relatively simple as seen here:

H1 { color: blue; font-family: arial }
P { font-family: verdana }

Note the brackets around the attributes for each html tag, and the semi-colons between the atributes.

Embedded CSS Files

You can also insert a stylesheet directly into the html of a web page. This is called an embedded stylesheet. The code above would be written inside the <head> of a web document like this:

<STYLE TYPE=”text/css”>
<!–
H1 { color: blue; font-family: arial }
P { font-family: verdana }
–>
</STYLE>

The Cascade

One of the reasons stylesheets are referred to as “cascading” is the manner in which multiple or conflicting styles are handled. If you specify different attributes for a tag in multiple linked files and/or the <head> of a document, the web page uses a “cascading” order to decide what the final visual style will be. This means that an embedded style takes priority over a linked style, but both will take effect if possible.

For example, if your linked style says your <H1> tag will be Arial and Red, and your embedded style says your <H1> tag will be Blue, then it will be displayed as being Arial and Blue.

This “cascading” also affects elements within a single page. In this way, if a word is both with <b> tags to make it bold, and <p> tags because it is in a body paragraph, then the attributes set in stylesheet for <b> would take priority over those for <p>. Try and remember that the tags “closest” to any given text will have priority in the cascade.

How much can Stylesheets do?

There are many different attributes that can be specified with CSS. These include the size, colour and font of the text, as well as margins, background colours or graphics, and even the attributes of tables, forms and images. There are many good books and websites that give specific details on what is possible and the proper syntax to use. To get started, try visiting:

W3C’s CSS2 Specification

WDVL: Cascading Style Sheets

A List Apart: Fear of Style Sheets

Technorati :

 

发表评论

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s