giáo trình HTML5 và CSS3 từng bước phần 4

Tham khảo tài liệu giáo trình html5 và css3 từng bước phần 4, công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả
Nội dung trích xuất từ tài liệu:
giáo trình HTML5 và CSS3 từng bước phần 4 113 Applying Bold and ItalicsIn this exercise, you will apply bold and italic styles to ordered and unordered lists .SET UP Use the foliage.htm file in the practice folder for this topic. This file is locatedin the DocumentsMicrosoft PressHTML5 SBS7TextApplyingBold folder. Open thefoliage file in Notepad and in Internet Explorer. 1. In the section, add bold formatting to the definition of an ordered list . ol {list-style-type: decimal; font-weight: bold} 2. Save the file, and then refresh the Internet Explorer display to see the change . The text of the entire list becomes bold . 3. Create a new style rule for unordered lists, setting the font weight to normal . ul {font-weight: normal} 4. Save the file, and then refresh the display in Internet Explorer . The unordered list items are no longer bold, but the ordered list items are . 5. Create a new style rule for unordered lists within unordered lists, setting the font style to italic . ul ul {font-style: italic} 6. Save the file, and then refresh the display in Internet Explorer .114 Chapter 7 CLEAN UP Close the Notepad and Internet Explorer windows.Applying Strikethrough and Underlining Strikethrough formatting is typically used to denote text that has changed . For example, if you have marked down the price of an item, you might strike through the original price . 115 Applying Strikethrough and UnderliningMost Web designers don’t use underlining as a formatting technique because hyperlinksare underlined, and it is considered poor design to confuse your users with text thatlooks “clickable” but is not . In the example just shown, for instance, you might think thatthe text Now only $9.99 is a hyperlink, but it’s not; it’s just underlined .If you simply want to underline or strike through a few words of text in one specificinstance that probably won’t recur elsewhere on your page (or site), it’s easiest to usethe tag for underlining or the tag for strikethrough . These tag names comefrom the logical functions that underlining and strikethrough often serve in an editeddocument; insertions are commonly underlined, and deletions are commonly struckthrough . Here’s the code for the preceding example:List price: $24.00 Now only $9.99Note In early HTML versions, there was a or tag for strikethrough and a tagfor underlining, but both were deprecated in HTML4 and removed completely in HTML5. The and tags will probably become deprecated at some point, but for now they are stillin use.To strike through or underline text by using a style (a more modern and “correct”method, although it requires a little more typing), use the text-decoration attribute . Thisattribute accepts several keywords: ●● underline ●● overline (line over the text) ●● line-through (strikethrough) ●● blink (flashing text) ●● none (removes all inherited decoration)Caution Do not use blinking text if at all possible. It is quite annoying. Visitors to your site willprobably dislike it so much that they will leave your site and never return.You can use the none keyword to remove the underlining from text that would ordinar-ily be underlined automatically, such as a hyperlink . Be careful, though, because if youremove the underline from a hyperlink, many people will not realize they can click it .Here are some examples applied to individual paragraphs:This looks clickable, but isn’t.This is struck-through.Congratulations, you win!116 Chapter 7 Here’s an example of underlining applied within a style sheet to a class called underlined: .underlined {text-decoration: underline} In this exercise, you will remove the underlining from a hyperlink . SET UP Use the index.htm file in the practice folder for this topic. This file is located in the DocumentsMicrosoft PressHTML5 SBS7TextApplyingStrike folder. Open the index file in Notepad and in Internet Explorer. 1. In the tag for the Contact the Webmaster hyperlink at the bottom of the docu- ment, add a text-decoration attribute that removes the underline . Contact the Webmaster 2. Save the file, and then refresh the Internet Explorer display . The hyperlink is no longer underlined, but you can still point at it to see its Screen- Tip, indicating it is still a live hyperlink . ...