The first day of proficient CSS Cascading Style Sheets on the 5th day

Creating a webpage with HTML is like drawing a picture with a paint brush. Only those who are obsessed with creating web pages may precisely implement the expected results. This is not the right tool and flexibility.

Anyone who has used HTML for more than a week knows that HTML is a very good web page creation tool. So sometimes we have to make a very large GIF image to get the desired font and layout. Similarly, sometimes you have to use various table labels and hidden space GIF images to make the page layout as expected.

It is indeed ridiculous. Our code is so complicated that we are using more and more GIF images, and our pages become wider than the English Channel. How can the limited bandwidth of the Internet pass through such wide information? This design is not the best form of web design.

However, at the end of 1996, a technology called stylesheets was born quietly. The full name should be the Cascading Stylesheets-CSS. This HTML cousin assured the world:

You can control the layout, Font, color, background, and other text effects more accurately.

• You can modify only one file to change the appearance and format of a webpage with an indefinite number of pages.
• Compatibility between all browsers and platforms.
• Less encoding, fewer pages, and faster download speed.

In addition to not fully supporting the majority of our commonly used schedulers, CSS has made remarkable achievements in implementing other commitments. CSS is changing the way we create a style sheet. It laid the foundation for most web page innovations.

In the next five days, we will roam the world of the style sheet. You will learn the basic knowledge of the style sheet and apply it to your webpage. You will also learn how to deal with the font, text, color, background, positioning, and other detailed skills.

Today, let's first look at the basic content of the style sheet. 1st questions; what can style sheets do for us?

1.2What can a style sheet do for us?

What are the special characteristics of a style sheet? In short, it can help you do the following:

• You can separate the format and structure.
• You can control the page layout with unprecedented capabilities.
• You can create a web page that is smaller and faster to download.
• You can update many web pages at the same time, which is faster and easier than before.
• The browser will become your more friendly interface

You can separate the format and structure.

HTML has never intended to control the webpage format or appearance. This language defines the structure and features of a web page, and allows the browser to determine the appearance of each element.

However, web designers require more. Therefore, when Netscape introduces a new HTML Tag that can control the appearance of a webpage, there are no webpage designers.Cheers.We can use <font face> and <I> packages to control the appearance of the article subject outside <P>. Then we put everything into a table and use an implicit GIF space to generate a 20-pixel margin. Everything is messy. Coding becomes increasingly bloated, and it becomes increasingly difficult to quickly add content to webpages.

The concatenation style sheet separates the parts of the definition structure from the parts of the definition format so that we can apply more control to the layout of the page. HTML remains simple and clear. CSS Code independently controls the appearance of the page from another perspective.

You can control the page layout with unprecedented capabilities.

<Font size> This allows us to adjust the font size. Table labels help us generate margins, which is true. However, we have limited overall control over HTML. We cannot accurately generate a height of 80 pixels. We cannot control the line spacing or word spacing. We cannot precisely locate the image position on the screen.

But now, style sheets make it all possible. The upcoming new CSS feature is even more exciting. In the next four days, you will understand what I mean.

You can create a web page that is smaller and faster to download.

There are better messages: style sheets are just simple text, just like HTML. It does not require images, programs, plug-ins, and streaming. It is as fast as HTML commands.

With CSS, you can now use CSS to turn to GIF. Also, as I mentioned earlier, using a string style sheet can reduce table labels and other code that increases the HTML size, reduce image usage, and reduce file size.

You can maintain and update a large number of webpages more quickly and easily.

If I want to update the font of all the subject text on the entire site without a style sheet, I must modify each webpage one page at a time. Even if the site uses a database to provide services, I still need to update all templates and update the <FONT FACE> of each instance in each template.

The main purpose of a style sheet is to separate the format and structure. For style sheets, I can direct all the web pages on the site to a single CSS file. As long as I modify a row in the CSS file, the whole site will change accordingly.

The browser will become a more friendly interface for you.

Unlike other network technologies, the style sheet code has good compatibility. That is to say, if a user loses a plug-in, it will not be interrupted, or the old version of browsers will not be messy.

You can apply a style sheet to a browser that can recognize it.

How about style sheets?

Now let's create a style sheet. Zzz1.3 your 1st Style Sheets

Now let's start creating a style sheet.

Open your favorite HTML editor to generate a basic webpage:

Good. Now, let's add some style sheets to it. You only need to insert the following code between the original <HTML> and <BODY> labels:

<Style type = "text/css"> <! -- H1 {color: green; font-size: 37px; font-family: impact} P {text-indent: 1 cm; background: yellow; font-family: courier} --> </STYLE>

Open the page from the browser and you will see:

Stylesheets: The Tool of the Web
Design Gods

Amaze your friends! Squash your enemies!

Well done! You have created a webpage that is supported by your 1st style sheets.

(If "amaze your friends !" If the background of a row is not yellow, you need to upgrade your browser. Otherwise, you will not be able to finish the tutorial. We recommend that you install Netscape Communicator or Internet Explorer 4)

Terms

Let's take a look at these new codes:

The core of concatenating style sheets isRules. The simplest rule is like this:

H1 {color: green}

The entire rule tells the browser to display all text surrounded by <H1> </H1> in green.

Each rule contains a selection and description. In the above example, H1 isSelectIt is an HTML tag with the style function.DescriptionDefines the actual style, including two parts: attribute (color in this example) and parameter (green ).

Any HTML tag can be used as a tag. Therefore, you can attach the style sheet information to any element. From <P> to <CODE> and <TABLE>. You can even use a style sheet to concatenate the style sheet attributes for an image.

From our 1st style sheet instances, we can find that you can classify the style sheet rules. We use three different descriptions for <P>.

Similar to this, you can also classify and select:

H1, P, BLOCKQUOTE {Font-family: arial}

