Important Announcement
PubHTML5 Scheduled Server Maintenance on (GMT) Sunday, June 26th, 2:00 am - 8:00 am.
PubHTML5 site will be inoperative during the times indicated!
EN
Home Explore PHP

PHP

Published by krangkrai009, 2017-05-19 04:28:34

Description: PHP

Search

Read the Text Version

Figure 18-12. Pseudoclasses applied to a selection of elements<head> <title>Pseudo classes</title> <style> a:link { color:blue; } a:visited { color:gray; } a:hover { color:red; } a:active { color:purple; } *:focus { background:yellow; } </style></head><body> <a href='http://google.com'>Link to Google'</a><br /> <a href='nowhere'>Link to nowhere'</a><br /> <input type='text' /></body></html>Other pseudoclasses are also available, and you can get more information on them atthe following website: http://tinyurl.com/pseudoclasses. Be careful when applying the focus pseudoclass to the universal selector, *, as shown in this example—Internet Explorer takes an unfocussed document as actually having focus applied to the entire web page, and (in this instance) the whole page will turn yellow until the Tab key is pressed or focus is otherwise applied to one of the page’s elements.PseudoelementsPseudoelements are a means of adding content rather than style to an element. Theyare enabled by placing a colon after an element type specifier, followed by apseudoelement. For example, to place some text before an element that uses the classoffer, you could use a rule such as this: .offer:before { content='Special Offer! '; } Pseudoelements | 415

Now any element using the class offer will have the string supplied to the contentproperty displayed before it. Likewise, you can use the :after pseudoelement to placeitems after all links (for example), as with the following, which will follow all links ona page with the link.gif image: a:after { url(link.gif); }Shorthand RulesTo save space, groups of related CSS properties can be concatenated into a singleshorthand assignment. For example, I have already used the shorthand for creating aborder a few times, as in the focus rule in the previous section: *:focus { border:2px dotted #888888; }This is actually a shorthand concatenation of the following rule set: *:focus { border-width:2px; border-style:dotted; border-color:#ff8800; }When using a shorthand rule you need only apply the properties up to the point whereyou wish to change values. So you could use the following to set only a border’s widthand style, choosing not to set its color, too: *:focus { border:2px dotted; } The order in which the properties are placed in a shorthand rule can be important, and misplacing them is a common way to get unexpected results. Since there are far too many to detail in this chapter, if you wish to use shorthand CSS you will need to look up the default properties and their order of application using a CSS manual or search engine. To get you started I recommend visiting the following website: http://tinyurl .com/shcss.The Box Model and LayoutThe CSS properties affecting the layout of a page are based around the box model (seeChapter 19 for more details), a nested set of properties surrounding an element. Vir-tually all elements have (or can have) these properties, including the document body,whose margin you can (for example) remove with the following rule: body { margin:0px; }The box model of an objects starts at the outside, with the object’s margin. Inside thisthere is the border, then there is padding between the border and the inner contents.And finally there’s the object’s contents.416 | Chapter 18: Introduction to CSS

Once you have the hang of the box model you will be well on your way to creatingprofessionally laid-out pages, since these properties alone will make up much of yourpage styling.Setting MarginsThe margin is the outermost level of the box model. It separates elements from eachother and its use is quite smart. For example, assume you have chosen to give a numberof elements a default margin of 10 pixels around each. When placed on top of eachother this would create a gap of 20 pixels due to adding the border widths together.To overcome this potential issue, when two elements with borders are positioned di-rectly one above the other, only the larger of the two margins is used to separate them.If both margins are the same width, just one of the widths is used. This way, you aremuch more likely to get the result you want. But you should note that the margins ofabsolutely positioned or inline elements do not collapse.The margins of an element can be changed en masse with the margin property, or in-dividually with margin-left, margin-top, margin-right, and margin-bottom. When set-ting the margin property you can supply one, two, three, or four arguments, which havethe effects commented in the following rules: /* Set all margins to 1 pixel */ margin:1px; /* Set top and bottom to 1 pixel, and left and right to 2 */ margin:1px 2px; /* Set top to 1 pixel, left and right to 2, and bottom to 3 */ margin:1px 2px 3px; /* Set top to 1 pixel, right to 2, bottom to 3, and left to 4 */ margin:1px 2px 3px 4px;Figure 18-13 shows Example 18-6 loaded into a browser, with the margin property rule(highlighted in bold) applied to a square element that has been placed inside a<table> element. The table has been given no dimensions so it will simply wrap asclosely around the inner <div> element as it can. As a consequence, there is a marginof 10 pixels above it, 20 pixels to its right, 30 pixels below it, and 40 pixels to its left.Example 18-6. How margins are applied<!DOCTYPE html><html> <head> <title>Margins</title> <style> #object1 { background :lightgreen; border-style:solid; border-width:1px; The Box Model and Layout | 417

Figure 18-13. The outer table expands according to the margin widths font-family :Courier New; font-size :9px; width :100px; height :100px; padding :5px; margin :10px 20px 30px 40px; } </style></head><body> <table border='1' cellpadding='0' cellspacing='0' bgcolor='cyan'> <tr> <td> <div id='object1'>margin:<br />10px 20px 30px 40px;</div> </td> </tr> </table></body></html>Applying BordersThe border level of the box model is similar to the margin, except that there is nocollapsing. It is the next level as we move into the box model. The main properties usedto modify borders are border, border-left, border-top, border-right, and border-bottom. Each of these can have other subproperties added as suffixes, such as -color,-style, and -width.The four ways of accessing individual property settings used for the margin propertyalso apply with the border-width property, so all of the following are valid rules: /* All borders */ border-width:1px; /* Top/bottom and left/right */ border-width:1px 5px;418 | Chapter 18: Introduction to CSS

