. , , ,

,,,

,

Douglas Bowman

CSS -. .

"" HTML? , CSS, Adobe Photoshop , , . , -, , , , . ?

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

, . . , . ( Lynx) . , alt, ( alt title) , "" HTML. , , <hn></hn>. , .

- . ? CSS, , -, (. ), . !

: ( "Hello world!") HTML-. CSS , , . . , .

CSS, HTML-. , - :

<div>

<span>Hello world!</span>

</div>

, . - - , font-family text-transform. ! "!" , , ?

, , Shelley Allegro. , Shelley Allegro , , "Hello!". 1,65 % . , - "Hello world!". , , , Shelley Allegro , .

, 35 , .

, HTML , . ? .

.

(Todd Fahrner) - , . - div span. , , . "" .

, , . -, (background) div.

div {

background-image:url("hello_world.gif");

background-repeat:no-repeat;

height:35px;

}

height. , div , , - . background-repeat , .

, HTML . span - , "" . .

span {display:none;}

HTML , . , , ?

, . . <div> "Hello world!", , <span></span>, .

, .

.

stopdesign.com. (, "Recent Log Entries" ). CSS. , , . , . , .

, , . , , -, <h1>, , .. html-, .

, , (. ) , . , <h1>.

- , - . <body> id class . , , <h1> , <body> <h1> ( body#sectionForum h1 body.sectionForum h1). , , .

id, . : Recent Log Entries stopdesign.com "t-reclog". "t-" , , , - . "t-" , ( title). , , .

, . "id", , , "class", "swap". , , id . , , , . <h1>, "swap". <h1> . - .

stopdesign.com :

h1.swap {

height:22px;

background-repeat:no-repeat;

}

h1.swap span {display:none;}

:

h1#t-recentlog {background-image:url("/img/title_reclog.gif");}

h1#t-articles {background-image:url("/img/title_articles.gif");}

h1#t-portfolio {background-image:url("/img/title_port.gif");}

, titles.css, screen.css. screen.css html- <link>.

.

- ? HTML ? , ? , , . , , . , Shelley Allegro "E", .

, ( , div). , , - , . span:

<p><span class="dropcap"><span>E</span></span>ver wanted a ...

, <span>, . "" (float) , . display: block; (, float). :

span.dropcap {

display:block;

float:left;

width:46px;

height:63px;

margin-right:5px;

background-image:url("dropcap_e.gif");

background-repeat:no-repeat;

}

span.dropcap span {display:none;}

, . , (margin-right) . HTML CSS - , .

. , , :

,

""

(, "and" "vs.")

. .

. , html-. , - . - , . , html-. , (.. , stopdesign.com) html-, . , html- , .

:

-, , ( ), ( ) .

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

-, : , (.. , ).

, . - , -. - . / .

, ( ) . .

:

Mac: Camino .7+, IE 5+, Mozilla, Netscape 6+, OmniWeb 4+, Opera 5+, Safari

Win: Firebird .6+, IE 5+, Mozilla, Netscape 6+, Opera 5+, Phoenix .5+

, . . A List Apart: Facts and Opinion About Fahrner Image Replacement.

, , , - , alt, . , display:none, . , , media="screen", , . media=" aural", "speak" .

"display:none;" "visibility:hidden;", "" . JAWS - - - , . , , , JAWS .

- (content-altering) , , , . , - . . :

/ [Leahy/Langridge Image Replacement (LIR)]

: <span> <span> (height: 0;) (overflow: hidden;). (padding-top), . (Seamus Leahy and Stuart Langridge).

(Rundle's Text-Indent Method)

(Mike Rundle) CSS- "text-indent" .

(Cover-up Method)

(Petr Stanicek (a.k.a. "Pixy") and Tom Gilder). , <span>, . , ( ).

FIR (Dave Shea) "In Defense of Fahrner Image Replacement" Digital-Web.com.

http://www.webmascon.com/

Douglas Bowman CSS -. .

 

 

 

! , , , .
. , :