Tài liệu Speaking in styles- P4 ppt

128 CSS GRAMMAR VOCABULARY Fonts continued font-family  Sets a speci c font family by name or a generic font family of serif, sans-serif, monospace, handwritten, or fantasy. Font names with two or more words must be in quotes (for example, "lucida sans"). Generic values will use a font de ned by the browser for that style. V : inherit | <font-name> | serif | sans-serif | cursive | fantasy | monospace M V: Include as many font-names as desired, separated by commas.  e browser will try each font in sequence until it  nds one it can use. font-weight   e boldness of the font, generally a thicker ver- sion of the default. If a bold version of the font does not exist, the browser will simulate one based on the default pattern. V  : normal | bold | bolder | lighter | inherit font-variant  Sets the small-cap style, where all letters are capi- tals, but capitalized letters are slightly larger. V  : normal | small-caps | inherit font-style  Sets whether a font is italic or oblique. Most brows- ers will treat both values as italic if a true italic version of the font exists. If an italic version does not exist, the browser syn- thesizes an oblique version of the font by slanting the default version of the font to the right by 15 degrees. V  : normal | italic | oblique | inherit font-size  Sets an absolute-size, length, relative-size, or percent- age based on the size of the font of the parent element. V  : <length> | <percentage-parents-font-size> | smaller | larger | xx-small | x-small | small | medium | large | x-large | xx-large | inherit Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 129 font-weight: bold; Bold font-variant: small-caps; S MALL C APS font-family: garamond, georgia, serif; Garamond, Georgia, Serif font-size: 12px; 6px 12px 18px 24px font-style: italic; Italic Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 130 CSS GRAMMAR VOCABULARY Text styles are properties applied to an entire block of text within an element, but that do not a ect the individual letters them- selves.  is includes text spacing properties such as letter, word, and line spacing, as well as text alignment, indents, underlining, overline, strike-through e ects, and text capitalization. color  Sets the text color. V  : <color> | inherit letter-spacing  Places an exact amount of space between each letter in a block of text to control the letter tracking.  is is not to be confused with kerning , which uses data from the font to adjust spacing between letters based on pairing context. Letter spacing is a crude way to adjust spacing between letters, since it does not take into account the visual appearance of the letters. It is best reserved for large text such as headlines. V  : <length> | <percentage-font-size>% | inherit word-spacing  Places an exact amount of space between each word in a block of text. Like letter spacing, this is a rough way to adjust spacing and is best used with large text. V  : normal | <length> | inherit line-height  Controls the spacing between lines in a block of text. Adjusting line height to at least 1.5 (=150%) or higher is generally recommended to make large blocks of text more readable. V  : normal | <number> | <length> | <percentage-font-size>% | inherit white-space  By default, Web browsers collapse multiple spaces in HTML code into a single space in the Web page and will automatically wrap text rather than allowing a horizontal scroll. White space allows you to override both of these defaults to preserve all white space or prevent text from wrapping. V  : normal | pre | nowrap | pre-wrap | pre-line | inherit Text Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 131 color: rgb(128,0,0); text is maroon letter-spacing: .1em; letters are spaced apart word-spacing: 40px; words are spaced apart white-space: pre; multiple spaces are not collapsed line-height: 2; One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. 1.5 12 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 132 CSS GRAMMAR VOCABULARY text-align  Sets the justi cation of text to le , right, center, or full justi cation of the le and right edges. V  : le | center | right | justify | inherit vertical-align  Sets the vertical positioning of a block of text in relation to adjacent elements in the same line. Although seemingly useful for aligning elements, experience shows it does not behave as designers would expect, since it only works on inline elements and can not be used to vertically align blocks of text.  e most common use is for super-scripting and sub-scripting text. V  : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage-line-height>% | <length> | inherit text-indent  Sets an indent for the  rst line in a block of text. V  : <length> | <percentage-width>% | inherit text-decoration  Sets a line to be placed over, under, or through the text in an element.  e style of the line cannot be con- trolled and will be the same color as the text. V  : none | line-through | underline | overline | blink | inherit text-transform  Sets the capitalization of letters in a block of text, regardless of the state of the originating text. V  : lowercase | capitalize | uppercase | none | inherit Text continued Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 133 vertical-align: sub; X super X sub text-indent: 1em; One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. text-decoration: strike-through; One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. Line-through Underline Overline text-align: center; One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. One thing was certain, that the white kitten had had nothing to do with it: -- it was the black kitten's fault entirely. Left Center Right Justified text-transform: uppercase; text case Lowercase Text Case Capitalize TEXT CASE Uppercase Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 134 CSS GRAMMAR VOCABULARY All elements have a background that  lls the area of its element box behind any content and padding, up to its border (see the next section for details on the element box).  e background can be a solid color or an image that can be tiled, with its starting point positioned horizontally and vertically within the box. background   e shorthand property that lets you set all of the background properties listed below at the same time. V  : <background-color> <background-image> <background-repeat> <background-attachment> <background-position> | none background-color  Sets the color to  ll the area of an element behind the content up to its border. Any area of the back- ground not covered by a background image will  ll with the background color. V  : <color> | transparent | inherit background-image  Sets an image to appear behind the ele- ment’s content and padding. You can use PNG (8, 24, or 32), JPEG, or GIF image formats. V  : url(<url>) | none background-attachment  Controls whether an image will scroll with the content of the element or stay  xed behind it. V  : scroll |  xed | inherit Background Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 135 background: red url(bg-01.png) repeat scroll top 0; color repeat image position attachment background-color: rgb(126,0,68); background-image: url(bg-01.png); background-attachment: xed; 'Here!' cried Alice, quite forgetting in the flurry of the moment how large she had grown in the last few minutes, and she jumped up in such a hurry that she tipped over the jury-box with the edge of her skirt, upsetting all the jurymen on to the Scroll had grown in the last few minutes, and she jumped up in such a hurry that she tipped over the jury-box with the edge of her skirt, upsetting all the jurymen on to the had grown in the last few minutes, and she jumped up in such a hurry that she tipped over the jury-box with the edge of her skirt, upsetting all the jurymen on to the Fixed Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 136 CSS GRAMMAR VOCABULARY Background continued Image Repeat Background image tiling is how a lot of visual design is accom- plished, so it’s important to understand how the di erent tiling methods work and what they are for. background-repeat  Controls whether or how the background image repeats (or not). You can set the background to tile, tile horizontally, tile vertically, or just appear once. V  : repeat | repeat-x | repeat-y | no-repeat | inherit repeat  Tiles the background image in the box horizontally and vertically to  ll the entire area. Repeat is most o en used for textured backgrounds. no-repeat   e background image appears once and does not tile. Any area not covered by the background image is  lled with the background color. No-repeat works well for water- marks and graphic bullets. repeat-x   e background image tiles horizontally across the element. Any area below the tiling background is  lled with the background color. Repeat-x is o en used to create header designs by repeating a pattern or gradient across the top of an element. repeat-y   e background image tiles vertically in the element. Any area of the box to the right of the tiling background is  lled with the background color. Repeat-y is useful for creating column boundaries. For ideas on using backgrounds in lay- out, see Chapter 8, “Layout.” Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 137 background-repeat if position is set to 0,0 repeat-yrepeat-x no-repeatrepeat background-repeat: repeat; Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... time yet (not even as a design enhancement) because it is not supported by IE6, another display type you may see in the future is inline-block, which allows you to insert a block element within an inline element The effect is that the inline block element expands the line height of the line it is on to fit 142 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Element... rectangular in shape—a box Every time you add an HTML tag to create an element, you are creating an element box All element boxes have a top, right, bottom, and left side that you can style, setting the margin, padding, border, width, and height, as well as the visibility and float Boxes can be set to automatically position themselves in context to surrounding boxes in one of two ways: Inline boxes flow... right within its parent element Any content below the element will wrap around it in moving up into the available space If multiple elements are floated next to each other, then they will line up horizontally as space allows Values: left | right | none | inherit clear When applied to an element that has been placed below a floating element, floating stops, with the cleared element again appearing beneath... butting against each other, unless separated by a margin Block boxes will continue down the page, requiring a vertical scroll if the height of the box does not allow all content to be shown 140 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark Margin g Border Padding Content Top p Left Lorem ipsum dolor sit amet, consectetur adipisicing consec ng elit, sed do eiusmod tempor incididunt... can override using the display property that tells the element how to behave in relation to the elements around it display Sets whether the element’s box will be inline, block, a list item, or whether it appears at all A value of none removes the element from the page completely so that a dynamic action can show it at the right time Values: inline | block | list-item | none | inherit inline Element boxes... good Min-height = 150px One thing was certain, that the white kitten had had nothing to do with it: it was the black kitten's fault entirely For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief Stretch Max-height = 190px Max-width = 225px Min-width... Padding is easily confused with the margin, especially if there is no visible border Padding, however, is intended to separate the content of the box from its edges, whereas the margin is meant to separate the element from other elements on the screen padding The shorthand property for setting the padding on all four sides of the box simultaneously Values: | % | inherit... border or background, margin and padding will appear to be identical, but it is important to remember that they are different values Margin should be used to adjust an element’s position in relationship to other elements on the page, while padding should be used to keep content from bumping up against the edge of the box margin The shorthand property setting the margin on all four sides of the box simultaneously... the memo in time They decided that width and height applied to the entire box, including the margin and padding You are OK as long as you do not set the width/height with padding and a border But, as soon as you add padding and borders, in IE6 your designs will look different from standards-compliant browsers, even IE7 Fortunately for us, the makers of IE6 missed another memo When a declaration in a CSS... beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr no doubt feeling that it was all meant for its good Apparent = 249px _width: 249px; 6 Underscore Width = 225px One thing was certain, that the white kitten had had nothing to do with it: it was the black kitten's fault entirely For the white kitten had been having . you may see in the future is inline-block, which allows you to insert a block element within an inline element. The effect is that the inline block element. adjust spacing between letters based on pairing context. Letter spacing is a crude way to adjust spacing between letters, since it does not take into account