Tài liệu Speaking in styles- P7 pptx

writers or editors from adding inline or embedded styles when they need a particular style.Beyond standard CSS best practices, there are a few things to keep in mind when creating your o

Trang 1

T H E L A ST W O R D

A CSS framework is a library of generic styles that can be easily

external style sheets that package ready-made design solutions for common elements such as headers, columns, footers, and sections

Using a CSS framework allows designers quick and easy access to well tested, cross-browser compatible, and standards-compliant

On the downside, when you use a CSS framework you import code that you may or may not use, but which will increasedownload time In addition, you are relying on pre-built code

of CSS frameworks, so choosing one will depend on what you need it to do

Here are some popular CSS frameworks to get you started:

Blueprint Provides a solid layout grid, typographic controls, and a style sheet for printing Link: blueprintcss.org

Emastic Uses ems to create elastic layouts

YUI Grids Yahoo’s CSS Grids framework provides fi xed and

fl uid layouts Link: developer.yahoo.com/yui/gridsCSS Frameworks

Trang 2

writers or editors from adding inline or embedded styles when they need a particular style.

Beyond standard CSS best practices, there are a few things to keep in mind when creating your own CSS framework:

Use a class name prefi x to ensure that your framework

will not confl ict with other classes.

Add a three- to six-letter prefi x before all framework classes

to ensure they do not confl ict with other styles

Keep the rules as generic as possible.

interfere with other site-wide styles

Provide styles for common layout elements such as

columns, drop-boxes, article excerpts, small print, and image captions.

Framework styles should be used primarily for layout and for creating commonly used editorial styles

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

Trang 3

CSS for Other Media

Mobile DevicesMobile devices are a popular way to access the Web, but not particularly good for displaying Web pages designed for larger screens Fortunately, CSS allows you to set style sheets specifi cally for mobile screens, but you need to keep a few things in mind when creating mobile designs:

Use a single column with no horizontal scrolling.

Most mobile devices have a portrait rather than landscape orientation, which limits horizontal design

Provide constant top level navigation and hide

to navigate through all links in order to select one of them

Minimize the use of foreground and background images.

Although images might be a necessary part of the content, it’s better to provide links to larger images and eliminate any

load and easier to read on small screens

Keep the design simple

Simple, well-structured pages will be much easier to use on small mobile screens

Setting the media

type is explained

in the “Media”

sec-tion of Chapter 5,

“Semantics.”

Trang 4

PrintViewing a printed Web page is a very diff erent experience than viewing it on a screen (even a small screen) Paper, by its very nature, is not hyper-textual However, paper is more portable and cheaper than a computer, and many of your visitors will opt to print Web pages rather than reading them on the screen To that end, you should adapt your designs for print:

Hide navigation and ads.

No matter how hard you press on the piece of paper, it will not jump to another piece of paper So all linked elements should be hidden by using display: none

Consider colors and images carefully.

Remember that what looks good on the screen doesn’t essarily look good when printed

nec- Do not rely on background images for layout or bullets.

Many people will turn background images off , so do not assume those images will print

Use point sizes for font sizes.

Although not preferred for screen layout, point sizes are fect for print

per- Allow maximum width for important content.

Columns on printed pages should allow the maximum ing area for important content

read- Display custom content such as link URLs and footers.

Since the reader may not have the URLs listed, set up your pages to list any link URLs either at the end of the article or next to the links in context

Trang 5

CSS Best Practices

of techniques possible with CSS, knowing that the future of Web design with CSS is not in what we know how to do now,

many well-tested techniques that are widely accepted as CSS best practices Many of these best practices have more to do with the limitation of the medium and browsers than they do with good design practice, but knowing them can speed your development process and lead to better designs

General

Use external style sheets

possible, though, when styles are collected into external style sheet fi les

@import has the advantage that it can be used equally

well in both HTML documents and external CSS fi les

Unfortunately there are issues in IE—styles imported using

@import will not load until aft er the content, causing a delay

in page loading If you notice problems with pages loading, use <link> instead of @import

Link to CSS for screen, print, and handheld media.

CSS should be used to tailor the content for each output media Designers need to consider how the page will look when printed or viewed on handheld devices

External style sheets

are explained in

“Where to Put Style

Rules” in Chapter 5,

“Semantics.”

Screen, print, and

handheld media are

explained in“Media”

in Chapter 5,

“Semantics.”

Trang 6

Avoid inline styles.

