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

Tham khảo tài liệu giáo trình html5 và css3 từng bước phần 9, 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 9 333 Formatting Text Note The Masthead division is not very tall, and that’s okay for now. We’ll fix that later. 7. Above the Code pane, click the default.css tab to switch the view to the associated CSS file . In that view, notice the following: ●● The tab appears as default .css* . The asterisk means that there are unsaved changes to the file . ●● The code that places the background image in the Masthead division is in the CSS file, not in the HTML document itself . Division-level formatting is placed in the external style sheet by default, if present . CLEAN UP Leave the page and the Web site open in Expression Web for the next exercise.Formatting Text As you know from earlier chapters, there are many ways to format text . Here’s a quick review: ●● You can use direct formatting, in which an individual block of text receives certain formatting . For example, you might make a word bold in a paragraph by using the tag, as follows: This is a greatparty. ●● You can create a span, and then apply formatting to the text within the span, such as shown here: This is a great party. ●● You can place a style in the opening tag for a certain paragraph or other block of text . For example, you might specify a certain color for a paragraph’s text, as shown in the following: This is a great party.334 Chapter 17 ●● You can create a style that refers to the tag used for that text block . For example, you could create a style for the tag that formats all list items a certain way . This style can be placed in either an internal or external style sheet, such as this: p {font-family: “Verdana”, “Arial”, sans-serif; font-size: 13px} ●● You can define formatting for a new class in a style sheet, as in the following: .tangent {font-family: “Verdana”, “Arial”, sans-serif; font-size: 13px} ●● And then you can assign the class to certain tags within the document, like this: This is a great party. When you apply formatting in Expression Web, the application chooses an appropriate formatting method based on its internal rules . These rules take into consideration the type of formatting being applied and the size of the block to which it is being applied . If you don’t like the method that Expression Web selects, you can edit the code manually . In this exercise, you will apply text formatting in several ways, resulting in several types of tags and attributes being created in the code . SET UP Start in Expression Web, with the Web site still open from the previous exercise. 1. In the Page Content division, in the Design pane, type the following text: Fruit trees are now in stock! We have just received a large shipment of peach, pear, apple, and plum trees with sturdy root systems and healthy foliage, with prices as low as $29.99. 2. In the Code pane, enclose the paragraph you just typed in and tags . Fruit trees are now in stock! We have just received a large shipment of peach, pear, apple, and plum trees with sturdy root systems and healthy foliage, with prices as low as $29.99. Note When you type in the Code pane, Expression Web automatically adds a tag following it. Cut this tag (Ctrl+X is one way) and then paste it (Ctrl+V) at the end of the paragraph. 3. Select the sentence Fruit trees are now in stock!, and then click B ( the bold button) on the toolbar, or press Ctrl+B . The selected text is enclosed in a tag pair . Fruit trees are now in stock! We have just received a large shipment of peach, pear, apple, and plum trees with sturdy root sys- tems and healthy foliage, with prices as low as $29.99. 4. In the Styles pane (lower-right), on the Manage Styles tab, click #page_content to select that division . 335 Formatting Text 5. In the Properties pane (lower-left), click the CSS Pr ...