Web Programming with HTML, XHTML, and CSS- P14

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

Thêm vào BST

Báo xấu

80
lượt xem 13
download

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

Web Programming with HTML, XHTML, and CSS- P14: There are a lot of books about designing and building web pages, so thank you for picking up this one. Why do I think it is different? Well, the Web has been around for over a decade now, and during its life many technologies have been introduced to help you create web pages, some of which have lasted, others of which have disappeared. Many books that teach you to write web pages are revisions of earlier versions of the same book and therefore still take the same approach as the previous edition did....

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Web Programming with HTML, XHTML, and CSS- P14

Appendix C: CSS Properties Value IE N FF Inherited No auto 7 - 1 Default auto [length] 7 - 1 Applies to Block elements [percentage] 7 - 1 inherit - 6 1 min-height This specifies the maximum height of a block-level element (same values as for height). td {min-height:100px;} Value IE N FF Inherited No auto 7 - 1 Default auto [length] 7 - 1 Applies to Block-level elements [percentage] 7 - 1 inherit - 6 1 min-width This specifies the minimum width of a block-level element (same values as for width). td {min-width:200px;} Value IE N FF Inherited No auto 7 - 1 Default auto [length] 7 - 1 Applies to Block elements [percentage] 7 - 1 inherit - 6 1 621
Appendix C: CSS Properties Margin Proper ties Margin properties allow you to specify a margin around a box and therefore create a gap between elements’ borders. margin (margin-bottom, margin-left, margin-top, margin-right) This specifies the width of a margin around a box. p {margin:15px;} Value IE N FF Inherited No auto 3 4 1 Default zero [length] 3 4 1 Applies to All elements [percentage — 3 4 1 relative to parent element] inherit - 6 1 Padding Proper ties Padding properties set the distance between the border of an element and its content. They are impor- tant for adding white space to documents (in particular table cells). padding (padding-bottom, padding-left, padding-right, padding-top) This specifies the distance between an element’s border and its content. td {padding:20px;} Value IE N FF Inherited No auto 4 4 1 Default zero [length] 4 4 1 Applies to All elements 622
Appendix C: CSS Properties Value IE N FF [percentage — 4 4 1 relative to parent element] inherit - 6 1 List Proper ties List properties affect the presentation of bulleted, numbered, and definition lists. list-style This is shorthand allowing you to specify list-style-position and list-style-type. ul {list-style: inside disc} Value IE N FF Inherited Yes 4 6 1 Default Depends on browser 4 4 1 Applies to List elements 4 6 1 inherit - 6 1 list-style-position This specifies whether the marker should be placed inside each item of a list or to the left of them. ul {list-style-position:inside;} Value IE N FF Inherited Yes inside 4 6 1 Default outside outside 4 6 1 Applies to List elements inherit - 6 1 623
Appendix C: CSS Properties list-style-type This indicates the type of bullet or numbering that a bullet should use. ul {list-style-type:circle;} Value IE N FF Inherited Yes None 4 4 1 Default disc disc (default) 4 4 1 Applies to List elements Circle 4 4 1 square 4 4 1 decimal 4 4 1 decimal-leading- - - - zero lower-alpha 4 4 1 upper-alpha 4 4 1 lower-roman 4 4 1 upper-roman 4 4 1 Additional numbered list styles are available in CSS, but unfortunately they are not supported in IE7, Netscape 7, or Firefox 2. hebrew Traditional Hebrew numbering georgian Traditional Georgian numbering (an, ban, gan, . . . , he, tan, in, in-an, . . .) armenian Traditional Armenian numbering cjk-ideographic Plain ideographic numbers hiragana (a, i, u, e, o, ka, ki, . . . ) 624
Appendix C: CSS Properties katakana (A, I, U, E, O, KA, KI, . . . ) hiragana-iroha (i, ro, ha, ni, ho, he, to, . . . ) katakana-iroha (I, RO, HA, NI, HO, HE, TO, . . . ) marker-offset This specifies the space between a list item and its marker. ol {marker-offset:2em;} Value IE N FF Inherited No [length] - 7 1 Default auto auto - 7 1 Applies to Marker elements inherit - 6 1 Positioning Proper ties Positioning properties allow you to use CSS for positioning boxes on the page. position Specifies the positioning schema that should be used for an element. When an element is positioned, you also need to use the box-offset properties covered next (top, left, bottom, and right). Note that you should not use top and bottom or left and right together (if you do, top and left take priority). ❑ absolute can be fixed on the canvas in a specific position from its containing element (which is another absolutely positioned element); it will also move when the user scrolls the page. ❑ static will fix it on the page in the same place and keep it there even when the user scrolls. ❑ relative will be placed offset in relation to its normal position. ❑ fixed will fix it on the background of the page and not move when the user scrolls. p.article{position:absolute; top:10px; left:20px; 625
Appendix C: CSS Properties Value IE N FF Inherited No absolute 4 4 1 Default static relative 4 4 1 Applies to All elements static 4 4 1 fixed - 6 1 inherit - 6 1 Top This sets the vertical position of an element from the top of the window or containing element. Value IE N FF Inherited No auto 4 6 1 Default auto [length] 4 6 1 Applies to Positioned elements [percentage - 4 6 1 relative to parent’s height] Inherit - 6 1 Left This sets the horizontal position of an element from the left of the window or containing element. Value IE N FF Inherited No Auto 4 6 1 Default auto [length] 4 6 1 Applies to Positioned elements [percentage - 4 6 1 relative to parent’s width] inherit - 6 1 626
Appendix C: CSS Properties bottom This sets the vertical position of an element from the bottom of the window or containing element. Value IE N FF Inherited No auto 5 6 1 Default auto [length] 5 6 1 Applies to Positioned elements [percentage - 5 6 1 relative to parent’s height] inherit - 6 1 right This sets the horizontal position of an element from the window or containing element. Value IE N FF Inherited No auto 5 6 1 Default auto [length] 5 6 1 Applies to Positioned elements [percentage - 5 6 1 relative to parent’s width] inherit - 6 1 vertical-align This sets the vertical positioning of an inline element: ❑ baseline aligns element with base of parent. ❑ middle aligns midpoint of element with half the height of parent. ❑ sub makes element subscript. ❑ super makes element superscript. ❑ text-top aligns element with top of parent element’s font. ❑ text-bottom aligns element with the bottom of parent element’s font. 627
Appendix C: CSS Properties ❑ top aligns top of element with top of tallest element on current line. ❑ bottom aligns element with bottom of lowest element on the current line. span.superscript {vertical-align:superscript;} Value IE N N Inherited No baseline 4 4 1 Default baseline middle 4 4 1 Applies to Inline elements sub 4 6 1 super 4 6 1 text-top 4 4 1 text-bottom 4 4 1 top 4 4 1 bottom 4 4 1 [percentage relative - 6 1 to line height] [length] - - - inherit 4 6 1 z-index Controls which overlapping element appears to be on top; works for absolutely positioned elements only. Positive and negative numbers are permitted. p {position:absolute; top:10px; left:20px; z-index:3;} Value IE N FF Inherited No auto 4 - 1 Default Depends on position of element in XHTML [number] 4 4 1 source document inherit - 6 1 Applies to Positioned elements 628
Appendix C: CSS Properties clip Controls which part of an element is visible. Parts outside the clip are not visible. If value is rect(), it takes the following form: ❑ rect([top] [right] [bottom] [left]) rect(25 100 100 25) Value IE N FF Inherited No auto 4 - 1 Default auto rect 4 6 1 Applies to Block elements inherit - 6 1 overflow This specifies how a container element will display content that is too large for its containing element. p {width:200px; height:200px; overflow:scroll;} Value IE N FF Inherited No auto 4 6 1 Default visible hidden 4 6 1 Applies to Block elements visible 4 6 1 scroll 4 6 1 inherit - 6 6 overflow-x Same as overflow, but only for the horizontal x-axis. First supported in IE5. overflow-y Same as overflow, but only for the vertical y-axis. First supported in IE5. 629
Appendix C: CSS Properties Outline Proper ties Outlines act like borders, but do not take up any space — they sit on top of the canvas. Outline (outline-color, outline-style, outline-width) Shortcut for the outline-color, outline-style, and outline-width properties: outline {solid #ff0000 2px} Note that outline-color, outline-style, and outline-width take the same values as border- color, border-style, and border-width. They are not covered individually, because they are not supported yet. Value IE N FF Inherited No outline-color - - 1.5 Default none outline-style - - 1.5 Applies to All elements outline-width - - 1.5 outline - - 1.5 Table Proper ties Table properties allow you to affect the style of tables, rows, and cells. border-collapse This specifies the border model that the table should use (whether adjacent borders should be collapsed into one value or kept separate). table {border-collapse:separate;} Value IE N FF Inherited Yes collapse 5 7 1 Default collapse separate 5 7 1 Applies to Table and inline inherit - 6 1 elements 630
Appendix C: CSS Properties border-spacing This specifies the distance between adjacent cells’ borders. table {border-spacing:2px;} Value IE N FF Inherited Yes [length] - 6 1 Default 0 inherit - 6 1 Applies to Table and inline elements caption-side This indicates which side of a table a caption should be placed on. caption {caption-side:bottom;} Value IE N FF Inherited Yes top - 6 1 Default top left - 6 1 Applies to elements in bottom - 6 1 elements right - 6 1 inherit - 6 1 empty-cells This specifies whether borders should be displayed if a cell is empty. td, th {empty-cells:hide;} Value IE N FF Inherited Yes show 5 6 1 Default show hide 5 6 1 Applies to Table cell elements inherit - 6 1 631
Appendix C: CSS Properties table-layout Specifies how the browser should calculate the layout of a table; can affect the speed of rendering a large or graphics-intensive table. Value IE N FF Inherited No auto 5 6 1 Default auto fixed 5 6 1 Applies to Table and inline inherit - 6 6 elements Classification Proper ties Classification properties affect how the boxes in the box model are rendered. clear Forces elements, which would normally wrap around an aligned element, to be displayed below it. Value indicates which side may not touch an aligned element. p {clear:left;} Value IE N FF Inherited No none 4 4 1 Default none both 4 4 1 Applies to All elements left 4 4 1 right 4 4 1 inherit - 6 1 display Specifies how an element is rendered, if at all. If set to none the element is not rendered and it does not take up any space. Can force an inline element to be displayed as a block or vice versa. 632
Appendix C: CSS Properties span.important {display:block;} Value IE N FF Inherited Yes none 4 4 1 Default inline inline 5 4 1 Applies to All elements block 5 4 1 list-item 5 4 1 inherit - 6 1 Other properties are either not supported or not required for XHTML. While the default value of this property is inline, browsers tend to treat the element depending on its inherent display type. Block-level elements, such as headings and paragraphs, get treated as if the default were block, whereas inline elements such as , , or get treated as inline. float Subsequent elements should be wrapped to the left or right of the element, rather than below. img.featuredeItem {float:left;} Value IE N FF Inherited No none 4 4 1 Default none left 4 4 1 Applies to All elements right 4 4 1 inherit - 6 1 visibility Specifies whether an element should be displayed or hidden. Even if hidden, elements take up space on page, but are transparent. 633
Appendix C: CSS Properties Value IE N FF Inherited No visible 4 - 1 Default inherit show - 4 1 Applies to All elements hidden 4 - 1 hide - 4 1 collapse - - 1 inherit 4 4 1 Internationalization Proper ties Internationalization properties affect how text is rendered in different languages. direction Specifies the direction of text from left to right or right to left. This should be used in association with the unicode-bidi property. td.word{direction:rtl; unicode-bidi:bidi-override;} Value IE N FF Inherited Yes ltr 5 6 1 Default ltr rtl 5 6 1 Applies to All elements inherit 5 6 1 unicode-bidi The unicode-bidi property allows you to override Unicode’s built-in directionality settings for languages. td.word{unicode-bidi:bidi-override; direction:rtl; } 634
Appendix C: CSS Properties Value IE N FF Inherited No normal 5 - 2 Default normal embed 5 - 2 Applies to All elements bidi-override 5 - 2 inherit - 6 2 Lengths Following are the unit measurement for lengths that can be used in CSS. Absolute Lengths Unit IE N FF cm 3 4 1 in 3 4 1 mm 3 4 1 pc 3 4 1 pt 3 4 1 Relative Lengths Unit IE N FF em 4 4 1 ex 4 4 1 px 3 4 1 635
D Color Names and Values The first thing you need to learn about color is how to specify exactly the color you want; after all, there are a lot of different reds, greens, and blues, and it is important you choose the right ones. In XHTML there are two key ways of specifying a color: ❑ Hex codes: A six-digit code representing the amount of red, green, and blue that make up the color, preceded by a pound or hash sign # (for example, #333333). ❑ Color names: A set of names that represent over 200 colors, such as red, lightslategray, and fuchsia. In CSS you can also use values to represent the red, green, and blue values that make up each color. Using Hex Codes to Specify Colors When you start using hexadecimal codes (or hex codes for short), they can appear a little daunting. The idea that colors are represented by a mix of numbers and letters might seem a little strange, but what follows the # sign is actually the amount of red, green, and blue that make up the color. The format for hex codes is: # rrggbb The table that follows provides some examples.
Appendix D: Color Names and Values Color Hexadecimal Code Color Hexadecimal Code Black #000000 Green #008000 White #FFFFFF Blue #0000FF Red #FF0000 Purple #800080 As you might already know, computer monitors work in a color space known as an RGB color space. When a computer monitor is not switched on, the screen is black because it is not emitting any color. To create the image you see onscreen, each of the pixels that make up the screen emits different amounts of the colors red, green, and blue, just like a television screen. It’s hardly surprising, therefore, that you specify colors in the amounts of red, green, and blue that are required to make a given color. The values of red, green, and blue required to make a color are between 0 and 255, so when red, green, and blue all have a value of 0 you get black, whereas if each has a value of 255 you get white. You may have seen that some software represents colors using three sets of numbers between 0 and 255. Figure D-1 shows the color window in Adobe Photoshop. Figure D-1 The hexadecimal codes used on the web for color are a direct translation of these values between 0 and 255, except they use two characters, not three, to represent the numbers between 0 and 255. For example, FF represents 255 and 00 represents 0. The best way to really understand how hex codes work is to take a quick look at how computers store information. Understanding Hex Codes You may have heard people say that computers store all their information in 0s and 1s, and while it may sound hard to believe, it’s true! The smallest unit of information a computer stores in is known as a bit, and a bit can have only one of two values: ❑ 0, which means off (or false) ❑ 1, which means on (or true) 638
Appendix D: Color Names and Values These two values on their own will not store much information, yet if you combine 4 bits together, you can get 16 different values. For example, using combinations of four 0s and 1s, you can represent the digits 0 through 9 (and still have values to spare): 0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111 0 1 2 3 4 5 6 7 8 9 - - - - - - Four bits can be replaced by a single hexadecimal digit. There are 16 digits in hexadecimal numbers to represent the 16 possible values of four 0s and 1s: 0000 0001 0010 0011 0100 0101 0110 0111 1000 1001 1010 1011 1100 1101 1110 1111 0 1 2 3 4 5 6 7 8 9 A B C D E F 0 is the smallest; F is the largest. Still, computers need to work with more than 16 possible values, so they tend to store information in even larger segments. A group of 8 bits is known as a byte. A byte can therefore be represented using just two hexadecimal digits. For example: Binary 0100 1111 Hexadecimal 4 F This gives 256 possible combinations of 0s and 1s, plenty for the characters of the English language, and yes, that is why colors are represented in numbers between 0 and 255. So, while hexadecimal codes for web colors may appear a little complicated, I think you would agree that #4F4F4F is a lot easier to read than 010011110100111101001111. The following table shows some more hexadecimal codes and their corresponding decimal numbers. Hexadecimal Decimal Hexadecimal Decimal 00 0 BB 187 33 51 CC 204 66 102 DD 221 99 153 EE 238 AA 170 FF 255 Using Color Names to Specify Colors Rather than using hex values to specify colors, you can also use color names such as red, green, and white to specify the color you want. There are more than 200 different color names supported by Netscape, Firefox, and IE, all of which are listed at the end of this appendix. 639
Appendix D: Color Names and Values Although names might sound a lot easier to understand than hex codes, some of the colors are easier to remember than others, and remembering which color each of the 200 names looks like is a tall order. Here is a sample of some of the color names: aqua, beige, coral, darkcyan, firebrick, green, honeydew, indianred, lavenderblush, maroon, navy, oldlace, palegreen, red, saddlebrown, tan, white, yellow Furthermore, if you do jobs for larger companies, such companies often want to specify very exact colors that represent their brand, and their color might not have an HTML name. Indeed, when clients specify the color they want, they usually specify a hex code. Hex Codes versus Color Names It may seem as though color names are more straightforward to use than hex codes; if you use colors such as red, orange, green, blue, black, and white, then they are simple to remember and use. However, remem- bering each color name and the color it gives you is very difficult. In practice, you often end up referring to a color chart to find the color you want, whether you’re work- ing with hex codes or color names. Given that hex codes give you many more choices of shades, tints, and hues of colors than color names, and bearing in mind that a lot of companies ask for specific colors to represent their company, hex codes tend to be the choice of web professionals. If you are using either a graphics program or a web page authoring tool, that program will usually gen- erate the color code you need for you, and many graphics packages also have a color-picking tool to help you select the exact color you want. You can also find color picking tools on several web sites such as www.visibone.com/colorlab/. Figure D-2 shows the color picker from Photoshop. Figure D-2 Note that the checkbox on the bottom left of this window indicates an option to use only web-safe colors. This is for a restricted color palette (containing a subset of all colors available) known as the Web Safe Color Palette, which was designed in the days when computers did not support as many colors. Nowadays, 640