Introduktion till CSS-kommandon

CSS står för Cascading Style Sheets. Det används för att beskriva presentationen av dokumentet som är skrivet på ett markeringsspråk som HTML. Det gör arbetet med att separera presentation och innehåll som innehåller olika layout, färger och teckensnitt. Separationen ger flexibilitet och styr även olika egenskaper som gör det möjligt för flera webbsidor att dela formatering genom att specificera relevant CSS. CSS-specifikationerna upprätthålls av World Web Consortium. Utöver detta ger det också specifika regler som hjälper till med alternativ formatering om innehållet nås från en mobil enhet.

Grundläggande CSS-kommandon

1. CSS-syntax: Det finns en uppsättning regler som måste följas i CSS-kommando. CSS-regeluppsättningen består av en väljare och ett deklarationsblock. Väljaren används för att peka på HTML-elementet som användaren vill style. Deklarationsblocket kan innehålla en eller flera deklarationer som kan separeras med semikolon. Varje deklaration bör innehålla ett fastighetsnamn med dess värde och dessa separeras med kolon.

2. ID-väljare : ID-väljaren kan använda id för ett attribut för HTML-element och hjälpa till att välja ett visst element. Det används för att välja ett unikt element och detta element bör vara unikt för den sidan. För att välja ett element med ett visst id används '#' och detta följs av idet för det elementet.

3. Klassväljare: För att välja ett visst klassattribut används klassväljaren för att välja element från den klassen. För att använda element i en viss klass används en period (.) -Tecken. Det följs av klassens namn. Med detta, om användaren vill att endast specifika element ska användas, kan endast de specificeras av en klass.

4. Gruppera väljare: Det finns tillfällen då element har samma stildefinitioner. Att ha dem tillsammans grupperade och minimera koden är ett bättre alternativ. För gruppen kan väljarens användare använda kommatecken och separera varje väljare

5. Kommentarer: Dessa CSS-kommandon rekommenderas att användas när du skriver kod. De ger tydlighet vad koden gör och hjälper dig eller någon annan som är ny i koden att arbeta med den. Kommentarer ignoreras av webbläsare. En CSS-kommentar börjar och slutar med / * * /.

6. Display: Block - Många HTML-element är inställda på detta visningsläge. Som standard tar blocknivåelementen så mycket utrymme och de kan inte placeras på samma rad med något annat visningsläge. Det är möjligt att få förmågan att ändra elementets höjd och bredd enligt din önskan.

7. Färger i CSS: I dessa CSS-kommandon kan färger anges i RGB-formel. Varje parameter definierar intensiteten för dessa färger och definierar en ny färg. För att visa svart ska alla färgparametrar vara inställda på RGB (0, 0, 0).

8. Bakgrundsfärg: Bakgrundsfärgegenskapen definierar färgen som ska ställas in för ett elements bakgrund. Färg kan enkelt definieras genom att ge ett färgnamn, genom att lägga till ett Hex-värde eller genom att ställa in RGB-värde

9. Bakgrundsbild: Bakgrundsbilden kan ställas in på valfri bild. När bilden är inställd upprepas den och den täcker hela elementet.

10. CSS-marginaler: CSS-kommando har olika marginalegenskaper som kan hjälpa till att skapa utrymme runt olika element och definierar även dessa utanför gränserna. CSS kan ha egenskaper som margin-top, margin-right, margin-bottom och margin-left.

Intermediära CSS-kommandon

1. Klass- och ID-väljare: Utöver HTML-taggen kan en användare definiera egna väljare som kan vara i form av klass eller ID. Den huvudsakliga användningen av dessa är att du kan ha samma HTML-element och presentera det annorlunda baserat på ID eller klassen som är nödvändig.

2. Pseudoklass: Dessa klasser används för att specificera ett visst tillstånd eller förhållande till en given väljare. Dessa klasser kan också ha formen av väljare: pseudo_class (egenskap: värde; ). Denna klass definieras genom att helt enkelt ge en kolon mellan väljaren och pseudoklassen.

3. Textformatering: Texterna som läggs till kan anpassas och formateras genom att använda formateringsegenskaperna. Färgen kan ändras med hjälp av nyckelordet "färg". Så kan justering av text. Genom att använda textdekoration kan dekorationer ställas in och tas bort. Transformationer kan göras med avseende på fall.

4. CSS-teckensnitt: Teckensnitt i CSS har olika familjer som generisk familj och typsnitt. Teckensnittfamiljen är en familj av texter. Den generiska som har en grupp familjer med liknande utseende och typsnitt som har ett specifikt teckensnitt.

5. Ikoner: Genom att använda ikonbiblioteket och lägga till namnet på angivna ikoner kan klassikoner enkelt användas i CSS.

6. Tabeller: CSS kan också visa tabeller och hjälpa till med anpassning med gränser, deras bredd och höjd. Genom att använda nyckelord som 'kant', 'bredd' och höjd kan användaren enkelt ha tabeller på en webbsida.

7. Positionering: Den här egenskapen anger vilken typ av positioneringsmetod som kan användas för alla element. Denna position kan vara statisk, relativ, fast, absolut eller klibbig.

8. Överflöde: Den här egenskapen hjälper dig att kontrollera innehållet som är för stort för att passa in i ett område.

9. Float: Float- egenskapen låter elementet veta hur det ska flyta. Den anger vilka element som kan flyta bredvid de rensade elementen.

10. Opacity: Den här egenskapen definierar opaciteten eller transparensen för något element.

Avancerade CSS-kommandon

1. CSS Rundade hörn: Genom att använda egenskapen "gränsradie" kan ett element ges rundade hörn. Du kan också ange ett visst hörn av de fyra hörnen och göra ändringarna enligt ditt val.

2. Kantbilder : Du kan ställa in en bild som gränsen runt vilket element som helst. Detta är möjligt genom att använda en gränsbildegenskap. Den tar bilden och skiver den i nio sektioner och placerar sedan hörnen i hörnen och mellersektionerna upprepas eller sträckes.

Tips och tricks för att använda CSS-kommandon:

  • Använd reset.css och återställ alla grundläggande stilar.
  • Använd Shorthand CSS för att få ett kortare sätt att skriva Command CSS-koder.
  • Använd CSS-felsökningsverktyg för att justera, förstå och felsöka CSS-kommandostilar.

Slutsats

CSS Command hjälper dig att hålla informationsinnehållet i ett dokument separat och hjälper till att visa det. Det hjälper till att undvika duplicering, underhålla koden enkelt och använda samma innehåll med olika stilar.

Rekommenderade artiklar

Detta har varit en guide till CSS-kommandon. Här har vi diskuterat grundläggande, mellanliggande och avancerade CSS-kommandon. Du kan också titta på följande artikel för att lära dig mer -

  1. Bästa MySQL-kommandon
  2. PL / SQL-kommandon
  3. Hur man använder SQL-kommandon
  4. Vinkelformiga kommandon

Kategori:

Mjukvaruutveckling