Archivi mensili: Dicembre 2021

CSS INTRODUZIONE Prima di parlare del post "Selettori semplici in CSS" diamo la definizione di CSS. CSS sta per Cascading Style Sheets, con i CSS descriviamo come vogliamo che gli elementi delle nostre pagine HTML appaiano, personalizziamo ad esempio font, colori, sfondi etc. Creato dal W3C (World Wide Web Consortium) come "complementare" ad HTML. LA REGOLA DEL CSS Per ciascun selettore abbiamo una coppia chiave-valore chiamata dichiarazione. Parleremo in dettaglio dei selettori più avanti. COME AGGIUNGERE IL CSS ALLE NOSTRE PAGINE HTML Esistono tre modi per inserire un foglio di stile in una pagina HTML. [...]

CSS COMBINATORS SELECTORS Ci sono quattro diversi combinators selectors nei CSS: descendant selector (space) child selector (>) adjacent sibling selector (+) general sibling selector (~) DESCENDANT SELECTOR Il descendant selector corrisponde a tutti gli elementi che sono discendenti di un elemento specificato. La figura mostra i paragrafi che sono i figli di un elemento div. Il  descendant selector  - tipicamente rappresentato da un singolo carattere spazio ( ) - combina due selettori in modo tale che gli elementi corrispondenti al secondo selettore siano selezionati se hanno un elemento antenato (genitore, genitore del genitore, genitore del genitore del genitore, [...]

I COLORI IN CSS I colori vengono specificati utilizzando nomi di colori predefiniti o valori RGB, HEX, HSL, RGBA, HSLA. NOMI DEI COLORI CSS In CSS, un colore può essere specificato utilizzando un nome di colore predefinito. CSS/HTML supporta 140 nomi di colori standard. Un’altra preziosa risorsa dove reperire e scegliere tra migliaia di colori è il seguente sito web: https://coolors.co/ selezionare explore e quindi la palette desiderata. CSS BACKGROUND COLOR Imposta il colore di sfondo per gli elementi HTML. CSS TEXT COLOR Imposta il colore del testo. CSS BORDER COLOR Imposta il colore dei bordi. [...]

BOX MODEL Introduciamo l'argomento "Il modello a box nei CSS" dicendo che tutto in CSS è circondato da un box (scatola) e la comprensione di questi riquadri è la chiave per poter creare layout con i CSS o per allineare elementi con altri elementi. In questa lezione daremo un'occhiata adeguata al CSS Box Model in modo da poter creare attività di layout più complesse con una comprensione di come funziona e della terminologia ad esso correlata. SPIEGAZIONE DEL BOX MODEL Spiegazione delle diverse parti: Content - Il contenuto del box, dove appaiono testo e immagini Padding [...]

IL POSIZIONAMENTO CON I CSS Nel flusso normale gli elementi si posizionano partendo da sinistra in alto e si susseguono l'un l'altro verso il basso a destra, fino ad occupare tutto lo spazio disponibile. Gli elementi si distanziano attraverso i margini. Uno dei sistemi utilizzati per variare questo schema è il posizionamento, attraverso il quale, agendo sulla proprietà position si può variare la posizione di un elemento rispetto alla sua posizione originale nel documento e anche rispetto agli altri elementi che lo circondano. Un altro metodo per variare lo schema predefinito, è il floating, con il quale si riesce [...]

CSS FLEXBOX Prima di Flexbox Layout, c'erano quattro modalità di layout: Block, per sezioni in una pagina web Inline, per il testo Table, per dati di tabelle bidimensionali Positioned, per la posizione esplicita di un elemento Il CSS Flexbox Layout semplifica la progettazione di strutture di layout flessibili e reattive senza utilizzare float o posizionamento. Per iniziare a utilizzare il modello Flexbox, si deve prima definire un flex container. Il Flexible Box Module, solitamente indicato come flexbox, è stato progettato come modello di layout unidimensionale e come metodo in grado di offrire una distribuzione dello spazio tra gli elementi [...]

CSS MEDIA QUERIES Le query multimediali in CSS3 hanno esteso l'idea dei tipi di media CSS2. Invece di cercare un tipo di dispositivo, esaminano la capacità del dispositivo. Le query multimediali possono essere utilizzate per verificare molte cose, ad esempio: larghezza e altezza della finestra larghezza e altezza del dispositivo orientamento (il tablet/telefono è in modalità orizzontale o verticale?) risoluzione L'utilizzo delle query multimediali è una tecnica popolare per fornire un foglio di stile personalizzato a desktop, laptop, tablet e telefoni cellulari (come iPhone e telefoni Android). SINTASSI Una media query è costituita da un tipo [...]