Inline styles cannot be overridden, making it impossible to change whatever styles they set and limiting design fl exibil-ity Inline styles also increase the code-to-text ratio, dimin-ishing search engine optimization (SEO) and lowering your ranking in many search engines

Avoid embedded styles in the body.

When placed in the body, embedded styles oft en render aft er the page content has loaded, causing an unattractive re-

ratio, diminishing SEO

If you have to use embedded styles, add them only in the

<head> and keep them brief.

will be rendered before the content is displayed, they limit design fl exibility and will add more code, diminishing SEO

Although a useful tool during development and prototyping

of your site, making a declaration important reduces design

fl exibility and can oft en be confusing for later developers who may need to override the style

Use concise, meaningful classes and IDs.

Avoid using names that describe the style being applied,

as this will cause problems if those styles need to change

Instead, use names that describe the function of the class or

ID For example, instead of naming a class redtext, name it

hilight or hilighterror.

!important

is explained in“Importance”

in Chapter 5,

“Semantics.”

Trang 7

Design

diagrams, and so on), not for your interface.

Placing an image in your HTML means that it cannot be easily styled or changed Virtually all interface chrome—

including icons, logos, controls, and buttons—can be added

will cut down on the amount of code in your HTML, which

is better for SEO, and allow for greater versatility whenredesigning

HTML should never be used for style, only for structure.

HTML is intended to structure the page

Placing tags such as <b> or <i> specify a particular style rather than structure Instead use tags that add as few browser styles as possible, for example <strong> and <em>

Avoid using padding and borders for fi xed-dimension

Use CSS sprites for buttons and controls.

CSS sprites allow you to download fewer images and avoid the annoying “fl ash” as images load during link state changes

CSS Best Practices continued

the box model

prob-lem, see “Fixing

IE6” in Chapter 6,

“Vocabulary.”

Trang 8

Coding

Add comments to your CSS wherever possible to help

explain what’s going on.

Notes can be added as a last step in development, but should

be included to help future designers and developers

Always add a semicolon at the end of every declaration.

Even if it is the last CSS rule in the list, add the semicolon to avoid future aggravation

Specify units except for 0

0 is zero no matter what the unit, but in most cases a unit

is needed line-height and opacity are the two exceptions whose values do not have units

Use RGB values for colors.

Although colors can be defi ned in a variety of ways in CSS, RGB values provide a broader gamut and are easier to change using JavaScript

Use ems for all sizes or ems for font sizing, pixels for

absolute sizes, and percentages for relative sizes.

better for creating Web designs If you choose to go with all ems, you need to become familiar with a good pixel-to-em calculator, like Em Calculator (riddle.pl/emcalc)

Limit the scope of rules.

Using IDs and classes, you can ensure that styles are only applied where you want them and don’t “leak” over into other areas or cause style confl icts

Comments are explained in the section “Adding Notes to CSS” in Chapter 5,

“Semantics.”

For details about values in CSS, see Appendix B, “CSS Values.”

Trang 9

Optimizing

Use CSS property shortcuts wherever possible.

Many CSS properties can be combined into a single erty using a shortcut For example,

prop-border-top:5px; border-right:5px;

border-bottom:1px; border-left :2px;

can better be expressed as:

border:5px 5px 1px 2px;

Don’t add redundant styles.

Once a style property is set for an element, it will be ited by all elements with that selector type (HTML, class, or ID) on the page and their child elements

inher- Use as few IDs as possible, and use each only once per

Web page.

gets Generally you can get by with only a few IDs for major page grid sections If you can use more than one ID in a con-textual selector, you’ve got too many IDs

Use as few classes as possible.

As with IDs, the more classes on your page, the more plicated your code Classes are useful for styling similar types

com-of elements, but not every instance com-of an element needs its own class

Try to end contextual rules with an HTML selector.

Although not a hard and fast rule, the more CSS contextual rules you can end with an HTML selector, the more you are minimizing the number of IDs and classes in your code

CSS Best Practices continued

Trang 10

This page intentionally left blank

Trang 11

3 0 3 B : C S S Va l u e s

3 1 7 C : F i x i n g I n t e r n e t E x p l o r e r

Trang 12

Trang 14

A PPENDIX A

voxLibris Code

Chapters 7 through 11 use the example of a fi ctional site called

voxLibris to show off various CSS techniques I broke the code

down and sometimes simplifi ed it in those chapters

HTML and CSS—used to create the site You can also download the code from:

speaking-in-styles.com/book

Trang 15

A : VOX L I B R I S C O D E

index.html

For details about

index.css, see Chapter

8, “Layout.”

