Tài liệu Speaking in styles- P4 ppt

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

Fonts continued

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 defi ned

by the browser for that style

Values: inherit | <font-name> | serif | sans-serif | cursive

Multiple Values: Include as many font-names as desired, separated by commas Th e browser will try each font in sequence until it fi nds one it can use

ver-sion of the default If a bold verver-sion of the font does not exist, the browser will simulate one based on the default pattern

Values: normal | bold | bolder | lighter | inherit

capi-tals, but capitalized letters are slightly larger

Values: normal | small-caps | inherit

brows-ers will treat both values as italic if a true italic vbrows-ersion 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

Values: normal | italic | oblique | inherit

percent-age based on the size of the font of the parent element

Values: <length> | <percentage-parents-font-size> | smaller

font-weight: bold;

Bold

font-variant: small-caps;

font-family: garamond, georgia, serif;

Garamond, Georgia, Serif

font-size: 12px;

font-style: italic;

Italic

Text styles are properties applied to an entire block of text within

an element, but that do not aff ect the individual letters selves Th is includes text spacing properties such as letter, word, and line spacing, as well as text alignment, indents, underlining, overline, strike-through eff ects, and text capitalization

Values: <color> | inherit

letter in a block of text to control the letter tracking Th 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

Values: <length> | <percentage-font-size>% | inherit

word in a block of text Like letter spacing, this is a rough way

to adjust spacing and is best used with large text

Values: normal | <length> | inherit

of text Adjusting line height to at least 1.5 (=150%) orhigher is generally recommended to make large blocks oftext more readable

Values: normal | <number> | <length>

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

Values: normal | pre | nowrap | pre-wrap | pre-line | inherit

Text

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

text-align Sets the justifi cation of text to left , right, center, or full justifi cation of the left and right edges

Values: left | center | right | justify | inherit

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 Th e most common use is for super-scriptingand sub-scripting text

Values: baseline | sub | super | top | text-top | middle | bottom

Values: <length> | <percentage-width>% | inherit

the text in an element Th e style of the line cannot be trolled and will be the same color as the text

con-Values: none | line-through | underline | overline | blink | inherit

text, regardless of the state of the originating text

Values: lowercase | capitalize | uppercase | none | inherit

Text continued

vertical-align: sub;

text-indent: 1em;

O n e t h i n g w a s 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 nothing to do with it: it was the black kitten's fault entirely.

One thing was certain, that nothing to do with it: it was the black kitten's fault entirely.

One thing was certain, that the white kitten had had 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 nothing to do with it: it was the black kitten's fault entirely.

All elements have a background that fi 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) Th 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 properties listed below at the same time

Values: <background-color> <background-image>

<background-repeat> <background-attachment>

behind the content up to its border Any area of the ground not covered by a background image will fi ll with the background color

back-Values: <color> | transparent | inherit

ele-ment’s content and padding You can use PNG (8, 24, or 32), JPEG, or GIF image formats

Values: url(<url>) | none

with the content of the element or stay fi xed behind it

Values: scroll | fi xed | inherit

Background

background: red url(bg-01.png) repeat scroll top 0;

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

Background continued

Image Repeat

Background image tiling is how a lot of visual design is plished, so it’s important to understand how the diff erent tiling methods work and what they are for

image repeats (or not) You can set the background to tile, tile horizontally, tile vertically, or just appear once

Values: repeat | repeat-x | repeat-y | no-repeat | inherit

vertically to fi ll the entire area Repeat is most oft en used for textured backgrounds

tile Any area not covered by the background image is fi lled with the background color No-repeat works well for water-marks and graphic bullets

element Any area below the tiling background is fi lled with the background color Repeat-x is oft en used to create header designs by repeating a pattern or gradient across the top of an element

Any area of the box to the right of the tiling background is

fi 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.”

background-repeat if position is set to 0,0

repeat-y repeat-x

no-repeat repeat

background-repeat: repeat;

Image Position

By default, all backgrounds are positioned in the top left corner

of the element they are in, but you can off set that position in a number of diff erent ways Background positions can be set using one value or two values to set its horizontal and vertical positions

space for the distance from the top or left side of the element

to specify where the background will start to appear

Values: <length> | <percentage-box-width+padding>% | top

Multiple Values: One value for both top and left position, two values separated by a space for top and left respectively.

either the top and/or left side of the element For example, 0 0

is the top left corner 10px 15px pushes the background ing point down 10px and over to the right by 15px

dis-tance from the top and/or left side of the element, calculated as

a percentage of the width or height of the element For ple, if the box was 10px by 20 px, and the background position

exam-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 of the element

side of the element

right side of the element

image in the center of the element

Background continued

25px right center center

position if background-repeat is set to repeat

bottom 25px

0 0

background-position: 0 0;

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 left side that you can style, setting the margin, padding, border, width, and height, as well as the visibility and fl oat

Boxes can be set to automatically position themselves in context

to surrounding boxes in one of two ways:

