- Getting the Lay of the Land. - Enhancing the Look of the Menu. - I was one of the founding members of the Web Standards Project, or WaSP [1. - Those boundaries were not clean in the first few years of the Web.. - You'll also find a copy of the Footbag Freaks Website [4. - Chapter 1: Getting the Lay of the Land. - While this is a bit of an oversimplification of the facts, it’s hardly an unfair one.. - a body founded by Tim Berners-Lee to oversee the technical growth of the Web. - So, a first-level heading Chapter 1: Getting the Lay of the Land. - The first item of the pair defines the specific property that’s being modified. - The name of the property that’s being modified is color , which applies to the font color. - The first, font- size , sets the size of the font in all paragraphs in the document to 14 pixels. - The CSS rules contained in the style block apply to all the designated parts of the current document. - <h1>Getting the Lay of the Land</h1>. - Smaller file sizes, fewer place-holder graphics, and faster load times are some of the other benefits of CSS.</p>. - K quick review of the three methods for assigning CSS properties to HTML documents. - K workings of the inheritance mechanism in style sheets. - tag in the head portion of any HTML document to declare CSS rules that apply to the elements of the page.. - tag in the head portion of any HTML document to apply a set of CSS rules in an external file to the elements of the page.. - Paragraph element p 1 is a direct descendant of the body. - p 2 would be described as a child of the div. - Similarly, paragraph elements p 2 and p 3 are descendants of the div element, the body element, and the html element. - h1 p Apply rule to all HTML ele- ments of the selector’s type.. - p em p.wide em Apply rule to elements of the. - type specified to the right of the “>. - which are children of the elements to the left of the. - h1+h2 p+h3 Apply rule to all elements of type specified to the right of the. - which are physically adjacent (in the HTML code, not necessarily on the visible page) to elements of the type to the left of the. - No space is permitted between the period and the name of the class. - It refers to the first descendant of the element to which it is applied, in accordance with the HTML document hierarchy described in the section called “How Inheritance Works in CSS”.. - The :lang() pseudo-class 2 refers to the setting of the lang attribute in an HTML element. - It is a special case of the descendant selector discussed in the preceding section. - The other portions of the hyphen-separated value are ignored. - The elements in the selector list need not be all of the same type or even of the same level of specificity. - Many of the properties you define in a CSS rule include measurements. - All of the following should produce precisely the same result:. - This chapter covered more of the syntactical and structural rules of CSS styles. - The look and the content of the site are said to be coupled.. - of the page, instead of how you want them to look. - Increasingly supported by modern browsers is a feature of the HTML <link>. - Here are some of the W3C Recommendations that relate to using semantic markup and CSS:. - One of the primary goals of this book is to demonstrate that this is no longer true. - You can see the front page of the Footbag Freaks site in Figure 4.2.. - the top of the page where the Footbag Freaks logo appears against a colored background. - At the center of the CSS box model is the content itself. - The content is anything contained within the area of the box.. - Notice from Figure 5.2 that the visible width of the box is determined by adding together the content width, the padding and the border. - Similarly, the visible height of the box is determined by adding the content’s height to the padding and border settings. - Let’s change just one of the padding settings to get a feel for how this works.. - You may notice that the right side of the padding appears not to have worked.. - As you can see in Figure 5.10, the amount of padding placed around the two heading elements is proportional to the size of the font in the elements themselves.. - Recall that 1em is equal to the height of the font in use. - The browser has applied 10% of the width of the page (the body is the containing block for heading elements) as the padding on all four sides.. - This will result in a deep indent of the paragraph from the left margin.</p>. - As you can see, this margin applies to the existing left margin of the bulleted list, which results in the paragraph item being pushed further to the right. - This produces the additional indentation of the paragraph text within the gray box in the list.. - Both of these values are therefore calculated relative to the width of the containing block (the list item), which in turn takes its width from the browser window. - This comes in handy when you’ve set a margin-left property for the body of an HTML page, but you want to move an element closer to the left margin of the page. - But when it is applied to the second line, the font size of the first line is doubled to calculate that of the second.. - The center column of the three-column layout uses the following CSS rule:. - The only difference is that this HTML contains the following fragment, which defines the content of the top block on the page:. - This is the header area of the three-column-plus-header layout. - This style rule will cause all headings to be heard from the front-left of the sound field:. - You can specify any of the values permitted by the five background- properties, in any order, separated by spaces. - Each of the position specifiers may be a CSS length measurement (pixels, points, ems, etc. - a percentage, or one of the constants from Table C.1.. - the vertical position of the image will default to 50. - This style rule uses background-repeat and background-position to create a horizontal band 50 pixels down from the top of the page. - For a full description of the Behaviors feature in Internet Explorer, refer to the MSDN Web site [4]. - Each of these properties sets the color of the border along one side of an element.. - Each of these properties sets the style of the border along one side of an element.. - Any of the constants allowed for border-style . - Each of these properties sets the width of the border along one side of an element.. - The border-color property sets the color of the border surrounding the selected element(s).. - This property is the CSS equivalent to the cellspacing attribute of the HTML. - The border-style property sets the style of the border surrounding the selected element(s).. - The border-width property sets the width of the border surrounding the selected element(s).. - edge of the positioning context in which it resides. - Internet Explorer 5 for Macintosh follows the specification and positions the block relative to the bottom of the document area.. - Percentages are based on the height of the parent element. - This style rule positions the element with ID menu at the bottom of the window (or the bottom of the document in Internet Explorer for Macintosh):. - Any of the following constants: top , bottom , left , or right . - This property clips the visible region of the absolute- or fixed-positioned element(s) to which it is applied. - The default value, auto , lets the browser determine the area of the element to draw, as usual.. - This property sets the foreground (text) color of the element. - This property also defines the default border color of the element.. - Termed generated content, this text is not part of the HTML document, but is generated purely by the style sheet. - This format lets you place a string of text before or after the actual content of the element. - This format lets you place some external resource before or after the actual content of the element. - For example, if you supply a URL to an image, the browser should place that image before/after the content of the element. - If you supply a URL to an HTML document, the browser should display the contents of the document before/after the content of the element.. - This format lets you output the value of an attribute of the element (e.g. - tag) before or after the actual content of the ele- ment.. - Netscape 6, Mozilla, and Opera browsers support a subset of the formats discussed above. - The third style rule (which is not supported by current browsers because of the use of at- tr( attribute. - This property lets you modify the appearance of the mouse cursor when the mouse is over a selected element.. - All of the cursors' exact appearances may vary between browsers and operating systems.. - The dir attribute of the q tag is what specifies the rendering order. - The list-style family of properties control the position and appearance of the list item marker (i.e. - Jeffrey Zeldman, Co-Founder of the Web Standards Project
Xem thử không khả dụng, vui lòng xem tại trang nguồn hoặc xem
Tóm tắt