B o o k s S h o u l d B e F r e e

The inspiration for voxLibris comes from a Web

site called booksshouldbefr ee.com, which

col-lects audio recordings of public domain books,

making them available for free download.

all of the HTML needed to create the structure of the page, but none of the styles As with all HTML pages, it is composed of

the <body> tags (08–139)

One other important note: I have included a break at the bottom

of most rows and columns with the alignclear class, which stops

fl oating:

<br class="alignclear"/>

CSS to make sure that a parent element stretches to the full height of its children

Trang 16

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"z "http://www.

24 <div id="content" class="row">

25 <div id="aside1" class="column">

26 <div id="menumain" class="section">

27 <h2>Welcome</h2>

28 <div class="content">

29 <p>voxLIBRIS provides public domain

audiobooks you can download fr ee of charge.</p>

56 <div id="article1" class="column">

57 <div id="genrelist" class="section">

Trang 17

77 <p>Nulla sed felis Sed et tellus </p>

78 <p>Suspendisse aliquam suscipit elit

85 <h3>voxLIBRIS Adds 30 New Books</h3>

86 <p>Lorem ipsum dolor sit amet…</p>

87 <p><a href="#" class="readmore">Read More

</a></p>

88 </div>

89 <div class="column">

90 <h3>New Categories Coming Next Month</h3>

91 <p>Lorem ipsum dolo…</a></p>

99 <p>Lorem ipsum dolor si…</p>

100<p><a href="#" class="readmore">Read More

</a></p>

101</div>

102<div class="column">

103<h3>Dead Men’s Money by J.S Fletcher</h3>

104<p>Lorem ipsum…</p><p><a href="#"

109<div id="aside2" class="column">

110<div id="" class="section topbooks">

small/through-the-looking-height="186"/><cite>Th rough the Looking Glass</cite>by Lewis Carol

125<div id="footer" class="row">

Trang 18

oft en easiest to keep your CSS in several distinct fi les, using

@import to add them to the master style sheet Th is makes fi nding code easier, and makes switching between possible design concepts faster For example, if you have a few diff erent chrome concepts, you

Once you go into fi nal deployment, however, I recommend copying

page download and avoid some problems that IE has with using

Trang 19

05 html, body, div, span, applet, object, ifr ame, h1, h2,

h3, h4, h5, h6, p, blockquote, pre, a, abbr,

acronym, address, big, cite, code, del, dfn, em,

font, img, ins, kbd, q, s, samp, small, strike,

strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul,

fi eldset, form, label, legend, table, caption,

tbody, tfoot, thead, tr, th, td

For details about

default.css, see

Chapter 8, “Layout.”

Trang 20

55 #aside1 section div.content { width: 100%; }

56 #aside1 section p, #aside1 section ul {

57 width: 65%;

58 margin: 0 auto;

59 margin-bottom: 5px; }

60 #article1 section column { width: 210px; }

61 #article1 section column+.column { fl oat: right; }

62 #article1 section column p { min-height: 110px; }

how rows, columns, and sections should be placed

For details about

lay-out.css, see Chapter

8, “Layout.”

Trang 21

19 background: transparent

url( /_images/icon-pointer-sprite.png) no-repeat right 0;

Remember to set the styles for all of the diff erent link states (:link, :visited, :active, and :hover)

For details about

navigation.css,

see Chapter 10,

“Navigation.”

Trang 23

23 overfl ow: hidden;

24 background: transparent

30 #header search input, #header search select {

31 background: transparent url( /_images/

bg-grad01.png) repeat-x center center;

For details about

chrome.css, see

Chapter 11, “Chrome.”

Trang 24

bg-sidebar1-bottom.png) no-repeat 0 bottom;

56 #aside1 section div.content {

fl ourish-up.png) no-repeat center top; }

81 #article1 section {

82 background-position: bottom center;

83 padding-bottom: 50px;

84 margin-bottom: 3px;

fl ourish-up.png) no-repeat center bottom; }

86 #article1 section h2 {

87 font-variant: small-caps;

88 margin: 3px 0 30px 0;

89 height: 35px;

fl ourish-down.png) no-repeat center 3px;

fl ourish-left png) no-repeat 0 center;

Tiêu đề	Speaking in Styles - P7 PPTX
Trường học	University of Information Technology and Communication
Chuyên ngành	Web Design and Development
Thể loại	Bài thuyết trình
Năm xuất bản	2023
Thành phố	Hà Nội

Định dạng
Số trang	50
Dung lượng	1,89 MB