Introduksjon til CSS
Cascading Style Sheets, som er på en bedre måte kjent som CSS, er en veldig enkel designet prosess som brukes til å gjøre websidene mye mer presentabel. CSS lar deg sette stiler for å tilpasse websidene dine. Det beste med å bruke denne stylingfunksjonen er at CSS er uavhengig av HTML-måten å lage websider. Den grunnleggende forskjellen mellom Hypertext Markup Language og Cascading Style Sheets er at førstnevnte hovedsakelig er kjent for å gi den strukturelle måten for landskapet til websiden, mens den førstnevnte er ment å gi en kraftig fargekoding og stylingsteknikker. Det brukes til å kontrollere utformingen av mer enn en webside på en gang. Alle de eksterne stilarkene lagres i form av CSS-filer.
Hovedkomponenter i CSS
I seksjonen over har vi studert Introduksjon til CSS, så nå går vi videre med hovedkomponentene i CSS er som nedenfor:
1. Lett vedlikeholdbar: Hvis du har til hensikt å gjøre noen globale endringer, bare endre stylingen, og du kan se alle andre elementer på alle andre websider bli automatisk oppdatert.
2. CSS er tidsbesparende: Du kan bare skrive skriptet en gang og bruke det samme arket så mye tid du vil.
3. Overlegne stiler til innfødt frontend: CSS har relativt mye bredere utvalg av attributter og liste sammenlignet med HTML. Derfor kan HTML-siden få et lysere utseende hvis de sammenlignes med de vanlige HTML-attributtene.
4. Lett med søkemotorer: CSS blir sett på som et veldig praktisk og et lettlest stylingark. Dette betyr at søkemotorene ikke trenger å satse mye på å prøve å lese teksten.
5. Effektiv lagring av hurtigbuffer: CSS kan brukes til å lagre webapplikasjonene lokalt ved hjelp av offline cache-mekanisme som kan brukes til å se offline nettsteder.
Kjennetegn på CSS
Mens vi diskuterte introduksjonen til CSS og dets komponent. nå skal vi lære om CSS-egenskapene. De viktigste egenskapene til CSS inkluderer stylingsregler som tolkes av klientleseren og brukes på forskjellige elementer i dokumentet. Viktige egenskaper inkluderer:
- En stilregel består av en velgerkomponent og en deklarasjonsblokkomponent.
- Velgeren brukes til å peke på HTML-komponenten du ønsker å bli stylet.
- Inne i deklarasjonsblokken inneholder en eller flere erklæringer sammen med semikolon.
- Hver erklæring som er utstedt har et CSS-eiendomsnavn, et semikolon og en verdi. For eksempel er farge egenskapen og verdien er rød i fargen. Skriftstørrelse er egenskapen, og 15 px er verdien.
- CSS-erklæringen ender med en semikolon og disse blokkene er omgitt av krøllete seler.
- CSS-velgere er de som brukes til å finne HTML-elementer som er basert på elementnavnet, id, attributt, klasse og mer.
- Ett unikt element blir valgt med ID til et element.
- Hvis du ønsker å velge det aktuelle elementet med en spesifikk ID, skal # -funksjonen sammen med ID-attributtet brukes.
- Hvis du ønsker å velge elementer med en bestemt klasse, skal periodetegnet sammen med navneklassen skrives.
- Universalvelger: Hvis du ikke er interessert i å velge elementer av en viss type, samsvarer universellvelgeren ganske enkelt med elementnavnet.
- Elementvelger: Disse velgerne velger elementet basert på elementnavnet.
- Descendent selector: Når et bestemt element ligger inne i et annet element, kalles det som den etterkommende selector.
- ID-velger: Denne velgeren bruker IDen til HTML-elementet slik at et spesifikt element kan velges.
- Klassevalgere: Den velger elementet med et spesifikt klasseattributt.
- Gruppere velgere: Det vil være et godt alternativ å gruppere velgerne slik at koden minimeres. Hver velger sammen med komma skal brukes til å gruppere velgerne.
Bruksområder for CSS
Etter å ha lært introduksjonen til CSS og egenskapene til CSS skal vi lære bruken av CSS. Det er tre måter HTML får tilgang til CSS:
1. Inline:
Et inline stilark brukes bare til å påvirke koden det er i. Dette betyr i hovedsak at de små detaljene på siden kan endres uten å endre den generelle utformingen av siden eller alt på siden. Dette er fordelaktig som om du hadde alt på de eksterne sidene, så vil du bli bedt om å legge til flere koder for å endre detaljer. Inline overstyrer eksternt som betyr at de små detaljene kan endres. Det overstyrer også det interne.
2. Internt:
Det interne vil bare bli brukt når du ville legge til en liten endring i enkeltkoden. Dette er fordi inline bare påvirker den taggen som er inne i den, mens den interne stylingen er satt på hodet til HTML-dokumentet. Dette betyr at hvis du ønsker å tilpasse siden, vil alle nødvendige endringer sees ved å bla. Den interne stylingen er plassert i taggene. Sammenlignende ser dette penere ut, enkelt, elegant og organisert på grunn av den separate stylingen og taggingen.
3. Ekstern
Eksterne stilark brukes for å la folk formatere og gjenskape websidene sine på et helt annet dokument. Dette betyr effektivt at du kan ha to eller flere arbeidsplasser, ettersom mer enn ett stilark kan være innebygd i dokumentet og dermed gi deg et mye renere arbeidsområde. Stilsarket vil være lett tilgjengelig i dette tilfellet, noe som er en stor fordel, men på den annen side vil eventuelle endringer gjort på det eksterne arket påvirke alle overordnede ark det er koblet til.
Fordeler og ulemper ved CSS:
Fordeler med CSS
- Enhetskompatibilitet
- Raskere nettstedets hastighet
- Enkelt vedlikeholdbar
- Konsistente og spontane endringer
- Evne til å postere på nytt
- Forbedrer søkemotorens funksjoner for å gjennomsøke websidene
Ulemper ved CSS
- Problemer på tvers av nettlesere
- Sårbar
- Problemer på grunn av flere nivåer
- Mangel på sikkerhet
- Fragmentering
Konklusjon - Introduksjon til CSS
CSS gir makt til webdesigneren slik at omfattende endringer kan bli gitt til weblayouten på alle sidene på et enkelt nettsted ved å bruke bare en enkelt fil. Det hjelper i utformingen av lys og et kreativt nettsted med høy respons og som imponerer publikum når de vises. Derfor er det en integrert del av nettstedene i dag som ikke bør overses.
Anbefalte artikler
Dette har vært en guide for Introduksjon til CSS. Her har vi diskutert hovedkomponenter, egenskaper, fordeler og ulemper ved CSS. Du kan også se på følgende artikler for å lære mer -
- CSS Intervju Spørsmål og svar
- Introduksjon til GIT
- Introduksjon til PHP
- Introduksjon til JavaScript