COME PRESENTAREUNAPAGINA WEB · Il CSS(Cascading Style Sheets, in italiano fogli di stile a...

CSSCOMEPRESENTARE UNA PAGINA WEB

IlCSS (CascadingStyleSheets,initalianofoglidistileacascata),ininformatica,èunlinguaggiousatoperdefinirelaformattazionedidocumentiHTMLeXHTML.LeregolepercomporreilCSSsonocontenuteinuninsiemedidirettive(Recommendations)emanateapartiredal1996dalW3C.

L'introduzionedelCSSsièresanecessariaperseparareicontenutidellepagineHTMLdallaloroformattazioneepermettereunaprogrammazionepiùchiaraefaciledautilizzare,siapergliautoridellepaginestessesiapergliutenti,garantendocontemporaneamenteancheilriutilizzodicodiceedunasuapiùfacilemanutenzione.

NoiutilizziamoCSS3:lasuaultimaversione,aggiornatanel2014.

Cos’è CSS

1. Inline attraverso l’attributo style :<pstyle="color:red">text</p>

Comeabbiamo detto però,lostileè beneche sia separato dall’html.

2. Internal:sempre all’interno delfilehtml,maseparato dalcodice html:

Esistono tre modi peraggiungere stile

<!DOCTYPEhtml><html><head><title>CSSExample</title><style>p{color:red;

}

a{color:blue;

}</style>

<body><p>provacon<ahref="www.google.com">link</a></p></body></html>

IlsecondometodononseparaancoratotalmenteHTMLdaCSS.3. External:aprireunnuovofileditestosalvandolo(consuffisso.css)nellastessadirectorydel

filehtmlacuisivuoldarestile,eriportaretuttolostiledirettamentelì.Nell’esempiosottoabbiamochiamatoilfilestyle.css.ATTENZIONE,seilfile.cssvienesalvatoinunadirectorydifferente,valgonolestesseregoledipercorsocheabbiamovistoperaltrepagineeimmagini

Lamodalità che utilizzeremo

p{color:red;

}

a{color:blue;

}

<!DOCTYPEhtml><html>

<head><title>CSSExample</title><linkrel="stylesheet"href="style.css"></head>

<body>…</body></html>

Lostessofile.csspuòessereinclusoinpiùfileHTMLdiversi,seessidevonoaverelostessostile;altrimenti,farepiùfile.css,unoperognistiledifferente.

IlcodiceCSSdainserireoreferenziareèstrutturatosottoformadiunaopiùregoleovveroistruzioniditipoproprietà:valorechevengonoapplicatedalbrowserinfasedirenderingaglielementiHTMLinteressatiopportunamentespecificatitramiteunselettore,iltuttostrutturatosecondoilseguenteschemasintattico(glispazielenuovalineesonotuttifacoltativi):

oggetto{proprietà1:valore1;

proprietà2:valore2,valore3;

}

MentreconHTMLsiparladitag,inCSSsiparladiselettori.Coniselettoriciriferiamoaduninsiemedielementidell’HTMLacuivogliamocambiarestile.

Regole CSS

body{font-size:14px;color:navy;

}

selettore

Primoesercizio

Esercizio11

Aggiungere leinformzioni distileAggiungereleseguentiistruzionidistile:<styletype="text/css">

body{background-color:#d2b48c;margin-left:20%;margin-right:20%;border:1pxdotted gray;padding:10px10px10px10px;font-family:sans-serif;}</style>

Perorasoloilvalore“text/css”èsupportatoperl’attributotypedell’elementostyle:quindipuòomettere:Solo<style>...</style>

ProvareaspostareilcodiceCSSinunaltrofiledinomemiostile.css,ecollegarloalsolitofileCSS,eliminadotuttoquellocheriguardalostiledall’HTML.

Secondoesercizio

LeclassiapplicanolaregolaatuttiglielementidellapaginaHTMLchepresentanol’attributoclass="nome_classe".

LasintassiCSSèlaseguente:

.nome_classe {

[...]

}

Altri selettori (Identificatori)

p.blu{color:blue;

}

.blu{color:blue;

}

Tuttiiparagrafideldocumentohtmlavrannountestodicoloreblueseappartengonoallaclasseblu.

TuttociòcheneldocumentoHTMLappartieneallaclasseblu avràuntestocoloratodicoloreblueseappartengonoallaclasseblu.NONSOLOIPARAGRAFI.

Esempio

<!DOCTYPEhtml><html><head><style>.center{

text-align:center;color:red;

}</style></head>

<body><h1class="center">Redandcenter-alignedheading</h1><pclass="center">Redandcenter-alignedparagraph.</p></body></html>

Esempio

<!DOCTYPEhtml><html><head><style>h1.center {


}</style></head>

<body><h1class="center">Redandcenter-alignedheading</h1><pclass="center">Redandcenter-alignedparagraph.</p></body></html>

Gliidentificatori(comunementeID)applicanolaregolaaquell'elementodellapaginachepresentalaproprietàid="nome_identificatore".

GliIDcontraddistinguonoelementiuniciall’internodellapaginaHTML:noninserirelostessovaloreperIDnelalstessapaginaHTML.

LasintassiCSSèlaseguente:

#nome_identificatore {

[...]

}

Altri selettori (identificatori)

Esempio<!DOCTYPEhtml><html><head><style>#para1{


}</style></head>

<body><pid="para1">HelloWorld!</p><p>Thisparagraphisnotaffectedbythestyle.</p></body></html>

Raggruppare i selettori insieme

h1{text-align:center;color:red;

}

h2{text-align:center;color:red;

}

p{text-align:center;color:red;

}

h1,h2,p{text-align:center;color:red;

}

