Tài liệu Speaking in styles- P4 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (614.84 KB, 50 trang )
128
CSS GRAMMAR
VOCABULARY
Fonts
continued
font-family Sets a speci c 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 de ned
by the browser for that style.
V : inherit | <font-name> | serif | sans-serif | cursive
| fantasy | monospace
M V: Include as many font-names as desired,
separated by commas. e browser will try each font in
sequence until it nds one it can use.
font-weight e 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.
V : normal | bold | bolder | lighter | inherit
font-variant Sets the small-cap style, where all letters are capi-
tals, but capitalized letters are slightly larger.
V : 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.
V : 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.
V : <length> | <percentage-parents-font-size> | 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 watermark.
129
font-weight: bold;
Bold
font-variant: small-caps;
S
MALL
C
APS
font-family: garamond, georgia, serif;
Garamond, Georgia, Serif
font-size: 12px;
6px
12px
18px
24px
font-style: italic;
Italic
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
130
CSS GRAMMAR
VOCABULARY
Text styles are properties applied to an entire block of text within
an element, but that do not a ect the individual letters them-
selves. is includes text spacing properties such as letter, word,
and line spacing, as well as text alignment, indents, underlining,
overline, strike-through e ects, and text capitalization.
color Sets the text color.
V : <color> | inherit
letter-spacing Places an exact amount of space between each
letter in a block of text to control the letter tracking. is 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.
V : <length> | <percentage-font-size>% | 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.
V : normal | <length> | 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.
V : normal | <number> | <length>
| <percentage-font-size>% | 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.
V : normal | pre | nowrap | pre-wrap | pre-line | inherit
Text
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
131
color: rgb(128,0,0);
text is maroon
letter-spacing: .1em;
letters are spaced apart
word-spacing: 40px;
words are spaced apart
white-space: pre;
multiple spaces are not collapsed
line-height: 2;
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
1.5
12
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
132
CSS GRAMMAR
VOCABULARY
text-align Sets the justi cation of text to le , right, center, or
full justi cation of the le and right edges.
V : le | 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. e most common use is for super-scripting
and sub-scripting text.
V : baseline | sub | super | top | text-top | middle | bottom
| text-bottom | <percentage-line-height>% | <length> | inherit
text-indent Sets an indent for the rst line in a block of text.
V : <length> | <percentage-width>% | inherit
text-decoration Sets a line to be placed over, under, or through
the text in an element. e style of the line cannot be con-
trolled and will be the same color as the text.
V : 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.
V : lowercase | capitalize | uppercase | none | inherit
Text
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
133
vertical-align: sub;
X
super
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
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
Line-through Underline Overline
text-align: center;
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
One thing was certain, that
the white kitten had had
nothing to do with it: -- it
was the black kitten's fault
entirely.
Left Center Right Justified
text-transform: uppercase;
text case
Lowercase
Text Case
Capitalize
TEXT CASE
Uppercase
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
134
CSS GRAMMAR
VOCABULARY
All elements have a background that lls 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). e 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 e shorthand property that lets you set all of the
background properties listed below at the same time.
V : <background-color> <background-image>
<background-repeat> <background-attachment>
<background-position> | none
background-color Sets the color to ll 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 ll with the
background color.
V : <color> | 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.
V : url(<url>) | none
background-attachment Controls whether an image will scroll
with the content of the element or stay xed behind it.
V : scroll | xed | inherit
Background
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
135
background: red url(bg-01.png) repeat scroll top 0;
color repeat
image
position
attachment
background-color: rgb(126,0,68);
background-image: url(bg-01.png);
background-attachment: xed;
'Here!' cried Alice, quite
forgetting in the flurry of
the moment how large she
had grown in the last few
minutes, and she jumped
up in such a hurry that she
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the
Scroll
had grown in the last few
minutes, and she jumped
up in such a hurry that she
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the
had grown in the last few
minutes, and she jumped
up in such a hurry that she
tipped over the jury-box
with the edge of her skirt,
upsetting all the jurymen on
to the
Fixed
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
136
CSS GRAMMAR
VOCABULARY
Background
continued
Image Repeat
Background image tiling is how a lot of visual design is accom-
plished, so it’s important to understand how the di erent tiling
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.
V : repeat | repeat-x | repeat-y | no-repeat | inherit
repeat Tiles the background image in the box horizontally and
vertically to ll the entire area. Repeat is most o en used for
textured backgrounds.
no-repeat e background image appears once and does not
tile. Any area not covered by the background image is lled
with the background color. No-repeat works well for water-
marks and graphic bullets.
repeat-x e background image tiles horizontally across the
element. Any area below the tiling background is lled with
the background color. Repeat-x is o en used to create header
designs by repeating a pattern or gradient across the top of an
element.
repeat-y e background image tiles vertically in the element.
Any area of the box to the right of the tiling background is
lled with the background color. Repeat-y is useful for creating
column boundaries.
For ideas on using
backgrounds in lay-
out, see Chapter 8,
“Layout.”
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
137
background-repeat if position is set to 0,0
repeat-yrepeat-x
no-repeatrepeat
background-repeat: repeat;
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
138
CSS GRAMMAR
VOCABULARY
Image Position
By default, all backgrounds are positioned in the top le corner
of the element they are in, but you can o set that position in a
number of di erent 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 le side of the element
to specify where the background will start to appear.
V : <length> | <percentage-box-width+padding>% | top
| bottom | center | le | right | center | inherit
M V: One value for both top and le position,
two values separated by a space for top and le respectively.
<length> Places the background a speci ed distance from
either the top and/or le side of the element. For example, 0 0
is the top le corner. 10px 15px pushes the background start-
ing point down 10px and over to the right by 15px.
<percentage-box-width+padding> Places the background a dis-
tance from the top and/or le 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.
le Places the le side of the background image against the le
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 le corner of the background
image in the center of the element.
Background
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
139
25px right center center
position if background-repeat is set to repeat
bottom 25px
0 0
background-position: 0 0;
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
140
CSS GRAMMAR
VOCABULARY
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 le side
that you can style, setting the margin, padding, border, width,
and height, as well as the visibility and oat.
Boxes can be set to automatically position themselves in context
to surrounding boxes in one of two ways:
Inline boxes ow side-by-side horizontally, from le to right,
with their le and right sides butting against each other, unless
separated by a margin. Inline boxes will ow until they reach the
right edge of the element and then will have a so -return to the
next line. Boxes that cannot break, such as images, will go o 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.
Box
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
141
Top
Bottom
RightLeft
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu.
Marging Border Padding
p
consec
Content
ng
t
Element Box
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
142
CSS GRAMMAR
VOCABULARY
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.
V : inline | block | list-item | none | inherit
inline Element boxes ow horizontally next to each other
from le to right.
block Element boxes ow vertically, stacking on top of each
other from top to bottom.
list-item Element boxes ow vertically, stacking on top of each
other from top to bottom, like block, but with a list-marker
and indented lines of text.
none e 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 fi t.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
143
Element 1
Element 3
Element 1 Element 2 Element 3
Inline
#e1, #e2, #e3 { display: inline; }
Element 1
Element 2
Element 3
Block
#e1, #e2, #e3 { display: block; }
#e1, #e3 { display: block; }
#e2 { display: none; }
None
<span id="e1">Element 1</span>
<span id="e2">Element 2</span>
<span id="e3">Element 3</span>
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
144
CSS GRAMMAR
VOCABULARY
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.
V : visible | hidden | inherit
opacity Sets the opacity of a box on a scale from 0.0 (clear) to
1.0 (opaque). is value a ects the opacity of the element and
all of its content and cannot be overridden by child elements.
Opacity does not currently work in IE.
V : <0.0-1.0> | inherit
lter: alpha(<0-100>) Sets the opacity of a box in IE on a
scale from 0 (clear) to 100 (opaque). is is not a true CSS
property, but it can be added to any CSS rule. If you set both
the lter: alpha and the opacity, you can be sure you have the
same value set for all browsers, including IE.
Box
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
145
Element 1
<span id="e1">Element 1</span>
<span id="e2">Element 2</span>
<span id="e3">Element 3</span>
#e1, #e3 { display: block; }
#e2 { visibility: hidden; }
Element 3
Element 1
Element 2
#e1 { opacity: 1;
lter: alpha(100); }
#e2 { opacity: .5;
lter: alpha(50); }
#e3 { opacity: .25;
lter: alpha(25); }
Element 3
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
146
CSS GRAMMAR
VOCABULARY
Float
A oating element is one whose box aligns itself to the le or
right. Surrounding content then wraps around it. is is o en
used to oat images with or without captions, but can also be
used for sidebars, pull quotes, or any other elements with a close
association with the main text.
oat Positions the box to the le 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
oated next to each other, then they will line up horizontally
as space allows.
V : le | right | none | inherit
clear When applied to an element that has been placed below
a oating element, oating stops, with the cleared element
again appearing beneath the oating element. Floating can be
speci cally cleared on the le , right, or completely cleared on
both sides.
V : none | le | right | both | inherit
Box
continued
The fl oat property
has become crucial
to multi-column Web
layouts, as explained
in Chapter 8, “Layout.”
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
147
<p id="e1">Element 1</p>
<p id="e2">One thing was…</p>
<p id="e3">e way Dinah…</p>
#e1{
width: 75px;
height: 150px;
oat: right; }
One thing was certain, that
the white kitten had had
nothing to do with it: -- it was
the black kitten's fault
entirely. For the white kitten
had been having its face
washed by the old cat for the
last quarter of an hour (and
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…
Element 1
One thing was certain, that
the white kitten had had
nothing to do with it: -- it was
the black kitten's fault
entirely. For the white kitten
had been having its face
washed by the old cat for the
last quarter of an hour (and
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…
Element 1
#e1{
width: 75px;
height: 150px;
oat: right; }
#e3{ clear: right; }
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
