CSS er de mest vigtige ændringer, som websider har set i det sidste årti, og det banede vejen for adskillelse af stil og indhold. På den moderne måde definerer XHTML den semantiske Hvad semantisk markup er & hvordan det vil ændre Internettet for evigt [Teknologi forklaret] Hvad Semantisk markup er & hvordan det vil ændre Internettet for evigt [Teknologi forklaret] struktur - websidens betydning og indhold , mens CSS beskæftiger sig med præsentationen. Mens de fleste af os er komfortable med at skrive lidt HTML, synes vi at tro, at CSS er en slags sort magi. Jeg håber at ændre det med disse 5 baby-trin til at blive en CSS troldmand.

Denne artikel er rettet mod brugere, der endnu har meget lidt erfaring med CSS, selvom der forhåbentlig er noget her for alle.

(1) Grammatik

Som ethvert sprog har CSS en bestemt grammatik til det, og det kan virke lidt “computerprogram” til at begynde med, men det er virkelig bare en liste over ting. Al CSS er skrevet sådan:

VÆLGER EJENDOM: VÆRDI; EJENDOM: VALUE; EJENDOM: VALUE;

Som du måske allerede ved, fungerer CSS ved at anvende en stil på et valgt element på websiden. For at style for eksempel hvordan alle dine links vises, ville du bruge “-en” som vælger. De forskellige egenskaber og værdier, du lærer med erfaring, men nogle er lette - ting som FARVE, BORDER, FONT-STØRRELSE, HØJDE er alle nogle mulige egenskaber, hvis værdier muligvis er røde, 14 pct, 150%, 1000 px - det er virkelig sådan let. Lad os se, hvordan vi ville gøre for at style alle linkene røde:

a farve: rød;

Du kan også bruge den samme blok af CSS til at udføre mere end en type element på samme tid med kommaer:

a, h2, h3 farve: rød;

Dette gør ikke kun alle links, men også alle h2- og h3-overskrifter, i samme røde farve. Bemærk, at de muligvis alle er forskellige størrelser, da denne bestemte kodeblokke KUN ændrer farven.

(2) Klasse & ID-vælgere

Nogle gange vil du dog ikke style ALLE elementerne på samme måde - og i disse tilfælde kan du bruge KLASSE eller ID. Som en generel regel bruges ID til engangselementer og bruges mest til at definere store blokke med indhold eller enkelte specialknapper og sådan.

For eksempel har du muligvis en stor DIV til HEADER-, CONTENT- og FOOTER-blokke på din side - så det at definere dem som ID'er ville være et smart træk. Klasser bruges på den anden side, når stilelementer sandsynligvis vil blive gentaget på hele siden. Måske vil du have, at en masse genstande skal have afrundede hjørner med en 2px solid rød kant - snarere end at skrive den samme inline-stil en million gange, ville du definere en klasse for det og knytte klassen til disse elementer i stedet. Så hvordan definerer du disse ID'er og klasser?

 
SIDEBJÆLKEN
Dette åbner en ny rude i bunden af ​​din browser. På venstre side er XHTML-visningen, pænt formateret og sammenklappelig. Hvis du holder musepekeren over et element, fremhæver det elementet på siden og viser dig CSS-boksemodellen omkring det (vi taler mere om kassemodellen i en fremtidig lektion). Det centrale punkt her er, at du også kan vælge et hvilket som helst element og se nøjagtigt, hvilken CSS, der virker på det på højre side, og det vil nedbryde dem, som vælgere har forårsaget det. Alt, der er tilføjet inline, vises under “element.style” overskrift. Prøv det nu på denne side. Bemærk, at meget ofte krydses meget af CSS, der er anført til højre, med en central linje - dette betyder, at en anden vælger, der arbejder på dette element, har prioritet og tilsidesætter den, der er krydset.
Det er det i dag, men du er velkommen til at skrive kommentarer, hvis du tror, ​​jeg har gået glip af nogle grundlæggende centrale begynderspoint, eller hvis du har specifikke spørgsmål eller problemer med CSS, så spørg væk i teknisk support-sektionen på vores site. Næste gang vil jeg gerne udvikle din viden om CSS ud over de grundlæggende farve- og størrelsesændringer.