Tài liệu HTML & CSS: The Complete Reference- P17 docx

776 P a r t I I I : A p p e n d i x e s 776 P a r t I I I : A p p e n d i x e s Color Format Description Examples RGB CSS colors can also be defined using the keyword rgb, followed by three numbers between 0 and 255, contained in parentheses and separated by commas, with no spaces between them. RGB color values can also be defined using percentages. The format is the same, except that the numbers are replaced by percentage values between 0% and 100%. #p1 {color: rgb(204,0,51);} p {color: rgb(0%,10%,50%);} RGBa Color Like RBG color, but this adds an alpha channel value to specify the opacity of the color. An RGBa is specified via a function style rgba(r,g,b,a) value, where colors r, g, and b are specified as decimal values from 0 to 255 or a percentage from 0 to 100% and the alpha channel value for defining opacity is a number between 0 (fully transparent) and 1 (fully opaque). Values outside this range will be rounded up or down to fit the closest value. #redtrans {color:rgba (255,0,0,0.4);} TABLE C-4 CSS Color Values (continued) NOTE Testing reveals that depending on operating system color changes, some browsers may not map these UI color names correctly and often default to black. CSS Color-Related Properties Numerous CSS properties allow for color values. Table C-6 lists each property, a brief example of its use, and an indication in which CSS version the property first appeared. Readers looking for more information about the usage of these properties should see Chapters 5 and 6, which provide a reference for standard and emerging or nonstandard CSS properties, respectively. NOTE Some details about browser and version support, particularly in regard to the CSS 3+ related properties, are omitted from Table C-6. The purpose here is to provide a simple cross-reference. See Chapters 5 and 6 for a complete discussion of each property. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. A p p e n d i x C : C o l o r s 777 PART III A p p e n d i x C : C o l o r s 777 TABLE C-5 CSS2 UI Color Names UI Color Name Description ActiveBorder Active window border color ActiveCaption Active window caption color AppWorkspace Background color of workspace in a multiple document interface Background Desktop background color ButtonFace Face color for three-dimensional UI elements ButtonHighlight Highlight color for three-dimensional UI elements ButtonShadow Shadow color for three-dimensional UI elements ButtonText Text color on buttons CaptionText Text color in caption, size box, and scrollbar arrow box GrayText Disabled text color, which is generally gray or #000 if display does not support a solid gray color Highlight Highlight color of selections HighlightText Text color of selected items InactiveBorder Inactive window border color InactiveCaption Inactive window caption background color InactiveCaptionText Color of text in an inactive caption InfoBackground Background color for tooltips InfoText Color for tooltip text Menu Menu background color MenuText Text in menu color Scrollbar Scroll bar background color ThreeDDarkShadow Dark shadow for three-dimensional UI elements ThreeDFace Face color for three-dimensional UI elements ThreeDHighlight Highlight color for three-dimensional UI elements ThreeDLightShadow Light color for three-dimensional UI elements ThreeDShadow Dark shadow for three-dimensional UI elements Window Window background color WindowFrame Window frame color WindowText Text in window color Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 778 P a r t I I I : A p p e n d i x e s 778 P a r t I I I : A p p e n d i x e s TABLE C-6 CSS Properties Supporting Color Values Property Example CSS Version background #redFlame {background: #f00;} CSS 1+ background-color #blueFlame {background-color: #00f;} CSS 1+ border div {border: 2px double red;} CSS 1+ border-bottom #redBottom {border-bottom: thin solid red;} CSS 1+ border-bottom-color div {border: 1px solid red; border-bottom-color: orange;} CSS 2+ border-color #rainbow {border-color: red green blue orange;} CSS 1+ border-left #leftOut {border-left: thin dashed red;} CSS 1+ border-left-color #blueLeft {border-left-color: #0000FF;} CSS 2+ border-right #rightOn {border-right: thin dashed #f00;} CSS 1+ border-right-color #rightRed {border-right-color: rgb(255,0,0);} CSS 2+ border-top #boxTop {border-top: thin solid blue;} CSS 1+ border-top-color #bluetop {border-top-color: #00f;} CSS 2+ box-shadow #box1 {box-shadow: #f00 10px 10px 50px 40px;} CSS 3+ color #july4 {color: red;} CSS 1+ column-rule-color #greenRule {column-rule-color: green;} CSS 3+ outline #coupon {outline: green dashed 10px;} CSS 2+ outline-color a:hover {outline-style: dashed; outline-color: red; outline-width: 1px;} CSS 2+ scrollbar-3dlight-color #scroll2 {scrollbar-3dlight-color: red;} No Spec scrollbar-arrow-color #greenArrow {scrollbar-arrow-color: green;} No Spec Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. A p p e n d i x C : C o l o r s 779 PART III A p p e n d i x C : C o l o r s 779 Browser-Safe Colors Early on in the days of 256-color reproduction across browsers and operating systems, a special palette of only 216 colors that are “safe” was defined. This group of Web-safe colors is often called the browser-safe palette. In theory, use of other colors beyond this safe set can lead to color shifting, particularly under limited color conditions like VGA, which supports 8-bit colors, providing a mere 256 colors. The reality today is that the Web-safe palette is more historical than worrisome, especially considering how few devices are limited to an 8-bit palette. However, many tools and designers continue to promote the use of this palette, so we present it and its design for completeness. 1 NOTE Because it is difficult to present the Web-safe colors visually in a black and white book, the palette can be viewed online at www.htmlref.com/AppC/browserpalette.html. The selection of the 216 safe colors is fairly understandable if you consider the additive nature of RGB color. Consider a color to be made up of varying amounts of red, green, or blue that could be set by adjusting an imaginary color dial from the extremes of no color to Property Example CSS Version scrollbar-base-color #scroll3 {scrollbar-base-color: orange;} No Spec scrollbar-darkshadow-color #scroll4 {scrollbar-darkshadow-color: #FF0000;} No Spec scrollbar-face-color #scroll5 {scrollbar-face-color: green;} No Spec scrollbar-highlight-color #scroll6 {scrollbar-highlight-color: blue;} No Spec scrollbar-shadow-color #scroll7 {scrollbar-shadow-color: yellow;} No Spec scrollbar-track-color #scroll8{scrollbar-track-color: orange;} No Spec text-shadow .redBlur {text-shadow: 3px 3px 5px red;} CSS 3+ TABLE C-6 CSS Properties Supporting Color Values (continued) 1 The irrelevance of the Web-safe palette has been discussed since late 2000; see www.morecrayons.com for references on this topic. Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 780 P a r t I I I : A p p e n d i x e s 780 P a r t I I I : A p p e n d i x e s maximum color saturation. The safe colors use six possible intensity settings for each value of red, green, or blue. The settings are 0%, 20%, 40%, 60%, 80%, and 100%. A value of 0%, 0%, 0% on the imaginary color dial is equivalent to black. A value of 100%, 100%, 100% indicates pure white, while a value of 100%, 0%, 0% is pure red, and so on. The safe colors are those that have an RGB value set only at one of the safe intensity settings. The hex conversions for saturation are shown in Table C-7. Setting a safe color is simply a matter of selecting a combination of safe hex values. In this case, #9966FF is a safe hex color; #9370DB is not. Most Web editing tools like Adobe Dreamweaver and Microsoft Expression contain safe color pickers; as do imaging tools such as Adobe PhotoShop. However, directly mapping an “unsafe” color to its nearest safe color is fairly easy—just round each particular red, green, or blue value up or down to the nearest safe value. A complete conversion of hex to decimal values is shown in Table C-8; safe values are indicated in bold. TABLE C-7 Color Intensity Conversion Table Color Intensity Hex Value Decimal Value 100% FF 255 80% CC 204 60% 99 153 40% 66 102 20% 33 51 0% 00 0 TABLE C-8 RGB to Hexadecimal Color Conversion Chart 00=00 01=01 02=02 03=03 04=04 05=05 06=06 07=07 08=08 09=09 10=0A 11=0B 12=0C 13=0D 14=0E 15=0F 16=10 17=11 18=12 19=13 20=14 21=15 22=16 23=17 24=18 25=19 26=1A 27=1B 28=1C 29=1D 30=1E 31=1F 32=20 33=21 34=22 35=23 36=24 37=25 38=26 39=27 40=28 41=29 42=2A 43=2B 44=2C 45=2D 46=2E 47=2F 48=30 49=31 50=32 51=33 52=34 53=35 54=36 55=37 56=38 57=39 58=3A 59=3B 60=3C 61=3D 62=3E 63=3F 64=40 65=41 66=42 67=43 68=44 69=45 70=46 71=47 72=48 73=49 74=4A 75=4B 76=4C 77=4D 78=4E 79=4F 80=50 81=51 82=52 83=53 Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. A p p e n d i x C : C o l o r s 781 PART III A p p e n d i x C : C o l o r s 781 84=54 85=55 86=56 87=57 88=58 89=59 90=5A 91=5B 92=5C 93=5D 94=5E 95=5F 96=60 97=61 98=62 99=63 100=64 101=65 102=66 103=67 104=68 105=69 106=6A 107=6B 108=6C 109=6D 110=6E 111=6F 112=70 113=71 114=72 115=73 116=74 117=75 118=76 119=77 120=78 121=79 122=7A 123=7B 124=7C 125=7D 126=7E 127=7F 128=80 129=81 130=82 131=83 132=84 133=85 134=86 135=87 136=88 137=89 138=8A 139=8B 140=8C 141=8D 142=8E 143=8F 144=90 145=91 146=92 147=93 148=94 149=95 150=96 151=97 152=98 153=99 154=9A 155=9B 156=9C 157=9D 158=9E 159=9F 160=A0 161=A1 162=A2 163=A3 164=A4 165=A5 166=A6 167=A7 168=A8 169=A9 170=AA 171=AB 172=AC 173=AD 174=AE 175=AF 176=B0 177=B1 178=B2 179=B3 180=B4 181=B5 182=B6 183=B7 184=B8 185=B9 186=BA 187=BB 188=BC 189=BD 190=BE 191=BF 192=C0 193=C1 194=C2 195=C3 196=C4 197=C5 198=C6 199=C7 200=C8 201=C9 202=CA 203=CB 204=CC 205=CD 206=CE 207=CF 208=D0 209=D1 210=D2 211=D3 212=D4 213=D5 214=D6 215=D7 216=D8 217=D9 218=DA 219=DB 220=DC 221=DD 222=DE 223=DF 224=E0 225=E1 226=E2 227=E3 228=E4 229=E5 230=E6 231=E7 232=E8 233=E9 234=EA 235=EB 236=EC 237=ED 238=EE 239=EF 240=F0 241=F1 242=F2 243=F3 244=F4 245=F5 246=F6 247=F7 248=F8 249=F9 250=FA 251=FB 252=FC 253=FD 254=FE 255=FF TABLE C-8 RGB to Hexadecimal Color Conversion Chart (continued) Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. This page intentionally left blank Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. D URLs A URL (uniform resource locator) 1 is a uniform way to refer to objects and services on the Internet. Even novice users should be familiar with typing a URL, such as http://www.htmlref.com, in a browser dialog box, to get to a Web site. However, URLs can be used for far more than just retrieving a Web page and can be used to invoke other Internet services, such as transferring files via FTP or sending e-mail. Despite its potentially confusing collection of slashes and colons, URL syntax is designed to provide a clear, simple notation that people can easily understand. The concepts in this section will help you to better understand the syntax of URLs, which is key to linking documents in and beyond a Web site. NOTE The W3C often calls what end users term a URL a URI. The W3C is working from a more advanced view of Web addressing discussed later in the chapter. For this discussion we always use URL, which is more broadly understood. Interestingly the HTML5 specification drops URI in favor of the more widely understood term URL. Basic Concepts To locate any arbitrary object on the Internet, you need to find out the following information: 1. First, you need to locate and access the machine on the network on which the object resides. Locating the site might be a matter of specifying its domain name or IP address, whereas accessing the machine might require a username and password. 2. After you access the machine, you need to determine the name of the desired file, where the file is located, the position in the file as specified by a fragment identifier, and what protocol will be used to retrieve the information or access the object. In other words, a URL describes where something is and how it will be retrieved. The where is specified by the machine name, the directory name, the filename, and potentially more. 1 Some people call URLs “universal resource locators.” Except for a historical reference to “universal resource locators” in documentation from many years ago, the current standard wording is “uniform resource locator.” 783 APPENDIX Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. 784 P a r t I I I : A p p e n d i x e s 784 P a r t I I I : A p p e n d i x e s The how is specified by the protocol (for example, HTTP). Slashes and other characters are used to separate the parts of the address into machine-readable pieces. The basic structure of the URL is shown here: protocol://site address/directory/filename#fragmentid The next several sections look at the individual pieces of a URL in closer detail. Server Address A document exists on some serving computer somewhere on the global Internet or within a private intranet. The first step in finding a document is to identify its server. This may be performed by a site’s IP address, http://10.0.0.1 though it is more likely that an alphanumeric domain name is employed, http://www.htmlref.com The name may be fully qualified with a machine name, a domain, an organization type, and potentially, a country code. For example, http://www.htmlref.com would specify the name of a machine called “www” in the domain htmlref, which is in the top-level COM domain. By contrast, http://dev.htmlref.com would reference a machine known as “dev” in the same domain. Very often for primary Web sites within a domain the machine name is omitted, so we simply write http://htmlref.com However, such configuration is up to the owner of the domain. This short-hand form should be employed as most sites are reachable without a www prefix. Historically, top-level domains such as those found in Table D-1 are used. Domain Intended Type .com Commercial entities .net Networks .edu Educational institutions .org Non-Profit organizations .gov Government entities .mil U.S. military TABLE D-1 Common Top-Level Domains Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. A p p e n d i x D : U R L s 785 PART III A p p e n d i x D : U R L s 785 However, starting around 2001, the top-level domain space expanded quite a bit. A sample of the top-level domains that have been added beyond the commonly known ones is shown in Table D-2. Potentially more domains may be found at the Internet Assigned Numbers Authority (IANA) Web site (iana.org). At the time of this edition’s writing in 2009, there is a distinct possibility that arbitrary domains could be introduced. For example, .google might be top-level domain for all Google properties. Even without this happening, the top-level domain space is clearly a mess, and with generic domains on the horizon, the situation seems unlikely to get much better soon. Geographic domains are particularly common outside the United States; such a domain name typically contains more information than the organization type, with a fully qualified domain name (FQDN) including a country code as well. It generally is written as follows: machine name.domain name.domain type.country code Zone identifiers outside the U.S. use a two-character code to indicate the country hosting the server. These include .ca for Canada, .mx for Mexico, .jp for Japan, and so on. A few examples are shown here. www.unam.edu.mx www.mcgill.ca www.bbc.co.uk www.ox.ac.uk www.sony.co.jp A complete list of country codes can be found at the IANA site (iana.org). TABLE D-2 Some Newer Top-Level Domains Domain Intended Type .aero Business entities similar to .com .asia Entities in the Asia Pacific region .biz Business entities (similar to .com) .cat Catalan linguistic and cultural community-related sites .coop Cooperatives .info Information-oriented sites .jobs Job hosting sites .mobi Mobile device sites .museum Museums and similar institutions .name Individual by names .pro Professionals, particularly certified accountants, engineers, lawyers, and physicians .tel Telephone and contact information .travel Travel and tourism–related sites Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark. [...]... in the XHTML specification The DTDs • HTML 4.01 Transitional • HTML 4.01 Strict www.w3.org/TR/REC -html4 0/sgml/dtd .html • HTML 4.01 Frameset www.w3.org/TR /html4 /sgml/framesetdtd .html • XHTML 1 Transitional • XHTML 1 Strict www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd • XHTML 1 Frameset • XHTML 1.1 www.w3.org/TR /html4 /sgml/loosedtd .html www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd... http://htmlref.com/ch1/really_long_file_name .html http://htmlref.com/ch1/another-really-long-file-name .html However, depending on the special characters used, they may be encoded (see the upcoming section “Encoding” for more information) As an example, the filename “really long file name .html with spaces should encode as http://htmlref.com/ch1/another%20really%20long%20file%20name .html A dot separates the. .. of HTML is not actually specified in SGML or XML syntax NOTE XHTML 2 does have a DTD currently found at www.w3.org/MarkUp/DTD/xhtml2.dtd However, the specification is far from complete, and there is indication that the language may eventually be defined as an XML schema rather than a DTD Furthermore, circa late 2009 there is a strong indication that the XHTML 2 specification is unlikely to ever be completed... contain the address http://www.democompany.com/ Once at the site, however, there is no reason to continue spelling out the full address of the site A fully qualified link from the home page to a staff page in the root directory called staff .html would be http://www.democompany.com/staff .html The protocol, address, and directory name can be inferred, so all that is needed is the address staff .html This... omitted The combination of O for the end tag and the content model EMPTY means the end tag is forbidden Thus, under traditional HTML a tag requires a start tag but not an end tag Because a tag does not contain content, its content model is defined by the keyword EMPTY, just as it did in the XHTML specification NOTE Under standard HTML, the elements in the DTD are actually uppercase While older HTML. .. named index .html, will be returned by the Web server However, this file could be referenced directly like so: http://htmlref.com/ch1/index .html File names are arbitrary, http://htmlref.com/ch1/reallylongfilename .html http://htmlref.com/ch1/reallylongfilename .html and http://htmlref.com/ch1/REALLYLONGFILENAME .html may reference the same object or not, depending on the operating system Filenames may include... move it to another If you use absolute URLs, however, all links have to be changed if a server changes names or the files are moved to another site 796 Part III: Appendixes to use symbolic links on the Web server to reference one copy of the file from multiple locations However, because HTML is the subject here, we focus on the former solution using the base element The base element defines the base for... with other descriptive information, such as the author, publisher, and publication date, uniquely describes the book This naming scheme enables people to specify a particular book and then hunt it down The Web, however, isn’t as orderly as a library On the Web, people name their documents whatever they like, and search robots organize their indexes however they like Categorizing things is difficult The. .. support site, we would use the URL http://htmlref.com/ch1/fragmentids .html# middle Protocol Finally, we need to specify how to retrieve information from the specified location This is indicated in the URL by the protocol value A protocol is the structured discussion that computers follow to negotiate resource-specific services For example, the protocol that makes the Web possible is the Hypertext Transfer... always in uppercase, newer HTML efforts are nearly always in lowercase, given the influence of XHTML; thus we will use the common lowercase forms when discussing tags in this appendix, though the related syntax will show uppercase Most HTML and XHTML elements enclose content If a content model is declared, it is enclosed within parentheses and known as a model group The HTML 4.0 declaration for a selection . class="pro">Compact and self-contained</li> <li class="pro">No extra fetches<br><br></li> <li class="con">IE. charset=utf-8"> <title>data URI Encoded Page</title> </head> <body> <h1>I was encoded in a data URI!</h1> </body>