Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống
1
/ 50 trang
THÔNG TIN TÀI LIỆU
Thông tin cơ bản
Định dạng
Số trang
50
Dung lượng
383,27 KB
Nội dung
min-height
This specifies the maximum height of a block-level element (same values as for height).
td {min-height:100px;}
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
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
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
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 621
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Margin Properties
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 Properties
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
Value IE N FF Inherited No
auto
3 4 1 Default zero
[length] 3 4 1 Applies to All elements
[percentage —
relative to parent
element]
3 4 1
inherit
- 6 1
622
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 622
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
List Properties
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}
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
Value IE N FF Inherited Yes
<position>
4 6 1 Default
Depends on browser
<type>
4 4 1 Applies to List elements
<image>
4 6 1
inherit
- 6 1
Value IE N FF
[percentage —
relative to parent
element]
4 4 1
inherit
- 6 1
623
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 623
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
list-style-type
This indicates the type of bullet or numbering that a bullet should use.
ul {list-style-type:circle;}
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, . . . )
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
624
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 624
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
marker-offset
This specifies the space between a list item and its marker.
ol {marker-offset:2em;}
Positioning Properties
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;
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, . . . )
Value IE N FF Inherited No
[length] - 7 1 Default
auto
auto
- 7 1 Applies to Marker elements
inherit
- 6 1
625
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 625
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Top
This sets the vertical position of an element from the top of the window or containing element.
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 -
relative to
parent’s width]
4 6 1
inherit
- 6 1
Value IE N FF Inherited No
auto
4 6 1 Default
auto
[length] 4 6 1 Applies to Positioned elements
[percentage -
relative to
parent’s height]
4 6 1
Inherit
- 6 1
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
626
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 626
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
bottom
This sets the vertical position of an element from the bottom of the window or containing element.
right
This sets the horizontal position of an element from the window or containing element.
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.
Value IE N FF Inherited No
auto
5 6 1 Default
auto
[length] 5 6 1 Applies to Positioned elements
[percentage -
relative to
parent’s width]
5 6 1
inherit
- 6 1
Value IE N FF Inherited No
auto
5 6 1 Default
auto
[length] 5 6 1 Applies to Positioned elements
[percentage -
relative to
parent’s height]
5 6 1
inherit
- 6 1
627
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 627
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
❑ 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;}
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
source document
[number] 4 4 1
inherit
- 6 1 Applies to Positioned elements
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
to line height]
- 6 1
[length] - - -
inherit
4 6 1
628
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 628
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
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)
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;}
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.
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
Value IE N FF Inherited No
auto
4 - 1 Default
auto
rect
4 6 1 Applies to Block elements
inherit
- 6 1
629
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 629
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Outline Properties
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.
Table Properties
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
elements
inherit
- 6 1
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
630
Appendix C: CSS Properties
59313bapp03.qxd:WroxPro 3/23/08 2:08 PM Page 630
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
[...]... with circumflex ë ở ë Latin small letter e with diaeresis ì ỡ ì Latin small letter i with grave í ớ í Latin small letter i with acute î ợ î Latin small letter i with circumflex ï ù ï Latin small letter i with diaeresis ð ð Latin small letter eth ñ ủ ñ Latin small letter n with tilde ò ũ ò Latin small letter o with. .. É ẫ É Latin capital letter E with acute Ê ấ Ê Latin capital letter E with circumflex Ë ậ Ë Latin capital letter E with diaeresis Ì è Ì Latin capital letter I with grave Í Í Latin capital letter I with acute Î ẻ Î Latin capital letter I with circumflex Ï ẽ Ï Latin capital letter I with diaeresis Ð é Ð Latin capital... letter O with diaeresis × ì × Multiplication sign Ø ỉ Ø Latin capital letter O with stroke = Latin capital letter O slash Ù Ù Latin capital letter U with grave Ú Ú Latin capital letter U with acute Û Û Latin capital letter U with circumflex Ü ĩ Ü Latin capital letter U with diaeresis Ý í Ý Latin capital letter Y with acute... (The American Standard Code for Information Interchange), and it is probably the most widely used character set for encoding text electronically You can expect all computers browsing the Web to understand ASCII Character Set Description ASCII American Standard Code for Information Interchange, which is used on most computers The problem with ASCII is that it supports only the upper- and lowercase Latin... Latin small letter o with acute ô ụ ô Latin small letter o with circumflex õ ừ õ Latin small letter o with tilde ö ử ö Latin small letter o with diaeresis ÷ ữ ÷ Division sign ø ứ ø Latin small letter o with stroke = Latin small letter o slash ù ự ù Latin small letter u with grave ú ỳ ú Latin small letter u with acute û... letter sharp s = ess-zed à à Latin small letter a with grave = Latin small letter a grave á ỏ á Latin small letter a with acute â õ â Latin small letter a with circumflex ã ó ã Latin small letter a with tilde ä ọ ä Latin small letter a with diaeresis å ồ å Latin small letter a with ring above = Latin small letter a ring æ ổ æ... 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... capital letter A with circumflex à à Latin capital letter A with tilde Ä Ä Latin capital letter A with diaeresis Å Å Latin capital letter A with ring above = Latin capital letter A ring Æ ặ Æ Latin capital letter AE = Latin capital ligature AE Ç ầ Ç Latin capital letter C with cedilla È ẩ È Latin capital letter E with grave É... 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... 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, remembering each color name and the . 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. 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: