Html / Css

Elenco guide gratuite da noi selezionate nella rete (contenuto guide in italiano)

 

Tutoriales Front-End - Curso CSS3 2014

 

inserita 21/04/2016 (Italia)
Playlist Youtube 2014
guide analizzate 11 su 48

Canale Youtube || Vai alle guide 

 

Principianti | Livello intermedio | Livello avanzato | Esperti


      

[#1 Introduccion - Curso CSS3 desde cero]

Contenuto guida:

  • presentazione corso

 

      

[#2 Un poco de historia de CSS - Curso de CSS3 desde cero]

Contenuto guida: 

  • storia dei CSS ... nascono nel 1966
  • facilitano aggiornamento di un sito
  • oggi siamo arrivati alla versione CC3

 

      

[#3 Conceptos básicos - Curso de CSS3 desde cero]

Contenuto guida: 

  • un esempio di stile:
<P style= "margin-left:20px;"> qui scrivi il testo <p>
  • elemento "in linea" (solo per questo paragrafo)
  • sposta il paragrafo di 20 pixel verso destra (aumenta il margine sinistro)
  • esempio di stile interno (per tutta la pagina)
<style>
p {color:#ffffff; font-size:9pt}
body {background-color:#ddddddd; margin:0; padding:0;}
</style
  • terzo tipo ... foglio esterno
<link rel="stylesheet" href="nome del foglio css esempio esterno.css">
  • esempio di contenuto del foglio css esterno
  • [min. 9.33] i commenti si indicano così:
/* questo è un commento */ 


      

[#4 Selectores básicos de CSS - Curso de CSS3 desde cero]

Contenuto guida: 

  • ho una pagina html collegata ad un foglio di stile...
  • se voglio applicare degli stili a tutti gli elementi (salvo sovrascrivere stili  per singoli elementi) uso "*" ...
<head>
<style>
* {
    background-color: yellow;
margin: 0;
}
</style>
</head>
  • applica vari stili al body, alle intestazioni ed ai paragrafi
  • esempio con un elemento discendente (applicato solo se interno ad un altro elemento)
H1 span  {text-decoration: underline;} 
  • si applica solo ad uno span interno ad un H1

 

5 - Selectores Id y Class - Curso de CSS3 desde cero 

Contenuto guida: 

  • le classi.... esempio
.pippo  {
background:red;
border:1px solid #333333; }
  • applica delle classi qua e la (possono essere usate molte classi nella setssa pagina)
  • servono per formattare elementi in modo diverso rispetto alla formattazione generale
  • poi analizza gli "Id"
#pluto {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
  • a posto del punto c'è il cancelletto e di Id è consentito solo uno a pagina

#6 - Combinadores de Selectores - Curso de CSS3 desde cero 

Contenuto guida: 

  • analizziamo adesso selettori padri - figli....
div > a 
  • stile applicato solo se a è figlio diretto di div (no se nipote).... mostra alcuni esempi
  • se la "a" è dentro un paragrafo non colpita anche se il paragrafo è dentro il div.... diretto
  • altro selettore per elementi adiacenti
h1 + p  {text-decoration: underline;} 
  • P colpito solo se arriva immediatamente dopo un H1
  • fa altro esempio con p + p
  • altro selettore per fratelli
h2 ~ p  {text-decoration: underline;} 
  • colpisce tutti i paragrafi che seguono un H2 anche se in mezzo ci sono altri tag (no i P che precedono)

#7 Selectores de Atributo - Curso de CSS3 desde cero 

Contenuto guida: 

  • ora vediamo i selettori di attributo che permettono selezioni ancora più precise
  • alcuni sono della versione 2 di css altri introdotti con la css3
  • il primo - il css colpisce un attributo... usa "rel" di un "a" ma solo se il valore è "external"
a[REL=external] {
background:#CF0;
color:#333;
display:block;
margin:4px;
  • secondo tipo - h1[title~="testo"] - funziona se l'attributo title contiene una lista di parole separate da spazi e che nella lista sia presente la stringa testo
  • h1[title|="testo"]  [questo saltato n.d.r.]
  • terzo tipo a[href^="https"] - funziona se l'attributo href inizia con https   
  • quarto tipo a[href$=".rar"] - funziona se l'attributo href finisce con .rar   
  • quinto tipo p[title*="parrafo"] - funziona se l'attributo href contiene il valore indipendentemente dalla posizione 

#8 - Introducción a las Pseudo Clases de CSS - Curso de CSS3 desde cero 

Contenuto guida: 

  • le pseudo classi permettono elementi di interazione con l'utente
  • elenco e storia delle pseudo classi

 

#9 Pseudo clases css de Links y Acciones - Curso CSS3 desde 0 

Contenuto guida: pseudo classi

  • le prime che vediamo applicano stili ai link che di default sono solo colorati e sottolineati
  • a:link { colorgreen; }  applica stili al link quando questo viene visitato
    a
    :visited colorred; }  
    applica stili al link quando il mouse passa sopra
    a
    :hover colorrwhitebackground-color:#CF6;}  
    applica stili al link quando con il mouse si clicca sopra e si mantiene premuto
    a
    :hactive colorrwhitebackground-color:#CF6;}  applica stili al link quando con il mouse si clicca sopra e si mantiene premuto
  • usa le p.c. anche per "input" ma con "focus" (quando ci clicco sopra)
input:focus {color: blue; background-color:#CF6;}

 

 

#10 - Pseudo Clases Estructurales Básicas - Curso de CSS3 desde cero 

Contenuto guida: pseudo classi

  • le pseudo classi quindi aiutano a selezionare parti della pagina web
  • vediamo adesso first child
nav li:first-child { background-coloryellow; }
  • colpisce primo elemento figlio di un genitore specifico (quindi solo il primo li dentro un nav)
  • altro esempio con article e p
  • stessa cosa ma per l'ultimo elemento è "last-child"
  • con il last elimina riga verticale su ultimo elemento del menu
nav li:last-child {border-right:none;}
  • altro esempio con article e p + ul li
  • poi abbiamo only-child
span:only-child {background-color: yellow;}
  • si attiva solo se l'elemento padre non ha altri figli

#11 - Pseudo clases :nth-child() - Curso de CSS3 desde cero 

Contenuto guida: pseudo classi

  • colpire figli di un parente usando la loro posizione numerica
li:nth-child(2) { background: red; } 
  • fa esempio con una lista (elenco)
  • al posto del numero si può anche scrivere odd oppure even  (dispari o pari)
li:nth-child(odd) { background: red; } 
  • se si vuole iniziare a contare dall'ultimo figlio si usa ....last-child
li:nth-last-child(odd) { background: red; } 
  • h4 52 hjhk
p:nth-last-child(3n+0) { background: red; } 
  • anche con una formula finale - 3n+0 - qui voglio contare di 3 con indice (n) + a partire da.... insomma parte da zero (da sotto) passo 3