Possonoessereutilipercommentaredelleregolemomentaneamente:senzacancellarleepoiriscriverle.

Commenti inCSS

p{color:red;/*Thisisasingle-linecomment*/text-align:center;

}

/*Thisisamulti-linecomment*/

InCSSesistono 16,777,216 colori adisposizione.

Sipossono utilizzare tramite unnome,unvalore RGB(rosso/verde/blu),odunvaloreesadecimale (inbase16).ØredØrgb(255,0,0)Ørgb(100%,0%,0%)Ø#ff0000Ø#f00

Alcuni colori possibili sono aqua,black,blue,fuchsia,gray,green,lime,maroon,navy,olive,purple,red,silver,teal,white,yellowe transparent.

Conrgb si modulano leuantità perogni colore della terna.

Inesadecimale,laquantità è definita comeinrgb (ff =massimo dirosso,00minimo diverde eblu).

Colori

Nomihttp://www.w3schools.com/colors/colors_names.asp

Coloriordinatiperesadecimalehttp://www.w3schools.com/colors/colors_hex.asp

ColoriottenicbiliinRGBhttp://www.w3schools.com/colors/colors_rgb.asp

Colorpickerhttp://www.w3schools.com/colors/colors_picker.asp.

Strumenti perottenere colori facilmente

Colore perbg efont(esempio)

<!DOCTYPEhtml><html><head><title>CSSExample</title><style>

h1{color:yellow;background-color:blue;

}</style><body><h1>Titolo1</h1></body></html>

Altre proprietà deltesto

Famiglie difont

Comespecificare i font

Precedenza emancanza

text-transform:capitalizemodificalaprimaletterediogniparolainmaiuscolo.

text-transform:uppercasemodificatuttoiltestoinmaiuscolo.

text-transform:lowercasemodificatuttoiltestoinminuscolo.

text-transform:nonenonmodificaniente.

Trasformazioni ditesto

CSSProperty:font-family

CSSProperty:font-size

CSSProperty:font-weight

CSSProperty:font-style

CSSProperty:text-decoration

CSSProperty:text-transform

CSSProperty:letter-spacing

CSSProperty:word-spacing

CSSProperty:line-height

CSSProperty:text-align

CSSProperty:text-indent

Ricapitoliamo conqualcosa inpiù

leftrightcenterjustify

background-color:coloredibackground.

background-image:l’indirizzodovesitroval’immagine.

background-repeat:quantevolteecomesiripetel’immagine.IlsuovalorepuòessereØrepeat,vieneripetutapertuttoilbackground,Ørepeat-y,ripetutadalbassoversol’alto,Ørepeat-x,ripetutadasinistraversodestra,Øno-repeat,nonvieneripetuta:vienevisualizzatasolounavolta.

background-position:puòesseretop,center,bottom,left,right,unalunghezzaopuureunapercentuale,ounaqualsiasicombinazione,cometop right.

Leimmaginipossonoessereutilizzateancheperaltrielementidellapagina,nonsoloper<body>.Peresempio,perlosfondodiparagrafi,oancheperavereun’immagineperogni<li> diunalista.

Immagini

Esempiobody{background:whiteurl(http://www.htmldog.com/images/bg.gif)no-repeattopright;

}

EreditarietàLEPROPERIETÀ DEI PADRI VENGONO EREDITATE DAIFIGLI

Ereditarietà

Override

Ovverride

BoxmodelUNAMBIENTE DICONTORNO PERGLI ELEMENTI

Attornoadunelementodipuòdefinireunospaziopadding,unborder,edunospaziomarginattornoalbordo,comenelseguentemodello.

Introduzione

Esempi

Ogni lato è diverso

margin-top,margin-right,margin-bottom,margin-left,

padding-top,padding-right,padding-bottom,padding-left

Bordo

h2{border-style:dashed;border-width:3px;border-left-width:10px;border-right-width:10px;border-color:red;

}

Ealtri:double

Anche perIbordi,ogni lato è diverso

Esempio

<!DOCTYPEhtml><html><head><style>#pstile{background-color:lightgrey;

width:300px;border:25pxsolidred;padding:25px;margin:25px;}

</style></head>

<body><h2>DemonstratingtheBoxModel</h2>

<p>TheCSSboxmodelisessentiallyaboxthatwrapsaroundeveryHTMLelement.Itconsistsof:borders,padding,margins,andtheactualcontent.</p>

<pid="pstile">Thistextistheactualcontentofthebox.Wehaveaddeda25pxpadding,25pxmarginanda25pxgreenborder.Utenimadminimveniam,quisnostrudexercitationullamcolaborisnisiutaliquipexeacommodoconsequat.Duisauteiruredolorinreprehenderitinvoluptatevelitessecillumdoloreeufugiatnullapariatur.Excepteursintoccaecatcupidatatnonproident,suntinculpaquiofficiadeseruntmollitanimidestlaborum.</p></body></html>

Esempio

W3CSchool(CSS)

http://www.w3schools.com/css/

HTMLDog(CSS)

http://htmldog.com/guides/css/

Tutorial

ValidazioneCOMECONTROLLARE LASINTASSI DELFOGLIO DISTILE

https://jigsaw.w3.org/css-validator/

Sipuòutilizzareancheinitaliano!https://jigsaw.w3.org/css-validator/validator.html.it

Comevalidare

CSS3

UtilizzareilvalidatoreHTMLperlepagineHTMLequelloCSSperIfileCSS

COME PRESENTAREUNAPAGINA WEB · Il CSS(Cascading Style Sheets, in italiano fogli di stile a...

Documents

Transcript of COME PRESENTAREUNAPAGINA WEB · Il CSS(Cascading Style Sheets, in italiano fogli di stile a...