. CSS3

3-

OReilly

.

. . . . . .

32.988.02-018 004.738.8

.17 CSS3. 3- . .: , 2014. 608 .: . ( -

OReilly). ISBN 978-5-496-00428-2

CCSS3(),-.--CSS3.,,HTMLCSS.,-,,.

:HTML5-,CSS3-,;,;;-;.

12+ ( 29 2010 . 436-.)

ISBN 978-1449325947 . Copyright 2013 Sawyer McFarland Media, Inc. All rights reserved. Authorized Russian translation of the English edition of CSS3: The Missing Manual, 3rd Edition (ISBN 9781449325947). This translation is published and sold by permission of OReilly Media, Inc., which owns or controls all rights to publish and sell the sameISBN 978-5-496-00428-2 , 2014 , , 2014

OReilly. . .

, , , -. , , - , .

,192102,-,.(.),3,,.7.005-93,2;953005.

06.11.13.70100/16....49,020.2700.

.180004,,.,34.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .15

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .16

1. CSS

1. HTML CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .30

2. . . . . . . . . . . . . . . . . . . . . . .49

3. : . . . . . . . . . . .69

4. . . . . . . . . . . . . . . . . . . . . . .106

5. : . . . . . . .116

2. CSS

6. . . . . . . . . . . . . . . . . . . . . . . . . . . . .138

7. , , . . . . . . . . . . . . . . . . . . . . . . . . . . . .205

8. - . . . . . . . . . . . . . . . . .251

9. . . . . . . . . . . . . . . . . .306

10. , CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . .348

11. . . . . . . . . . . . . . . . . . . . . .387

6

3.

12. CSS . . . . . . . . . . . . . . . . . . . . . . . . . .414

13. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .427

14. - . . . . . . . . . . . . . . . . . . . . . . . . . . .464

15. - . . . . . . . . .499

4. CSS

16. CSS - . . . . . . . . . . . . . . .527

17. CSS . . . . . . . . . . . . . . . .546

1. CSS . . . . . . . . . . . . . . . . . . . . . .569

2. , CSS . . . . . . .603

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17HTML: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 HTML- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19 XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 , CSS . . . . . . . . . . . . . . . . . . 21 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26, . . . . . . . . . . . . . . . . . . . . . . . . . . . 26- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1. CSS

1. HTML CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30HTML: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 HTML- CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

8

HTML5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 . . . . . . . . . . . . . . 38 doctype . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

2. . . . . . . . . . . . . . . . . . . . . 49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55 : . . . . . . . . . . . . . . . . . . . . . . . . 58

3. : . . . . . . . 69 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 : . . . . . . . . . . . . . . . . . . . . . . . . . . 71ID-: - . . . . . . . . . . . . . . . . . 74 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 . . . . . . . . . . . . . . . . . . . . . . . . . . . 91 :not() . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94 : . . . . . . . . . . . . . . . 95

4. . . . . . . . . . . . . . . . . . . . . . 106 ? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 . . . . . . . . . . . . . . . . . . . 108 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 : . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

5. : . 116 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 : 121 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 124 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 : . . . . . . . . . . . . . . . 131

9

2. CSS

6. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 - . . . . . . . . . . . . . . . . . . 145 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 . . . . . . . . . . . . . . . . . . . . . . . . 146 @font-face . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 - . . . . . . . . . . . . . . . . . . 151 . . . . . . . . . . . . . . . . . 152 . . . . . 153

Internet Explorer 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Google web fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158 . . . . . . . . . . . . . . . . . . . . . . . . 166 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 180 , . . . . . . . . . . . . . . 185 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187 : . . . . . . . . . . . . . . 192

7. , , . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205 . . . . . . . . . . . . . . . . . . . . . . . . 207 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223 . . . . . . . . . . . . . . . . . . . . . . 226

10

box-sizing . . . . . . . . . . . . . . 229

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233 . . . . . . . . . 234 : , , . . . . . . . . . . . . . . 239 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250

8. - . . . . . . . . . . . . . . . 251CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 . . . . . . . . . . . . . . . . . . . . . 257 . . . . . . . . . . . . . . . . . . . . . . . 258

. . . . . . . . . . . . . . . . . . . . . . . 265 . . . . . . . . . . . . . . . . . . . . . . . 266 background . . . . . . . . . . . . . . . . . . . . . . 268 . . . . . . . . . . . . . . . . . 270 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276 Internet Explorer . . . . . . . . . . . . 278 . . . . . . . . . . . . . . . . . . . . . . . . . . 279 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 . . . . . . . . . . . . . . . . . . . . . . . . . 283 , Colorzilla . . . . . . . . . . 283 1: . . . . . . . . . . . . . . . . . 286 2: . . . . . . . . . . . . . . . . . . . . . . 291 3: . . . . . . . . . . . 297 , Internet Explorer 8 . . . . . . . . . . . . . 304

9. . . . . . . . . . . . . . . . 306 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 306 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 310 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318CSS- . . . . . . . . . . . . . . 327 . . . . . . . . . . . . . . . . . . . . . . . . . . . 329 1: . . . . . . . . . . . . . . . . . . . . . . . . . 331 2: . . . . . . . . . . . . . . . . . . 338

11

10. , CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 358 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 379

11. . . . . . . . . . . . . . . . . . . . 387 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 390 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 396 1: . . . . . . . . . . . . . . . . . . 402 2: . . . . . . . . . . . . . . . . . . . 407

3.

12. CSS . . . . . . . . . . . . . . . . . . . . . . . . . . 414 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 416 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422

13. . . . . . . . . . . . . . . . . . . . . . . . . . 427 . . . . . . . . . . . . . . . . . 430 . . . . . . . . . . . . . . . . . . . . . . . . 436 . . . . . . . . . . . . . . . . . . . . . 451

14. - . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 - . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 464 - RWD . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 466 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 476 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 482 - . . . . . . . . . . . . . . . . . . . . 486

15. - . . . . . . 499 . . . . . . . . . . . . . . . . . . . . . . . 499 . . . . . . . . . . . . . . . . . . . . . . 513 : . . . . . . . . . . . 518

12

4. CSS

16. CSS - . . . . . . . . . . . . . 527 - . . . . . . . . . . . . . . . 527 - . . . . . . . . . . . . . . 530 . . . . . . . . . . . . . . . . . . . . . . . . . . . . 531 : . . . . . . . . . . . . . 539

17. CSS . . . . . . . . . . . . . . 546 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 546 . . . . . . . . . . . . . . . . . . . . . . . . . . . 547 . . . . . . . . . . . . . . . . . . . . . 555 . . . . . . . . . . . . . . . . . . . . . . . . . . . 559 CSS Internet Explorer . . . . . . . . . . . . . . . . . . . . . . . . 564

1. CSS . . . . . . . . . . . . . . . . . . . . 569 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 569 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 573 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 578, . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 579 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 584 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 587 , . . . . . . . . . . . . . . . . . 593 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 598 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 600

2. , CSS . . 603 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 603 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604, CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 604CSS- . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607 CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . 607

SawyerMcFarlandMedia,Inc.,-,().1995:---.--(BerkeleyMultimediaResearchCenter),-,Macworld.com.

,,.-,-(ElectronicArt),,-.-Practical Web Design,MX Developer's JournalMacworld,CreativePro.com.

:missing@sawmac.com(,,2).

()MissingManual..:nanbarber@oreilly.com.

(),,,-.:holly@oreil ly.com.

(),-,,.-,.www.nanreinhardt.com.-:nanleigh1@gmail.com.

. ()-,--DQuinn.net.-GenuineInteractive.WordPress,SamAdams,MassMutualChildren'sHospitalBoston.-.-.:daniel@dquinn.net.

(),.--.--.-.

,,-,.-,,,.,-,,CSS,,-.

,,;-;;,,,--!;,,:,,,,,,,,,.

,CascadingStyleSheets(CSS),--.CSS,,,,.,,-.,,.

,?!--.CSS,.1-,-CSS.

CSSCSSHTML,HTML.-.HTML,-,,..,CSS-,HTML-.

,HTML,-,,CSS-,,-50.CSS,-.(stylesheet)-.

.-,-,,50.

,,-,.-,,-,.HTML-,,,(),,.

17

CSSCSS--HTML.1995,CSSHTML.,,HTML,.,HTML-,,,.,-.

CSS,,.

,HTML.CSS-(,-)().

CSS,-.-,..

,CSS,-HTML.,.CSS,-.-.

.-.-,,.--.

,HTML(,,-CSS).,(-),,,,..,-.CSSHTML,,-CSS,,--HTML-.

-HTML,,,.

HTML , : HTML Dog (www.htmldog.com/guides/htmlbeginner) W3Schools (www.w3schools.com/html).

18

HTML: HTML,-,.HTML-:

- -

,,,--.,- doctype,(),head (,),body(,),-..

-doctype,,HTML.-HTML4.01xHTML1.0,:.,-doctypeHTML4.01(doctype-HTML4.01xHTML1.0):

doctype- - www.webstandards.org/learn/reference/templates.

HTML-,,,doctype:

doctype,HTML5.-HTML5-.doctypeHTML5,(InternetExplorer6).,HTML5,doctype-.

, HTML doctype- , , HTML5. , Internet Explorer 8

19

HTML5. CSS, JavaScript. , .

,doctype,,.--,,,doctype,-,CSS.

doctype-HTML-.,HTML4.01:

xHTML:

HTML5:.

HTML-,HTML--,--,-.,-,,-.(markup)HypertextMarkupLanguage.

