CSS Plus -tegn
Eksempel 01:
La oss komme i gang med det første eksemplet på å bruke pluss -tegnet i HTML -koden for å gjøre bruk av den på mange måter. Vi tar en titt på kroppskoden til HTML -koden. Innenfor kroppen til HTML -siden har vi en overskrift på størrelse 1 som sier at vi bruker pluss -tegnet via CSS -styling for topphistoriene som skal slippes. Vi bruker en annen overskrift av størrelse 2 som er den nest største størrelsen på HTML -overskriftene etterfulgt av DIV -taggen. Denne "div" -merket oppretter en ny seksjon som inneholder noe informasjon om utgivelsesdatoen og stedet der den blir utgitt.
Etter denne taggen har vi en annen "div" -merke som brukes til å lage en ny seksjon på HTML -siden. Kroppsdelen av denne HTML er fullført her. La oss se på "stilen" -merket til en HTML -side for å se på stylingen av de forskjellige elementene. Innenfor denne taggen bruker vi Plus -tegnet “+” blant overskrift 2 og “Div” -merket for å bruke stylingen på “Div” -elementet ved siden av overskriften 2. Fontstørrelsen er 22 piksler, skriftvekt er lettere, displayet er inline, mens bakgrunnsfargen for "Div" -delen er lilla og tekstfargen er lys cyan. Etter dette bruker vi H1-overskriftstittelen for å style den med den nesten-svarte tekstfargen. Stylingen er fullført her.
Utgangen til denne koden vises i følgende bilde. Den første overskriften i størrelse 1 er farget mørk blå mens den andre overskriften på den nest største størrelsen vises i en jet -svart farge. Siden den første div -taggen ligger ved siden av overskriften 2 på en HTML -side, er den stylet i henhold til egenskapene som brukes til de kombinerte "Div" og "H2" -elementene. På den annen side er overskriften 1 stylet i henhold til bruken av H1 i stilkoden.
Eksempel 02:
La oss komme i gang med et annet eksempel på å bruke pluss -tegnet til stil. Vi starter dette eksemplet med bruk av Doctype HTML hovedtaggen etterfulgt av enkeltåpningen av hodemerket. Den følger åpningen av tittelkoden som inneholder tittelen “CSS Plus Sign” i den og lukkingen av tittelkoden.
La oss se på kroppsområdet til en HTML -kode ved hjelp av kroppselementkoden. Vi bruker de forskjellige overskriftene og avsnittene via deres spesielle tagger, i.e. “H1, H2 og P”. Først bruker vi H1 -overskriften til største størrelse. Etter det bruker vi overskriften 2 i den nest største størrelsen sammen med det tilstøtende avsnittet. Vi oppretter en ny div -tag etter overskriften for å opprette en ny seksjon på HTML -siden. Til slutt bruker vi overskriften 2 igjen etterfulgt av avsnittselementet i DIV -delen.
Ved å bruke pluss -tegnet mellom overskriften 2 og avsnittet, styler vi avsnittet ved siden av overskriften 2. Vi har mer enn en overskrift av samme størrelse. Derfor tar det overskriften 2 som kommer først fra starten av kroppskoden. Vi bruker den grønne fargen på avsnittet ved siden av denne første overskriften 2 med skriftstørrelsen på 28 piksler, bakgrunnsfarge khaki og den tekst-transformerte egenskapen for å vise den store teksten.
Etter dette bruker vi avsnitts -taggen for å style de gjenværende avsnittene på HTML -siden vår ved å fargelegge den med te rosa med den dristige skriftvekten og Fantasy Font -familien. Dette handler om bruken av pluss -tegnet for styling. La oss kjøre denne koden nå.
Vi får produksjonen med overskriftene i størrelser 1 og 2 uten styling. Første avsnitt vises i alle store ord med bakgrunn Khaki og Green Color -tekst. Mens siste avsnitt vises separat i lilla fargetekst. Bruken av pluss -tegnet for styling avsnittet påvirker ikke stylingen av andre avsnitt.
Eksempel 03:
Kroppen starter med overskriften 1 -elementet etterfulgt av DIV -elementet for å lage en ny seksjon. Denne delen inneholder totalt fire avsnittselementer for å opprette de forskjellige avsnittene og en DIV -delen som også bruker avsnitts -taggen for å opprette et enkelt avsnitt i denne delen.
Etter at alle de indre elementene i denne delen er fullført, lukker vi den ytre DIV -delen sammen med lukkingen av kroppsseksjonen. Innenfor stilmerket bruker vi avsnittet “P” for å bruke skriftvekten som fet skrift og skriftstørrelse på 25 piksler til alle avsnitt i kroppen. Nå bruker vi Plus -tegnet innenfor de to avsnittsmerkene for å bruke den spesifiserte stylingen på det tilstøtende avsnittet i første avsnitt i kroppsdelen. Ulike font-, grense- og tekstrelaterte egenskaper er satt til andre avsnitt, i.e. 5px dobbel kant.
Nå bruker vi avsnittsmerker igjen med pluss -tegnet for å style det 3. og fjerde tilstøtende avsnitt i kroppsområdet. De forskjellige egenskapene.e. grensen på 5 piksler prikket og crimson tekstfarge er spesifisert for de tilstøtende avsnitt. Nå er koden fullført, og vi er på vei for å utføre den.
Utgangen viser at andre ledd er stylet ganske annerledes enn resten av avsnittene mens 3. og fjerde avsnitt er stylet på samme måte. 1. og 5. avsnitt ser likt ut i styling.
Konklusjon
Denne artikkelen demonstrerer noen enkle eksempler for å illustrere bruken av “+” pluss -tegnet i HTML -skriptet. Vi lærte hvordan "+" pluss -tegnet kan style noen elementer som er nevnt etter "+" pluss -tegnet i CSS -stylingen uten å endre stylingen til det første spesifiserte elementet i HTML. For dette formålet brukte vi totalt 3 eksempler for å style avsnitt og DIV -seksjoner. Ved hjelp av dette attributtelementet kan du gjøre endringer på hvilken som helst HTML -side uten frykt for å miste formateringen for HTML -siden din.