Come modificare la larghezza di Casella di testo CSS

January 5

Mentre molti programmatori usano ancora "colli" e "file" attribuisce a caselle di testo dimensioni in moduli HTML, queste misure sono dotate di due difetti. In primo luogo, i browser su misura "colli" e "righe" in relazione alle dimensioni del carattere utilizzato nella casella di testo. Il secondo difetto riguarda la separazione di contenuto e stile; è molto più facile di ridisegnare un sito web in cui tutti gli stili sono fissati in un singolo file Cascading Style Sheets (CSS). Per queste ragioni, è necessario modificare la larghezza di una casella di testo utilizzando la proprietà "larghezza" in codice CSS.

istruzione

1 Vai su "Start" sulla barra delle applicazioni di Windows e digitare "Blocco note" o il nome di un editor di codice nella casella di ricerca. Premere il tasto "Enter" per caricare l'editor.

2 Passare a "File" sulla barra dei menu in alto e aprire il file HTML per la pagina Web che contiene la casella di testo. Se la pagina Web non contiene ancora una casella di testo, aggiungere il suo codice come segue:

<Textarea> Testo di esempio </ textarea>

Il codice precedente crea una casella di testo con un testo predefinito all'interno, "Testo di esempio." Questo dovrebbe andare tra un paio di "<form>" tag. Quando si modifica un modulo esistente, si avrà già questi tag nel codice.

3 Modificare la larghezza della casella di testo con il codice CSS impostando l'attributo "style" per la casella. È necessario impostare il valore della proprietà box "larghezza", in termini di pixel o una percentuale. Un valore percentuale rende il cambio formato scatola con la dimensione del browser mentre una dimensione di pixel rimane sempre lo stesso. Ecco il codice:

<Textarea style = "width: 200px;"> </ textarea>

Sostituire "px" con "%" per passare a un valore percentuale.

4 Scrivere codice CSS per la larghezza della casella di testo in un foglio di stile esterno come questo:

textarea {

width: 50%;

}

Questo codice può anche andare tra "<style>" tag nella testa di un file HTML. Per selezionare una casella di testo specifico, dargli un attributo ID e modificare il codice per questo:

mybox {

width: 100px;

}

Consigli e avvertenze

  • Gli stessi metodi per impostare la larghezza casella di testo si applicano anche a tutti i campi di input nei moduli HTML.
  • A volte una pagina Web contenente un modulo non ha un'estensione HTML. È anche possibile cercare un file con estensione PHP, dal momento che PHP è un linguaggio comune utilizzato con l'HTML per gestire le forme.
  • Salvare tutti i file HTML e CSS prima di modificarli.
  • Non rimuovere il "nome" attributo dal tag in qualsiasi forma si modifica se non si sa esattamente come funziona questa forma. Molti script si basano su tale attributo per ottenere i valori di input dell'utente.