TechCodeview

CSS (Cascading Style Sheet) beskriver HTML-elementen som visas på skärm, papper , eller in andra medier . Det sparar mycket tid. Den styr layouten för flera webbsidor samtidigt. Det ställer in teckensnittsstorlek, teckensnittsfamilj, färg, bakgrundsfärg på sidan.

Det tillåter oss att lägga till effekter eller animationer till webbplatsen. Vi använder CSS att visa animationer tycka om knappar, effekter, laddare eller spinnare , och även animerade bakgrunder .

Utan att använda CSS , kommer webbplatsen inte att se attraktiv ut. Det finns 3 typer av CSS som är nedan:

• Inline CSS
• Intern/ inbäddad CSS
• Extern CSS

1. Intern CSS

Den interna CSS har tagga i avsnitt av HTML dokumentera. Denna CSS-stil är ett effektivt sätt att utforma enstaka sidor. Att använda CSS-stilen för flera webbsidor är tidskrävande eftersom vi kräver att placera stil på varje webbsida.

Vi kan använda den interna CSS genom att använda följande steg:

1. Öppna först HTML sida och leta upp

2. Sätt följande kod efter

3. Lägg till regler av CSS i den nya raden.

Exempel:

 body { background-color: black; } h1 { color: white; padding: 50px; } 

4. Stäng stiltaggen.

Efter att ha lagt till den interna CSS, ser hela HTML-filen ut så här:

 body { background-color: black; } h1 { color: red; padding: 50px; } <h2>CSS types</h2> <p>Cascading Style sheet types: inline, external and internal</p> 

Vi kan också använda väljaren (klass och ID) i stilmallen.

Exempel:

 .class { property1 : value1; property2 : value2; property3 : value3; } #id { property1 : value1; property2 : value2; property3 : value3; } 

Fördelar med intern CSS

Intern CSSkan inte ladda upp flera filer när vi lägger till koden med HTML-sidan.

Nackdelar med intern CSS:

• Lägger till kod i HTML dokument kommer att minska sidstorlek och laddtid av webbsidan.

2. Extern CSS

I extern CSS länkar vi webbsidorna till de externa .css fil. Den är skapad av textredigerare . CSS är en mer effektiv metod för att styla en webbplats. Genom att redigera .css fil kan vi ändra hela webbplatsen på en gång.

För att använda den externa CSS, följ stegen nedan:

1. Skapa en ny .css fil med textredigerare , och lägg till Cascading Style Sheet regler också.

Till exempel:

 .xleftcol { float: right; width: 35%; background:#608800; } .xmiddlecol { float: right; width: 35%; background:#eff3df; } 

2. Lägg till en referens till den externa .css fil direkt efter tagga i avsnitt av HTML-ark :

Fördelar med extern CSS:

• Våra filer har en renare struktur och mindre i storlek.
• Vi använder samma .css fil för flera webbsidor i extern CSS.

Nackdelar med extern CSS:

• Sidorna kan inte levereras korrekt innan den externa CSS har laddats.
• I Extern CSS kan uppladdning av många CSS-filer öka nedladdningstiden för en webbplats.

3. Inline CSS

Inline CSS används för att utforma en specifik HTML element. Lägg till en stil attribut till varje HTML-tagg utan att använda väljare. Att hantera en webbplats kan vara svårt om vi bara använder inline CSS . Däremot Inline CSS i HTML är användbart i vissa situationer. Vi har inte tillgång till CSS-filer eller för att tillämpa stilar på element.

I följande exempel har vi använt inline CSS i

handledning för java programmeringsspråk