Tài liệu Speaking in styles- P2 doc

Style sheet languages are used to simply tell the computer how the diff erent objects in a document should be pre-sented, using simple style rules that humans can easily understand rathe

Code Editors

Just as you have a word processor for writing or an illustration program for drawing, you need a Web development program for coding A good code editor will:

» Organize and edit documents, providing suggestions where needed

» Preview documents without having to jump between tiple browsers

» Analyze and optimize your code

of an existing Web site.

Dreamweaver

Windows and Mac

a d o b e c o m / d r e a m w e a v e r

Dreamweaver, which comes with many Adobe soft ware packages,

is oft en the default choice for designers Of all of the code tors, Dreamweaver is possibly the most feature rich, but it is also the most expensive, and more features also means it’s harder to learn to use

edi-Online Tools

We typically think of an application as something that you get

on a disk or download and then install onto your computer

Increasingly, applications are being delivered through the Web, without requiring you to install or download the specifi c applica-tion Some of the best tools in my arsenal aren’t on my desktop;

they’re online Th e line between Web site and Web application (or just Web app) is gradually being blurred Like you do with a Web

site, you get to a Web app by using a Web browser and URL, but Web apps provide functionality like you would expect from

a traditional application

c o l o r j a c k c o m k u l e r a d o b e c o m

Every designer has to deal with color It can be diffi cult to defi ne

a palette of colors that work well together but provide the trum needed ColorJack and Adobe Kuler are Web apps that allow you to put together a color palette, helping you choose the best combinations based on color theory You can then save the results for use in common image editing soft ware such as Photoshop and Illustrator

t y p e te s te r o r g

Good typography on the Web seems like an oxymoron, but it’s getting better Typetester allows you to preview how diff erent font families will look at various sizes, weights, and styles Just choose from an extensive list of Web-safe fonts or from a list of fonts installed on your computer, and the results are instantly displayed underneath

SUMO Paint

s u m o p a i n t c o m

If you are a designer, you likely already have an image editor of choice like Photoshop, Fireworks, or Illustrator Th ese applica-tions can be costly, but free alternatives are available on the Web

SUMO Paint allows you to create and edit layered bitmap images

in a familiar Photoshop-like interface If you are strapped for cash, it may just be what youare looking for Although limited in its feature set, it has all of the basic tools you would need to put together simple Web graphics

C HAPTER 3

The Myths of CSS

Over the years, many diff erent myths and misconceptions have grown

up around Cascading Style Sheets—some good and some bad You may have heard some of these myths and may still believe them: CSS is com- puter code; CSS is buggy; CSS is only for styling type and color Some

of these myths were never true, others are no longer true, and some have

a grain of truth Before we go any further into learning how to speak in styles, let’s clear the air about three of the most persistent CSS myths

False: Many designers coming to CSS for the fi rst time think that it’s just for the “coders” and not for “real” designers I hear this a lot from designers: “I don’t want to learn to program a computer.” Designers who buy this line of reasoning have three basic arguments:

Argument 1: If the developers understand it, then I don’t need

to I started my design life as a print designer, and I had to

under-stand the print process from beginning to end I had to know about CMYK, paper weights, register marks, and how to create

fi les for output I had to understand these things, not because

I was going to run one of those massive Koenig & Bauer ing presses, but because I wanted to get the best results from my designs in my selected medium At the very least, even if you never plan to touch the code yourself, understanding how CSS works will make you a better Web designer

print-Argument 2: CSS is too hard to learn CSS was actually

devel-oped with designers in mind Natural language terms are used wherever possible to make it easy to understand and remember

Argument 3: I’m a designer, damn it, not a programmer CSS

is a style sheet language, not a programming language What’s

the diff erence? Style sheet languages are used to simply tell the computer how the diff erent objects in a document should be pre-sented, using simple style rules that humans can easily understand

rather than logic-based functions CSS is used to describe how the content should appear, not how it should work

Myth 1:

CSS Is for Developers, Not Designers

W e b D e s i g n e r W a l l

w e b d e s i g n e r w a l l c o m

If you are looking for innovative Web design

ideas from designers, using CSS, take a look at

CSS is for Web Developers, Not Web Designers

D e s i g n S h a c k ’ s C S S G a l l e r y

