-
+2
.Introduzione
Cos'è il CSS?
Il CSS (Cascading StyleSheet) è un linguaggio con una sintassi tutta sua. Ha un formato unico (non come l'XML o JSON che viene usato in più ambiti), ma una sintassi estremamente facile. Questo linguaggio serve a definire l'aspetto di un nodo XML o meglio un elemento del HTML. Quindi tutte quelle cose che abbiamo conosciuto fino ad ora come il div, span, body, a, table, td e così via.
Principalmente ci sono 4 selettore di base.
1) Tag
2) Classe
3) ID
4) Child-of
ogni selettore ha il suo "prefisso".
1) Tag non ha prefisso. (su linea teorica, anche niente è qualcosa xD)
2) Classe ha come prefisso il punto (.Classe)
3) ID ha il cancelletto come prefisso (#ID)
4) Child-of ha come prefisso lo spazio (selettore selettore-child)
Dopo questa introduzione un po' confusa, vi spiego cosa sono i selettori. I selettori sono una sequenza di caratteri (comunemente chiamate stringhe) che descrivono la condizione che deve avere la struttura di un elemento per avere questi stili. In questa unica frase vi si trova la definizione perfetta, ma è difficile da comprendere. Quindi andrò per via di esempi.
Partiamo dal presupposto che abbiamo questa pagina HTML.CODICE<html>
<head>
<title>Titolo</title>
</head>
<body>
<div class="articolo">
<h1 class="titolo">Css</h1>
<p class="corpo_articolo">Il css è un linguaggio che è perfetto per stilizzare elementi, fino ad oggi lo ho visto applicato solo in HTML e in JavaFx2.0</p>
</div>
</body>
</html>
Volendo possiamo scriverla come struttura, ovvero così:
>html
->head
-->titolo
->body
-->div.articolo
--->h1.titolo
--->p.corpo_articolo
Se ora volessimo costruire la "struttura" per div.articolo (che in html sarebbe div con class="articolo") possiamo partire dal elemento interessato: div.articolo e definire il suo padre (l'elemento che lo contiene, quello con una tacchetta in meno) ovvero body e concattenarli ottenendo così: body div.articolo (si potrebbe aggiungere anche l'HTML ma non è necessario).
Analiziamo questa parte che abbiamo scritto: body div.articolo
(tag:body) che contiene (tag:div & class:articolo).
Quindi ogni div con classe articolo nel body avrà gli stili che noi diremo.
Non siamo costretti a partire dal tag body, ma possiamo partire da qualsiasi elemento che noi vogliamo.
Quindi se definiamo div.articolo h1.titolo solo gli h1.titolo contenuti in div.articolo, verranno stilizati.
Per gli stili si possono definire più selettori, per esempio su ForumFree abbiamo 4 classi per i bottoni: .codebuttons, forminputs, textinput, inputs Tutti i selettori vengono separati da una virgola. Quindi se vogliamo che tutti questi bottoni abbiano il testo rosso possiamo fare:CODICE.codebuttons, .forminputs, .textinput, .inputs{color:red}
che sicuramente è più corto di:CODICE.codebuttons{color:red}
.forminputs{color:red}
.textinput{color:red}
.inputs{color:red}
Gli elementi e i selettori possono avere più classi, ma non più tag o id.
Per esempio invece di class="articolo" potremmo avere class="articolo sport".
Il suo selettore poi sarebbe: .articolo.sport{STILI}
Commenti
Come in HTML, anche nei CSS abbiamo i commenti (sti programmatori ci tengono veramente a tenere in ordine il codice). Ma invece della sintassi XML che viene usata in HTMLCODICE<!--COMMENTO-->
Qui abbiamo una sintassi meno complicata.CODICE/*COMMENTO*/
Esercizio
Il vostro esercizio sarà quello di attribuire classi o id (gli ID devono essere unici, non possono essere doppi) ai elementi HTML e di stilizarli con il CSS.
Più che stilizzare dovete definire i selettori corretti, come stili dovete solo copiare gli stili che sono già presenti nell'esercizio.
La sintassi è la seguente.CODICEselettore{STILI}
Gli stili sono questi:CODICE{
background-color:rgba(0,0,0,0.2);
border-radius:7px;
border:1px white dashed;
color:#FFFFFF;
text-indent:20px;
}
E voi dovete solo definire i selettori in talmodo da riuscire ad ottenere questo risultato.
Edited by flexlex - 30/3/2014, 02:14
. -
.
Lexino, ma il segno # non dovrebbe chiamarsi "Cancelletto"? Tu hai scritto "Cancellato". Illuminami (d'immenso), mio caro. . -
.
Ma che cosa vai blaterando rory? rileggi u.u
(ed ignora questa parte: Modificato da flexlex - 30/3/2014, 02:14). -
.
Ahahahahah <3 Mi perdoni, messere, ho avuto una svista.
Comunque volevo che tu m'illuminassi (d'immenso) ancora una volta:
- Il commento a che serve, fondamentalmente? Mi dispiace, ma la mia mente regredita non ha ancora concepito l'arcano messaggio.
- .codebuttons, forminputs, textinput, inputs <--- Hai detto detto che sono diversi stili di "bottoni". Ma... Quali, precisamente? Che forma assume se io uso il textinput invece di inputs? XD. -
.
I commenti servono a tenere ordine nel codice CSS, se vai in AMMINISTRAZIONE > GRAFICA > COLORI & STILI vedi certe scritte rosse (negli stili del MAW), sono commenti che servono ad orientarsi.
Premendo ctrl + f, puoi fare una ricerca nel CSS e per esempio cerchi: "Shoutbox - Campo di testo" e ti manda subito agli stili che stai cercando... Se come nella nuova skin hai oltre 4000 righe, ti sfido a mantenere sempre la panoramica sul codice xD
È un modo per insegnare ai uomini di essere ordinati xD
In quel caso, tutti i bottoni hanno lo stesso stile.
Ma forumfree usa una classe diversa per ogni tipo di bottone.
Per esempio quelli dei topic sono: codebuttons.
Quelli per la registrazione sono: foruminput.
Nel vecchiolayout le textarea avevano: textinput.
ma spesso capita che i vari tasti hanno lo stesso stile. ed invece di fare "copia ed incolla", si usa una virgola xD
per applicare a tutte quelle classi lo stesso stile xD. -
.
Ma che gentleman. u.u . -
.:Milla:. .
User deleted
http://jsbin.com/yazarega/1/edit
Okay, il risultato è lui, non so se poi ho fatto bene i css e gli html °° ci ho messo un botto per farlo
Edit http://jsbin.com/yazarega/7/edit
Edited by .:Milla:. - 10/4/2014, 00:26. -
~YuYa .
User deleted
http://jsbin.com/wocezabe/3/edit
Dovrebbe andare bene?
. -
.
~YuYa va bene 
.
Introduzione[CSS - Base] |
Offline
Web
