Tự Học HTML Và CSS Trong 1 Giờ - Part 20.pdf (tự ...

tag. If you rely on the style attribute of tags to apply CSS, if you want to embolden every paragraph on a page, you need to put style=“font-weight: bold” in every

tag. This is no improvement over just using

and

instead. Fortunately, CSS provides ways to apply styles generally to a page, or even to an entire website. Creating Page-Level Styles First, let’s look at how we can apply styles to our page at the page level. Thus far, you’ve seen how styles are applied, but you haven’t seen any style sheets. Here’s what one looks like: The tag should be included within the tag on your page. The type attribute indicates the MIME type of the style sheet. text/css is the only value you’ll use. The body of the style sheet consists of a series of rules. All rules follow the same structure: selector { property1: value1; property2: value2; .. } Each rule consists of a selector followed by a list of properties and values associated with those properties. All the properties being set for a selector are enclosed in curly braces, as shown in the example. You can include any number of properties for each selector, and they must be separated from one another using semicolons. You can also include a semicolon following the last property/value pair in the rule, or not—it’s up to you. You should already be quite familiar with CSS properties and values because that’s what you use in the style attribute of tags. Selectors are something new. I discuss them in detail in a bit. The ones I’ve used thus far have the same names as tags. If you use h1 as a selector, the rule will apply to any tags on the page. By the same token, if you use p as your selector, it will apply to

tags. Download from www.wowebook.com Including Style Sheets in a Page 175 You can’t capture the real efficiency of style sheets until you start creating sitewide style sheets. You can store all of your style information in a file and include it without resorting to any server trickery (which I discuss in Lesson 21, “Taking Advantage of the Server”). A CSS file contains the body of a tag. To turn the style sheet from the previous section into a separate file, you could just save the following to a file called style.css: 8 Creating Sitewide Style Sheets h1 { font-size: x-large; font-weight: bold } h2 { font-size: large; font-weight: bold } In truth, the extension of the file is irrelevant, but the extension .css is the de facto standard for style sheets, so you should probably use it. After you’ve created the style sheet file, you can include it in your page using the tag, like this: The type attribute is the same as that of the tag. The href tag is the same as that of the tag. It can be a relative URL, an absolute URL, or even a fully qualified URL that points to a different server. As long as the browser can fetch the file, any URL will work. This means that you can just as easily use other people’s style sheets as your own, but you probably shouldn’t. There’s another attribute of the link tag, too: media. This enables you to specify different style sheets for different display mediums. For example, you can specify one for print, another for screen display, and others for things like aural browsers for use with screen readers. Not all browsers support the different media types, but if your style sheet is specific to a particular medium, you should include it. The options are screen, print, projection, aural, braille, tty, tv, embossed, handheld, and all. You can also specify titles for your style sheets using the title attribute, as well as alternative style sheets by setting the rel attribute to alternative style sheet. Theoretically, this means that you could specify multiple style sheets for your page (with the one set to rel=“stylesheet” as the preferred style sheet). The browser would then enable the user to select from among them based on the title you provide. Unfortunately, none of the major browsers support this behavior. As it is, you can include links to multiple style sheets in your pages, and all the rules will be applied. This means that you can create one general style sheet for your entire site and then another specific to a page or to a section of the site, too. Download from www.wowebook.com This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.