,,.-(/)(

20

,,-HTML,-.,--CSS(,),CSS-.

(body)-,-,,:-,,..

,,:

y ,-;

y ;,Warning!,Warning!;

y ,(),,--(, !).

, !http://www.mis-singmanuals.com.ahref,URL(-,URL-).http://www.missingmanuals.comhref.

XHTML ,HTML.HTML,-.-(,,,),(,,-,).,,,,-.

,HTML:XML,ExtensibleMarkupLanguage.

,2000HTML,XHTML,(XHTMLXMLHTML).XHTML(2000),HTML5.-XHTML(,,),.

21

HTML5 W3C,-XHTMLXML,--.,.-,XML-XML,WorldWideWebConsortium.W3CXHTML,HTML5HTML,XMLHTML,-.,GoogleChromeFirefox,HTML5.

HTML5-.XHTML,-,HTML5,,.HTML.,HTML5,,---.,HTML5,,,,,,,-,..

,HTML5,-,,-,,,-,().,,-.

HTML5,HTML5doctype-.(InternetExplorer8,-.InternetExplorer8HTML5HTML5.1.)HTML5.

, CSS-HTMLCSS,-,WindowsTextEditMacintosh.HTMLCSS,,,-.

22

.,-.

, -, - . , - CSS .

--.,.

jEdit(Windows,Mac,Linux;http://jedit.org).,Java,.-,,CSS.

Notepad++(Windows;http://notepad-plus.sourceforge.net)..,,HTML-CSS-,,,-HTMLCSS.

TextWrangler(Macintosh,www.barebones.com/products/textwrangler).-BBEditMacintosh.TextWrangler,HTML,(,),-FTP().

:.

EditPlus(Windows,www.editplus.com),-,FTP,.

skEdit(Macintosh,www.skedit.com)-,FTP/SFTP,.

Coda2(Mac;www.panic.com/coda)--.,-,FTP-SFTP-CSS-.

Sublime Text(Mac;www.sublimetext.com)-.,Mac.

23

Dreamweaver(MacintoshWindows,www.macromedia.com/software/dreamweaver)-.,-.-CSS.

Expression Web 2(Windows,www.microsoft.com/expression)Microsoft-.--,CSS.

, , HTML/XHTML CSS. -. HTML/XHTML, , - CSS, CSS- . - 2.

.,,,.-,,,-.www.w3.org/TR/css3-transform/,-,.

,CSS,,,.,CSS,--..--CSS.

,.HTMLCSS.-,,.1.,,,.-,.,-,.,-,.

CSS

iPod, CSS . CSS 1,

1996 , . CSS

24

: , (. . 3) CSS.

CSS 2 , , . .

CSS 2.1, . CSS 1. , .

CSS 2.1 . CSS 2, .

, CSS3 ( " "

HTML5). CSS, CSS3 . CSS W3C CSS Selectors, Values and Units, Box Alignment . . , CSS3 . 3 Selectors , 4.

, CSS3, . , . CSS4 , , .

CSS 2.1 ( CSS3), , CSS.

.,-.

1. CSS.-,,-,.-CSSHTML.-CSS.

2. CSS.-.-CSS,--,.,CSS-.,--.

25

3. .,CSS:-.(),.-:-.-,,-.

4. CSS .--,,-.,CSS.

..-CSS-,CSS,,.-.

.

.-,.,-,,,.-,-..

, -MacintoshCtrl-PC,, Ctrl(Ctrl-).

.,:File(),Edit()..,-,();-.

.,.,,. , Ctrl+S ( -S)

26

(,),,Ctrl ,,S,.

:System\Library\Fonts.,,:System..Library;,.-Fonts..

,,.0.1.

. 0.1.

,ViewText SizeIncrease(),.0.1:-View()Text Size(),-Increase().,,Ctrl++,,-.

, ,.

URL,.

27

,,.,:/Developer/Applications.

-.

,.,

.

, , . .

, , . , .

. , .

-,-.,-,.

- ,,(-),www.saw mac.com/ css3/.,,..,--.

URL.,,-,,-.

,-vinitski@minsk.piter.com(,).

!http://www.piter.com

.

1

CSS

1. HTML CSS

2.

3. :

4.

5. :

1 HTML CSSCSSHTML-,.,HTML-,CSS.,-CSS HTML.HTML-(,HTML).,,-CSS.,--HTML,HTML-,CSS,,-.,,,-.

.1.1.,-CSS,-HTML.HTML-4,,HTML,(14).--HTML-:213HTML-71CSS.

HTML: ,HTML-.CSSHTML.-HTML-,.HTML-,,,,.

HTML: ,,

1. HTML CSSL 31

.HTML..,.(orderedlist):.

. 1.1. - CSS HTML-

32 1. CSS

HTML,-,,-.---.,(),-.,-,,-.

--,,-.

,,..,-,,-.

-,-.,,(100,MicrosoftWord).

,,.,--,.

-,..HTML-.

HTML: CSS,-,,,.,,.

,-HTML-,.CSSHTML-.HTML-.,.CSS.HTML-

1. HTML CSSL 33

.,,CSS.

HTML- CSS,-,,HTML.-,HTML-,.HTML-CSS.

HTML-:,-,.-,..-,.-,-,,.(,,),,,(,),,,.,,,,,-,,..

HTML www.w3schools.com/html/html_intro.asp. HTML- HTML Sitepoint.com http://reference.sitepo-int.com/html.

,HTML-,-.:,().,,,,.

HTML-CSS,,,-,,(.1.2).,,.-.,.,,,..-CSS,.9.

34 1. CSS

. 1.2. CSS

CSSHTML:

Urban Agrarian Lifestyle A Revolution in Indoor Agriculture Lorem ipsum dolor sit amet...

CSS,()HTML-(..1.2):

The Urban Agrarian LifestyleA Revolution in Indoor AgricultureLorem ipsum dolor sit amet...

,CSS-,HTML,--,.

HTML-, HTML----.,-

1. HTML CSSL 35

,-,().,,.,HTML,,,-.-,,-CSS.

HTML

HTML , , CSS , , , HTML. , , Google, Yahoo! Bing. , , HTML . HTML (, ) . HTML

. HTML , . HTML, , . ( ) , .

Google http://support.google.com/webmasters/bin/answer.py?hl=en&answer=35769.

,.-,CSS-,,.( ),,,.,,,..,.--,,,..-CSS-,(.3).

(inline),-,,.

36 1. CSS

,HTML-,()().,-,CSS,,...idclass,.

Copyright 2006, CosmoFarmer.com Call customer service at 555-555-5501 for more information

.--,CSS,-CSS--.

HTML5,.HTML5--,.HTML-,.,(1),,-.,,.

HTML5,,.(),,,-,.,,,-.,(),,-,,,-..

HTML- HTML5 Doctor (http://html5doc-tor.com) www.w3schools.com/html5/html5_intro.asp.

HTML5.-HTML5.

(),.,

1. HTML CSSL 37

:,.

(),-.,.

(),-,,,..,,,,,,-,.

()-.

().,HTML5,-,-.

, HTML5 , , . -, - , HTML5, PDF-, HTML5doctor.com: http://html5doc-tor.com/downloads/h5d-sectioning-flowchart.pdf.

HTML5,-.,HTML5,--.HTML5,InternetExplorer8(.).

,,-,HTML5.,,-,.,,,HTML5.

Internet Explorer 8 HTML5

HTML5 . , , ,

, , , , ,

38 1. CSS

. HTML5, , , .

, Internet Explorer 8 CSS. , HTML5 Internet Explorer 8, . Internet Explorer CSS, HTML5. , HTML, :

Internet Explorer (Internet Explorer conditional comment, IECC) JavaScript, Internet Explorer, 9. , Internet Explorer 6, 7 8, ( Internet Explorer) . Internet Explorer JavaScript, HTML5, CSS, .

, HTML5 , HTML5, . , Internet Explorer 8 HTML5 ( JavaScript).

,,.3CSS,HTML,,.

-(.1.3).-,,.,,,-,,-,.,,,,.

.1.3,(),(),-()().-,.

1. HTML CSSL 39

. 1.3.

HTML,,-.,,HTML-,-,div-,HTML-,-,div-..HTML5,,.1.3,-,,, .,HTML--,,,,.

HTML CSSHTML-.-HTML-..,,.-.

40 1. CSS

,HTML,,CSS-.

.CSS-(.6).

, .CSS-,HTML.,(,,).,(-).

, . . .

.(,,,).3,CSS--,-.

,--:background,bgcolor,text,link,alinkvlink,,-,.CSS(..78CSS-).

.,,-(-,;,-,:-,).marginCSS,-,(..7).

, . , .

,,,,,,,-

1. HTML CSSL 41

HTML-.-,.CSS,(c.-.6),-(..7),(.-.7),(..8).

-

HTML : , , . XHTML , HTML5 . , HTML (, ). , CSS HTML , . ,

HTML.

HTML () W3C http://validator.w3.org/ (. 1.4). , Firefox, Web Developer http://chrispederick.com/work/web-developer/. W3C.

,HTML-,HTML--.

World-WideWebConsortium(W3C),-,HTMLCSS.

-W3C-.Firefox,,--,W3C.-.http://users.skynet.be/mgueury/mozilla/.Chrome-HTMLTidyChrome-http://bit.ly/SCONRY.-Safariwww.zappatic.net/safaritidy/.

HTML-W3Chttp://validator.w3.org-HTML-.,HTML-HTML--,-Check().

42 1. CSS

. 1.4. HTML- W3C -

.,HTML--,. ,.,.-,,,.,(.1.5).-,,.

. (),,,,.

(),-.(.:.6).

1. HTML CSSL 43

. 1.5. :

,()(-)().www.w3schools.com/tags/tryit.asp?filename=tryhtml_list_definition.

,-.,(),,:

, - : - -. , ..

,,,,-().

,.CSS.

HTML-,,-,.-.

. ,,,,..

44 1. CSS

.:,.,HTML5-,,,.-HTML5-.

.-,,,.

-W3C-(..1.4.--).HTML-,,.

doctypeHTML,(Document Type Definition(DTD)).DTD,,,-HTML.HTMLDTD.

CSS?.,-,,HTMLXHTML,, -.-HTML--HTML(,HTML5HTML4.01Transitional).doctype,-, .

,-1999(Netscape4,InternetExplorer5).,doctype,,HTML-,-,.doctypeCSS--,,,.,--,-,,.doctype,HTMLCSS.

www.quirksmode.org/index.html?/css/quirksmode.html https://developer.mozilla.org/en/Mozilla%2527s_Quirks_Mode.

doctype.-HTML.HTML5,.doctype:

1. HTML CSSL 45

HTML-,.-HTMLXHTML,-HTML4.01TransitionalXHTML1.0Transitional,doctype.

HTML4.01Transitional,doctype-:

doctypeXHTML1.0Transitional.,-.XML-,XHTML.

,-doctype-,HTML5.,.doctype-,HTML5.

-, Dreamweaver Expression Web, - doctype- -, HTML doctype- .

Internet Explorer 6, 7 8?

, Internet Explorer 6 . ? Internet Explorer?

, , , Internet Explorer, Firefox, Safari, Chrome Opera. Internet Explorer 6 Internet Explorer 6. , Internet Explorer 6 .

2012 0,6 % , 1,1 %. (, 2012 http://gs.statcounter.com

Internet Explorer 6 0,57 % www.ie6countdown.com 6 %). Internet Explorer 6 .

, , , , . , , , Internet Explorer 6. , , , Internet Explorer 6. , Internet Explorer 6 Google Analytics (www.google.com/analytics),

46 1. CSS

( ).

Internet Explorer 6 . , Internet Explorer 7, 2012 1,16 % (http://gs.statcounter.com/#browser_version-ww-monthly-201108-201208).

Internet Explorer 8 . Windows XP , Microsoft Internet Explorer 9 . , XP, Internet Explorer 8.

( , , XP Chrome Firefox.) StatCounter, 2012 Internet Explorer 8 13,65 % (http://gs.statcounter.com/#browser_version-ww-monthly-201108-201208). NetMarketShare, Internet Explorer 8 26 % (http://marketshare.hitslink.com/browser-market-share.aspx

?qprid=2&qpcustomd=0). Internet Explorer 8 HTML5, CSS , JavaScript.

Internet Explorer

MicrosoftWindowsInternetExplorer.Windows78InternetExplorer10.HTML5CSS3.,CSS3-,,,..

,Windows--.,-WindowsXPInternetExplorer8.,InternetExplorer8-InternetExplorer.CSS,InternetExplorer8,,.

InternetExplorer8,-.InternetExplorer8:-.,,.,doctype-.,doctype--.InternetExplorer8-,InternetExplorer5(!!!).

1. HTML CSSL 47

!InternetExplorer8InternetExplorer7.-,InternetExplorer8, ,InternetExplorer8InternetExplorer7,CSS2.1.,Microsoft(CompatibilityViewList).,,Microsoft,InternetExplorer7,InternetExplorer8.,,-.

,InternetExplorer8.meta-,InternetExplorer8-:

,.InternetExplorer."IE=edge",,-,.,-.

-

, . Windows, Internet Explorer. , , Firefox, Safari, Opera Google Chrome. Apple Mac Safari Firefox Google Chrome. , CSS, Internet Explorer 8, .

, , . .

Windows. Windows Internet Explorer

Internet Explorer 6, 7 8 . , Windows Internet Explorer, . , Internet Explorer. www.howtogeek.com/102261/howtoruninternetexplorer78and9atthesametimeusingvirtualmachines.

: Firefox, Opera Chrome. Apple Safari Windows, Chrome ( ) Safari , (, Adobe Browserlab).

48 1. CSS

Mac OS. . Internet Explorer , , Internet Explo rer 8 CSS3 , Internet Explorer 8. : , ( ) Windows; , Intel, Windows Apple Boot Camp (www.apple.com/macosx/features/bootcamp.html); , , VMware Fusion Parallels Desktop. OS Windows.

. , Windows, Mac OS, . . , .

CrossBrowserTesting.com (http://Cross-BrowserTesting.com) $30 (!) 150 . , . ,

, Flash, , JavaScript.

BrowserStack (www.browserstack.com) , . $19 Windows Mac Internet Explorer, Chrome, Firefox Safari.

Browsershots (www.browsershots.org) , , Windows Linux.

,InternetExplorer 9, 8 7, 6 5.5 NetRenderer (http://ipinfo.info/netrenderer). . http://ipinfo.info/netrenderer, URL , . , , , . .

, BrowserLab, Adobe (https://browserlab.adobe.com), . , Dreamweaver, BrowserLab .

2 (,.2.1)-CSS-.-,,.,-CSS-,-.-CSS,.

.2.1CSS,-,.

, , . , , , , .

CSS,-()-,,,:,,150.,:,,-.-:-,,, .,,..,,,-(),.

W3C, - CSS- . .

50 1. CSS

. 2.1. CSS- - CSS-

,CSS-,,-,..,-,:

2. 51

p { color: red; font-size: 1.5em; }

:-,-,m(emm,Cicero,-,-,..6).,,(.2.2).,,-,,,,.

. 2.2. ( )

.,,--:,,-..2.2p,-,,,.,CSS,--().

.,,,.({)(}).

.-.-.,-.

.CSS,-.-,.,-,font-size,margin-top,background-color..(-:,,).CSS.-,.

1 CSS.

52 1. CSS

.,,,CSS-:-,,,,,..,CSS-(red#FF0000),(18px,200%5em),URL(images/background.gif),(top,center,bottom).

,.2.2.,.-,,-,-.:

p { color: red; font-size: 1.5em;}

p { color:red; font-size:1.5em; }

,,CSS.,.,,,-.-,.,color:red,color: redcolor: red .

/ :

color: red;

, , - .

, , CSS-, .

,-.-,,-,.CSS- .,,-:-,-.

2. 53

?-CSS-.,.,-,.,,,.--.

-.-,-HTML-,,,CSS.,-,--(,).-,,.HTML-,.

, . . .

.

, , . , CSS , . ( ) , , .

, , .

CSS, , . , , , , , , . , , CSS . CSS. , , ! , . , , , .

54 1. CSS

, , , CSS .

: .

, ( ), Ctrl, , , Reload () . Chrome Internet Explorer Ctrl+F5, Firefox Ctrl+Shift+R, Ctrl+R Safari, Chrome.

,-,HTML-,-.:

h1 { color: #FF7643; font-family: Arial;}p { color: red; font-size: 1.5em;}

/* -... */

, - - , . JavaScript , . JavaScript CSS, , , , JavaScript .

HTML,CSS,,,,CSS,HTML.,,,,-.

HTML5 . HTML XHTML -:

2. 55

, HTML5, - . HTML5.

-,HTML--.-,.-,-,,..-.-,-.

,(-),,.,-Courier.,.--?,.

HTML- . , , .

,,CSS.HTML-,.-CSS.,-,.,-,global.css,site.css,styles.css,,,form.css,-.

CSS-

, HTML , HTML W3C (. . doctype . 1), CSS . W3C

CSS: http://jigsaw.w3.org/css-validator/.

, HTML: URL ( CSS),

56 1. CSS

CSS, .

CSS , ,

. , CSS, , , .

CSS W3C .

- , - , , ( ). CSS-. - CSS, global.css, -, - , .

,-,.--HTML-CSS@import,.-.-,.

@import , , . .

HTML--HTML-.,HTML5,HTML4.01XHTML.,HTML5:

HTML4.01,type:

,XHTMLHTML4.01,:

HTML5,HTML5.:

rel="stylesheet";-;

2. 57

hrefCSS-.URL-,,CSS-.,src-href,-.

- , , . CSS- -. . 17.

CSSCSSHTML@import.HTML-.:

@import url(css/styles.css);

HTML 4.01 XHTML, - type="text/css", .

HTML-@importCSS,HTML. CSS,urlhrefCSS-.,-css/styles.cssCSS-.,URL,.,url(css/styles.css)url("css/styles.css").

@import,,:

@import url(css/styles.css); @import url(css/forms.css);

@importCSS-,,,,--,,.

, , , , -, . 5. CSS-, @import, - . - (. - . 17).

58 1. CSS

:

@import url(css/styles.css); @import url(css/forms.css); p { color:red; }

@importCSS-,-.-,CSS-,p,style.cssform.css.

?,.@import(,,-www.stevesouders.com/blog/2009/04/09/dont-use-import).,,.

: CSS-,-,.CSS-,CSS--.

,-www.sawmac.com/css3.ZIP-().,-02(),03()..

, . , , - .

-,,(TextEdit)-(DreamweaverMicrosoftExpressionWebDesigner)(-).

CSSHTML-,.--,,-.

2. 59

,--,.(,HTML-,.,,CSSGmail.)-,,,.,,.

1. -02\basic.HTML.

HTML5--,,..

2. style="color: #666666;".

:

styleHTML,CSS,=,CSS.CSS,.color,,#666666,,(-.6).,..

3. basic.HTML.

FileOpen()Ctrl+Obasic.html02-( ,,).HTML-Preview in Browser(),-.HTML:,,.-,,.CSS..

4. HTML-.#666666font-size: 3em;.

.:

5. .Reload(),,XHTML-.

60 1. CSS

.,?--.HTML-.

6. --,.

-(-inline.html02_finished).

,-CSS,.,,-.--.

1. basic.html,,,Enter.

HTML-(,-,):

CSS 2

.,,,,CSS.,CSS.

2. Enter.

CSS,.

3. h1 {.

h1,-.

h1.CSS-.,-.,,,-.

4. Enter}.

,,,CSS--.

2. 61

5. ,Tab-color: #666666;.

,,color#666666..

CSS, , . - . , , CSS-, ( ). - , ( h1) - .

6. Enter,:

font-size: 3em; margin: 0;

,,CSS.

.,()..

,.,-,,:

CSS: The Missing Manual -- Chapter 2 h1 { color: #666666; font-size: 3em; margin: 0; }

7. .

,,,,-(Reload()).

.

62 1. CSS

. , CSS, - , , -.

8. ,h1,,-Enter:

p { color: #616161; line-height: 150%; margin-top: 10px; margin-left: 80px; }

-.,,CSS..,CSS.

9. (.2.3).,-?,internal.html 02_finished.

. 2.3. CSS , , ,

2. 63

,,CSS:HTML-,,CSS-,.,,-.

-,,,.,--(),().,: -.-.,,.1.

styles.css,-,.CSS.styles.css,,,-(,,-)..

2. styles.css:

html { padding-top: 25px; background-image: url(images/bg_page.png); }

HTML,,HTML-,.padding-top-.-,,,25-.background-image.CSS-background-image-,-..8.

3. styles.css:

body { width: 80%; padding: 20px;

64 1. CSS

margin: 0 auto; box-shadow: 10px 10px 10px rgba(0,0,0,.5); background-color: #E1EDEB; }

-(),,.-,.,-,80%,-,(padding),(margin-,.3).,--.,,-,,.

4. basic.html,,,().,-.,EditCopy()Ctrl+C.

5. styles.cssEditPaste(),Ctrl+V.HTML-,.

6. styles.css.HTML-CSS--.

7. basic.htmlCSS-,.,-,HTML-.-.,-,.6,,,-,,,.-,--Google.

8. HTML-,(),-:

2. 65

,.-,,,,GravitasOneGoogleserverCSS-..

9. :

--;CSS-@import,..rel,.

, --, href . , . - , -, . , - (- www.communitymx.com/content/article.cfm?cid=230AD).

10. .,-.,-(,),-.,-80%.,-.,.CSS3rgbacolor,-().

- (, ), , , styles.css , , basic.html. styles.css .

-,.11.styles.css.

h1:

font-family: 'Gravitas One', 'Arial Black', serif; font-weight: normal;

():

66 1. CSS

h1 { font-family: 'Gravitas One', 'Arial Black', serif; font-weight: normal; color: #666666; font-size: 3em; margin: 0; }

GravitasOne.

, - () , , , Google, ( - ) font-family ( ).

,-.

12.02\another_page.html.-HTML-:h1,h2,p.,-.

13.Enter.--.

14.,.-(,,):

Another Page

15..,-,-.,-,,-.

16.styles.cssCSS-font-family: "Palatino Linotype", Baskerville, serif;p.(-):

p { font-family: "Palatino Linotype", Baskerville, serif; color: #616161;

2. 67

line-height: 150%; margin-top: 10px; margin-left: 80px; }

--(-).h2.

17.}p,Enter:

h2 { color: #B1967C; font-weight: normal; font-family: 'Gravitas One', 'Arial Black', serif; font-weight: normal; font-size: 2.2em; border-bottom: 2px white solid; background: url(images/head-icon.png) no-repeat 10px 10px; padding: 0 0 2px 60px; margin: 0; }

CSS-,,border-bottom,.background-(background-imagebackground-repeat).,-..6,,,.7,,-,.8.,,h1,h2p,.,p,-,.-,.

18.H2,Enter}-:

.intro { color: #6A94CC; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; margin-left: 0; margin-bottom: 25px; }

basic.html,., ,-,.,HTML-.

68 1. CSS

19. styles.cssbasic.html.,,-class="intro".:

intro,,18(,).-HTML().another_page.htmlclass="intro".

20.basic.htmlanother_page.htm..2.4another_page.htm.

. 2.4. CSS-

,--CSS-.global.css-.-,.,?(-02_finished.),(HTML--).,,60-,.

3 : CSS-:(),,,-,..-.CSS,-,(.3.1).

. 3.1. , . h1 ( )

-

, < >, HTML-. , , , - p.

-,,-.,-.-,.CSS-.

, - , .

: ( )--,HTML-.

70 1. CSS

-.,,,,,p().,-().

CSS,,.,,HTML--,,.HTML-,CSS--.

CSS-,-p,h1,table,img..,-,.3.2,().CSS-h2,,.

h2 { font-family:"Century Gothic", "Gill Sans", sans-serif; color:#000000; margin-bottom:0;}

. 3.2. -

.,-?,.

3. : 71

,p,,p,.CSS-,.

: ,-,--,,,-, .,MicrosoftWord,.,-,HTML,.

,.copyright,,.

-,-.,.,.,-.-,HTML-.

,-(),.3.3.,-HTML-,.

(Wet Sod is Heavy Sod). .special . , . - (. . 3.3) .

, - HTML- ( . 3.3), . . HTML- .

,,,-:.copyright,.special.,,.

.CSS.

,,,.

72 1. CSS

.,.9lives,.crazy8.,,.copy-right.banner_image,.-bad_as_bad.

.,.SIDEBAR.sidebarCSS-,.

. 3.3. -

,.-,:

3. : 73

.special { color:#FF0000; font-family:"Monotype Corsiva";}

-,-,.HTML--.-,,-:-.,,.classHTML-,.

,.special--.,class:

HTML ( class). .

,,,,.special,-.-,.,,-.special,:

Welcome to Caf Soylent Green, the restaurantwith something a little different.

,-.,,,-,.special,.

HTML-

. 1 HTML, ID.

, , , , , . , ,

, , , ( , ). : , , , .

74 1. CSS

, ( , ). , , () , . CSS 3.

, , . ( ), :

Mom, dad and me on our yearly trip to Antarctica.

, , .photo , . . , , . 3 , .

, ID . ( (inline) ), .

, .compa-nyName, CosmoFar-mer.com, Disney ESPN:

Welcome to CosmoFarmer.com, the parent company of such well-known corporations as Disney and ESPN...well, not really.

ID-: -

CSSID--,,,..,-(ID),,HTML--.?.,ID--.,-JavaScript.-,ID-.

- ID- CSS. CSS, , , ID- , , ID- , .

3. : 75

-ID--,,,.ID-.-(.),(#).,(.).

,:

#banner {

background: #CC0000; height: 300px; width: 720px;}

HTML,id.,-HTML:

,,ID-#copyright:

(#) . HTML- # : .

ID . CSS, . , .

JavaScript, , ID JavaScript ID. (, ) . . JavaScript

, , , , .

, . , ID . R , . CSS HTML. id , . ,

76 1. CSS

. id : R. HTML, URL index.

html#R. #R index.html ( , HTML: R).

--.,,.-.,.-,-,,.

,-.,:

h1, h2, h3, h4, h5, h6 { color: #F1CD33; }

,().,,-,,.copyright,#banner.

h1, p, .copyright, #banner { color: #F1CD33; }

- , -. , ( ) . CSS ( . . 5).

-.CSS*-.,,,:

a, p, img, h1, h2, h3, h4, h5 ...... { font-weight: bold; }

*CSSHTML--:

* { font-weight: bold; }

3. : 77

,-:-,--.,.banner *,class.banner(-).

,HTML-.-CSS,..

.,-.,,,--.ID--,classIDclass-ID-HTML,.,HTML-.,,-.CSS, .

,,-.:,-,..-,.

.,,-HTML.,-.

, CSS. , .

HTMLHTML,-,.HTML--.,,-().

,,.:

78 1. CSS

.

HTML-(.3.4).-.;,.,,,.,-,,-.

. 3.4. HTML ,

,CSS-.-,,,..

.,HTML-,,..3.4,:,,.

.,..3.4, ,.

...3.4..

.,,..3.4,,

3. : 79

,.

.,,..3.4.-,.

HTML,-,,.,--.,-,,-,.-:-.-,-.

:

h1 strong { color: red; }

,,-,-.,,.StrongHeader.HTML,.,,-.

-,,--HTML.

,(,),,..3.5(),,-.,:

li a { font-family: Arial; }

-()..,,,.

:(a),-(li),Arial.,-.,(..3.5):

80 1. CSS

ul li abody li ahtml li ahtml body ul li a

. 3.5. , -

, , , - , . . .

,,,,.,(body li a)ul.,,.,,,..

.-,,(intro).:

.intro a { color: yellow; }

:(a)(p),intro.

3. : 81

,HTML-,-.,,-,-.HTML:

Our company is great! More information about why our company is so great Another news item Information about the other news item and so on and so on

class-,,-HTML-.,

.news h2 { color: red; }

.news p { color: blue; }

-,-.()-.,,,-.div--,div--class:

John Smith 555-555-1234 1234 Elem St

-:

.contact .name { font-weight: bold; }

.contact .phone { color: blue ;}

.contact .address { color: red; }

:p.intro , , HTML-, , . p .intro , , , intro (). , :

p .intro { color: yellow; }

82 1. CSS

, , .intro, , , . , , . , , HTML- ( , .intro p.intro).

-,,.,.CSS-.

,,-,-.

a:link,-,.-.

a:visited,--..,,,-.(,,.9.)

a:hover,.(),,.

,:hover-,.,,,-,--.a:hoverp:hover,.,highlight,highlight:hover.

a:active,-.,-.

.9,(,..).

-, . -. , , , , . . -

3. : 83

, , , . , . , .

,,..CSS:first-letter:first-line.--,.

:first-letter-,,.

:first-line-(-.6,).

CSS3 . CSS 2.1 :

:first-letter

CSS3, , :hover, , . :first-letter :first-line ::first-letter ::first-line. -, , . , Internet Explorer 8 , -, .

CSS,.,.

:focus.:focus:hover,:hover,-,:focus(-()-).-.-,,.

:focusc-.,,,(,,:focus).

84 1. CSS

-,-:

input:focus { background-color: #FFFFCC; }

:focus,-.-,,CSS,.

, CSS- , - www.qu-irksmode.org/css/contents.html.

:before.:before,-:,-.,!,.-HTML----:before.,-.,! ,.-,,CSS:before.

(,.tip),,.:

p.tip:before {content: "!" }

,.tip,!.

,-,,.-HTML-.-,.,,:before.

:beforeExplorer8,(:after).-.8.

:after.-:before,:after.,--.

:before :after :first-line :first-letter. -, CSS3 , :before :after CSS3 ::before ::after. , ,

3. : 85

:before :after, - Internet Explorer 8.

::Selection.,CSS3,,-.,,-..InternetExplorer.-,.,-,:

::selection { color: #FFFFFF; background-color: #993366; }

,,colorbackground-color,-,,,-,.(-CSS!)

selection , . , ::selection , :selection .

InternetExplorer9,Opera,ChromeSafari,InternetExplorer8Firefox.Firefox-:

::-moz-selection { color: #FFFFFF; background-color: #993366; }

Firefox,,.(-,,-,.7.)

-,,.,,,p-::selection:

p::selection { color: red; background-color: pink; }

86 1. CSS

. - , - http://gallery.theopalgroup.com/selectoracle/. , - .

CSS.,-,,-,.,title,-.

title HTML ( -) -. - . http://webdesign.about.com/od/htmltags/a/aa101005.htm.

-.,title:

img [title]

(img);-[title].

CSS:.,.photo[title]-.photoHTML-title.

,,,.,,URL,-:

a[href="http://www.cosmofarmer.com"]{ color:red; font-weight:bold;}

.,-.,,--.-.,-,.

,-,-:

input[type="text"]

3. : 87

.(,checkbox),,-,.-,.

,,(),:,.,-,,http://.

:

a[href^="http://"]

^=,,http://.-,http://www.google.comhttp://www.sawmac.com.

SSL-, - https://. , , - :

a[href^="http://"], a[href^="https://"]

,,..,,-PDF-.PDF,,-,.,,:

a[href$=".pdf"]

:

a[href$=".pdf"] { background-image: url(doc_icon.png) no-repeat; padding-left: 15px;};

,,.-:$.Word([a href$=".doc"]),([a href$=".mov"])..

,,.,.-,,.,.headshot,-.,,.

88 1. CSS

,,headshot,mcfarland_headshot,mccord_headshot..-headshot,src.-:

img[src*="headshot"]

,srcheadshot.-.

,,CSS- -,(>).,body > h1-,.

,(),-..3.6.-body h2,..,.

,,,.-body > h2.,div > h2.

CSS3.HTML.

:first-child.HTML,,:,.(,.3.6,,-.):first-child,,.

.3.6,,-:

h1:first-child

,..3.6,,-.,-.:first-child.,,.3.6,,h1:first-child,,,,div-(div).

3. : 89

. 3.6. () HTML- ()

:last-child.:first-child,.,-ul :last-child(.3.7).CSS.-,.

:nth-child..-,-(..3.7).,-,.

odd(),even(),.,-,:

tr:nth-child(odd) { background-color: #D9F0FF; } tr:nth-child(even) { background-color: #FFFFFF; }

90 1. CSS

. 3.7.

(.3.8).:nth-child()-.,,-,.,,(),(..3.8).:

tr td:nth-child(3n+2) { background-color:#900; }

n(3),.,3n,4n .(+2),-,,+2,-,+5,.-,:nth-child(5n + 4),.

. 3.8.

3. : 91

,,-,,,.!

CSS3,-,,HTML-.,,,,,,.:first-child,-().(),-,,,:first-of-type.

:last-child, :first-of-type :nth-child() , Internet Explorer 9 . Internet Explorer 8 .

:first-of-type.,:first-child,,.,,sidebar.:

.sidebar p:first-of-type

pp:first-of-type.,.

:last-of-type.,:last-child,.,div,-,(,,).:

.sidebar p:last-of-type

, - . , p:first-of-type , .

:nth-of-type.,:nth-child(),,..,--.,,.3.9,:

92 1. CSS

img:nth-of-type(odd) { float: left; } img:nth-of-type(even) { float: right; }

. 3.9. :nth-of-type(), , ,

,:nth-of-type()(oddeven)(,2n +1),:nth-child().

:nth-of-type():

tr:nth-of-type(odd) { background-color: #D9F0FF; } tr:nth-of-type(even) { background-color: #FFFFFF; }

CSS-,HTML-,!(,InternetExplorer8.)

? , - -. ?

, . . (. . 3.6).

, () (). , . , , , .

, , .mainList. sansserif, , , .

3. : 93

Times . .

.mainList : . (ul.mainList > li) . , .mainList.

: ul.mainList > li > ul > li. ( , ul li, : , .)

, . , CSS, , , . , , , . :not().

-HTML.,.,-,HTML ..3.6,-..

,,,,.,,-,..

+-.,,,h2 + p(,h2+p).(p),,,.

, .(~)-:.,-h2 + p-,,h2 ~ p-,()-h2.,,CSS,,.

94 1. CSS

:not():not(),,-,., CSS,:

.classy { color: red; }

,,,classy?:not().,,CSS-.:

p:not(.classy) { color: blue; }

,classy.

:not().,,,-,-:

a[href^="http://"]

,,,-,,,URL-,URL,http://.,-,URL-.URL-.

,(,WordPress)URL-.,,-,,-:not().,,mysite.com.,,,mysite.com.:

a[href^="http://"]:not([href^="http://mysite.com"])

,:,hrefhttp://,,http://mysite.com.,^=.:

a[href^="http://"]:not([href*="mysite.com"])

*=,URL,mysite.com,.,http://www.mys-ite.comhttp://mysite.com,.

3. : 95

:not(). :not().,(htmlp),-(*),(.footer),ID(-,#banner)(:hover,:checked,:first-child..).,:

.footnote:not(div) img:not(.portrait) div:not(#banner) li:not(:first-child)

-(div p a),(::first-line),(-h2 + p).

:not()-.,-:

a[href^="http://"]:not([href*="google.com"]):not([href="yahoo.com])

,:not( ).

:

.,-.,.

,.-03,,.2.

-,

, . . 2 .

, . , . , .

.

, . , . : , , , . 2.

96 1. CSS

1. selector_basics.html.HTML-.(.3.10).--,.CSS---..

. 3.10. HTML-

2. ,Enter.-Enter..,.

3. : 97

,CSS.HTML-(,,):

Selector Basics

,,-(-,).

HTML 4.01 XHTML ( HTML5), style type="text/css"attribute:

3. ,-p {.Enter}.

,,.,-HTML-,.,.

4. ,CSS,,,,:

p { color: #505050; font-size: 1em; font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; margin-left: 100px; }

Enter,CSS--.,,CSS(-,,).

-, . , . 1em 100px , . 6.

.5. ,.

,--

98 1. CSS

(serif)Times.CSS-,,-,sans-serif.

--.,,-.-,..,.1. HTML-selector_basics.html.

.

2. ,Enter:

h1, h2, h3 { }.

,.,-.

3. {}-CSS-:

color: #BD8100; font-family: Baskerville, "Palatino Linotype", Times, serif; border-top: 2px solid #86A100; padding-top: 7px; padding-left: 100px;

,,,padding.,-,-,,.

4. .-,(.3.11).

,,,.,--,?.1. HTML-selector_basics.html.

.

3. : 99

. 3.11. , -

2. h1,h2,h3,Enter:

.note { }

note().-:,-.,-(),.

100 1. CSS

3. {}-:

color: #333; border: 2px dashed #BD8110; background-color: #FBF8A9; margin-top: 25px; margin-bottom: 35px; padding: 20px;

,background-color,,.,.:

.note { color: #333; border: 2px dashed #BD8110; background-color: #FBF8A9; margin-top: 25px; margin-bottom: 35px; padding: 20px; }

-,.,-,HTML.

4. HTML--,Note:.,class,,.note.

5. p,,class="note".HTML-():

NOTE: Ut enim ad

,:class=".note".,HTML.(NotMe!).

, , , . , , , HTML- : .

6. -.(.3.12).

3. : 101

. 3.12. , -

- . 3.12, , - . . , , / - . , , , . .

selectors_basics.htmlnote.-Note:,(-).,-?,,,.,,.noteText-.,.

102 1. CSS

,.,-.1. HTML-selector_basics.html.

..noteEnter.

2. .note strong {.strong,.-,,-.note.,,,,-.

3. Enter,color: #FC6512;,Enter,..:

.note strong { color: #FC6512; }

4. .Note:.CSS.-

--,HTML-.,.

ID-c-.-,.note,-.

ID-c,,,.-,-ID-().,,.

,-,.ID-.

1. HTML-selector_basics.html.-.note strong.

2. ,Enter#article {.

3. : 103

ID-c#.-.

-.,,,,,,,.

article(,),ID.

3. Enter:

background-color: #FDF8AB; background-image: url(images/bg_page.png); background-repeat: repeat-y; background-position: center top; padding: 0; margin: 0 auto; width: 760px;

,(),,-().

4. ,.:

#article { background-color: #FDF8AB; background-image: url(images/bg_page.png); background-repeat: repeat-y; background-position: center top; padding: 0; margin: 0 auto; width: 760px; }

,,--.,idHTML--,,.

5. -id="article",-():

,#article.CSS,-.,;article-.

104 1. CSS

body,.-ID,-ID.

6. .---.(!),-.,-background-image().

-,(,,HTML).

1. HTML-selector_basics.html..

,#articleEnter.

2. h1+p {.

,,.-.,-.

3. Enter:

color: #FF6600; font-size: 1.2em; line-height: 140%; margin-top: 20px;

,-.line-height(-)(leading).

4. ,Enter.:

h1+p { color: #FF6600;

3. : 105

font-size: 1.2em; line-height: 140%; margin-top: 20px; }

,,,,(.3.13).HTML,,-,-.

. 3.13. -

Internet Explorer 6 , - .

- 03_finished .

,.().

4 :,.-,HTML.,,CSS-.

?,CSS-,--,.,.,,,-.,CSS-(..3),-color(,-).,-,,,.,,,,,-.

,-(),.,,,,.

. 3, , , . , , - , . . ( ) ( ).

,,.,,,-,,,,.,Arial24,,..

,.4.1,,-,,.-.

4. 107

4.1.

,-,.4.1,.,,,,-.,.

108 1. CSS

,.(.:-.3)-,.,-.3.

-,.-,-.,().,-:

body { font-family: Arial, Helvetica, sans-serif; }

--.,,-,(.:.3),,,,,HTML5,,,,.,CSS-,--.-,,,.,,,..,.

.CSS-,border(-).,,-,.,,(,..)(.4.2).

CSS-, , . ., - 1.

,.

,,-((),()),.

4. 109

-.-,..-,..,,--.

. 4.2. , (), ,

110 1. CSS

, - . . 5 , .

,.-,CSS--(-,)(,),-,(,).

, , , , . .

: ,,,-.-,.,-.,,.

04-,.2.

,,-,.,-.1. inheritance.htmlHTML-.

.

, , . 2. CSS- -, -, , .

2. .Enter.Enter-,.-,CSS.,.

HTML 4.01 XHTML ( HTML5, ), style type="text/css":

4. 111

3. p {.Enter-}.,-.

4. color: #FF6600.:

p { color: #FF6600; }

.-..

5. ,.(.4.3).

. 4.3. , , , , . ? ( ).

,

,..,,

112 1. CSS

,,.,,.

:,.-,,,p emp strong,.

,,-,,.,-,-..5.

-.CSS-.,--.

1. HTML-inheritance.html..

2. p.-Enter.pageStyle {.-Enter}.

.

3. :

font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 18px; color: #BD8100; width: 900px; margin: 0 auto;

:

.pageStyle { font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; font-size: 18px; color: #BD8100; width: 900px; margin: 0 auto; }

,.().

4. ()-class="pageStyle".

4. 113

:.,.pageStyle.,(),,,.

5. -.

.4.4,--,,.,,,-.

. 4.4. , , , ,

-

,-:,,,,.CSS,?-?

114 1. CSS

pageStyle , ? . . , , . ( ID), -.

,?-,-,,,.,.,.-.

,.--.-().,,()-.,.

1. HTML-inheritance.html..

2. p,(color: #FF6600;)Enter.

-.

3. .:

p { color: #FF6600; margin-left: 50px; padding-left: 20px; border-left: solid 25px #BD8100; }

margin-left50,padding20.

4. .

,50,.,(,),(.4.5).:--,50!

4. 115

4.5. CSS- (, )

,,,p:p,p *,-.p,.-p *:(*,,-).

CSS- 1.

-, , 04_finished .

5 :

,:--?-CSS,-,..,,,.-,CSS-,.

,:CSS--,-(,).,--,.,-..

, , - (. ID-: - . 3). -, - . . CSS, . , CSS.

,,--,.,,,,,.:-(--)

5. : 117

-(,class,,).

,CSS,--(,,).--.(,,),,,.:,,.,-.,-,.

,.5.1,:,.CSS-:

body { font-family: Verdana, Arial, Helvetica, sans-serif; }p { color: #F30;}strong { font-size: 24px; }

. 5.1.

,,,.-,font-familycolor.,CSS-,24.-.-,,:

118 1. CSS

strong { font-family: Verdana, Arial, Helvetica, sans-serif; color: color: #F30; font-size: 24px;}

-,-.CSS?,-body.

.5.1,-,.-.

,.-body,. ?,:.,-.

,,.,-.,,.-.

,,,--(.5.2).

. 5.2. ,

5. : 119

.5.2.,-,-.,-(..5.1,1).

,,.CSS-,,,,,(),,,,--.

,,-CSS.,.,,.,,.,,(..5.2,2).,,,.

,.-,,-,-.,.,.

, , . 9.

.-,.:-.,-..,.?

,,.:-.,-.

.-,.leadHeadline.HTML-:Your Future Revealed!..

120 1. CSS

, , .

.(..3).-,.leadHeadline,.secondaryHeadline,.newsHeadline.leadHeadline.leadHeadline.

ID-.ID-#banner.news.HTML-:..

- , .-.,.

- .,-(.:.3).,-(:):.-:

y #mainContent p;y #mainContent .byline;y p.byline;y .byline.-,

, ..,,-.HTML-:

Written by Jean Graine de Pomme

-:

a { color: #6378df; }p a { font-weight: bold }.byline a { text-decoration: none; }

-;,,;,,-byline.

5. : 121

,..-,-:,.,-.

, . , . , -. .

:

.,-,,font-family??

,,-. ( ) , .,,,-.,CSS.():,,ID-... 1. 10. ID-100. (inline)1000.

, , . , . , , www.w3.org/TR/ /css3-selectors/#specificity.

,.,: (=1); .highlight(=10); ID-#logo(=100).-HTML-:.(-,border),ID-(#logo),.

122 1. CSS

(, :first-child) 1 . (, :link) 10 (. . 3).

,content ph2 strong,:(.5.1).

5.1. , ,

p 0 0 1 1.byline 0 1 0 10p.byline 0 1 1 11#banner 1 0 0 100#banner p 1 0 1 101#banner .byline 1 1 0 110a:link 0 1 1 11p:first-line 0 0 2 2h2 strong 0 0 2 2#wrapper #content .byline a:hover 2 2 1 221

, . , -, , #banner, , .

: ..-...-.

HTML-:

Written by Jean Graine de Pomme

-,-,:

p .email { color: blue; }.byline a { color: red; }

,11(101),..?,.

5. : 123

: - - , - , - - -?

. , , .

. CSS, ( Mac) ( , , ) Inspect Element ( ). ( ), HTML HTML.

( Safari, Show Develop Menu ( ) , PreferencesAdvanced ().)

, . , CSS, , . , , ( ) ( ).

, , . , , . CSS, https://developers.google.com/chrome-developer-tools/docs/elements-styles http://webdesign.tutsplus.com/tutorials/workflowtutorials/faster-htmlcss-workflow-with-chrome-developertools/.

,:

.byline a { color: red; }p .email { color: blue; }

.C.byline ap .email,.

,,().-(HTML-).-,(..2),-HTML,,(,,:).:-.-,,

124 1. CSS

,-.

, @import, , , . - . . 2.

CSS . , . !important.

. :

.nav a { color: red; }a { color: teal !important; }

, .nav, , , .nav , , . !important

, . , , nav, .

, !important , , !important , .

: !important, , .

,CSS-,.,,,..,.

.!important(),-.,,.-.

.5.3,-.,-!important--..

5. : 125

.intro,#sidebar p.,.intro.,-#sidebar .intro.

. 5.3. ,

.5.3#sidebar.-,#sidebar p-.intro(10110).:.intro ,-,.5.4:#sidebar p.intro.

-,-,-:#home #main #story h1.,.

-,.-,styles.css,-.CSS-:,..,,(),.,

126 1. CSS

,.-,styles.css,(,..).

. 5.4. ,

-,,.-,styles.css:

h1 { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: #000;}

,-.:

h1 { font-size: 36px; color: red;}

Arial(),36().

5. : 127

, HTML-- . , , .

.,home.css,--styles.css.home.cssstyles.css,.home.css-styles.cssHTML--:

- - - . , -, .review, .story, .home, - . . 3.

,-ID--.,ID-,.,..,-HTML:

A paragraphAnother paragraphA special paragraph

,div-article-,:

#article p { color: red; }

,special-.,.

.special { color: blue; }

,,,--:ID-100,-10,1.#article p-(

128 1. CSS

101),,-:

#article .special {color: blue; }

,-.-,,-,,special--article.,HTML-A special paragraph-,.,.

,,.HTML:

A paragraphAnother paragraphA special paragraph

CSS:

.article p { color: red; }p.special { color: blue; }

.article p-11.p.special11() special.,HTML-,,,,,.

,-#home #article #sidebar #legal p#home #article #sidebar #legal p.special.

,.-,,.

, , - http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class.

,:-,,,;,.HTML

5. : 129

,:-,HTML.,.

,,SafariFirefoxpadding-,InternetExplorermargin.,-.-,,,Firefox,InternetExplorer..

-.,. (CSS-)..

,,-.,-.

:

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1.2;}ol { padding-left: 1.4em; list-style: decimal;}ul { padding-left: 1.4em list-style: square;

130 1. CSS

}table { border-collapse: collapse; border-spacing: 0;}

CSS- , - (Eric Meyer), http://meyerweb.com/eric/tools/css/reset.

,.,-100%-.(.5.5).-,-,HTML-.

. 5.5. , HTML

(article,aside,details),HTML5.(body)-line-height().line-height.

5. : 131

. reset.css 05 - www.sawmac.com/css3, -. . , , . 17 17.

()(-),-().

:

,,.-,,-.,,..,-CSS-.,,.

,-.,.2.05.

,.1. cascade.html05(..5.5).

:().,CSS-.

2. main.css05-.,cascade.html.:,.,.,.

3. .main.sidebar,.5.5.HTML,.,,,(,.3).

132 1. CSS

,-.

4. styles.css-}.sidebar:

body { color: #B1967C; font-family: "Palatino Linotype", Baskerville, serif; padding-top: 115px; background: #CDE6FF url(images/bg_body.png) repeat-x; width: 800px; margin: 0 auto; } h1 { font-size: 3em; font-family: "Arial Black", Arial, sans-serif; margin-bottom: 15px; }

,.-cascade.html(.5.6),,,,-.

. 5.6. : ,

5. : 133

font-familycolor,,,Arial.,,,,.,,.,.

.--,(),,-.

1. styles.css:

h2 { font-size: 2.2em; color: #AFC3D6; margin-bottom: 5px; }

,-.-,,.

-,.

2. styles.css,Enter,.-:

.main h2 { color: #E8A064; border-bottom: 2px white solid; background: url(images/bullet_flower.png) no-repeat; padding: 0 0 2px 80px; }

,,main..,main,-.

,-.217.-..

3. (.5.7).

134 1. CSS

. 5.7. h2 .main h2 , .main h2

,(),,,..main h2,

h2,-(-color).main h2.,h2,-.main h2.

,.main h2,h2.

CSS,-,,,.

,,-CSS,.1. styles.css.

.

5. : 135

2. :

.main p { color: #616161; font-family: "Palatino Linotype", Baskerville, serif; font-size: 1.1em; line-height: 150%; margin-bottom: 10px; margin-left: 80px; }

,,(line-height).

,,-.,,-.--.

3. :

.intro { color: #6A94CC; font-family: Arial, Helvetica, sans-serif; font-size: 1.2em; margin-left: 0; margin-bottom: 25px; }

,,-.,,HTML-.

4. cascade.html-.,CSS: The Missing Manual,:

5. .

.,.intro,.main p-.,.intro.

.intro,,.

6. styles.css.introp.intro.

,p.intro.,:.main p,p.intro.11,p.intro.main p,

136 1. CSS

.(,.main .intro.)

7. (.5.8).

. 5.8.

!,,.-,,.

CSS.-,2.

2

CSS

6.

7. , ,

8. -

9.

10. , CSS

11.

6 --.,,-,Flash-,-.Facebook,,-,,,Twitter.CSS-,-.

CSS-,,,,-,-(,,),-,(.6.1).-,-CSS--.-,,--(.6.1,).,-(.6.1,)

,-,,.CSS-font-family-,.,,Arial.pfont-family:

p { font-family: Arial;}

6. 139

. 6.1.

140 2. CSS

font-family,,.,-,-Arial,--(-TimesNewRoman).-,-.

--,,.--font-family,CSS--,@font-face-.--,.

,.--,,,-,-()..,(,),-(,).

font-family,-,,--.,-,,.,,.-,,-.,-,.:

font-family: Arial, Helvetica, sans-serif;

,Arial.,.Helvetica,,sans-serif.(sans-serifserif),.,.

6. 141

CSS- (. . 2). , p { font-family: Ari al , Helvetica, sans-serif; }. , , CSS- -.

,:

font-family: "Times New Roman", Times, serif;

-,.

(Serif).().-,,.Times,TimesNewRoman,Georgia.

.6.2.

. 6.2. Windows () Macintosh ().

. .Arial,HelveticaVerdana.

.6.3.

142 2. CSS

. 6.3. Windows () Macintosh ()

,--,-.,.,.

. -(,).(-).

.6.4.Courier,-.LucidaConsoleWindowsMacintosh,Monaco-Macintosh.

. 6.4. Windows () Macintosh ()

6. 143

. -,,-.,Macintosh.,-:

ArialBlack; ArialNarrow; Impact.ArialBlackImpact:

.,,font-weightfont-stylenormal.-,,,.

-CSS:,font-family.-,,,-.,,-.---.

CSS--CSS-:

@font-face,-,,.,CSS-,,-;

font-family,-,,.,@font-face,,CSS-font-family.

-.,-,.

- Google. , .

,InternetExplorer-,5-(12!).,

144 2. CSS

.,-,.EOT(EmbeddedOpenTypeOpenType).InternetExplorer8.

-.,.--,(,).

-,.

EOT.EmbeddedOpenTypeInternetExplorer.EOT-,-,,FontSquirrel.

True Type Open Type.Fonts,TTF(TrueType)OTF(OpenType).-.,-.-:InternetExplorer9,Firefox,Chrome,Safari,Opera,iOSSafari(4.2),AndroidBlackberryBrowser.

WOFF.WebOpenFontFormat-,-.WOFF-,,TrueTypeOpenType.-,WOFF--.WOFF--,InternetExplorer9,Firefox,Chrome,Safari,Opera,BlackberryBrowseriOSSafari5.-Android.,-WOFF-,,AndroidInternetExplorer8,-.

SVG.ScalableVectorGraphic().,-(,).SVG-.SVG-InternetExplorer,Firefox.-,SVG,,,-,TrueType,WOFF.SVGiOSSafari4.1.

6. 145

,,,.,(),,.,,-,TrueType.

. , , , - . , - , , . - .

---.,.TrueType--.,-,,,-.

,Adobe,-.,,(),.,.,,----.,,,.

, , Google Fonts TypeKit, - Adobe ( ).

--:,,

146 2. CSS

,(EOT,WOFF,TrueType..).,,--,-,.-. The League of Movable Type(www.theleagueofmoveabletype.com).,-,,.LeagueGothic.

Exljbris Font Foundry(www.exljbris.com).-:Museo,MuseoSansMuseoSlab.

Fontex.org(www.fontex.org).-,.(-),-,.

The Open Font Library(http://openfontlibrary.org).152-(),-(152).

Font Squirrel(www.fontsquirrel.com).--,800.FontSquirrel,@font-faceKits,,CSS-,@fontface-(,).,FontSquirrelTrueTypeOpenType,EOT,SVGWOFF..

Google Fonts(www.google.com/webfonts).Google--.-.

,,(TrueType(.ttf)OpenType(.otf)).TrueTypeOpenType.,WOFF,TrueType.,EOT,WOFFTrueType.ciPhoneSafari4.1,SVG.

- NetMarketShare, Safari 4.1 2 % -. www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=1.

6. 147

,FontSquirrel,.@font-faceGenerator-,HTML-CSS.

FontSquirrel@font-faceGenerator,.1. TrueType(TTF)OpenType(OTF).

,,.,-.-,.

2. @font-faceGeneratorwww.fontsquirrel.com/fontface/generator.,(.6.5).

. 6.5. , Font Squirrel Optimal ()

148 2. CSS

3. Add Fonts()(..6.5,1).

Select files().

4. Open().

FontSquirrel.

5. (..6.5, 2).y Basic()EOT,WOFFSVG.

y Optimal(),,,--.

y Expert()-.,-,.,,,Q.

,,Optimal().

6. Yes, the fonts I'm uploading are legally eligible for web embedding(,-)(..6.5,3).

,,-.,,-.

7. Download Your Kit()(..6.5,4).

-.FontSquirrel-.,,-,,CSS--.,,EOT,TTF,WOFFSVG.

,CSS-@font-face.

Optimal(),-.Expert().-,-.

6. 149

@font-face.,-.-,fonts,_fontswebfonts.-,CSS-,.,,,.

-CSS-@font-face.,.@font-face-.,,LeagueGothic.fontsTrueTypeLeague_Gothic-webfont.ttf.@font-face:

@font-face { font-family: "League Gothic"; src: url('fonts/League_Gothic-webfont.ttf');}

,font-family,,.@font-facefont-family-.,.,,LeagueGothic.-:

p { font-family: "League Gothic";}

, , @font-face. , @font-face. , .

,src,,.url( ).,HTML,,JavaScript.,,_stylesmy_font.ttf_fonts.-.,../_fonts/my_font.ttf.@font-face:

@font-face {

150 2. CSS

font-family: "My Font"; src: url('../_fonts/my_font.ttf');}

,,TrueType.,,@font-face.,@font-face-.,-,-,.,,-LeagueGothic.:

@font-face { font-family: 'League Gothic'; src: url('fonts/League_Gothic-webfont.eot'); src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'), url('fonts/League_Gothic-webfont.woof') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg') format('svg');}

-,,,-InternetExplorer.

.

2.font-family,,,CSS-.

3InternetExplorer9,-(Compatibilitymode),,InternetExplorer9InternetExplorer8.InternetExplorer9,-,InternetExplorer8,InternetExplorer9.-InternetExplorer9,,,.

4src,-@font-face.EOT,,.eot?#iefix.,InternetExplorer,InternetExplorer68..eotURL,InternetExplorer8.

URL:

format('embedded-opentype')

URL-.

6. 151

57.src,,.,src,URL,(,):

url('fonts/League_Gothic-webfont.woof') format('woff'),

src , src ( 7 ). - , @font-face .

(,ChromeWOFF,TrueTypeSVG),.-,.-,Chrome,EOT,,WOOF.TrueTypeSVG.,,-,.WOOF-,,-SVG,,:EOT,WOOF,TTFSVG.

@font-face -. - : http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/.

--@font-face.,-,,.,font-family-,@font-face.,@font-faceLeague Gothic(2).,.h1LeagueGothic,:

h1 { font-family: 'League Gothic'; font-weight: normal;}

font-weight..

152 2. CSS

,..font-weightnormalLeagueGothic,,-.--.

-,-.-.:

h1 { font-family: 'League Gothic', Arial, sans-serif; font-weight: normal;}

- , . , , - @font-face , , ( ). , , : http://css-tricks.com/flat-icons-icon-fonts/, http://css-tricks.com/html-for-icon-font-usage/ http://css-tricks.com/examples/IconFont/.

,,-,HTLM--,.-,.,.-(),.

-.,-,,.,.,-,,,-,.,@font-face.

-.,InternetExplorer8(InternetExplorer9-),,-InternetExplorer.

6. 153

@font-facefont-weightfont-style.CSS-font-weight-,(bold),(normal),font-style(italic)(normal).@font-facefont-style,-.

,PTSans.-,.PTSansRegular(PTSansRegular.eot,PTSansRegular.ttf..).@font-face:

@font-face { font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'), url('PTSansRegular.woof') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); font-weight: normal; font-style: normal;}

. -PTSans,,,PTSansRegular.

font-weightnormal,(8).

font-stylenormal,(9).

, PTSansRegular.eot, PTSans-Bold.eot . . , . , URL , .

,,PTSansItalic.:

@font-face { font-family: 'PTSans'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'), url('PTSansItalic.woof') format('woff'), url('PTSansItalic.ttf') format('truetype'),

154 2. CSS

url('PTSansItalic.svg') format('svg'); font-weight: normal; font-style: italic;}

2font-familyPTSans.font-styleitalic(9).-,PTSans.@font-face,-:

@font-face { font-family: 'PTSans'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot?#iefix') format('embedded-opentype'), url('PTSansBold.woof') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); font-weight: bold; font-style: normal;}

@font-face { font-family: 'PTSans'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); font-weight: bold; font-style: italic;}

,,@font-face:,font-family,-src()font-weightfont-style.

,-,HTML.,PTSans,:

p { font-family: PTSans;}

HTML-.,:

When I was younger, I could remember anything, whether it had happenedor not -- Mark Twain

6. 155

-(@font-facep),-PTSansRegular.anything,-PTSansItalic,notPTSansBold,MarkTwain,PTSansBoldItalic.

.-h1PTSans,:

h1 { font-family: PTSans;}

-PTSans,.(-,,font-weight: normal;.)

,InternetExplorer8PTSansRegular.InternetExplorer-,PTSansRegular-PTSansRegular-..

webfonts-demo . webfonts.html - , webfonts-ie-safe.html .

Internet Explorer 8

InternetExplorer8(),-,,-.InternetExplorer8,.-@font-face,.font-family(,PTSans),(PTSansRegular,PTSansItalic..).,-@font-face:

@font-face { font-family: 'PTSansRegular'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot?#iefix') format('embedded-opentype'), url('PTSansRegular.woof') format('woff'), url('PTSansRegular.ttf') format('truetype'),

156 2. CSS

url('PTSansRegular.svg') format('svg');}

@font-face { font-family: 'PTSansItalic'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot?#iefix') format('embedded-opentype'), url('PTSansItalic.woof') format('woff'), url('PTSansItalic.ttf') format('truetype'), url('PTSansItalic.svg') format('svg');}

@font-face { font-family: 'PTSansBold'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot?#iefix') format('embedded-opentype'), url('PTSansBold.woof') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg');}

@font-face { font-family: 'PTSansBoldItalic'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot?#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg');}

,@font-face,:PTSansRegular,PTSansItalic,PTSansBoldPTSansBoldItalic.

,,font-weightfont-style,-,.

.font-family:

p { font-family: PTSans;}

,,:p,em,strong.-.,PTSans,,:

p { font-family: PTSansRegular; font-size: 48px;

6. 157

font-style: normal; font-weight: normal;}

p em { font-family: PTSansItalic; font-style: normal; font-weight: normal;}

p strong { font-family: PTSansBold; font-style: normal; font-weight: normal;}

p strong em, p em strong { font-family: PTSansBoldItalic; font-weight: normal; font-style: normal;}

,:

pPTSansRegular; p em,;PTSansItalic;

p strong ,PTSansBold,;

,,-.,,.-,,.,.HTML:

Hey! , I'm talking to you

p strong emHey!,,.

HTML5 ( ) ( ) . , , , - . , - , : CSS3: The Missing Manual.

158 2. CSS

, , , . , , , ( , Internet Explorer 8, , ).

-normalfont-weightfont-style.,(InternetExplorer)-(-Firefox).

,-,.,.,,InternetExplorer8.InternetExplorer8,13(http://gs.statcounter.com/#browser_versionww-monthly-201108-201208)25%(http://www.netmarketshare.com/browsermarket-share.aspx?qprid=2&qpcustomd=0&qptimeframe=M)-.

Internet Explorer 8 . , - Internet Explorer 8. , sans-serif, , Internet Explorer - . , - , . , Internet Explorer 8 -, Chrome .

Google web fonts-,,-,,.,,,,Google-.,,-Google,,.Google---.

Googlewebfonts,-(Google)-,CSS-,.Googlewebfonts,www.google.com/webfonts(.6.6).

6. 159

. 6.6. Google web fonts , Google

,,,,..Show all styles()(.6.6)..,Quick-use()(..6.6,1),,.,.Pop out(-)(..6.6,2),,,(-,).Add to Collection()(..6.6,3)

160 2. CSS

.(,.)

.

Add to Collection(-)(..6.6).,--.500-.,,,,-,(.6.7).

.,()Search()(..6.7,1).

.(..6.7,2),,,:Serif(),Sans Serif(),Display()Handwriting().,-,,-.-.,,.,-.-,,-,,:,,!

.(..6.7,3).(Thickness),(,)().(Slant):,,.(Width)-.,,-.

.(Script)(..6.7,4).(Latin),,-,,(Cyrillic).,.

6. 161

. 6.7. , , Google

162 2. CSS

,-.Reset all filters/search(),.6.7,-Google.

Google, http://hellohappy.org/beautiful-web-type/.

,Add to Collection()(.6.8,1).,-.,,(2). ,(3).

. 6.8.

6. 163

Review(),.6.8,.,(),-,,,().

Google,-.1. GoogleWebFonts(.6.9,1)-

Use().,,-.

2. ,(..6.9, 2).,.-,..,,.,,.-.(-,,,),.,.-,.

3. ,.,-.,,Latin(.-),,LatinLatinExtended.LatinExtended,,,,-.,,-,Latin.Latin,,.

, Latin Extended, http://en.wikipedia.org/wiki/Latin_Extended-A.

4. Add this code to your website(-)(..6.9,3).

164 2. CSS

.y Standard.,-(,).,-Google,Google.:

,href.CodystarGentium.Google:300400Codystar400400italicGen-Codystar400400italicGen-400400italicGen-italicGen-Gen-Gen-tium.()(..6).

HTML5, "type='text/css'" . HTML5 .

y @import.,@import,@import(..6.9,3).,.,,-,..@import,.

y JavaScript.,,JavaScript,.,-.

5. -.,,-,-.,,,.@import:@import,,,.

@import - ( ).

6. ,.,,.,

6. 165

font-family.-Google(..6.9,4).

,-font-weightfont-style.Googlenormalbold.-100900.700bold,400-normal,.-,,GentiumBookBasic.:

em { font-family: "Gentium Book Basic", serif; font-weight: 400; font-style: italic;}

. 6.9. Google, , Use () (1), (2)

, . ,

Google

166 2. CSS

TypeKit Google

. Google web fonts . , . , , , CSS, JavaScript. (, EOT Internet Explorer 8 ).

Adobe, TypeKit, , .

Adobe ( ), . TypeKit , . JavaScript. TypeKit . TypeKit , , . , , $24 99 .

-,,-,.--CSS.-color.-,:color:

color: #3E8988;

,-().

, , , www.co-lourlovers.com.

,-,(Hexadecimal).,#6600FF,-.66,00FF.,-(RGB,).-.

6. 167

, . , #6600FF #60F #FFFFFF #FFF.

RGBRGB(Red,Green,Blue),,,-.,(0100%)0255-(,,).(,-),:

color: rgb(100%,100%,100%);

color: rgb(255,255,255);

HTML. - . 17 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow. CSS - : color: fuchsia; . , - 147 SVG- ( X11), , - , , -, , . https://develo-per.mozilla.org/en-US/docs/CSS/color_value.

RGBA,.RGBARed,Green,Blue,Alpha.,RGB,-.,(.6.10).RGB-01.0,1():

color: rgba(255, 100, 50, .5);

,RGBA,-,.,,(,.9)(,.1).RGBA-CSS-,,,.6.10:Home(),Archives(),Authors()..

168 2. CSS

. 6.10. RGBA-

RGBA text-shadow box-shadow, - . RGBA , - .

?InternetExplorer8RGBA-.-,RGBA-:

color: rgb(255,100,50); /* IE8 */color: rgba(255,100,50,.5); /* */

,,,,RGBA-.,InternetExplorer8,InternetExplorer9RGBA-.InternetExplorer8.,-InternetExplorer7,-.,InternetExplorer7,-,,.

Internet Explorer 7 8, . , Internet Explorer. , , http://css-tricks.com/rgba-browser-support.

6. 169

HSL HSLAHSLHue,SaturationLightness(Luminance)..InternetExplorer8-,.RGB-Hex-,HSL.--:

color: hsl(0, 100%, 50%);

hsl( ).0360.-,,,,-,,,-.0(360,),50,100,-150..51.

,.0100.0%-,.-,,0%.100%,.

,0(-)100().,50%.

,HSL,RGB,,,,.,FireworksPhotoshop,,-RGB-Hex-.

HSL, www.workwithcolor.com/hsl-color-schemer-01.htm .

,RGBRGBA,HSL-HSLA.,-RGBA.0(-)1().-50%-:

color: hsla(0, 100%, 50%, .5);

RGBA,HSL,.

-

170 2. CSS

.,-,.,,,,-,.

font-size..,:

font-size: 1em;

,(1em),.CSS:,em(:m,-Cicero),exs(,x),,,,,,.

,(,,..),-,-.-,-.,,em,-,.,.

,.,-,36,36.,(.,-,).

font-size,-px:

font-size: 36px;

. , 36px, 36 px.

Retina-

Apple iPhone Retina , iPhone . Retina Apple

.

6. 171

72100 , Retina 224 .

Apple Retina , iPad . , Amazon, , , . ? . . , , , .

, , , Retina, . 16 , , Retina, 32 . . 16 , , .

, , , , .

, emCSS-,em,-.,CSS,.,,-16 () .

,,,.

, , . . Ctrl++ ( -+) - , Ctrl+- ( --) . - Ctrl (Control) .

CSS,-(,16,)-,em,.

.CSS,-:xx-small,x-small,small,medium,large,x-largexx-large.CSS-:

font-size: large;

172 2. CSS

medium.-.,,,-,.xx-small9(,),x-small10,small13,large18,x-large24,xx-large32-.

-,,-,.

.,-,.-,large,x-large...16..100%.,-16.

,,-.,200%:

font-size: 200%;

,,,90%.

,-.,100%,-.

-.6.11,200%.-32.-.,,,100%32.,,,100%-,32.

em,.,-,,-,,.

m.,,em.,---.

em.-.-.CSS

6. 173

.,1em-,100%,.-em,100:.5em50%..

. 6.11. , em

,CSS-,font-size: 200%;:

font-size: 2em;

, em. , , - s : 2.5em, 2.5ems.

174 2. CSS

em,-.,,.6.11..75em,-2em(32),.7532=24-..75em..75em,,75%.:32(,-)75().75()75().,14.

() (. . 6.11). , ul { font-size: 75% }, , . , , 75 % . , , . . .

, (. . 3): ul ul {font-size: 100%}. , , 100 %. , 100 % ul, . 75 % .

, . CSS