d e s i g n s h a c k c o u k / g a l l e r y /

Numerous Web sites highlight great designer

portfolios created using CSS.

W e b D e s i g n e r M i c h e l a C h i u c i n i

c o l a z i o n e d a m i c hy i t

Designer Michela Chiucini uses CSS with WordPress to create her own portfolio and gives away a few templates for you to start using.

False: Design is about overcoming the limits of your medium All media have diff erent strengths and weaknesses, and Web design with CSS is no diff erent CSS can handle a wide variety of dif-ferent designs, and the more you know about its limitations, the better you can design to its strengths.

Most designers who believe the myth that CSS can’t handle a variety of layouts are usually from the old school of Web design, when the only option for creating a grid-based layout was by using HTML tables Yes, tables can do some things that CSS still cannot do—like creating balanced column heights, although that will be possible in the future— but the advantages of designing with CSS far outweigh the advantages of table-based layout Th e techniques that designers use today are vastly diff erent from those

we used just a few years ago As we’ve had a chance to explore the capabilities of CSS, new ideas and new methods are constantly being explored

Th ere is no better example of the versatility of CSS than the CSS Zen Garden Th is simple site is a single Web page, which you can download the HTML code for and create your own CSS design solution Over 200 designers have taken the challenge, with more coming all the time Each design is completely diff erent from the others, but all use the exact same HTML code as their basis

With tables, which lock the structure directly into the HTML, this versatility is lost

Myth 2:

CSS Can’t Handle the Designs I Need

CSS Can’t Handle the Designs I Need C ’t H dl Hand H an n d e t d l h t Deseig I N h De D gns I N g n nss I N N ee e

C S S Z e n G a r d e n

c s s z e n g a r d e n c o m

CSS Zen Garden has a simple mission: Prove that CSS can handle any layout Each of these designs was created from the same HTML code but with different CSS styling it.

Mostly False: OK, so there’s some truth to this particular myth, but it’s not as bad as you might think CSS is a standard, which means that an organization—the World Wide Web Consortium (W3C)—has set up some very specifi c instructions on how it should work Th e problem is, like all human communication, instructions are open to interpretation (or can just be ignored) by the browser makers Mozilla, Opera, Apple, and Microsoft are the main players in the fi eld

Every browser has its own quirks when it comes to CSS, but it’s Microsoft ’s Internet Explorer that deviates the most from the straight and narrow path of Web standards

For many years, most of the problems were with Internet Explorer—specifi cally IE6 Th e issues with IE6 are legendary, and I will highlight them throughout this book with tips on overcoming them While it used to be that a good quarter of your development time would be spent just trying to get your Web pages to look roughly the same in IE6 as in other browsers, most

of the inconsistencies are now gone or easily circumvented IE7, while far from perfect, is much closer to standards compliance than previous versions, and on the horizon is IE8, which prom-ises even closer CSS adoption IE 7 is now the most popular Web browser in use, while IE6 quickly evaporates in popularity

Th at doesn’t mean you can ignore the older versions, but you do not always have to provide the same experience Instead, designers will create a usable but stripped-down design for IE6 Th e design still works just fi ne; it just may not have all of the design bellsand whistles

Myth 3:

CSS Has Too Many Browser Inconsistencies

CSS Still Has Too Many Browser Inconsistancies

semantics (how the language is understood), and vocabulary (the words

used in the language) that make up the grammar of CSS

4 9 S y n t a x

8 9 S e m a n t i c s

1 2 3 Vo c a b u l a r y

CSS Grammar

C HAPTER 4

Syntax Creating Meaning

Syntax is how you put words together to create meaning:

Punctuation and parts of speech are placed in a specifi c order

to describe something How you combine these elements has a direct eff ect on the meaning of what you are trying to communi-cate To describe your Web designs, you need to understand the syntax of CSS

Although CSS syntax is relatively simple compared to the syntax

of a language such as English, it is also less forgiving of mistakes

A misplaced comma or semicolon might change your styles completely or might even turn your styles into incomprehensible gibberish, at least to the browser But once you get the hang of it, you’ll be speaking in CSS in no time

Web pages are created using HTML tags to add structure to the page Most of these tags have inherent styles —that is, styles that the browser manufacturer has set as the default If we left it to the browser to style our pages, they would all look pretty much the same, and none too interesting CSS acts on the HTML tags tell-ing them how they should appear when rendered on the screen

