For å spesifisere hvordan et HTML -dokument vil se ut, brukes CSS -stilark. Dessuten er det tre måter å skrive CSS -stylingegenskaper som er inline CSS, innebygde CSS og eksterne CSS -stilark. Et innebygd stilark er et som integrerer stilarkdata i et HTML -dokument ved hjelp av elementet.

Denne oppskrivningen vil diskutere:

• HTML -sidestruktur
• Hvordan lage et CSS -innebygd stilark?

HTML -sidestruktur

En HTML -side har hovedsakelig to seksjoner, "hode”Og“kropp”. Hoveddelen inneholder metainformasjonen om siden, mens kroppsdelen omfatter elementene som er synlige på websiden, for eksempel bilder, lister, tabeller, overskrifter og mer.

CSS -stilarket er innebygd i hodeseksjonen, innenfor elementet, som fremhevet med den røde pilen:

Hvordan lage CSS innebygd stilark?

I HTML, først, lage et DIV -element med klassenavnet “innhold”. Innenfor dette elementet, legg til

Element og element assosiert med attributtene:

• src: Denne attributtet brukes til å spesifisere banen til bildet.
• alt: Denne attributtet spesifiserer den alternative teksten som vil vises når et bilde ikke lastes inn.
• bredde: Denne attributtet brukes for å spesifisere bildens bredde.

Deretter legger du til
tagger for å legge til linjeskift og

element med ID “para”For å legge til innhold på websiden:

Linuxhint School

Hei Verden!

Stil alle elementer

*
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;

“*”Brukes til å representere alle elementer som brukes på“Font-familie”Eiendom. Her, verdien “Verdana, Genève, Tahoma, Sans-serif”Forsikre deg om at hvis den første skriftstilen ikke støttes av nettleseren, vil den neste bli brukt.

Stil “innhold” divelement

.innhold
Bredde: 500px;
Høyde: 300px;
polstring: 5px;
Margin: Auto;
Padding-venstre: 50px;
Bakgrunnsfarge: #7DB9E4;

“.innhold”Er spesifisert for å få tilgang til DIV -elementet som har klasseinnholdet og bruke de gitte egenskapene:

• “bredde”Eiendom setter elementets bredde.

• “høyde”Eiendomssett/justerer elementets høyde.
• “polstring”Attributt inkluderer plass rundt elementets innhold eller inne i elementets grense.
• “margin”Eiendom gir plass rundt elementet.
• “Padding-venstre”Eiendom legger plassen til venstre for elementets innhold.
• “bakgrunnsfarge”Eiendom setter elementets bakgrunnsfarge.

Stil “IMG” -element

IMG
Overgang: alle 0.3s letthet;

Elementet er brukt overgang med CSS “overgang”Eiendom, hvor“alle”Er en overgangseffekt,”0.3s”Refererer til overgangsvarigheten, og“letthet”Henviser til overgangseffekten med en langsom start, deretter raskt, og slutter sakte.

Stil “img” element på svevet

.Innhold IMG: Hopp
Markør: peker;
Transform: perspektiv (100px) translate3d (50px, 20px, 20px);

Egenskapene som brukes på elementet på svevet blir forklart nedenfor:

• “markør”Eiendom spesifiserer musemarkørstilen på elementet, der verdien”peker”Viser en markørhånd med en pekende finger.
• Som verdien av “forvandle”Eiendom,“perspektiv (100px)”Funksjon brukes til å spesifisere avstanden mellom brukeren og objektet, og“Translate3d (50px, 20px, 20px)”Flytter et element i 3D -flyet. Disse parametrene viser henholdsvis x-aksen, y-aksen og z-aksen.

Stil “para” id for “p” element

#Para
Font-størrelse: 25px;
Fontvekt: fet;
Farge: #3802CE;
polstring: 5px;

“#para”Brukes for å få tilgang til elementet med ID -para og bruke følgende egenskaper:

• “skriftstørrelse”Eiendom setter elementets skriftstørrelse.
• “Fontvekt”Eiendom setter skriftstørrelsen til å være tynn eller tykk.
• “farge”Eiendom brukes til å sette/bruke elementets skriftfarge.

Her er utgangen fra ovennevnte kode:

Det kan observeres fra den gitte utgangen at det innebygde stilarket er blitt brukt med hell.

Konklusjon

CSS-innebygde stilark er egnet for dokumenter som har spesifikke designbehov. For å lage et innebygd stilark, er det påkrevd å erklære CSS -egenskaper i elementet. Dette stilelementet er spesifisert i HTML Head -taggen. I dette innlegget demonstrerte vi metoden for å lage innebygde CSS -stilark med et eksempel.