Inline boxes fl ow side-by-side horizontally, from left to right,

with their left and right sides butting against each other, unless separated by a margin Inline boxes will fl ow until they reach the right edge of the element and then will have a soft -return to the next line Boxes that cannot break, such as images, will go off 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 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

butt-Box

Bottom

Right Left

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.

p

consec

Content

ng t

Element Box

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

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

Values: inline | block | list-item | none | inherit

from left to right

other from top to bottom

other from top to bottom, like block, but with a list-marker and indented lines of text

none Th e element is completely removed from the document

C o m i n g S o o n : I n l i n e - b l o c k

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.

#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>

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:

element will still take up space but will appear to be empty, like the invisible man in a rain storm

Values: visible | hidden | inherit

1.0 (opaque) Th is value aff 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

Values: <0.0-1.0> | inherit

scale from 0 (clear) to 100 (opaque) Th is is not a true CSS property, but it can be added to any CSS rule If you set both

same value set for all browsers, including IE

  

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

A fl oating element is one whose box aligns itself to the left or right Surrounding content then wraps around it Th is is oft en used to fl 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

element Any content below the element will wrap around it

in moving up into the available space If multiple elements are

fl oated next to each other, then they will line up horizontally

as space allows

Values: left | right | none | inherit

a fl oating element, fl oating stops, with the cleared element again appearing beneath the fl oating element Floating can be specifi cally cleared on the left , right, or completely cleared on both sides

Values: none | left | right | both | inherit

The fl oat property

has become crucial

to multi-column Web

layouts, as explained

in Chapter 8, “Layout.”

  

<p id="e1">Element 1</p>

<p id="e2"> One thing was… </p>

<p id="e3"> The way Dinah… </p>

t h e b l a c k k i t t e n ' s f a u l t entirely For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and

b e a r i n g i t p r e t t y w e l l , 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

t h e b l a c k k i t t e n ' s f a u l t entirely For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and

b e a r i n g i t p r e t t y w e l l , 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…

Width and Height

Width and height properties allow you to specify the sions of the content area of the box Padding and border are then added to this to create the apparent width and height of the box, which is how much space it will take up in the design

Values: <length> | <percentage-parent-width>% | auto | inherit

Values: <length> | <percentage-parent-height> | auto | inherit

area for the box is not large enough to accommodate it You can choose to hide the excess content, show the content, thus overriding the height value, force a scroll, or allow the browser

to determine whether a scroll is needed or not (auto)

Values: hidden | visible | scroll | auto | inherit

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

b e a r i n g i t p r e t t y w e l l , considering); so you see that

it couldn't have had any hand in the mischief. The White KittenThe way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr no doubt feeling that it was all meant for its good.

then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr no doubt feeling that it was all meant for its good.

Maximum and Minimum Width and Height

One of the key diff erences between designing for the Web and designing for other media, such as print or TV, is that the user controls the size of the browser viewport—the area in which your designs are viewed in—and can change the width and height at will Instead of setting an absolute width and height, you also have the option of setting a width and height range to allow the content to stretch to fi t the viewport area, while still not allowing

it to shrink or grow to uncomfortable dimensions

It is important to note that these properties do not work in IE6,

so an absolute width and height should be set fi rst to date that browser

of an element Th e element will grow to that size if the area is available, but no further

Values: <length> | <percentage-parent-width/height> | auto

an element Th e element will shrink to that size when the area

is limited, but no further

Values: <length> | <percentage-parent-width/height> | auto

b e a r i n g i t p r e t t y w e l l , considering); so you see that

it couldn't have had any hand in the mischief. The White KittenThe way Dinah washed her children's faces was this: first she held the poor thing down by its ear with one paw, and then with the other paw she rubbed its face all over, the wrong way, beginning at the nose: and just now, as I said, she was hard at work on the white kitten, which was lying quite still and trying to purr no doubt feeling that it was all meant for its good.

then with the other paw she rubbed it wrong way, beginning at the nose: and she was hard at work on the white kitt quite still and trying to purr no doubt all meant for its good.

Stretch

he White Kitten faces was this: first

r with one paw, and

ts face all over the

just now, as I said, ten, which was lying

t feeling that it was

An element’s border is the rule around its box on the top, right, bottom, and left A border can have any thickness and color, and you can select from a limited number of styles Set the border on all four sides to be the same, or set each side individually

properties for the box in one line, with values separated by a space All three values must be declared in order for the border

to appear

Values: <border-width> <border-color> <border-style>

Values: <length> | thin | medium | thick | inherit

Multiple Values: One value for all four sides, two values

separated by a space for top/bottom and left /right, or four

values separated by spaces for top, right, bottom, and left , in that order

Values: <color> | transparent | inherit

Multiple Values: Same as border-width

Values: none | dotted | dashed | solid | double | groove | ridge

Multiple Values: Same as border-width

short-hand properties for setting the border properties on the cated side of the box

indi-Values: <border-width> <border-color> <border-style>

property for the indicated side of the box

Values: Varies depending on property