Tài liệu Web Programming with HTML, XHTML, and CSS Second Edition- P14 docx

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

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;}

Padding Proper ties

Padding properties set the distance between the border of an element and its content They are tant for adding white space to documents (in particular table cells)

impor-padding (impor-padding-bottom, impor-padding-left, padding-right, padding-top)

This specifies the distance between an element’s border and its content

td {padding:20px;}

[percentage —relative to parentelement]

Appendix C: CSS Properties

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-positionand list-style-type

ul {list-style: inside disc}

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;}

<position> 4 6 1 Default Depends on browser

<type> 4 4 1 Applies to List elements

[percentage —relative to parentelement]

Appendix C: CSS Properties

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, )

disc (default) 4 4 1 Applies to List elements

zero

This specifies the space between a list item and its marker

ol {marker-offset:2em;}

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, youalso need to use the box-offset properties covered next (top, left, bottom, and right) Note that youshould not use topand bottomor leftand righttogether (if you do, topand lefttake priority)

❑ absolutecan be fixed on the canvas in a specific position from its containing element (which isanother absolutely positioned element); it will also move when the user scrolls the page

❑ staticwill fix it on the page in the same place and keep it there even when the user scrolls

❑ relativewill be placed offset in relation to its normal position

❑ fixedwill fix it on the background of the page and not move when the user scrolls

p.article{position:absolute; top:10px; left:20px;

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, )

Appendix C: CSS Properties

[percentage - relative to parent’s width]

[percentage - relative to parent’s height]

Appendix C: CSS Properties

This sets the vertical positioning of an inline element:

❑ baselinealigns element with base of parent

❑ middlealigns midpoint of element with half the height of parent

❑ submakes element subscript

❑ makes element superscript

[percentage - relative to parent’s width]

[percentage - relative to parent’s height]

Appendix C: CSS Properties

❑ topaligns top of element with top of tallest element on current line.

❑ bottomaligns element with bottom of lowest element on the current line

This specifies how a container element will display content that is too large for its containing element.

p {width:200px; height:200px; overflow:scroll;}

overflow-x

Same as overflow, but only for the horizontal x-axis First supported in IE5

overflow-y

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-widthproperties:

outline {solid #ff0000 2px}

Note that outline-color, outline-style, and outline-widthtake the same values as color, border-style,and border-width They are not covered individually, because they are notsupported yet

border-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 collapsedinto one value or kept separate)

table {border-collapse:separate;}

inline elements

outline-style - - 1.5 Applies to All elements

Appendix C: CSS Properties

Specifies how the browser should calculate the layout of a table; can affect the speed of rendering a large

or graphics-intensive table

Classification Proper ties

Classification properties affect how the boxes in the box model are rendered

inline elements

Appendix C: CSS Properties

span.important {display:block;}

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 itsinherent display type Block-level elements, such as headings and paragraphs, get treated as if thedefault were block, whereas inline elements such as <i>, <b>, or <span>get treated as inline

Appendix C: CSS Properties

Inter nationalization Proper ties

Internationalization properties affect how text is rendered in different languages

Appendix C: CSS Properties

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 upthe 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 eachcolor

Using Hex Codes to Specify Color s

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

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 Tocreate the image you see onscreen, each of the pixels that make up the screen emits different amounts ofthe 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 arerequired 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 storeinformation

Under standing 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:

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 canget 16 different values For example, using combinations of four 0s and 1s, you can represent the digits 0through 9 (and still have values to spare):

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 1111Hexadecimal 4 F

This gives 256 possible combinations of 0s and 1s, plenty for the characters of the English language, andyes, 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 agreethat #4F4F4Fis a lot easier to read than 010011110100111101001111 The following table shows somemore hexadecimal codes and their corresponding decimal numbers

Using Color Names to Specify Color s

Appendix D: Color Names and Values

Although names might sound a lot easier to understand than hex codes, some of the colors are easier toremember 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 colorsthat represent their brand, and their color might not have an HTML name Indeed, when clients specifythe color they want, they usually specify a hex code

Hex Codes ver sus 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, bering each color name and the color it gives you is very difficult

remem-In practice, you often end up referring to a color chart to find the color you want, whether you’re ing with hex codes or color names Given that hex codes give you many more choices of shades, tints, andhues of colors than color names, and bearing in mind that a lot of companies ask for specific colors torepresent their company, hex codes tend to be the choice of web professionals

work-If you are using either a graphics program or a web page authoring tool, that program will usually erate the color code you need for you, and many graphics packages also have a color-picking tool to helpyou select the exact color you want You can also find color picking tools on several web sites such as

gen-www.visibone.com/colorlab/ Figure D-2 shows the color picker from Photoshop

Figure D-2

Appendix D: Color Names and Values

most computers can handle many more than the 256 colors in the web-safe color palette and this cansafely be ignored

Color Name and Number Reference

