Post on 13-Oct-2020
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 {
text-align:center;color:red;
}</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{
text-align:center;color:red;
}</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>
Testo
Altre proprietà deltesto
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à
Ereditarietà
Ereditarietà
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