Introduktion till CSS
Cascading Style Sheets, som är på ett bättre sätt känt som CSS, är en mycket enkel designad process som används för att göra webbsidorna mycket mer presentabla. CSS låter dig sätta stilar för att anpassa dina webbsidor. Det bästa med att använda denna stylingfunktion är att CSS är oberoende av HTML-sättet att skapa webbsidor. Den grundläggande skillnaden mellan Hypertext Markup Language och Cascading Style Sheets är att den förstnämnda huvudsakligen är känd för att tillhandahålla det strukturella sättet för landskapet till webbsidan medan det förstnämnda är avsett att ge en kraftfull färgkodning och stylingtekniker. Det används för att styra layouten på mer än en webbsida samtidigt. Alla externa stilark lagras i form av CSS-filer.
Huvudkomponenter i CSS
I avsnittet ovan har vi studerat Introduktion till CSS, så nu går vi vidare med huvuddelen av CSS är som nedan:
1. Lätt att underhålla: Om du är avsedd att göra någon global förändring, ändra helt enkelt stylingen och du kan se alla andra element på alla andra webbsidor uppdateras automatiskt.
2. CSS är tidsbesparande: Du kan bara skriva skriptet en gång och återanvända samma ark så mycket tid du vill.
3. Överlägsna stilar till ursprungliga frontend: CSS har jämförelsevis ett mycket bredare utbud av attribut och lista om det jämförs med HTML. Därför kan HTML-sidan få ett ljusare utseende om de jämförs med de normala HTML-attributen.
4. Lätt med sökmotorer: CSS betraktas som ett mycket bekvämt och ett lättläst stylingark. Detta innebär att sökmotorerna inte behöver göra stora ansträngningar för att försöka läsa texten.
5. Effektiv lagring av cache: CSS kan användas för att lagra webbapplikationer lokalt med hjälp av offline-cache-mekanism som kan användas för att visa offline-webbplatser.
Egenskaper hos CSS
När vi diskuterade introduktionen till CSS och dess komponent. nu ska vi lära oss om CSS-egenskaper. De viktigaste egenskaperna hos CSS inkluderar stylingsregler som tolkas av klientens webbläsare och tillämpas på olika element i ditt dokument. Viktiga egenskaper inkluderar:
- En stilregel består av en väljarkomponent och en deklarationsblockkomponent.
- Väljaren används för att peka på HTML-komponenten som du vill bli stylad.
- Inne i deklarationsblocket finns en eller flera deklarationer tillsammans med semikolon.
- Varje förklaring som läggs har ett CSS-egendomsnamn, ett semikolon och ett värde. Till exempel är färg egenskapen och värdet är rött i färgen. Teckensnittstorlek är egenskapen och 15px är värdet.
- CSS-deklarationen avslutas med en semikolon och dessa block är omgivna av lockiga hängslen.
- CSS-väljare är de som används för att hitta HTML-element som är baserade på elementets namn, id, attribut, klass och mer.
- Ett unikt element kommer att väljas med ID för ett element.
- Om du vill välja det specifika elementet med ett specifikt id, bör funktionen # tillsammans med id-attributet användas.
- Om du vill välja element med en viss klass ska periodtecknet tillsammans med namnklassen skrivas.
- Universalväljare: Om du inte är intresserad av att välja element av en viss typ matchar universalväljaren helt enkelt elementets namn.
- Elementväljare: Dessa väljare väljer elementet baserat på elementnamnet.
- Efterkommande väljare: När ett visst element ligger i ett annat element kallas det som den efterföljande väljaren.
- ID-väljare: Den här väljaren använder id för HTML-elementet så att ett specifikt element kan väljas.
- Klassväljare: Den väljer elementet med ett specifikt klassattribut.
- Gruppera väljare: Det kommer att vara ett bra alternativ att gruppera väljarna så att koden minimeras. Varje väljare tillsammans med komma bör användas för att gruppera väljarna.
Applikationer av CSS
Efter att ha lärt oss introduktionen till CSS och egenskaperna hos CSS kommer vi att lära oss tillämpningen av CSS. Det finns tre sätt att få HTML-åtkomst till CSS:
1. Inline:
Ett inline-formatmall används bara för att påverka taggen det är i. Det innebär i huvudsak att de små detaljerna på sidan kan ändras utan att ändra sidans totala layout eller allt på sidan. Detta är fördelaktigt som om du hade allt på de externa sidorna, då skulle du behöva lägga till ytterligare taggar för att ändra detaljer. Inline åsidosätter extern vilket innebär att de små detaljerna kan ändras. Det åsidosätter också det interna.
2. Internt:
Det interna skulle bara användas när du ville lägga till en liten förändring i den enda taggen. Detta beror på att inline bara påverkar en tagg som finns i den medan den interna stylingen placeras på huvudet av HTML-dokumentet. Detta innebär att om du vill anpassa sidan så skulle alla nödvändiga ändringar ses genom att bara bläddra. Den interna stylingen placeras i taggarna. Jämförelsevis ser detta snyggare, enkelt, elegant och organiserat på grund av den separata stylingen och taggningen.
3. Externt
Externa stilark används för att låta människor formatera och återskapa sina webbsidor i ett helt annat dokument. Detta innebär effektivt att du kan ha två eller flera arbetsplatser, eftersom mer än ett stilark kan bäddas in i dokumentet och därigenom ge dig en mycket renare arbetsyta. Stylarket skulle vara lättillgängligt i detta fall, vilket är en enorm fördel, men å andra sidan skulle alla ändringar som görs i det externa arket påverka alla överordnade ark som det är länkade till.
Fördelar och nackdelar med CSS:
Fördelar med CSS
- Enhetens kompatibilitet
- Snabbare webbplatshastighet
- Lätt att underhålla
- Konsekventa och spontana förändringar
- Förmåga att återplacera
- Förbättrar sökmotorns kapacitet för att genomsöka webbsidorna
Nackdelar med CSS
- Cross-browser relaterade problem
- Sårbar
- Problem på grund av flera nivåer
- Brist på säkerhet
- Splittring
Slutsats - Introduktion till CSS
CSS ger kraften till webbdesignern så att omfattande förändringar kan göras i webblayouten för alla sidor på en enda webbplats genom att bara använda en enda fil. Det hjälper till att utforma ljus och en kreativ webbplats med hög lyhördhet och som imponerar publiken när den visas. Därför är det en integrerad del av webbplatserna idag som inte bör förbises.
Rekommenderade artiklar
Detta har varit en guide för introduktion till CSS. Här har vi diskuterat CSS: s huvudkomponenter, egenskaper, fördelar och nackdelar. Du kan också titta på följande artiklar för att lära dig mer -
- CSS-intervjufrågor och svar
- Introduktion till GIT
- Introduktion till PHP
- Introduktion till JavaScript