Jeg har allerede diskutert hvordan du kan lære å kode gratis ved hjelp av språk som Ruby og Javascript, men denne gangen vil vi utforske en enda mer grunnleggende språk som kan bidra til å gjøre nettsteder pop. Cascading Style Sheets er som HTML er kulere, mer kunstnerisk søsken: Mens HTML håndterer strukturen og innholdet på nettstedet ditt, kan CSS du legge til banebrytende design til det. Denne veiledningen forteller deg alt du trenger å vite for å komme i gang å lage penere nettsteder fort.

Hva er CSS?

Mange mennesker bare å bli kjent CSS tenke på det som en fancy måte håndtering av HTML-egenskaper som tekstformatering og bakgrunnsbilder - og for småskala eksempler på enkle sider, det er i stor grad sant. Du kan manipulere mange av de egenskapene som CSS påvirker gjennom ren HTML i stedet (men ikke så godt), og hvis du bare ønsker å endre skriftstørrelsen på siden din, er faktisk vanskeligere å bruke enn HTML CSS. Anmeldelser

Hva gjør CSS verdt er antall designmuligheter det åpner opp for deg som er vanskelig - eller umulig - å oppnå med HTML alene. HTML gir deg bare en håndfull av tekst egenskaper å manipulere; CSS gir deg egenskaper som farge, retning, brev-avstand, line-height, text-align, text-decoration, tekst-innrykk, tekst-shadow, tekst-transform, vertikal-align, white-space, og ord-avstand . Og jeg har ikke engang fått til nontext alternativer.

For en fullstendig liste over CSS egenskaper, kan du sjekke ut en hendig ordliste på Dochub, men for nå la oss se på bare to av de mer interessante. Siden vi ikke kunne faktisk skrive HTML og CSS-kode i en webside uten å forårsake problemer for PCWorld CMS, har vi tatt den frihet å gi bilder av noen eksempelkode og hvordan det ser ut på en live-side.
< p> For det første, kan CSS deg legge til og endre en grense for ethvert element på en side. Følgende kode gir en solid, 5-pixel bred rød ramme rundt hele avsnittet.

CSS eksperter vil merke at det er en mye kortere vei til å skrive denne koden (de vil også rynke på å skrive koden inline i det hele tatt), men det gir et godt eksempel på CSS formatering.

Du skriver inline CSS i koden selv, ved hjelp av stilen attributtet. I utgangspunktet du skrive HTML-koder som vanlig, og deretter legge til CSS i formatet "css-eiendommen: Eiendommen-verdi;" rett på innsiden. Vilkårlig CSS kan gå inne i stilen attributtet. For eksempel, hvis vi ønsket å legge en skygge til at avsnitt i tillegg til grensen, vil vi endre koden til følgende linje.

Du har kanskje lagt merke til at box-shadow attributt vi lagt har mer enn én verdi. Det er fordi box-shadow attributt tillater stenografi formatering, en annen tidsbesparende funksjon i CSS. I stenografi formatering, i stedet for å spesifisere hver messig verdi på en eiendom individuelt, kan du angi verdiene i en standardisert for å spare tid og tegn. I eksempelet ovenfor, kan vi spesifisere høyden på skygge, bredden, og dens farge.

Grensen attributt har en lignende stenografi, og vi kan spare mye plass ved å skrive vår kode i følgende format, noe som vil gi de samme resultatene.

Disse kule visuelle triks er egentlig bare vinduet dressing av CSS. Språket sanne styrke kommer fra dens evne til å raskt og effektivt målrette stil effekter til noen del av ditt nettsted takket være kraftige velgere. Læring CSS lar deg også å standardisere din design på tvers av flere sider på nettstedet ditt ved hjelp av et enkelt, lett modifiserbar eksternt stilark. Begge disse funksjonene ta måneder eller år å fullt mestre, men jeg kan fort vise hvordan og hvorfor du vil bruke CSS med noen enkle eksempler

Neste side:. Ekstern Styling og velgere

Ekstern Styling og velgere

Avanserte brukere av CSS sjelden legge sin styling til en enkelt side. I stedet veteran brukere distribuere CSS gjennom en ekstern CSS-fil som hver side refererer til etter behov.

