Le cornici posizionate attorno alle immagini o al testo decorano il sito e aggiungono varietà al suo design. Se usi le tabelle per creare bordi, il codice per ogni bordo occuperà troppo spazio. Anche in questo caso dovrai riscrivere il codice HTML per ogni frame. Con i CSS puoi facilmente creare un bordo di qualsiasi spessore e colore desideri scrivendo un semplice codice una volta per tutti gli elementi che saranno circondati da questo bordo. Questa tecnologia consentirà, se necessario, di modificare il tipo di frame sul sito in un paio di minuti.
È necessario
- - avere un proprio sito web;
- - sapere cos'è il CSS e dove sono scritti questi stili nel sito.
Istruzioni
Passo 1
Per creare un bordo, prima scrivi il seguente codice in CSS:
ramka {}
Passo 2
Per rendere il bordo della dimensione desiderata, usa il parametro di larghezza del bordo, che imposta la larghezza della linea in pixel. Ad esempio, se la linea della cornice deve essere larga 3 pixel, la voce avrà il seguente aspetto:
ramka {larghezza del bordo: 3px;}
Passaggio 3
Ora definisci lo stile del bordo usando il parametro border-style. Se vuoi creare un bordo i cui lati sono linee continue regolari, inserisci la seguente voce nel codice tra le parentesi graffe - stile bordo: solido.
Passaggio 4
Un bordo punteggiato si ottiene scrivendolo in questo modo: border-style: punteggiato. Selezionando lo stile del bordo: tratteggiato ti darà un bordo tratteggiato.
Passaggio 5
Puoi rendere il bordo una doppia linea continua in questo modo: stile bordo: doppio. Usa stile bordo: groove o stile bordo: cresta per inquadrare testo o immagini in cornici con effetti collaterali 3D. La differenza tra queste due opzioni è che nel primo caso la cornice è costituita da linee rientrate e nel secondo da linee convesse.
Passaggio 6
Usa questo codice: border-style: inset per creare l'effetto di un inset con il bordo di un elemento del sito. Per rendere, al contrario, convesso il contenuto del bordo, insieme al bordo, scrivete border-style: outset.
Passaggio 7
Puoi aggiungere il colore desiderato alla cornice utilizzando il parametro border-color, anch'esso posizionato tra le parentesi graffe. Se vuoi rendere il bordo rosso, scrivi: colore bordo: rosso, blu - colore bordo: blu, arancione - colore bordo: arancione.
Passaggio 8
Il codice del bordo CSS, incluse tutte le opzioni, ha il seguente aspetto:
ramka {larghezza del bordo: 3px; stile bordo: solido; colore del bordo: blu;}
Passaggio 9
Ora, in HTML, scrivi questo:
Contenuto della cornice Invece della frase "Contenuto della cornice", inserire il testo o il codice dell'immagine desiderata.
Passaggio 10
Pertanto, puoi progettare un numero illimitato di elementi sul sito. Per modificare l'aspetto della cornice, è sufficiente modificare il codice CSS.