This rule sets the labels located in <H1>, <P>, and <BLACKQUOTE> to be displayed in Arial.

Inheritance

The rules of the style sheet can be inherited from the parent to the child. The following is an example:

B {color: blue}

This rule tells the browser to display all text within <B> in blue. But in the following cases, what should the browser do?

<B> All my Web pages will use cascading stylesheets within <I> four </I> weeks. </B>

No style is set for the <I> label, but because <I> is in <B>, It inherits the style set by the parent <B> and is displayed in blue.

All my Web pages will use cascading stylesheetsFourWeeks.

Now we have understood how the rule for concatenating style sheets works. We also see a method for adding style sheets to a webpage, but there are other ways to continue learning. Zzz1.4 Add the style to Your webpage

We have learned how to add a style sheet to a webpage. In fact, you can use four methods. Each method has its own advantages:

• Insert a style sheet into an HTML file.
• Link an external style sheet to an HTML file.
• Input an external style table to an HTML file.
• Add a style sheet to an HTML file row.

Insert style sheet:

This is the method we used in the previous page. All the style table information is listed at the top of the HTML file, which is the same as <BODY>, for example:

<HTML> <Style type = "text/css"> <! -- H1 {color: green; font-family: impact} P {background: yellow; font-family: courier} --> </STYLE> <HEAD> <TITLE> My First Stylesheet </TITLE> </HEAD> <BODY> <H1> Stylesheets: The Tool of the Web Design Gods </H1> <P> Amaze your friends! Squash your enemies! </P> </BODY> </HTML>

After the style sheet rule is implanted, the Browser executes the rule throughout the HTML page. If you want to add a style sheet to a webpage at one time, you can use this method.

You may notice two strange points in the Code: The TYPE = "text/css" attribute and the comment tag. TYPE = "text/css" is set to adopt the mime type. In this way, style sheets can be ignored in browsers that do not support CSS.

Comment tag (<! -- And -->) is more important. Some old browsers (such as IE 2.0 for MAC) cannot ignore the style sheet and continue to execute the following commands even if the TYPE = "text/css" attribute is set, the style sheet code is also displayed. Using annotation labels can avoid this situation.

Link to the style sheet

This is where the style sheet function is fully realized. You can link Multiple HTML files to a central style sheet file. This external style sheet file will set the rules for all your web pages. If you change the detail of the amount in the style sheet file, all pages will change accordingly. If you maintain a large site, this feature will definitely be useful.

How to use it: generate a common webpage, but use the <STYLE> rule. Instead, use the <LINK> label in <HEAD>:

<HTML> <HEAD> <TITLE> My First Stylesheet </TITLE> <Link rel = stylesheet HREF = "mystyles.css" TYPE = "text/css"> </HEAD> <BODY> <H1> Stylesheets: The Tool The Web Design Gods </H1> <P> Amaze your friends! Squash Your enemies! </P> </BODY> </HTML>

(You do not need to use annotation labels when using a linked style sheet .)

Now, create a file named mystyles.css (or whatever name you like ). The file content is as follows:

H1 {color: green; font-family: impact} P {background: yellow; font-family: courier}

Like publishing an HTML file, deploy the CSS file to your server. When you watch the web page in the browser, you will find that the browser will display the HTML page with links according to the style sheet rules according to the link tag, in the HREF attribute, you can choose to use absolute relative URLs.

Input style sheet

The method for inputting an external style sheet is similar to that for linking. The difference is that the link method cannot be used in combination with other methods, but the input method can. Example:

<HTML> <Style type = "text/css"> <! -- @ Import url(company.css ); H1 {color: orange; font-family: impact} --> </STYLE> <HEAD> <TITLE> My First Stylesheet </TITLE> </HEAD> <BODY> <H1> Stylesheets: The Tool The Web Design Gods </H1> <P> Amaze your friends! Squash Your enemies! </P> </BODY> </HTML>

The content of the input company.css file is as follows:

H1 {color: green; font-family: times} P {background: yellow; font-family: courier}

In this example, the browser first enters the company.css rule (@ import must start), and then adds the transplanted rule to generate a rule set for this webpage.

Note that H1 rules are set in the external style sheet file and the embedded style sheet. In the case of conflicts between the two, which rule should the browser execute? The implanted Rules have the upper hand at this time. Therefore, the text display effect is as follows:

Stylesheets: The Tool of the Web Design Gods

Amaze your friends! Squash your enemies!

The flexibility of the input style sheet allows you to input countless style sheets, and you can use the embedded style sheet to overwrite the input style sheet as per your preferences.

However, only Internet Explorer 4.0 supports the input method.

Add a style to a row

Finally, you canAdd style rules to HTML rows as follows:

<HTML> <HEAD> <TITLE> My First Stylesheet </TITLE> </HEAD> <BODY> <H1 STYLE = "color: orange; font-family: impact"> Stylesheets: The Tool of the Web Design Gods </H1> <P style = "background: yellow; font-family: courier"> Amaze your friends! Squash your enemies! </P> </BODY> </HTML>

In this example, you do not need to add Sample Table code to the top of the HTML. Adding the style table attribute in the row will enable the setter to execute style table rules.

This method is inconvenient because you must add style rules in each row. Otherwise, the setter will go back to the default settings of the file in the next row.

Joining a style sheet in a row is not as powerful as inserting, linking, and inputting a style sheet, but sometimes you will find it useful.

Remember, you can use several methods at the same time. In fact, the ability of a style sheet is to combine the various styles you add to a webpage.

 

<HTML> <HEAD> <TITLE> My First Stylesheet </TITLE> </HEAD> <BODY> <H1> Stylesheets: The Tool of the Web Design Gods </H1> <P> Amaze your friends! Squash your enemies! </P> </BODY> </HTML>