Jeg kan ikke vise deg et direkte eksempel på dette trikset akkurat nå (for noen grunn, PCWorld IT-personale doesn ' t vil en tilfeldig redaktør rote rundt med kode som kjøres hele området), men jeg kan vise deg CSS- filen vi allerede bruker. Advarsel: Ekstremt kjedelig link. At CSS-fil kan ikke se ut som mye, men hver artikkel generert på PCWorld refererer til det å bestemme standard PCWorld sidestiler.

Hvis vi bestemte plutselig at vi ønsket hver enkelt PCWorld artikkelen for å begynne å vise sin tekst så lyst grønn (fordi vi hadde alle mistet våre sinn), bruk som ny fargetone til hver artikkel på nettstedet vil bare kreve oss for å endre tekstfarge på kroppen tag til grønt i at CSS-fil.

Av Selvfølgelig er problemet med å håndtere all styling gjennom en topp-nivå dokument som styling enkelte deler av en bestemt side kan bli vanskelig. For eksempel, la oss si at du ønsker å endre hvordan overskrifter ser på den ene siden, men ikke på en annen. Hvordan vil du oppnå dette ved hjelp av CSS?

Vel, CSS tilbyr to alternativer. Jo enklere, men mindre fleksibel måte er å legge til litt CSS til at én side. Som standard CSS-kode på en enkelt side styrer CSS i en ekstern CSS-fil. Så hvis din style.css sier standard skriftstørrelse er 12px men selve siden indikerer 24px tekst, vil den aktuelle siden ta det 24px som evangeliet.

Det er flott for å gjøre en individuell endring, men du har andre måter å styrte master CSS fil hvis du ønsker å gjøre endringer i bestemte typer overskrifter som vises på, sier én av ti sider på nettstedet ditt. For å utvikle nettstedet, administrerende hver enkelt side blir mer og mer irriterende. Det er derfor vi har klasser og IDer. Du kan legge til en klasse og ID tag til nesten alle HTML element på en side for å ytterligere spesifisere sin identitet til stilarket. Vanligvis de ser noe sånt som følgende:

Dine klasser og IDer kan ikke ha mellomrom, men ellers kan du kalle dem hva du vil. Det kan virke som bortkastet tid, men du vil bry å legge disse angir koder fordi CSS kan gjenkjenne dem og bruke dem til å målrette bare de kodene som har dem. Hvis du ønsker å gjøre noen av overskriftene større og røde, for eksempel, kan du gi dem hele klassen "bigred" og deretter bruke en stil bare til den klassen.

For å forstå hvordan, må du holde oppmerksom på at formateringen av CSS i et eget stilark er litt annerledes enn det er som en inline eiendom. Siden enhver stil du skriver ikke er knyttet til en bestemt HTML-kode, må det en velger å identifisere sideelementer som du fester den stilen. CSS i et stilark ser slik ut:

selector {egenskap: verdi; attributt: verdi; egenskap: verdi;}

Så hvis vi ønsket å gjøre hele teksten i kroppen av en webside rød, for eksempel, ville vi skrive body {color: red;} i vår CSS stilark. Den uttalelsen viser at all teksten på innsiden av kroppen tag på våre nettsider skal være farget rød. Den røde attributtet fungerer fordi rød skjer for å være en av fargene du kan identifisere ved navn i CSS, men du kan også bruke hex verdien av en farge (# FF0000) eller RGB-verdien (255,0,0) å være mer spesifikk i dine fargevalg.

Du kan bruke valg attributtet til å redigere styling av noen HTML-koden på siden din, og deretter få enda mer detaljert ved å legge i en klasse eller ID. Når du programmerer med CSS, identifisere deg en klasse ved hjelp av en periode. Hvis du ønsker å velge alle elementer med klassen bigred, for eksempel, ville du skrive .BigRed som velgeren. I mellomtiden, du velger en ID ved hjelp av pund symbol. For eksempel vil du bruke #BigTitle for et element med ID BigTitle.

I tillegg kan du kjede sammen velgere å oppnå enda mer spesifisitet. Hvis du ønsker å velge bare ledd koder med klassen bigred, med unntak av eventuelle overskrifter eller andre HTML-elementer som har den klassen, ville du skrive p.BigRed som velgeren.

La oss si at vi ønsket å legge vår grensen til noen avsnitt som har klassen bigred. Vi skulle kaste følgende linje inn i vårt stilark

p.BigRed {border: solid 5px red;}.

Og nå noen avsnitt med den klassen som er angitt på alle sider knyttet til den stilen ark ville ha grensen legges til den.

Siden mer spesifikke velgere går foran mer-generelle dem, vår velger ved hjelp av en klasse overskriver styling for avsnitt generelt. ID-er enda mer spesifikk enn klasser (du kan bare ha en enkelt element på en side med en gitt ID). Si at vi skrev følgende linje:

p # MostSpecific {border: solid 6PX red;}

Med denne linjen på plass, ville noen avsnitt med ID MostSpecific har en 6-pixel grensen snarere enn en 5-pixel grensen, selv om det hadde bigred klassen.

Great Artists Stjel

Selvfølgelig er den enkleste måten å lære CSS er å begynne å spille rundt med koden selv. Selv denne enkle explainer kan være forvirrende uten koding erfaring, gjør det mye fornuftig i sammenheng. For ytterligere hjelp, anbefaler jeg at du sjekker ut noen av de flotte online ressurser for å lære CSS. Jeg er en fan av video tutorials på Frykt ikke internett og den tidligere nevnte ordliste med CSS koder på Dochub for generell referanse.

Den beste måten å lære å skrive gode CSS, er imidlertid å se på hvordan andre programmerere gjør det. Heldigvis er det en enkel øvelse i praktisk talt alle moderne nettleser. Både Chrome og Safari kommer med innebygde utviklerverktøy som lar deg raskt og enkelt se på CSS, HTML og Javascript på alle sider. Firefox og Internet Explorer-brukere har tilgang til lignende verktøy gjennom gratis utvidelse Firebug. Disse verktøyene gjør det lett å se koden som skaper dine favorittnettsteder, selv fremhever på siden avhengig av hva elementet du for øyeblikket er å bevege musen over på siden kildekode, og vice versa.

Neste gang du ser en layout eller formatering triks som du virkelig liker på en nettside, kan du føle deg trygg på å skyte opp dine utviklerverktøy for å ta en titt og kanskje prøve det ut selv. Med litt nysgjerrighet og praksis, vil du snart kunne forstå og gjenskape triks fra selv de vakreste steder på nettet.