/* Top, left/right, and bottom */ border-width:1px 5px 10px; /* Top, right, bottom, and left */ border-width:1px 5px 10px 15px;Figure 18-14 shows each of these rules applied in turn to a group of square elements.In the first one you can clearly see that all borders have a width of 1 pixel. The secondelement, however, has a top and bottom border width of 1 pixel, while its side bordersare each 5 pixels wide. The third element has a 1-pixel-wide top border, its side bordersare 5 pixels wide, and its bottom border is 10 pixels wide. The fourth element has a 1-pixel top border, a 5-pixel right border, a 10-pixel bottom border, and a 15-pixel leftborder.Figure 18-14. Applying long- and shorthand border rule valuesThe final element, under the previous ones, doesn’t use the shorthand rules; instead,it has each of the border widths set separately. As you can see, it takes a lot more typingto achieve the same result.Adjusting PaddingThe deepest of the box model levels (other than the contents of an element) is thepadding, which is applied inside any borders and/or margins. The main properties usedto modify padding are padding, padding-left, padding-top, padding-right, and padding-bottom.The four ways of accessing individual property settings used for the margin and border properties also apply with the padding property, so all of the following are validrules: The Box Model and Layout | 419

/* All borders */padding:1px;/* Top/bottom and left/right */padding:1px 2px;/* Top, left/right, and bottom */padding:1px 2px 3px; /* Top, right, bottom, and left */ padding:1px 2px 3px 4px;Figure 18-15 shows the padding rule (shown in bold) in Example 18-7 applied to sometext within a table cell (as defined by the rule display:table-cell;, which makes theencapsulating <div> element display like a table cell), which has been given no dimen-sions so it will simply wrap as closely around the text as it can. As a consequence, thereis padding of 10 pixels above the inner element, 20 pixels to its right, 30 pixels belowit, and 40 pixels to its left.Example 18-7. Applying padding<!DOCTYPE html><html><head> <title>Padding</title> <style> #object1 { border-style:solid; border-width:1px; background :orange; color :darkred; font-face :Arial; font-size :12px; text-align :justify; display :table-cell; width :148px; padding :10px 20px 30px 40px; } </style></head><body> <div id='object1'>To be, or not to be that is the question: Whether 'tis Nobler in the mind to suffer The Slings and Arrows of outrageous Fortune, Or to take Arms against a Sea of troubles, And by opposing end them.</div></body></html>Object ContentsDeep within the box model, at its center, lies an element that can be styled in all theways discussed previously in this chapter, and which can (and usually will) contain420 | Chapter 18: Introduction to CSS

Figure 18-15. Applying different padding values to an objectfurther subelements, which in turn may contain sub-subelements, and so on, each withits own styling and box model settings.Now that you know the basics, in the following chapter we’ll take a look at moreadvanced CSS, including how to apply transition effects such as movement and rota-tions, along with a number of other goodies new in CSS3.Test Your Knowledge 1. Which directive do you use to import one style sheet into another (or into the <style> section of some HTML)? 2. What HTML tag can you use to import a style sheet into a document? 3. Which HTML tag attribute is used to directly embed a style into an element? 4. What is the difference between a CSS ID and a CSS class? 5. Which characters are used to prefix a) IDs and b) class names in a CSS rule? 6. In CSS rules, what is the purpose of the semicolon? 7. How can you add a comment to a style sheet? 8. Which character is used by CSS to represent “any element”? 9. How can you select a group of different elements and/or element types in CSS?10. How can you make one CSS rule of a pair with equal precedence have greater precedence over the other one?See “Chapter 18 Answers” on page 510 in Appendix A for the answers to thesequestions. Test Your Knowledge | 421



