CSS è un foglio di stile a cascata, che è un linguaggio per descrivere l'aspetto delle pagine web. Uno dei principali vantaggi dei CSS è la possibilità di sostituire il layout della tabella con il layout del blocco.
È necessario
Editor di codice HTML
Istruzioni
Passo 1
Crea il primo blocco. In formato HTML, sembrerà un tag div con id 'block01'. Qui, l'identificatore block01 indica che nella descrizione CSS, tutte le proprietà di questo blocco sono specificate per il selettore # block01.
Passo 2
Descrivi il blocco in CSS. Negli stili CSS, specifica il nome dell'identificatore (# block01) e tra parentesi graffe descrivi i suoi parametri: larghezza, posizionamento, offset, colore di sfondo, ecc. Ad esempio, potrebbe essere simile a questo: # block01 {width: 150px; altezza: 150px; posizione: assoluta; in alto: 0px; sinistra: 0px; colore di sfondo: rosa}. Questa descrizione presuppone che la casella sarà lunga 150 pixel e larga 150 pixel, sarà posizionata rigidamente nell'angolo in alto a sinistra del documento e il suo sfondo sarà colorato di rosa.
Passaggio 3
Dare al blocco un posizionamento relativo. Se si utilizza il posizionamento non assoluto, ma relativo nella descrizione CSS, è possibile posizionare i blocchi non con uno snap rigido su una griglia di coordinate, ma rispetto ad altri blocchi già esistenti. Per fare ciò, modificare la posizione del codice: assoluto; in alto: 0px; a sinistra: 0px per posizione: relativo; in alto: 200 px; a sinistra: 100px.
Passaggio 4
Dai al blocco un arrotondamento. In CSS, l'istruzione border-radius è responsabile di questo. Aggiungi il seguente codice al tuo foglio di stile: border-radius: 8px. Il blocco avrà ora gli angoli arrotondati. Se vuoi solo arrotondare alcuni angoli, descrivi il raggio separatamente per ciascuno di essi: border-radius: 8px 8px 0px 0px.
Passaggio 5
Dai un colpo al blocco. Per evidenziare il contorno di un blocco con una linea sottile, aggiungi il seguente codice alla sua descrizione CSS: border-top: 1px tratteggiato nero. Questa istruzione significa che il bordo del blocco sarà nero e avrà uno spessore di un pixel. In questo caso, la linea di contorno stessa verrà visualizzata come una linea tratteggiata (tratteggiata - una linea punteggiata, punteggiata - punti, continua - una linea continua).
Passaggio 6
Imposta le restanti proprietà del blocco. Specificare nella descrizione CSS quale tipo di carattere deve essere utilizzato per il testo all'interno del blocco, quale dovrebbe essere la dimensione del carattere, l'allineamento e il rientro dai bordi del blocco. Queste proprietà sono descritte nelle definizioni font-family, font-size, text-align e padding.
Passaggio 7
È possibile utilizzare la proprietà float per personalizzare il flusso di un blocco rispetto a un altro. Se lo imposti su "sinistra", il resto degli elementi scorrerà attorno al blocco a sinistra e "destra" - a destra. Se si imposta il valore float come "none", l'allineamento del blocco non verrà impostato. La proprietà clear in CSS impedisce al blocco di scorrere a destra, a sinistra o su entrambi i lati e sovrascrive l'istruzione float.
