Speaking in styles- P4

Chia sẻ: Thanh Cong | Ngày: | Loại File: PDF | Số trang:50

0
49
lượt xem
4
download

Speaking in styles- P4

Mô tả tài liệu
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Speaking in styles- P4: I want you to think of a shape. It can be any shape you want a circle, a square, a triangle, an eight-pointed star, or an ameboid glob-but keep it to a single continuous shape. I want you to hold that shape in your mind, or, if you need to, scratch it out on a piece of paper (or, if you are really far gone) on a computer.

Chủ đề:
Lưu

Nội dung Text: Speaking in styles- P4

  1. C SS GR AMMAR VOC A BULARY Fonts continued font-family Sets a specific 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 defined by the browser for that style. Values: inherit | | serif | sans-serif | cursive | fantasy | monospace Multiple Values: Include as many font-names as desired, separated by commas. The browser will try each font in sequence until it finds one it can use. font-weight The 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. Values: normal | bold | bolder | lighter | inherit font-variant Sets the small-cap style, where all letters are capi- tals, but capitalized letters are slightly larger. Values: 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. Values: 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. Values: | | 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 waterm 128
  2. font-family: garamond, georgia, serif; Garamond, Georgia, Serif font-weight: bold; Bold font-style: italic; Italic font-variant: small-caps; SMALL CAPS font-size: 12px; 6px 12px 18px 24px se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 129
  3. C SS GR AMMAR VOC A BULARY Text Text styles are properties applied to an entire block of text within an element, but that do not affect the individual letters them- selves. This includes text spacing properties such as letter, word, and line spacing, as well as text alignment, indents, underlining, overline, strike-through effects, and text capitalization. color Sets the text color. Values: | inherit letter-spacing Places an exact amount of space between each letter in a block of text to control the letter tracking. This 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. Values: | % | 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. Values: normal | | 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. Values: normal | | | % | 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. Values: normal | pre | nowrap | pre-wrap | pre-line | inherit Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 130
  4. color: rgb(128,0,0); text is maroon letter-spacing: .1em; letters are spaced apart word-spacing: 40px; words are spaced apart line-height: 2; One thing was certain, that One thing was certain, that One thing was certain, that the white kitten had had the white kitten had had the white kitten had had nothing to do with it: -- it was the black kitten's fault nothing to do with it: -- it nothing to do with it: -- it entirely. was the black kitten's fault was the black kitten's fault entirely. entirely. 1 1.5 2 white-space: pre; multiple spaces are not collapsed se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 131
  5. C SS GR AMMAR VOC A BULARY Text continued text-align Sets the justification of text to left, right, center, or full justification of the left and right edges. Values: left | 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. The most common use is for super-scripting and sub-scripting text. Values: baseline | sub | super | top | text-top | middle | bottom | text-bottom | % | | inherit text-indent Sets an indent for the first line in a block of text. Values: | % | inherit text-decoration Sets a line to be placed over, under, or through the text in an element. The style of the line cannot be con- trolled and will be the same color as the text. Values: 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. Values: lowercase | capitalize | uppercase | none | inherit Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 132
  6. text-align: center; One thing was certain, that One thing was certain, that One thing was certain, that One thing was certain, that the white kitten had had the white kitten had had the white kitten had had the white kitten had had nothing to do with it: -- it nothing to do with it: -- it nothing to do with it: -- it nothing to do with it: -- it was the black kitten's fault was the black kitten's fault was the black kitten's fault was the black kitten's fault entirely. entirely. entirely. entirely. Left Center Right Justified vertical-align: sub; super X 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 One thing was certain, that One thing was certain, that the white kitten had had the white kitten had had the white kitten had had nothing to do with it: -- it nothing to do with it: -- it nothing to do with it: -- it was the black kitten's fault was the black kitten's fault was the black kitten's fault entirely. entirely. entirely. Line-through Underline Overline text-transform: uppercase; text case Text Case TEXT CASE Lowercase Capitalize Uppercase se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 133
  7. C SS GR AMMAR VOC A BULARY Background All elements have a background that fills 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). The 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 The shorthand property that lets you set all of the background properties listed below at the same time. Values: | none background-color Sets the color to fill 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 fill with the background color. Values: | 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. Values: url() | none background-attachment Controls whether an image will scroll with the content of the element or stay fixed behind it. Values: scroll | fixed | inherit Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 134
  8. color repeat position background: red url(bg-01.png) repeat scroll top 0; image attachment background-color: rgb(126,0,68); background-image: url(bg-01.png); background-attachment: fixed; had grown in the last few had grown in the last few 'Here!' cried Alice, quite minutes, and she jumped minutes, and she jumped forgetting in the flurry of up in such a hurry that she up in such a hurry that she the moment how large she tipped over the jury-box tipped over the jury-box had grown in the last few with the edge of her skirt, with the edge of her skirt, minutes, and she jumped upsetting all the jurymen on upsetting all the jurymen on up in such a hurry that she to the to the tipped over the jury-box with the edge of her skirt, upsetting all the jurymen on to the Scroll Fixed se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 135
  9. C SS GR AMMAR VOC A BULARY Background continued Image Repeat For ideas on using Background image tiling is how a lot of visual design is accom- backgrounds in lay- plished, so it’s important to understand how the different tiling out, see Chapter 8, “Layout.” 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. Values: repeat | repeat-x | repeat-y | no-repeat | inherit repeat Tiles the background image in the box horizontally and vertically to fill the entire area. Repeat is most often used for textured backgrounds. no-repeat The background image appears once and does not tile. Any area not covered by the background image is filled with the background color. No-repeat works well for water- marks and graphic bullets. repeat-x The background image tiles horizontally across the element. Any area below the tiling background is filled with the background color. Repeat-x is often used to create header designs by repeating a pattern or gradient across the top of an element. repeat-y The background image tiles vertically in the element. Any area of the box to the right of the tiling background is filled with the background color. Repeat-y is useful for creating column boundaries. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 136
  10. background-repeat: repeat; background-repeat if position is set to 0,0 repeat no-repeat repeat-x repeat-y se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 137
  11. C SS GR AMMAR VOC A BULARY Background continued Image Position By default, all backgrounds are positioned in the top left corner of the element they are in, but you can offset that position in a number of different ways. Background positions can be set using one value or two values to set its horizontal and vertical positions. background-position Uses one or two values separated by a space for the distance from the top or left side of the element to specify where the background will start to appear. Values: | % | top | bottom | center | left | right | center | inherit Multiple Values: One value for both top and left position, two values separated by a space for top and left respectively. Places the background a specified distance from either the top and/or left side of the element. For example, 0 0 is the top left corner. 10px 15px pushes the background start- ing point down 10px and over to the right by 15px. Places the background a dis- tance from the top and/or left side of the element, calculated as a percentage of the width or height of the element. For exam- ple, if the box was 10px by 20 px, and the background position is set to 25%, the background would be pushed down 5px and over to the right by 3px (rounding up from 2.5). top Places the top of the background image against the top of the element. bottom Places the bottom of the background image against the bottom of the element. left Places the left side of the background image against the left side of the element. right Places the right side of the background image against the right side of the element. center Places the top and/or left corner of the background image in the center of the element. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 138
  12. background-position: 0 0; position if background-repeat is set to repeat 00 bottom 25px 25px right center center se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 139
  13. C SS GR AMMAR VOC A BULARY Box All elements are 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 side-by-side horizontally, from left to right, with their left and right sides butting against each other, unless separated by a margin. Inline boxes will flow until they reach the right edge of the element and then will have a soft-return to the next line. Boxes that cannot break, such as images, will go off the right side and either be hidden or require a horizontal scroll. Block boxes stack on top of each other vertically, with a hard return above and below the box, with bottom and top sides butt- ing 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 140
  14. Margin g Border Padding Content Top p Lorem ipsum dolor sit amet, consectetur adipisicing consec ng elit, sed do eiusmod tempor incididunt ut labore et t dolore magna aliqua. Ut enim ad minim veniam, quis Left nostrud exercitation ullamco laboris nisi ut aliquip ex Right ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu. Bottom Element Box se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 141
  15. C SS GR AMMAR VOC A BULARY Box continued Display All elements will have a default display type, which you 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 flow horizontally next to each other from left to right. block Element boxes flow vertically, stacking on top of each other from top to bottom. list-item Element boxes flow vertically, stacking on top of each other from top to bottom, like block, but with a list-marker and indented lines of text. none The element is completely removed from the document. inherit Uses the display style of the parent element. Coming Soon: Inline-block Although it’s not ready for prime 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. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 142
  16. Element 1 Element 2 Element 3 #e1, #e2, #e3 { display: block; } Element 1 Element 2 Element 3 Block #e1, #e2, #e3 { display: inline; } Element 1 Element 2 Element 3 Inline #e1, #e3 { display: block; } Element 1 #e2 { display: none; } Element 3 None se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 143
  17. C SS GR AMMAR VOC A BULARY Box continued Visibility One way to hide an element is to set the display property to none and completely remove it from the document. If you want the element to remain in the document but be invisible, you have other options: visibility Sets whether the box is visible or invisible. A hidden element will still take up space but will appear to be empty, like the invisible man in a rain storm. Values: visible | hidden | inherit opacity Sets the opacity of a box on a scale from 0.0 (clear) to 1.0 (opaque). This value affects the opacity of the element and all of its content and cannot be overridden by child elements. Opacity does not currently work in IE. Values: | inherit filter: alpha() Sets the opacity of a box in IE on a scale from 0 (clear) to 100 (opaque). This is not a true CSS property, but it can be added to any CSS rule. If you set both the filter: alpha and the opacity, you can be sure you have the same value set for all browsers, including IE. Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 144
  18. Element 1 Element 2 Element 3 #e1, #e3 { display: block; } Element 1 #e2 { visibility: hidden; } Element 3 #e1 { opacity: 1; Element 1 filter: alpha(100); } #e2 { opacity: .5; Element 2 filter: alpha(50); } #e3 { opacity: .25; Element 3 filter: alpha(25); } se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 145
  19. C SS GR AMMAR VOC A BULARY Box continued Float The float property A floating element is one whose box aligns itself to the left or has become crucial right. Surrounding content then wraps around it. This is often to multi-column Web used to float images with or without captions, but can also be layouts, as explained in Chapter 8, “Layout.” used for sidebars, pull quotes, or any other elements with a close association with the main text. float Positions the box to the left or 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 the floating element. Floating can be specifically cleared on the left, right, or completely cleared on both sides. Values: none | left | right | both | inherit Please purchase PDF Split-Merge on www.verypdf.com to remove this waterm 146
  20. Element 1 One thing was… The way Dinah… #e1{ One thing was certain, that the white kitten had had width: 75px; nothing to do with it: -- it was the black kitten's fault height: 150px; entirely. For the white kitten had been having its face washed by the old cat for the float: right; } last quarter of an hour (and Element 1 bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief. The way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and… #e1{ One thing was certain, that the white kitten had had width: 75px; nothing to do with it: -- it was the black kitten's fault height: 150px; entirely. For the white kitten had been having its face washed by the old cat for the float: right; } last quarter of an hour (and Element 1 bearing it pretty well, #e3{ clear: right; } considering); so you see that it couldn't have had any hand in the mischief. The way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and… se purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 147
Đồng bộ tài khoản