CHAPTER 19 Advanced CSS with CSS3The first implementation of CSS was initially drawn up in 1996, was released in 1999,and as of 2001 was supported by all browser releases. The standard for this version,CSS1, was revised again in 2008. Developers began work on the second specification,CSS2, in 1998; its standard was eventually completed in 2007 and then revised againin 2009.Development of the CSS3 specification commenced in 2001, with features still beingproposed as recently as 2009. The development process is likely to continue for sometime before a final recommendation for CSS3 is approved. And even though CSS3 isn’tyet complete, people are already beginning to put forward suggestions for CSS4.In this chapter I’ll take you through the CSS3 features that have already been generallyadopted by the major browsers. Some of these features provide functionality that hith-erto could be provided only with JavaScript.I recommend using CSS3 to implement dynamic features where you can, instead ofJavaScript—the CSS will probably be very highly optimized (and therefore very fast),and it's one less thing for you to maintain across new browsers and browser versions.Attribute SelectorsIn the previous chapter I detailed the various CSS attribute selectors, which I will nowquickly recap. Selectors are used in CSS to match HTML elements, and there are 10different types, as detailed in Table 19-1.Table 19-1. CSS selectors, pseudoclasses, and pseudoelementsSelector type ExampleUniversal selector * { color:#555; }Type selectors b { color:red; }Class selectors .classname { color:blue; }ID selectors #idname { background:cyan; } 423

Selector type ExampleDescendant selectors span em { color:green; }Child selectors div > em { background:lime; }Adjacent sibling selectors i + b { color:gray; }Attribute selectors a[href='info.htm'] { color:red; }Pseudoclasses a:hover { font-weight:bold; }Pseudoelements p::first-letter { font-size:300%; }The CSS3 designers decided that most of these selectors work just fine the way theyare, but three enhancements have been made so that you can more easily match ele-ments based on the contents of their attributes.Matching Parts of StringsIn CSS2 you can use a selector such as a[href='info.htm'] to match the string'info.htm' when found in an href attribute, but there’s no way to match only a portionof a string. However, CSS3 comes to the rescue with three new operators: ^, $, and *.If one of these directly precedes the = symbol, you can match the start, end, or any partof a string, respectively.The ^ operatorFor example, the following will match any href attribute whose value begins with thestring 'http://website': a[href^='http://website']Therefore, the following element will match: <a href='http://website.com'>But this will not: <a href='http://mywebsite.com'>The $ operatorTo match only at the end of a string, you can use a selector such as the following, whichwill match any img tag whose src attribute ends with '.png': img[src$='.png']For example, the following will match: <img src='photo.png' />But this will not: <img src='snapshot.jpg' />424 | Chapter 19: Advanced CSS with CSS3

The * operatorTo match a substring anywhere in the attribute, you can use a selector such as thefollowing, which will find any links on a page that have the string 'google' anywherewithin them: a[href*='google']For example, this HTML segment will match: <a href='http://google.com'>while this segment will not: <a href='http://gmail.com'>The box-sizing PropertyThe W3C box model specifies that the width and height of an object should refer onlyto the dimensions of an element’s content, ignoring any padding or border. But someweb designers have expressed a desire to specify dimensions that refer to an entireelement, including any padding and border.To provide this feature, CSS3 lets you choose the box model you wish to use with thebox-sizing property. For example, to use the total width and height of an object in-cluding padding and borders, you would use this declaration: box-sizing:border-box;Or, to have an object’s width and height refer only to its content, you would use thisdeclaration (the default): box-sizing:content-box; WebKit and Mozilla-based browsers (such as Safari and Firefox, re- spectively) require their own prefixes to this declaration (-webkit- and -moz-), as detailed at the website http://caniuse.com.CSS3 BackgroundsCSS3 provides two new properties, background-clip and background-origin, that youcan use to specify where a background should start within an element, and how to clipthe background so that it doesn’t appear in parts of the box model where you don’twant it to.To accomplish these tasks, both properties support the following values:border-box Refers to the outer edge of the border. CSS3 Backgrounds | 425

padding-box Refers to the outer edge of the padding area.content-box Refers to the outer edge of the content area.The background-clip PropertyThis property specifies whether the background should be ignored (clipped) if it ap-pears within either the border or the padding area of an element. For example, thefollowing declaration states that the background may display in all parts of an element,all the way to the outer edge of the border: background-clip:border-box;If you don’t want the background to appear within the border area of an element, youcan restrict it to only the section of the element inside the outer edge of its paddingarea, like this: background-clip:padding-box;Or, to restrict the background to display only within the content area of an element,you would use this declaration: background-clip:content-box;Figure 19-1 shows three rows of elements displayed in the Safari web browser: the firstrow uses border-box for the background-clip property, the second uses padding-box,and the third uses content-box.In the first row, the inner box (an image file that has been loaded into the top left ofthe element, with repeating disabled) is allowed to display anywhere in the element.You can also clearly see it displayed in the border area of the first box because the borderstyle has been set to dotted.In the second row neither the background image nor the background shading displaysin the border area, because they have been clipped to the padding area with a background-clip property value of padding-box.Finally, in the third row, both the background shading and the image have been clippedto display only within the inner content area of each element (shown inside a light-colored dotted box), using a background-clip property value of content-box.The background-origin PropertyWith this property you can also specify where you would like a background image tobe located by indicating where the top-left corner of the image should start. For exam-ple, the following declaration states that the background image’s origin is to be the top-left corner of the outer edge of the border: background-origin:border-box;426 | Chapter 19: Advanced CSS with CSS3


krangkrai009

PHP
Share
Like this book? You can publish your book online for free in a few minutes!
Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children

RELATED PUBLICATIONS