Segno CSS Plus
Esempio 01:
Iniziamo con il primo esempio di utilizzo del segno più all'interno del codice HTML per utilizzarlo in molti modi. Diamo un'occhiata al tag corporeo del codice HTML. All'interno del corpo della pagina HTML, abbiamo un titolo di dimensione 1 che afferma che usiamo il segno più tramite lo stile CSS per le storie migliori da rilasciare. Usiamo un'altra intestazione della dimensione 2 che è la seconda dimensione più grande delle intestazioni HTML seguite dal tag DIV. Questo tag "Div" crea una nuova sezione contenente alcune informazioni sulla data di rilascio e sul luogo in cui viene rilasciato.
Dopo questo tag, abbiamo un altro tag "Div" che viene utilizzato per la creazione di una nuova sezione sulla pagina HTML. La sezione del corpo di questo HTML è completata qui. Diamo un'occhiata al tag "stile" di una pagina HTML per dare un'occhiata allo stile dei diversi elementi. All'interno di questo tag, utilizziamo il segno più "+" tra l'intestazione 2 e il tag "div" per applicare lo stile sull'elemento "div" adiacente alla intestazione 2. La dimensione del carattere è di 22 pixel, il peso del carattere è più chiaro, il display è in linea, mentre il colore di sfondo per la sezione "div" è viola e il colore del testo è chiaro ciano. Dopo questo, utilizziamo il titolo di intestazione H1 per modellarlo con il colore di testo quasi nero. Lo stile è completato qui.
L'output di questo codice viene visualizzato nella seguente immagine. La prima intestazione della taglia 1 è blu scuro colorato mentre l'altra intestazione della seconda dimensione più grande viene visualizzata in un colore nero a getto. Poiché il primo tag DIV è adiacente alla intestazione 2 di una pagina HTML, è disegnato in base alle proprietà utilizzate per gli elementi combinati "Div" e "H2". D'altra parte, l'intestazione 1 è disegnata in base all'uso dell'H1 all'interno del tag di stile.
Esempio 02:
Iniziamo con un altro esempio di utilizzo del segno più per stile. Iniziamo questo esempio con l'uso del tag principale Doctype HTML seguito dalla singola apertura del tag Head. Segue l'apertura del tag del titolo contenente il titolo "CSS Plus Sign" al suo interno e la chiusura del tag del titolo.
Diamo un'occhiata all'area del corpo di un codice HTML usando il tag dell'elemento corporeo. Usiamo i diversi titoli e paragrafi tramite i loro tag particolari, i.e. "H1, H2 e P". Innanzitutto, utilizziamo l'intestazione H1 delle dimensioni più grandi. Dopo di esso, usiamo la direzione 2 della seconda dimensione più grande insieme al paragrafo adiacente. Creiamo un nuovo tag DIV dopo l'intestazione per creare una nuova sezione all'interno della pagina HTML. Infine, usiamo nuovamente l'intestazione 2 seguita dall'elemento paragrafo all'interno della sezione div.
Usando il segno più tra l'intestazione 2 e il paragrafo, modelliamo il paragrafo adiacente alla voce 2. Abbiamo più di una voce delle stesse dimensioni. Pertanto, prende l'intestazione 2 che viene prima dall'inizio del tag del corpo. Usiamo il colore verde sul paragrafo adiacente a questa prima intestazione 2 con la dimensione del carattere di 28 pixel, kaki color background e la proprietà di trasformazione del testo per mostrare il testo maiuscolo.
Dopo questo, utilizziamo il tag paragrafo per modellare i restanti paragrafi della nostra pagina HTML colorandolo con il rosa tè con il peso del carattere audace e la famiglia Fantasy Font. Questo riguarda l'uso del segno più per lo stile. Esemiamo questo codice ora.
Otteniamo l'output con le intestazioni di dimensioni 1 e 2 senza alcun stile. Il primo paragrafo viene visualizzato in tutte le parole maiuscole con lo sfondo kaki e testo di colore verde. Mentre l'ultimo paragrafo viene visualizzato separatamente nel testo di colore viola. L'uso del segno più per lo styling Il paragrafo non influisce sullo stile del secondo paragrafo.
Esempio 03:
Il corpo inizia con l'elemento di intestazione 1 seguito dall'elemento Div per creare una nuova sezione. Questa sezione contiene un totale di quattro elementi di paragrafo per creare i diversi paragrafi e una sezione div che utilizza anche il tag paragrafo per creare un singolo paragrafo all'interno di questa sezione.
Dopo che tutti gli elementi interni di questa sezione sono stati completati, chiudiamo la sezione di Div esterna insieme alla chiusura della sezione del corpo. All'interno del tag di stile, utilizziamo il paragrafo "P" per applicare il peso del carattere come grassetto e la dimensione del carattere di 25 pixel a tutti i paragrafi del corpo. Ora, utilizziamo il segno più all'interno dei due tag di paragrafo per applicare lo stile specificato sul paragrafo adiacente del primo paragrafo nella sezione del corpo. Proprietà di carattere, bordo e testo diverse sono impostate per il secondo paragrafo, i.e. 5px Doppio bordo.
Ora, usiamo di nuovo i tag di paragrafo con il segno più per modellare il 3 ° e il 4 ° paragrafo adiacenti dell'area del corpo. Sono impostate le diverse proprietà in stile carattere insieme al colore del bordo e alla proprietà del contorno del bordo, i.e. bordo di 5 pixel punteggiati e il colore del testo cremisi è specificato per i paragrafi adiacenti. Ora, il codice è completato e siamo diretti a eseguirlo.
L'output mostra che il secondo paragrafo è disegnato in modo molto diverso dal resto dei paragrafi mentre i 3 ° e il 4 ° paragrafo sono in stile in modo simile. Il 1 ° e il 5 ° paragrafo sembrano simili nello stile.
Conclusione
Questo articolo dimostra alcuni semplici esempi per illustrare l'uso del segno "+" più all'interno dello scripting HTML. Abbiamo imparato come il segno "+" più può modellare alcuni elementi menzionati dopo il segno "+" più all'interno dello stile CSS senza modificare lo stile del primo elemento specificato dell'HTML. A tale scopo, abbiamo usato un totale di 3 esempi per modellare i paragrafi e le sezioni di diviezze. Usando questo elemento attributo, è possibile apportare modifiche a qualsiasi pagina HTML senza la paura di perdere la formattazione per la tua pagina HTML.