The following table shows the 16 color names that were introduced in HTML 3.2 to support the 16 colorsthat 8-bit graphics cards offered

All of the colors listed in the table that follows are available in IE, and most in Netscape and Firefox, too.However, they are browser extensions, not part of the HTML or XHTML recommendations

Appendix D: Color Names and Values

Color Name Hex Value Color Name Hex Value

lightgoldenrodyellow #fafad2 mediumturquoise #48d1cc

Appendix D: Color Names and Values

Color Name Hex Value Color Name Hex Value

Appendix D: Color Names and Values

Character Encodings

In Appendix D, I discussed how computers store information, how a character-encoding scheme is

a table that translates between characters, and how they are stored in the computer

The most common character set (or character encoding) in use on computers is ASCII (The AmericanStandard Code for Information Interchange), and it is probably the most widely used character setfor encoding text electronically You can expect all computers browsing the Web to understand ASCII

The problem with ASCII is that it supports only the upper- and lowercase Latin alphabet, thenumbers 0–9, and some extra characters: a total of 128 characters in all Here are the printable char-acters of ASCII (the other characters are things such as line feeds and carriage-return characters)

Character Set Description

ASCII American Standard Code for Information Interchange, which is used on

most computers

mark characters) If you do not indicate the character encoding the document is written in, some of thespecial characters might not display.

The International Standards Organization created a range of character sets to deal with different nationalcharacters ISO-8859-1 is commonly used in Western versions of authoring tools such as MacromediaDreamweaver, as well as applications such as Windows Notepad

Character Set Description

ISO-8859-1 Latin alphabet part 1

Covering North America, Western Europe, Latin America, the Caribbean,Canada, Africa

ISO-8859-2 Latin alphabet part 2

Covering Eastern Europe including Bosnian, Croatian, Czech, Hungarian,Polish, Romanian, Serbian (in Latin transcription), Serbocroatian, Slovak,Slovenian, Upper Sorbian, and Lower Sorbian

ISO-8859-3 Latin alphabet part 3

Covering SE Europe, Esperanto, Maltese, and Turkish miscellaneous othersISO-8859-4 Latin alphabet part 4

Covering Scandinavia/Baltics (and others not in ISO-8859-1)ISO-8859-5 Latin/Cyrillic alphabet part 5

ISO-8859-6 Latin/Arabic alphabet part 6ISO-8859-7 Latin/Greek alphabet part 7ISO-8859-8 Latin/Hebrew alphabet part 8ISO-8859-9 Latin 5 alphabet part 9 (same as ISO-8859-1 except Turkish characters replace

Icelandic ones)ISO-8859-10 Latin 6 Lappish, Nordic, and EskimoISO-8859-15 The same as ISO-8859-1 but with more characters addedISO-8859-16 Latin 10

Covering SE Europe Albanian, Croatian, Hungarian, Polish, Romanian andSlovenian, plus can be used in French, German, Italian, and Irish GaelicISO-2022-JP Latin/Japanese alphabet part 1

Appendix E: Character Encodings

It is helpful to note that the first 128 characters of ISO-8859-1 match those of ASCII, so you can safely usethose characters as you would in ASCII.

The Unicode Consortium was then set up to devise a way to show all characters of different languages,

rather than have these different incompatible character codes for different languages

Therefore, if you want to create documents that use characters from multiple character sets, you will be able

to do so using the single Unicode character encodings Furthermore, users should be able to view ments written in different character sets, providing their processor (and fonts) support the Unicode stan-dards, no matter what platform they are on or which country they are in By having the single characterencoding, you can reduce software development costs because the programs do not need to be designed

docu-to support multiple character encodings

One problem with Unicode is that a lot of older programs were written to support only 8-bit charactersets (limiting them to 256 characters), which is nowhere near the number required for all languages.Unicode therefore specifies encodings that can deal with a string in special ways so as to make enoughspace for the huge character set it encompasses These are known as UTF-8, UTF-16, and UTF-32

The first 256 characters of Unicode character sets correspond to the 256 characters of ISO-8859-1

By default, HTML 4 processors should support UTF-8, and XML processors are supposed to supportUTF-8 and UTF-16; therefore, all XHTML-compliant processors should also support UTF-16 (as XHTML

is an application of XML)

For more information on internationalization and different character sets and encodings, see

www.i18nguy.com/

Character Set Description

UTF-8 A Unicode Translation Format that comes in 8-bit units That is, it comes in

bytes A character in UTF-8 can be from 1 to 4 bytes long, making UTF-8

variable width

UTF-16 A Unicode Translation Format that comes in 16-bit units That is, it comes in

shorts It can be 1 or 2 shorts long, making UTF-16 variable width.

UTF-32 A Unicode Translation Format that comes in 32-bit units That is, it comes in

longs It is a fixed-width format and is always 1 ``long” in length.

Appendix E: Character Encodings