intTypePromotion=1
zunia.vn Tuyển sinh 2024 dành cho Gen-Z zunia.vn zunia.vn
ADSENSE
 » 
 » 

Web Programming with HTML, XHTML, and CSS Second Edition- P6

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

Thêm vào BST
Báo xấu
146
lượt xem 57
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Web Programming with HTML, XHTML, and CSS Second Edition- P6: Điều này bắt đầu hướng dẫn nhận xét HTML và cũng giới thiệu đến bạn bằng cách sử dụng XHTML cho cấu trúc của một trang web và cascading style sheets (CSS) để kiểm soát như thế nào một tài liệu sẽ xuất hiện trên một trang web. Bạn se tìm hiểu làm thế nào để tận dụng lợi thế của các tính năng mới của các trình duyệt trong khi đảm bảo rằng các trang của bạn vẫn làm việc ở cũ, nhưng phổ biến, các trình duyệt. Bằng...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web Programming with HTML, XHTML, and CSS Second Edition- P6

  1. Chapter 7: Cascading Style Sheets ❑ You can change the appearance of several pages by altering just the style sheet rather than each individual page; this is particularly helpful if you want to change your company’s colors, or the font used for a certain type of element wherever that element appears across the whole site. ❑ The style sheet can act as a style template to help different authors achieve the same style of document without learning all of the individual style settings. ❑ Because the source document does not contain the style rules, different style sheets can be attached to the same document. So you can use the same XHTML document with one style sheet when the viewer is on a desktop computer, another style sheet when the user has a handheld device, another style sheet when the page is being printed, another style sheet when the page is being viewed on a TV, and so on. You reuse the same document with different style sheets for different visitors’ needs. ❑ A style sheet can import and use styles from other style sheets, making for modular development and good reuse. ❑ If you remove the style sheet, you make the site more accessible for those with visual impairments, because you are no longer controlling the fonts and color schemes. It is fair to say, therefore, that whenever you are writing a whole site, you should be using an external style sheet to control the presentation, although as you will see in the next chapter you might use several exter- nal style sheets for different aspects of the site. CSS Proper ties Now that you have learned the background of CSS, how to write CSS rules, and where you can place those rules, the rest of this chapter looks at the properties you can use to affect the presentation of your documents. In particular, you will learn the font, text, border, padding, and margin properties. The following table shows the main properties available to you from CSS1 and CSS2, all of which you meet in this chapter or Chapter 8. FONT FONT (continued) TEXT (continued) TEXT (continued) font font-variant text-align white-space font-family font-weight text-decoration word-spacing font-size TEXT text-indent BACKGROUND font-size-adjust color text-shadow background font-stretch direction text-transform background- attachment font-style letter-spacing unicode-bidi background-color Continued 221
  2. Chapter 7: Cascading Style Sheets BACKGROUND BORDER (continued) DIMENSIONS TABLE (continued) (continued) (continued) background-image border-top-style min-width table-layout background-position border-top-width width LIST and MARKER background-repeat border-width POSITIONING list-style BORDER MARGIN bottom list-style-image border margin clip list-style-position border-bottom margin-bottom left list-style-type border-bottom-color margin-left overflow marker-offset border-bottom-style margin-right right GENERATED CONTENT border-bottom-width margin-top top content border-color PADDING vertical-align counter-increment border-left padding z-index counter-reset border-left-color padding-bottom OUTLINES quotes border-left-style padding-left outline CLASSIFICATION border-left-width padding-right outline-color clear border-right padding-top outline-style cursor border-right-color DIMENSIONS outline-width display border-right-style height TABLE float border-right-width line-height border-collapse position border-style max-height border-spacing visibility border-top max-width caption-side border-top-color min-height empty-cells 222
  3. Chapter 7: Cascading Style Sheets I will not cover certain properties in this book, either because they are very rarely used or because there is little support for them. (For example, I avoid covering aural style sheets because there are not many aural browsers that support them.) You can find out more about these properties on the following web sites (or you can pick up a book dedicated to CSS): ❑ www.w3.org/style/css/ ❑ www.devguru.com/Technologies/css/quickref/css_index.html ❑ www.w3schools.com/css/css_reference.asp Controlling Fonts Several properties allow you to control the appearance of text in your documents. These can be split into two groups: ❑ Those that directly affect the font and its appearance ❑ Those that have other formatting effects upon the text The table that follows lists the properties that directly affect the font. Property Purpose font Allows you to combine several of the following properties into one font-family Specifies the family of font to be used (the user must have this installed on his or her computer) font-size Specifies the size of a font font-weight Specifies whether the font should be normal, bold, or bolder than the containing element font-style Specifies whether the font should be normal, italic, or oblique (an oblique font is the normal font on a slant rather than a separate italic version of the font) font-stretch Allows you to control the width of the actual letters in a font (not spaces between them) font-variant Specifies whether the font should be normal or small caps font-size-adjust Allows you to alter the aspect ratio of the size of characters of the font 223
  4. Chapter 7: Cascading Style Sheets Before you start looking at fonts, it’s important to understand a few issues. Perhaps most importantly, a font is not the same thing as a typeface: ❑ A typeface is a family of fonts, such as the Arial family. ❑ A font is a specific member of that family, such as Arial 12-point bold. You will often see the terms used interchangeably, but it is helpful to be aware of the distinction. Typefaces tend to belong to one of two groups: serif and sans-serif fonts. Serif fonts have extra curls on letters. For example, the following l contains a serif on the top of the letter leaning back and at the bottom of the letter, whereas sans-serif fonts have straight ends to the letters. The third common example of a typeface is of a monospaced serif font. Every letter in a monospaced font is the same width, whereas non-monospaced fonts have different widths for different letters. (In serif and sans-serif fonts, the l tends to be narrower than the m.) See Figure 7-4 for an example. serif font sans-serif font monospace font Figure 7-4 In general print theory, serif fonts are easier to read for long periods of text. However, on the Internet this does not hold true; many people find serif fonts harder to read on a screen, largely because the resolution of the screen is not as good as printed words. This makes sans-serif fonts easier to read onscreen because they are not so detailed. To study the properties that affect fonts, most of the examples will follow a similar structure using para- graphs of text; each element carries a class attribute with a different value: Here is some text. Here is some text. Here is some text. The use of the class attribute allows you to add different styles to different elements that share the same name. The font-family Property The font-family property allows you to specify the typeface that should be used. The big drawback with this property is that those viewing the page must have this font on their computers; otherwise they will not see the page in that font. You can, however, specify more than one font so that, if the user does not have your first choice of font, the browser looks for the next font in the list (ch07_eg02.css). p.one {font-family:arial, verdana, sans-serif;} p.two {font-family:times, “times new roman”, serif;} p.three {font-family:courier, “courier new”, serif;} 224
  5. Chapter 7: Cascading Style Sheets If a font name contains spaces, such as times new roman or courier new, you should place the name in double quotation marks. Figure 7-5 shows what this example would look like in a browser; you can see the different types of font used for each paragraph (ch07_eg02.html). Figure 7-5 The comma-separated list of fonts you can use should end with one of five generic font names so that the computer can use its default generic font if it cannot find any of the typefaces you specify: Generic font name Type of font Example serif Fonts with serifs Times sans-serif Fonts without serifs Arial monospace Fixed-width fonts Courier cursive Fonts that emulate handwriting Comic Sans fantasy Decorative fonts for titles, and so on Impact One thing to keep in mind when choosing fonts is that they can each be of different heights or widths, so you will probably want to choose a similar-sized font as an alternative to your first choice. For example, Courier New is a lot shorter and wider than Impact (which is quite tall and narrow). If you designed your page with one font in mind, the layout can be significantly different should a second-choice font be a different size. When designers want to use a specific typeface that is not likely to be on the majority of users’ computers, they tend to use a GIF image for that text. It is generally frowned upon to use images for large sections of text, but for logos or headings and other small amounts of text, this is a good solution. If you do this, remember that you must provide the text that would be seen in the image as the value of the alt attribute. 225
  6. Chapter 7: Cascading Style Sheets There are several efforts to allow you to use fonts that others are not likely to have on their computers that involve downloading the font in question; however, most fonts are copyrighted and — like software — cannot simply be distributed by the purchaser. In addition, many users are wary of downloading files from web sites, so this cannot be relied upon as a technique for achieving the look you require. If you really want to use a non-standard font for small amounts of text, an alternative to images is a combi- nation of Flash and JavaScript in SIFR, which allows you to create some interesting effects (http://novemberborn.net/sifr). The font-size Property The font-size property enables you to specify a size for the font. You can specify a value for this property in several ways: ❑ Absolute size ❑ Relative size ❑ Length ❑ Percentage (in relation to parent element) The following values are absolute sizes: xx-small x-small small medium large x-large xx-large The following two values are relative sizes: smaller larger Length can be expressed in one of the following units of length: px em ex pt in cm pc mm You will see what each of these different units means later in the chapter in the section “Lengths” (as they are used in conjunction with several properties, not just fonts). Probably the most common is px for pixels. A percentage is calculated as a proportion of the element that contains the text: 2% 10% 25% 50% 100% For example: p.one {font-size:xx-small;} p.twelve {font-size:12px;} p.thirteen {font-size:3pc;} p.fourteen {font-size:10%;} Figure 7-6 shows you how some of these different font sizes work in the browser. (ch07_eg03.html and ch07_eg03.css contain several examples of different ways of specifying size and compare how they look.) 226
  7. Chapter 7: Cascading Style Sheets Figure 7-6 The font-weight Property Most fonts have different variations, such as bold and italic. While many well-made fonts have com- pletely different versions of each character for bold text, browsers tend to use an algorithm to calculate and add to the character’s thickness when it is supposed to be bold. Because it uses an algorithm, it means you can also create a lighter version of fonts, too. This is what the font-weight property is for. 227
  8. Chapter 7: Cascading Style Sheets The possible values for font-weight are: normal bold bolder lighter 100 200 300 400 500 600 700 800 900 So you assign a bold font like this (ch07_eg04.css): p.one {font-weight:normal;} p.two {font-weight:bold;} p.three {font-weight:bolder;} p.four {font-weight:lighter;} p.five {font-weight:100;} p.six {font-weight:200;} Figure 7-7 shows you how these values appear in the browser (ch07_eg04.html). Figure 7-7 Of these values, bold is most commonly used, although you might also come across the use of normal (especially if a large body of text is already in bold and an exception has to be created). The font-style Property The font-style property allows you to specify that a font should be normal, italic, or oblique, and these are the values of the font-style property; for example: p.one {font-style:normal;} p.two {font-style:italic;} p.three {font-style:oblique;} 228
  9. Chapter 7: Cascading Style Sheets Figure 7-8 shows you how these values appear in the browser (from ch07_eg05.css). Figure 7-8 The font-variant Property There are two possible values for the font-variant property: normal and small-caps. A small caps font looks like a smaller version of the uppercase letterset. For example, look at the following paragraph, which contains a with a class attribute (ch07_eg06.html): This is a normal font, but then there are some small caps in the middle. Now look at the style sheet (ch07_eg06.css): p {font-variant:normal;} span.smallcaps {font-variant:small-caps;} As you can see from Figure 7-9, the rule associated with the element indicates that its content should be shown in small caps. Figure 7-9 229
  10. Chapter 7: Cascading Style Sheets The font-stretch Property The font-stretch property sets the width of the actual letters in a font (not the space between them). It can take either relative or fixed values. The relative values are as follows: normal wider narrower The fixed values are as follows: ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded For example, you can make a condensed Arial font using the following syntax: p {font-family:arial; font-stretch:condensed;} Unfortunately, however, this property is not supported by either IE 7 or Firefox 2. The font-size-adjust Property As I mentioned earlier in the chapter, fonts can be different heights and widths. A font’s aspect value is the ratio between the height of a lowercase letter x in the font and the height of the font. The font-size- adjust property allows you to alter the aspect value of a font. For example, Verdana has an aspect value of 0.58 (which means that when the font’s size is 100 px, its x-height is 58 pixels). Times New Roman has an aspect value of 0.46 (which means that when the font’s size is 100 px, its x-height is 46 pixels). This makes Verdana easier to read at smaller sizes than Times New Roman. By altering a font’s aspect value you can, therefore, change its height. Unfortunately, neither Firefox 2 nor IE 7 supports this property. Text Formatting In addition to the font properties, you can use several properties to affect the appearance or formatting of your text. They are listed in the table that follows. Property Purpose color Specifies the color of the text text-align Specifies the alignment of the text within its containing element vertical-align Vertical alignment of text within containing element and in relation to containing element text-decoration Specifies whether the text should be underlined, overlined, strikethrough, or blinking text 230
  11. Chapter 7: Cascading Style Sheets Property Purpose text-indent Specifies an indent from the left border for the text text-transform Specifies that the content of the element should all be uppercase, lowercase, or capitalized text-shadow Specifies that the text should have a drop shadow letter-spacing Controls the width between letters (known to print designers as kerning) word-spacing Controls the amount of space between each word white-space Specifies whether the white space should be collapsed, preserved, or prevented from wrapping direction Specifies the direction of text (similar to the dir attribute) unicode-bidi Allows you to create bidirectional text The color Property The color property allows you to specify the color of the text. The value of this property can either be a hex code for a color or a color name. (The way in which colors are specified for the Web is discussed fur- ther in Appendix D.) For example, the following rule would make the content of paragraph elements red (ch07_eg07.html): p {color:#ff0000;} The text-align Property The text-align property works like the deprecated align attribute would with text. It aligns the text within its containing element or the browser window. See the table that follows for possible values. Value Purpose left Aligns the text with the left border of the containing element right Aligns the text with the right border of the containing element center Centers the content in the middle of the containing element justify Spreads the width across the whole width of the containing element 231
  12. Chapter 7: Cascading Style Sheets For example, you can see how these work in a table that is 500 pixels wide. Here are the rules for each row (ch07_eg08.css): td.leftAlign {text-align:left;} td.rightAlign {text-align:right;} td.center {text-align:center;} td.justify {text-align:justify;} Figure 7-10 shows you how these work. Figure 7-10 The vertical-align Property The vertical-align property is useful when working with inline elements, in particular images and portions of text. It allows you to control their vertical positioning within the containing element. span.footnote {vertical-align:sub;} It can take several values, as you can see in the table that follows. Value Purpose baseline Everything should be aligned on the baseline of the parent element (this is the default setting). sub Makes the element subscript. With images, the top of the image should be on the baseline. With text, the top of the font body should be on the baseline. super Makes the element superscript. With images, the bottom of the image should be level with the top of the font. With text, the bottom of the descender (the parts of letters such as g and p that go beneath the line of text) should align with the top of the font body. top The top of the text and the top of the image should align with the top of the tallest element on the line. 232
  13. Chapter 7: Cascading Style Sheets Value Purpose text-top The top of the text and the top of the image should align with the top of the tallest text on the line. middle The vertical midpoint of the element should be aligned with the vertical midpoint of the parent. bottom The bottom of the text and the bottom of the image should align with the bottom of the lowest element on the line. text-bottom The bottom of the text and the bottom of the image should align with the bottom of the lowest text on the line. This property may also accept a length and a percentage value. You can try out all of these in your browser using ch07_eg09.html. Figure 7-11 shows you some of these values. Figure 7-11 233
  14. Chapter 7: Cascading Style Sheets The text-decoration Property The text-decoration property allows you to specify the values shown in the table that follows. Value Purpose underline Adds a line under the content. overline Adds a line over the top of the content. line-through Like strikethrough text, with a line through the middle. In general, this should be used only to indicate text that is marked for deletion. blink Creates blinking text (which is generally frowned upon and considered annoying). For example, here are these properties used on separate paragraphs: p.underline {text-decoration:underline;} p.overline {text-decoration:overline;} p.line-through {text-decoration:line-through;} p.blink {text-decoration:blink;} Figure 7-12 shows you the properties that are demonstrated in ch07_eg10.html. Note that the blink property works in Netscape and Firefox only. Figure 7-12 The text-indent Property The text-indent property allows you to indent the first line of text within an element. For example, here you can see that the first line of the second paragraph has been indented. The following is the XHTML in ch08_eg11.html: This paragraph should be aligned with the left-hand side of the browser. The content of this paragraph should be indented by 3 em. 234
  15. Chapter 7: Cascading Style Sheets Now, here is the rule that indents the second paragraph (ch08_eg11.css): .indent {text-indent:3em;} You can see what this looks like in Figure 7-13. Figure 7-13 The text-shadow Property The text-shadow property is supposed to create a drop shadow, which is a dark version of the word just behind it and slightly offset. This has often been used in print media, and its popularity has meant that is has gained its own CSS property in CSS2. The value for this property is quite complicated because it can take three lengths, optionally followed by a color: .dropShadow { text-shadow: 0.3em 0.3em 0.5em black} The first two lengths specify X and Y coordinates for the offset of the drop shadow, while the third speci- fies a blur effect. This is then followed by a color, which can be a name or a hex value. Unfortunately, this property does not work in IE 7 or Firefox 2, although an example has been provided with the download code in ch07_eg12.html and ch07_eg12.css. The text-transform Property The text-transform property allows you to specify the case for the content of an element. The possible values are shown in the table that follows. Value Purpose none No change should take place. capitalize The first letter of every word should be capitalized. uppercase The entire content of the element should be uppercase. lowercase The entire content of the element should be lowercase. 235
  16. Chapter 7: Cascading Style Sheets Look at the following four paragraphs, all of which look like this (but with different values for the class attribute): The Catcher in the Rye was written by J.D. Salinger Here you can see the four different values for the text-transform property in use (ch07_eg13.css): p.none {text-transform:none;} p.Capitalize {text-transform:Capitalize;} p.UPPERCASE {text-transform:UPPERCASE;} p.lowercase {text-transform:lowercase;} Figure 7-14 shows you how the paragraphs would appear in a browser with these styles applied. Figure 7-14 The letter-spacing Property The letter-spacing property is supposed to control something that print designers refer to as tracking: the gap between letters. Loose tracking indicates that there is a lot of space between letters, whereas tight tracking refers to letters being squeezed together. No tracking refers to the normal gap between letters for that font. The possible values are normal or a unit of length (which is the next topic). For example (ch07_eg14.css which is used with ch07_eg14.html): span.wider {letter-spacing:10px;} Figure 7-15 gives you an indication of what this looks like. Figure 7-15 236
  17. Chapter 7: Cascading Style Sheets The word-spacing Property The word-spacing property is supposed to set the gap between words. Its value should be a unit of length. For example (ch07_eg15.css used with ch07_eg15.html): span.wider {word-spacing:20px;} Figure 7-16 gives you an indication of what this looks like. Figure 7-16 The white-space Property The white-space property controls whether or not white space is preserved within and between block level elements. By default, a browser changes any two or more spaces next to each other into a single space, and makes any carriage returns a single space, too. The white-space property offers the same results as the XHTML element and nowrap attribute. See the table that follows for the possible values for this property. Value Meaning normal Normal white space collapsing rules are followed. pre White space is preserved just as in the element of XHTML, but the formatting is whatever is indicated for that element, not just a monospaced font. nowrap Text is broken onto a new line only if explicitly told to with a element; otherwise text does not wrap. For example, you can use the white-space property like so (ch07_eg16.css): .pre {white-space:pre;} .nowrap {white-space:nowrap;} Unfortunately, the value of pre does not work in IE 7, although it does work in Netscape 4/Firefox 1 and later. The nowrap property works in IE 6 and Netscape 4/Firefox 1 and later. You can see both of these properties working in Figure 7-17. 237
  18. Chapter 7: Cascading Style Sheets Figure 7-17 The direction Property The direction property is rather like the dir attribute and specifies the direction in which the text should flow. The following table shows the possible values. Value Meaning ltr The text flows from left to right. rtl The text flows from right to left. inherit The text flows in the same direction as its parent element. For example, here are rules for two paragraphs indicating different directions for the text (ch07_eg17.css used with ch07_eg17.html): p.ltr {direction:ltr;} p.rtl {direction:rtl;} In practice, both IE and Firefox use this property much as the align attribute is used. The value rtl will simply right-align text, as you can see in Figure 7-18. Note, however, that the period (or full stop) is to the left of the sentence in the paragraph that is supposed to be running right to left. Figure 7-18 238
  19. Chapter 7: Cascading Style Sheets Do not use this property instead of the text-align property, as it will break when new browsers fully support this property. The unicode-bidi Property The unicode-bidi property is designed for internationalization purposes; the bidi part in the name is short for bi-directional. It allows words to appear in the direction that would be inferred by the Unicode standard and for authors to specify a change in direction of the elements’ content contrary to the Unicode standard. See the table that follows for possible values. Value Purpose normal No directional embedding will be enabled. embed The element opens an additional level of embedding, and the intend- ing Unicode direction will be followed. bidi-override Overrides the default directional values of an inline element in order to allow the direction property to set the direction in the element (overrides the Unicode settings). It is particularly helpful for inline elements that should be facing a different direction than the rest of the containing element — for example, if you were using a word that was written in a different direction because the embed value allows your text to flow in the opposite direction from the rest of the containing element. If you want to stop this from happening, you can use the bidi-override value. Text Pseudo-Classes While you are learning about text, there are two very helpful pseudo-classes that can help you work with text. These pseudo-classes allow you to render either the first letter or the first line of an element in a dif- ferent way than the rest of that element. Both of these are commonly used when laying out text. The first-letter Pseudo-Class The first-letter pseudo-class allows you to specify a rule just for the first letter of an element. This is most commonly used on the first character of a new page, either in some magazine articles or in books. Here is an example of the first-letter pseudo-class applied to a element carrying a class attribute whose value is pageOne (ch07_eg18.css which is used with ch07_eg18.html): p.pageOne:first-letter {font-size:42px;} You can see the effect of this first-letter pseudo-class in Figure 7-19 (which also shows the next pseudo-class we will be looking at). 239
  20. Chapter 7: Cascading Style Sheets Figure 7-19 The first-line Pseudo-Class The first-line pseudo-class should allow you to render the first line of any paragraph differently from the rest of the paragraph. Commonly this might be in a bold font so that the reader can clearly see an introduction (for articles) or the first line (for poems). The name of the pseudo-class is separated from the element it should appear on by a colon: p:first-line {font-weight:bold;} Note how, if you resize the window so that there is less text on the first line, only the first line of text in the browser will be given this new style. You can see the first-line pseudo-class in action in Figure 7-19, which also demonstrates the first-letter pseudo-class. Try It Out A Font Test Page Now that you’ve learned about using CSS to format text, it is time to try putting what you have learned into practice by creating a font test page. You will be able to use this page to test whether a browser sup- ports a font or not. 1. Create a new XHTML document, with the skeleton you are used to creating by now: Font test 2. Add a element to an external style sheet. The name of the style sheet will be font-test.css. Font text 240
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

THÔNG TIN
TRỢ GIÚP
HỖ TRỢ KHÁCH HÀNG
Theo dõi chúng tôi

Chịu trách nhiệm nội dung:

Nguyễn Công Hà - Giám đốc Công ty TNHH TÀI LIỆU TRỰC TUYẾN VI NA

LIÊN HỆ

Địa chỉ: P402, 54A Nơ Trang Long, Phường 14, Q.Bình Thạnh, TP.HCM

Hotline: 093 303 0098

Email: support@tailieu.vn

Giấy phép Mạng Xã Hội số: 670/GP-BTTTT cấp ngày 30/11/2015 Copyright © 2022-2032 TaiLieu.VN. All rights reserved.

 

Đồng bộ tài khoản
2=>2