Larghezza di ingresso CSS
Fogli in stile a cascata usano diverse proprietà per modellare qualsiasi contenuto HTML. Uno degli effetti di base utilizzati è aumentare la dimensione del contenuto solo in qualsiasi direzione specifica (E.G., larghezza e altezza.) Questo articolo discuterà della proprietà di larghezza che è lo spostamento nella dimensione originale del contenuto nella direzione orizzontale.
Campo di inserimento:
Durante la creazione di un modulo nella pagina Web, usiamo spesso diversi campi di testo per inserire i dati in questo campo dall'utente. Questo viene fatto dal tipo di input del campo, "testo". Useremo la proprietà di larghezza per migliorare le dimensioni dei campi di input di HTML.
Esempio 1:
Questo esempio includerà l'implementazione del campione di una casella di testo dichiarata nel corpo HTML insieme a un CSS in linea. CSS in linea è il tipo di CSS dichiarato all'interno del tag HTML del corpo. Innanzitutto, dichiareremo una semplice casella di testo utilizzando la proprietà di larghezza direttamente nel tag Tipo di input. Questo codice avrà una porzione del corpo direttamente nel codice in quanto non è necessario utilizzare una sezione testa. All'interno del corpo, viene applicato un colore di sfondo.
Durante la compilazione di un modulo online, devi aver notato che un piccolo testo è scritto da parte con la casella di testo o il campo di testo. Questo testo descrive lo scopo della casella di testo e il tipo di testo che l'utente dovrebbe immettere. Ad esempio, il nome, l'età e l'indirizzo sono i campi richiesti del testo. Questi nomi di tutti i campi sono noti come etichetta. In HTML, viene utilizzato un tag dell'etichetta specificato per dichiarare l'etichetta per ciascun campo di testo, rispettivamente.
| 1 | < label for = "name"> Immettere un valore: |
Questo tag utilizza il nome del campo di testo a cui appartiene e apparirà prima che il campo specificato sia dichiarato nella pagina web. Quindi, viene menzionato il nome dell'etichetta. Dopodiché, dichiareremo il contenuto della casella di testo. Mentre scriviamo il testo, il campo di input viene salvato o recuperato dal sistema. Il tipo di input, utilizzando l'ID, sarà un testo con il nome del campo.
| 1 |
La terza proprietà in questo tag appartiene al CSS. La proprietà di larghezza viene aggiunta con l'istruzione di stile per aggiungere la dimensione orizzontale della casella di testo. Questo viene fatto attraverso la larghezza.
Salva questo codice nell'editor di testo con l'estensione HTML per visualizzare la pagina Web di questo codice in qualsiasi browser. Apri questo codice con un'opzione nel browser.
Vedrai che si forma una semplice casella di testo con l'etichetta. Una larghezza specificata viene data alla scatola altrimenti avrebbe una piccola area per prendere input.
Questo concetto può anche essere fatto utilizzando un codice di stile separato nella parte principale per rendere il codice facilmente comprensibile. Questo tipo di CSS in cui lo stile viene aggiunto separatamente nella sezione della testa è noto come CSS interno. Ciò si ottiene utilizzando ID e classi per il tag specifico su cui vogliamo aggiungere l'effetto. Ad esempio, la classe "Helo" viene creata per aggiungere larghezza alla casella di input.
| 1 2 3 4 5 6 7 8 9 |
Il nome di questa classe "HELO" verrà aggiunto al tag di input come riferimento per aggiungere tutte le proprietà a questa casella di testo del tipo di input.
| 1 |
Durante l'esecuzione, viene creata la stessa casella di testo.
Esempio 2: selettore CSS
A differenza del precedente concetto di dichiarare la proprietà di larghezza alla casella di testo come in linea e CSS interno attraverso il fenomeno della classe, esiste un'altra caratteristica che viene utilizzata per applicare qualsiasi effetto al contenuto HTML. Questo è un selettore CSS. Questo selettore è diverso per ogni contenuto HTML. La dichiarazione di selezione viene anche eseguita come il CSS interno all'interno del tag di stile nella sezione testa.
| 1 2 3 4 5 | Input [type = "text"] Larghezza: 200px; |
Questo viene fatto utilizzando l'input della parola chiave all'interno delle staffe. Viene menzionato il tipo di input che specifica la dichiarazione di un campo di testo. All'interno di questa dichiarazione, viene applicata la larghezza del campo.
All'interno del corpo, non è necessario aggiungere alcun nome di classe o ulteriori dettagli per riferimento. Quando dichiariamo il tipo di input per la creazione della casella di testo, viene automaticamente collegato al tag di stile all'interno della sezione testa.
Esempio 3:
C'è un altro esempio di applicazione della larghezza alla casella di testo. Questo viene fatto utilizzando il tag di stile all'interno del tag di contenuto di input HTML e aggiungendo ulteriore margine e imbottitura ai campi di testo per migliorare la proprietà di larghezza. La proprietà di larghezza viene applicata a un campo di testo solo mentre l'altro contiene le impostazioni predefinite. Ciò mostrerà la differenza nel dichiarare una casella di tipo inbox di testo con e senza stile di larghezza. Ora iniziamo con il codice corporeo HTML per elaborare il funzionamento del tag in stile larghezza.
Innanzitutto, all'interno del corpo, abbiamo dichiarato un'intestazione. Quindi, usa un contenitore di Div per la pagina web. La funzione principale di questo contenitore è di aggiungere contenuto HTML ad esso con allineamento specificato per mantenerli nel posto giusto. All'interno del tag, utilizzare il tag etichetta per aggiungere il nome. Quindi, utilizzare il tag di input per il campo di testo e aggiungere una dimensione di 10 ad esso. La differenza di dimensioni e larghezza è che la larghezza allarga la casella di testo in pixel. Considerando che la dimensione viene utilizzata anche per aumentare le dimensioni di qualsiasi oggetto, ma vale per gli ingrandimenti verticali e orizzontali.
Fare una pausa attraverso il
etichetta. Quindi, usa di nuovo un'altra casella di testo per i dati. Aggiungi il campo di input del tipo di dati in modo che l'utente possa aggiungere solo la data in base al formato. Verrà anche formato il simbolo del calendario che è una caratteristica integrata.
Nella parte CSS, viene aggiunto il carattere per l'etichetta. E sul campo di input, abbiamo usato le proprietà del margine e dell'imbottitura.
| 1 2 3 4 5 6 7 | Input Margine: 7px; Imbottitura: 2px; |
Durante l'esecuzione, vedrai che l'attributo delle dimensioni ha ampliato la dimensione complessiva della casella di testo del nome. Considerando che la proprietà di larghezza ha aumentato la dimensione orizzontale.
Conclusione:
Una larghezza di input CSS è una funzione che viene utilizzata per migliorare la dimensione dei campi di tipo di input, questi campi sono caselle di testo, aree di testo e caselle di controllo. Abbiamo usato le caselle di testo per elaborare il funzionamento della proprietà di larghezza in CSS in linea e CSS interno. Viene anche spiegata la differenza tra la dimensione e la funzionalità di larghezza. La proprietà di larghezza svolge un ruolo importante nell'allineamento della forma mantenendo il valore del rapporto di larghezza lo stesso per tutti i campi di testo.