To change a tag’s style, you create CSS rules that bind styles to particular elements on the screen, either directly to a specifi c HTML tag or using a class or ID that can then be applied to any HTML tag you desire

Let’s keep it simple for now, and start by looking at how we ate a basic style for the header level 1 HTML tag <h1> CSS rules begin with a selector, which is what is being defi ned, fol-lowed by a declaration or list of declarations between curly brack-ets to defi ne the selector’s style

cre-The Rules of Style

U G S M A G

u g s m a g c o m

Independent Canadian hip hop magazine UGSMAG speaks to its audience with a

h1 { color: red; }Selector

Curly BracketsDeclaration

Parts of a Style Rule

A CSS rule has the equivalents of the subject, object, verb,and adjective that you would fi nd in any English sentence:

 Th e subject (what we are describing) is the selector.

 Th e object (what is being described about the subject) is the property.

 Th e verb (always the verb “to be” in CSS) is represented by

a colon.

 Th e adjective (the description) is the value.

The level 1 header's text color is red.

Selector

Property Colon

Value

A Basic Style Rule

To tell another person that you want a level 1 header to be red, you might say something like:

Th e level 1 header’s text color is red.

In CSS, to communicate the exact same thing, you could say:

called a CSS rule or selector declaration.

You are declaring style properties for the selector, in this case the h1 selector, which eff ects the<h1> tag Th ere are three types

of selectors in CSS Th e one shown here is an HTML selector because it corresponds to a specifi c HTML tag We will learn about class and ID selectors a bit later in this chapter

<h1> Through the Looking-Glass</h1>

The level 1 header's text color is red.

h1 { color : red } h1 { color : rgb(255,0,0) } h1 { color : #ff0000}

Declaring More Styles

To add multiple declarations to your rule, separate each by a semicolon You can have one, two, ten, one hundred, or how-ever many declarations you want in a single rule, as long as you separate each by a semicolon, just like you might use a comma or semicolon to separate the items in a sentence:

Th e level 1 header’s color is red, the font family is Georgia, and the font size is 24px.

To say the same thing in CSS, you list the declarations:

h1 { color: red; font-family: Georgia; font-size: 24px; }

Notice that I’ve put a semicolon aft er each declaration, including the last one In the previous example, where there was only one declaration, I didn’t add a semicolon because you don’t have to put a semicolon aft er the last declaration in a list; you could just leave it off Now, forget you ever read that:

Always put a semicolon aft er every declaration in your list, even the last one

Why? Because one day you will make a change to that CSS rule

You will add another declaration at the end of the list and you will forget to add the semicolon to the previous line, and your style will simply stop working You will spend hours trying to

fi gure out why your styles are not working only to discover it was because you forgot to add one stupid semicolon How do I know this? I have spent far too many hours of my life banging my head against my keyboard trying to fi gure out why my styles aren’t working, all because of a missing semicolon Learn from my mis-

The level 1 header's text color is red, the font family is Georgia, and the font size is 24px.

h1 { color : red;

Combining RulesWhat happens when the same styles are being applied to diff erent selectors? For example, what if you want all of your headers to

be red? You could create three diff erent style rules, one for each header level:

h1 { color: red; } h2 { color: red; } h3 { color: red; }

When speaking, though, you wouldn’t say:

Th e level 1 header’s text color is red.

Th e level 2 header’s text color is red.

Th e level 3 header’s text color is red.

Instead, you would combine these into a single sentence using commas:

Th e level 1, level 2, and level 3 header’s text color is red.

Similarly, you can apply the same style declarations to multiple selectors in the same rule by putting them into a comma sepa-rated list:

h1, h2, h3 { color: red; }

Now the fi rst three header levels will be red Besides saving a lot

of space, which is important once your CSS fi les start getting large, this also has the advantage of putting all of the selectors that use this value into a single place, making it easier to change later For example, if your boss or client decides they want green headers instead of red, rather than changing the value in three places, you only have to change it once:

The level 1, level 2, and level 3 header's text

color is red.

h1, h2, h3 { color : red; }Commas

<h1> Through the Looking-Glass</h1>

<h3>By Lewis Carroll</h3>

<h2>CHAPTER I…</h2>