Estratto del documento

SINTASSI DI CSS

Impariamo a scrivere i CSS.

I CSS sono degli attributi grafici che possiamo aggangiare comodamente alle classi di HTML.

Il principio dell'appartenenza è fondamentale per specificare a chi vogliamo agganciare i nostri attributi, dunque dobbiamo ricordare che più dettagliatamente specifichiamo il soggetto più sarà mirato il nostro intervento.

Se mi riferisco contemporaneamente a più di un elemento per gli stessi attributi (spesso sconsigliato ma talvolta utile), basta separare gli elementi con una virgola:

.primoElemento, .secondoElemento {
    ...
}

LA GERARCHIA questione gerarchica

Dovremmo dunque pensare alla come se stessimo parlando di un barattolo dentro un baratto dentro un altro barattolo e così via, fino al dettaglio. I contenitori più grandi sono ID Classi, gli e di seguito le #CodiceIdentificativo {}.

È l'area più grande sulla quale interveniamo. È un grande contenitore di classi (come fosse una SuperClass).

In HTML lo si crea tramite l'introduzione di
..
. La classe si identifica con
. In HTML lo si crea tramite l'introduzione di , , , , ,

,

,

, ,

,

, ,
,
    ,
      ,
    1. . I commenti si inseriscono con // per un commento su una linea e /* */ per un commento su più linee. Gli eccezioni e i selettori si applicano nel seguente modo: .classe a:hover. Genitore:first-child si applica a una lista.Il First Child si riferisce al primo elemento. Spesso è utile per attribuire al primo elemento delle caratteristiche diverse dagli altri elementi in lista. ```html

      Primo elemento della lista

      ``` Genitore:last-child Data una lista. Il Last Child si riferisce all'ultimo elemento. Spesso è utile per attribuire all'ultimo elemento delle caratteristiche diverse dagli altri elementi in lista. ```html
      • Elemento 1
      • Elemento 2
      • Ultimo elemento
      ``` ContenitoreGenitori Genitore:first-of-type Il primo Genitore all'interno di una lista di Genitori! ```html

      Primo genitore

      Secondo genitore

      ``` ContenitoreGenitori Genitore:last-of-type L'ultimo Genitore all'interno di una lista di Genitori! ```html

      Primo genitore

      Ultimo genitore

      ``` Scritta::first-letter Prima lettera di Scritta (p,div, color...) ```html

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      ``` Scritta::first-line Prima riga di un testo ```html

      Lorem ipsum dolor sit amet, consectetur adipiscing elit.

      ``` Genitore:hover Indica ciò che accade al passaggio del mouse sull'oggetto. ```html
      Testo
      ``` Genitore:focus ```html ``` Genitore * Tutti gli elementi di Genitore ```html

      Elemento 1

      Elemento 2

      ``` Genitore:active Lavora onClick (tenendo premuto il tasto del mouse) ```html ``` Genitore >* Tutti gli elementi interni al Genitore ```html

      Elemento 1

      Elemento 2

      ``` Genitore > Figlio (es. div > p) Tutti ```html

      Elemento 1

      Elemento 2

      ```

      Gli elementi p che appartengono al div specificato..

      Figlio Genitore Ogni Figlio del Genitore

      Box:checked Box di selezione cliccato (True, Yes)

      Box:disabled Box di selezione non cliccabile la cui scelta è disabilitata (non possibile)

      Box:enabled Box di selezione disponibile per la scelta (Ne si ne no al momento)

      Box:empty Tutti i Box di selezione in cui esiste un' Input

      Box:focus Box di selezione scelto nel quale è in esecuzione un' input (o scanner)

      Input:in-range Tutti gli input che contengono selezione numerica nel range 1-10

      Input:out-of-range Superato il numero 10 si bloccherà la selezione

      Input:valid Tutti gli input accettabili (es.int: 3, string: 'ciao'). Utile per il colore degli outlines positivi!

      Input:invalid Tutti gli input non accettabili (es. Int: 'ciao', string: 3). Utile per outlines negativi!

      li:nth-child(even) Tutti gli elementi pari della lista

      li:nth-child(odd) Tutti gli elementi dispari della lista

      li:nth-first-child(1)

      Il primo elemento pari della lista
    2. :nth-last-child(1)
      3. L'ultimo elemento pari della lista
    3. :nth-last-child(1)
      4. AdminAttributi visibili solo all'utente root (Amministratore) CREAZIONE E USO DI ANIMAZIONI

      Ecco come creare e gestire le animazioni!

      ATTRIBUTI DI BASE

      Ecco alcuni attributi utili!!

      • !important -> Usa per imporre qualcosa
      • DISPLAY: None - Nascosta
      • POSITION: Relative - In relazione a contenitore ed elementi interni, Absolute - Staccato da tutto il resto (sconsigliato)
      • Z-index: 0-9 - Livello inferiore/Superiore (numero basso < numero alto)
      • POSIZIONI
        • Top/right/bottom/left: px
        • Margin-Top/Margin-right/Margin-bottom/Margin-left: px
      • DIMENSIONI
        • Width: px %oppure --> Larghezza
        • Max-Width: px %oppure --> Larghezza Massima
        • Min-Width: px %oppure --> Larghezza Minima
        • Height: px %oppure --> Altezza
        • Max-Height: px %oppure Altezza Massima
        • Min-Height: px %oppure Altezza Minima
      • FONT/TEXT
        • Color: #hexacolor/RGB/’SimpleColorName’ Modifica il colore del testo
        • font-weight: bold/bolder/lighter/normal
      Anteprima
      Vedrai una selezione di 1 pagina su 5
      Appunti sul Codice CSS Pag. 1
      1 su 5
      D/illustrazione/soddisfatti o rimborsati
      Acquista con carta o PayPal
      Scarica i documenti tutte le volte che vuoi
      Dettagli
      SSD
      Scienze matematiche e informatiche INF/01 Informatica
      I contenuti di questa pagina costituiscono rielaborazioni personali del Publisher peppelion99 di informazioni apprese con la frequenza delle lezioni di Sintassi del Linguaggio CSS e studio autonomo di eventuali libri di riferimento in preparazione dell'esame finale o della tesi. Non devono intendersi come materiale ufficiale dell'università Università della Calabria o del prof Flesca Sergio.
      Appunti correlati Invia appunti e guadagna

      Domande e risposte

      Hai bisogno di aiuto?
      Chiedi alla community
      Vai al forum

      I migliori insegnanti di Informatica

      Salvatore

      Salvatore F.

      Supertutor
      Percorsi
      Verificato
      DSA

      Insegnante di Aiuto compiti, Aiuto tesi, Algebra, Analisi 1

      a partire da 20 €/ora
      most booked
      Andrea

      Andrea D.

      Supertutor
      Percorsi
      Verificato

      Insegnante di Aiuto tesi, Contabilità e bilancio, Controllo di gestione, Diritto

      a partire da 15 €/ora
      most booked
      Pietro

      Pietro S.

      Supertutor
      Percorsi

      Insegnante di Aiuto tesi, Algebra, Analisi 1, Analisi 2

      a partire da 18 €/ora
      most booked
      Mostra altri Tutor
      sendMessage
      Tutor AI
      tutorai_icon
      Ciao! Sono il tuo Tutor AI, il compagno ideale per uno studio interattivo. Utilizzo il metodo maieutico per affinare il tuo ragionamento e la comprensione. Insieme possiamo:
      • Risolvere un problema di matematica
      • Riassumere un testo
      • Tradurre una frase
      • E molto altro ancora...
      Cosa vuoi imparare oggi?
      tutorai_icon
      Il Tutor AI di Skuola.net usa un modello AI di Chat GPT.
      Per termini, condizioni e privacy, visita la relativa pagina.