Bordo in linea CSS
I bordi in linea e del profilo sono le due proprietà di base dello styling di qualsiasi contenuto creato in un corpo HTML - un pezzo di testo, forma o immagine. Un linguaggio di markup ipertestuale è la combinazione di codice utilizzato per creare un contenuto su una pagina Web. Questo contenuto è in stile e allineato attraverso tag aggiuntivi utilizzando il foglio di stile a cascata.
Un bordo in linea è una proprietà che viene aggiunta al contenuto HTML per evidenziare quella porzione specifica dando un colore o qualsiasi proprietà solida o tratteggiata al bordo. Questo tutorial contiene alcuni esempi di creazione e progettazione di un bordo in linea CSS.
Esempio n. 1: stile inlineato a bordo tratteggiato
Innanzitutto, spieghiamo la sezione in stile CSS all'interno del tag della testa. Lo stile interno contiene gli ID e le classi per applicare lo stile ai contenuti pertinenti sviluppati all'interno del corpo HTML. Usiamo la classe in stile "H1" per la direzione 1 e applichiamo un colore viola ad esso. Lo stile nidificato è per il div. Questo è applicato dalla larghezza e dal contenitore in pixel. È una scatola del contenitore che viene utilizzata per archiviare i diversi contenuti al suo interno. Quindi, scriviamo un semplice testo all'interno della classe Div.
Un bordo viene applicato a qualsiasi caratteristica dell'HTML. In questo esempio, applichiamo un bordo alla classe Div attorno al testo che usiamo. Quindi, la dichiarazione di stile per il bordo viene applicata sulla classe Div. Viene creato "One" che è menzionato all'interno del tag DIV in modo che tutti gli effetti di confine siano applicati al contenitore Div.
| 1 2 3 4 5 6 7 8 9 | .uno Bordo: 5px Black solido; Border-Inline Style: Dasched; Rosa a sfondo; |
Esistono tre stili di base di contenuti che vengono applicati al div. Uno è il tipo di confine, che è solido o tratteggiato. Selezioniamo il bordo solido con un colore nero con una larghezza di 5 pixel.
La prossima proprietà è la proprietà della linea di confine. Questa proprietà di stile è scelta come tratteggiata. Ciò significa che le linee verticali del bordo sono tratteggiate, mentre le linee orizzontali sono semplici solide. Se non menzioniamo alcuna proprietà di stile dei bordi, quindi, per impostazione predefinita, è selezionato come un bordo solido. Il colore dello sfondo nel div è impostato come rosa. Questo viene fatto per discriminare la parte Div dallo sfondo dell'intera pagina web.
Codice stile HTML:
Conducendo verso la parte del corpo HTML, progettiamo ogni contenuto dell'HTML al centro della pagina web. Innanzitutto, viene utilizzato il tag di stile. Il colore BG che rappresenta il colore di sfondo della pagina web è impostato all'interno del tag del corpo. Viene dichiarata un'intestazione. Dopo aver applicato una piccola pausa, per sfuggire a una singola riga nell'HTML, il tag DIV viene dichiarato con la classe di Dichiarazione CDD.
| 1 | Una proprietà di frontiera in linea CSS |
Codice corporeo HTML:
Questa dichiarazione di classe è responsabile dell'applicazione di tutti gli effetti di stile relativi al confine. Ora chiudi tutti i tag e salva il file di testo. Esegui questo file sul browser per vedere il risultato di questo codice.
Produzione:
Vedrai che il colore BG viene applicato insieme alle intestazioni. Un div è progettato con il bordo con natura solida, con lo stile in linea di bordo come tratteggiato. Quindi, utilizzando un valore della proprietà inlineato tratteggiato, possiamo ottenere un output come questo.
Esempio n. 2: solido stile bordo-in linea con modalità di scrittura orizzontale
All'interno della parte del corpo dell'HTML, il codice HTML è quasi lo stesso dell'esempio precedente. Un codice è scritto all'interno del tag centrale, con un div dichiarato. All'interno del Div, viene utilizzato un tag di paragrafo con un testo semplice, con una classe come dichiarazione di stile. Un nome di classe "Esempio di testo" è responsabile di tutti gli effetti. E le modifiche applicate al paragrafo
sono la custodia di confine. Chiudi tutti i tag e vai alla porzione di testa per progettare il contenuto all'interno del div con un bordo.
Codice corporeo HTML:
Vai al tag di stile all'interno della sezione della testa. Aggiungiamo prima il CSS al contenitore div. Il colore di sfondo viene applicato al div con l'altezza e la larghezza per creare una scatola sullo sfondo.
Codice stile HTML:
Mentre aggiungevamo una classe di testo di esempio al paragrafo all'interno del Div, ora applichiamo lo stile del confine al testo. In questa classe, utilizziamo uno stile della modalità di scrittura al paragrafo. Ad esempio, utilizziamo una modalità di scrittura verticale. Il testo appare a partire dall'alto verso il basso invece dello stile orizzontale predefinito che va da sinistra a destra.
| 1 2 3 4 5 6 7 8 | .ExampleText Modalità di scrittura: Vertical-LR; Bordo: 5px viola solido; Border-Inline Style: Solid; |
Inoltre, il bordo è disegnato come un colore viola solido. La proprietà in linea in linea del bordo è impostata come solida. Quindi, il bordo è una forma rettangolo solida attorno al testo in direzione verticale. Ora eseguiamo il codice sul browser.
Produzione:
Vedrai che viene creata una visualizzazione verticale del testo. Questo testo ha un bordo atto.
Considerando lo stesso esempio precedente, applichiamo alcuni effetti diversi al codice. L'applicazione della modalità di scrittura in modo opposto usando lo stile del bordo e le modifiche allo stile inline possono causare un effetto diverso sul testo che stiamo usando per evidenziare l'HTML.
Codice di stile:
Nel caso di Div, la larghezza e l'altezza sono aumentate per formare una grande scatola rettangolare. Allo stesso modo, cambiamo anche i valori all'interno del ".Classe ExampleText "per applicare gli effetti sul confine.
| 1 2 3 4 5 6 7 8 | .ExampleText Modalità di scrittura: LR orizzontale; Bordo: 5px Magenta punteggiata; Border-Inline Style: Solid; |
Usiamo la modalità di scrittura del testo, in quanto è la proprietà del testo, in direzione orizzontale. Significa che il testo è proprio come la riga predefinita a partire dalla direzione sinistra a destra. Il bordo è impostato come punteggiato da 5 pixel nella larghezza e magenta. Considerando che lo stile in linea del bordo è considerato la stessa proprietà solida. Tutti gli altri effetti come il colore di sfondo sono uguali e tutto il codice all'interno è anche lo stesso.
Produzione:
Quando si esegue il file nel browser, vedrai che una linea di testo orizzontale viene creata insieme a un bordo con una linea tratteggiata. In questo modo, possiamo creare i bordi che variano in forma e stile.
Conclusione
Lo stile di confine in linea svolge un ruolo essenziale nello styling del bordo del testo e dell'immagine, o qualsiasi tipo di forma. In questo tutorial abbiamo provato a fornirti i migliori esempi dei bordi CSS in linea usando il codice HTML e lo stile CSS all'interno del file. All'inizio, abbiamo dato una panoramica della lingua front-end HTML e CSS. Nella sezione di implementazione, abbiamo prima implementato il bordo attorno al testo con proprietà in linea di confine specificate. Il confine dipende dallo stile di scrittura; Si modella in base allo stile di testo. Ad esempio, per lo stile di scrittura verticale del testo, il bordo è in direzione verticale.