Hva er eksterne og interne stilark. Definisjon av farger. CSS leksjoner. Strukturell pseudoklassevelger

Et CSS-stilark, hvis vi tar selve definisjonen, er et språk for å beskrive utseendet til et dokument. Det vil si at HTML er ansvarlig for strukturen på siden, og CSS-stilark er ansvarlig for all design. Jeg har satt sammen informasjon her som lar deg bruke stilarket fritt. Jeg vil ikke skrive om hvordan du trenger å vite det, fordi det allerede er klart - uten det vil du ikke kunne bringe siden til en mer eller mindre normal form. Hvis noen akkurat begynner å lære CSS-stiler, vil disse materialene være nok til å begynne å lære CSS.

1. Grunnleggende ting

Jeg starter med det helt grunnleggende. Da jeg startet denne siden, skrev jeg en liten opplæring om å lære CSS-stilark. Timene egner seg godt både for de som er i ferd med å starte opp, og for de som allerede kan noe for å friske opp kunnskapen. Alt der er utformet i bilder og ekte eksempler.

Liten digresjon: da jeg begynte å studere temaet nettstedbygging selv, lærte jeg nesten alle HTML-tagger og de inspirerte meg ikke mye. Men etter at jeg begynte å lære CSS-stilarket og prøve å bruke hver av egenskapene, elsket jeg det så mye (jeg ville ikke ha gjort det hvis jeg ikke likte det). Jeg så at du kan gjøre fantastiske ting med bare CSS. Det er ikke et programmeringsspråk som tar måneder å lære seg. Stilarket kan mestres på én (maks to) uker.

Selvfølgelig vil du ikke studere absolutt alle egenskapene og deres betydninger, og dette er ikke nødvendig! Du trenger bare å kjenne det grunnleggende slik at du kan begynne å bruke og bruke i prosjektene dine. En viktig nyanse er at du UMIDDELBART må bruke egenskapen du nettopp lærte ved å bruke et ekte eksempel. Enten det er ditt eget nettsted eller et enkelt HTML-nettsted, spiller det ingen rolle. Det er viktig at du prøver å skrive med egne hender og se resultatet.

Jeg har mange eksempler på nettstedet mitt som bruker CSS. Bare og sammen inneholder de mer enn 100 leksjoner! Når du i det minste kan det grunnleggende, kan du trygt endre og bruke alle eksemplene fra leksjonene.

Mine leksjoner om det grunnleggende om CSS-cascading

2. CSS og CSS3 Cheat Sheets

Vel, du har lært det grunnleggende og etter et par dager har du glemt alt med "suksess", og sannsynligvis tror du at dette ikke er ditt og alt er komplisert. Jeg vil gi deg en liten oppmuntring - selv kjenner jeg ikke alle egenskapene til CSS. Men hva hindrer meg i å se på dem på Internett?

Riktignok, mens du går til Yandex eller Google, skriv inn forespørselen du trenger. Og hvis den fortsatt ikke gir ut det du trenger i søket. Så du kan bruke mye tid, men fortsatt ikke finne det du virkelig ser etter.

Heldigvis har flinke folk satt sammen veldig nyttige jukseark som har hjulpet meg mer enn en gang. Det er nok å finne ut hvor alt er, og søket etter de ønskede egenskapene byr ikke på noen vanskeligheter.

CSS og CSS3 Cheat Sheets

Dette er rett og slett uerstattelige materialer for utvikling av layout og nettsteddesign. Tiden for distraksjon og søk på Internett etter beskrivelser av eiendommer reduseres mange ganger.

Det er sant, som du forstår, jo mer du setter inn nettsteder eller designer, desto mindre trenger du å se på dette hintet, siden alle nødvendige egenskaper forblir i minnet hele tiden. Men likevel, å ha dette settet med jukseark for hånden vil ikke være overflødig.

Det er som på skolen: selv om du ikke bruker et jukseark, men med det er det fortsatt roligere i sjelen din 😆.

Hva er stilark for?

Du opprettet de forrige sidene slik du opprettet dem før bruken av Cascading Style Sheets eller CSS.

De viktigste problemene som nettstedsutviklere møtte før CSS kom:

Plasseringsproblem (sidelayout). Selv om de begynte å bruke tabeller til dette (de var opprinnelig ikke ment for dette), løste de ikke alle problemene. Det er ikke mulig å gjøre følgende:
- Kan ikke angi faste dimensjoner for noen blokk. For eksempel vil en tekstblokk utvides når den renner over (selv om den er i en tabell).
- Kan ikke sette faste koordinater for plasseringen av blokken på siden.
- Du kan ikke legge en blokk oppå en annen. Prøv for eksempel å skyve et bilde over et bord eller et annet bilde.

Det andre problemet var at jeg hver gang måtte angi skriftstørrelse og farge, egenskaper for tabellceller osv. på sidene. Dette økte størrelsen på siden betraktelig, noe som betyr at den laster langsommere. Hvis du ønsker å endre fargen eller størrelsen på skriften, må du redigere alle sidene.

Det tredje problemet var at alle nettlesere har individuelle innstillinger. For eksempel, i en nettleser, kan du øke skriften, noe som vil forvrenge hele siden.

CSS kan løse disse problemene.

Måter å bruke CSS

Det er tre måter å bruke stilark på:

Interne stilark(Inline Style Sheets) - plasseres direkte i HTML-tagger ved hjelp av et spesielt attributt.
Eksempel HTML:

Eksempel CSS:

Som du kan se, er koden for det innebygde stilarket større enn HTML. Derfor bør ISS bare brukes hvis det er nødvendig å sette sin egen individuelle stil for et bestemt element.
Ved hjelp av den ekstra attributtstilen kan vi definere stilparameterne vi trenger i enhver tag. Dette er den enkleste metoden og fungerer bare innenfor én tag. Men forestill deg hvor mye filstørrelsen vil vokse, og hvor upraktisk det vil være å fikse det hvis vi spesifiserer stilen for hver tag.

Globale stilark(Globale stilark) - definer stilen til elementer gjennom hele dokumentet.
For å gjøre dette, bruk taggen …

Relaterte stiler

Det mest praktiske, fordi med deres hjelp kan du enkelt designe et helt nettsted i en enkelt stil. En koblet stil forutsetter at all CSS-styling er i en egen fil med utvidelsen .css.

Denne tilnærmingen er også praktisk ved at den skiller sidelayoutregler fra innholdet, CSS-kode kan enkelt endres uten å forstyrre HTML-filer, og prinsippet om kodeseparasjon er veldig viktig, spesielt i store prosjekter.

For å knytte regler fra en CSS-fil til en HTML-side, bruk taggen lagt til beholderen , og dens attributter.

Her er linjen som kobler reglene fra filen mystyle.css med HTML-side:

rel = "stilark" spesifiserer at taggen refererer til en stilarkfil, href = "mysyle.css" angir adressen sin. Adresseringsreglene er de samme som for vanlige lenker - banen kan være absolutt, relativ osv.

Importerte stiler

Ved å bruke kommandoen @import du kan legge til stiler fra en CSS-fil til gjeldende tabell. Dette kan være nødvendig, for eksempel hvis du ønsker å komplettere det individuelle dokumentoppsettet, spesifisert ved bruk av globale stiler, med universelle regler fra en egen fil. Metoden kan ikke brukes med innebygde stiler.

Koden nedenfor vil importere filtabellen til dokumentet any.css, som ligger i mappen med HTML-dokumentet som redigeres:

@import url (any.css);

Kommandoen er skrevet på linjen under åpningstaggen

Hva er stilark for?

Cascading style sheets eller CSS (fra engelsk Cascading Style Sheets) er en konsekvens av videreutviklingen av HTML og gir oss muligheten til å gå videre til neste nivå av informasjonspresentasjon. Stilark lar deg skille det semantiske innholdet på siden og dens design.

Som vi husker, ga de første versjonene av HTML-standarden ingen midler til å kontrollere utseendet til informasjon. Det generelle konseptet hypertekst var rettet mot tilgjengeligheten av informasjon for enhver enhet som var i stand til å reprodusere tekst. For markering ble det anbefalt å bruke bare boolske tagger som definerer overskrifter, underoverskrifter, lister, avsnitt, sitater osv. - det vil si de elementene som utgjør strukturen til dokumentet. Tolkningen av utseendet forble helt på samvittigheten til terminalterminalen.

Imidlertid har mye endret seg siden den gang, og HTML-standarden har mistet sin opprinnelige slankhet. Opprinnelig la Netscape til "forbedrede tagger" som tillot mer kontroll over utseendet til informasjonen som ble presentert. Innovasjonen slo til, og alle Netscape-utvidelser ble de facto-standarden. Så gjorde Microsoft det samme. Da de innså det, var HTML en forferdelig blanding av logiske og design-tags, inkompatible utvidelser og sluttet helt å svare på det opprinnelige konseptet - å presentere informasjon på en hvilken som helst enhet, uavhengig av informasjonsvisningsegenskaper.

Deretter ble det foretatt en storstilt standardisering. Som et resultat ble HTML 3.2-standarden født. Det var ikke revolusjonerende, men satte bare på plass alle innovasjonene og utviklet generelle anbefalinger for nettleserprodusenter. Revolusjonerende endringer ble introdusert i den nye standarden - HTML 4.0 eller, som den ble kalt, Dynamic HTML. Lag, stilark og den generiske nettleserobjektmodellen ble introdusert.

Den nye standarden har forsøkt å gå tilbake til opprinnelsen til HTML-konseptet. Den fjerde versjonen, som den første, anbefaler å lage sider på en slik måte at de kan reproduseres på hvilken som helst enhet - det være seg en 21-tommers skjerm eller en liten svart-hvitt-skjerm på en mobiltelefon.

Hvordan ble presentasjonsproblemet løst? Dette er den revolusjonerende tilnærmingen. Det anbefales å overføre alt design til en ekstern stilfil. Hovedsiden vil kun inneholde informasjon og lenker til de nødvendige stilene.

Når du viser en side for en bestemt enhet, bør det riktige stilarket brukes. For en mobiltelefon og en dataskjerm må de selvfølgelig være forskjellige. I det første tilfellet bruker vi minimumsdesignet, som vil tillate oss å presentere informasjon på den mest optimale og kompakte måten. I det andre tilfellet har vi til rådighet all rikdommen av font- og fargedesign.

Du trenger å skrive et stilark bare én gang når du oppretter et nettsted for hver enhet du planlegger å vise informasjon på. I tillegg kan stilarket være det samme for hele nettstedet. Og derfor trenger du ikke å gjenta de samme stilbeskrivelsene på hver av sidene.

Plassering av all stilinformasjon i én ekstern fil åpner for andre nyttige muligheter for oss - når alt kommer til alt, ved å endre innholdet i kun én (!) Style-fil, kan vi endre hele nettstedets design i løpet av sekunder. Dessuten er ingen andre endringer nødvendig. Selvfølgelig er dette bare sant hvis den opprinnelige siden ble utformet på riktig måte.

Med litt teori ute av veien, la oss komme ut i praksis, og vi starter med å koble et stilark til en HTML-fil.

Inkludert stilark
For å utføre denne oppgaven kan vi bruke en av de 3 foreslåtte metodene:

ekstern fil

beskrivelse i titteldelen

innebygd beskrivelse

La oss starte med den enkleste, den såkalte innebygde beskrivelsen eller beskrivelsen innebygd i en tag:

Denne teksten overstyres av stilen

Ved hjelp av den ekstra attributtstilen kan vi definere stilparameterne vi trenger i enhver tag. Dette er den enkleste metoden og fungerer bare innenfor én tag. Men forestill deg hvor mye filstørrelsen vil vokse, og hvor upraktisk det vil være å fikse det hvis vi spesifiserer stilen for hver tag. Denne metoden er ikke veldig forskjellig, for eksempel fra den direkte beskrivelsen av utseendet ved hjelp av en tag.

Det er mye mer praktisk å definere alle nødvendige designstiler på forhånd og deretter bare bruke dem på de tilsvarende kodene. Dette vil være den andre måten - beskrivelse i overskriftsdelen. Effekten gjelder hele siden. Stiler er definert ved hjelp av klasser, som er lister med definisjonen av alle nødvendige designparametere.

Når du bruker denne metoden, må beskrivelsen av stiler plasseres i overskriftsdelen:


....



Disse stilene kan nå brukes hvor som helst i html-koden. For dette brukes følgende konstruksjon:

Denne teksten er skrevet med overskriftsstilen

Denne teksten er skrevet i rødt

Som du kan se, er ikke alt så vanskelig. Det viktigste er å forstå de grunnleggende prinsippene. I tillegg til å definere nye klasser, har vi også muligheten til å overstyre standardkoder. For eksempel taggen

Nå vil all tekst som er omsluttet av tagger se ut som definert av denne stilen. Dette er veldig praktisk og lar deg enkelt tilpasse eksisterende sider til bruken av stiler. I tillegg reduserer det størrelsen på filen noe på grunn av fraværet av unødvendige klasseattributter.

Og til slutt, den tredje måten er å overføre beskrivelsen av stiler til en ekstern fil. Dens rekkevidde av innflytelse strekker seg til alle filer der beskrivelsen er inkludert. Denne metoden er mest i tråd med konseptet HTML 4.0. Hvis vi trenger å endre utseendet på nettstedet, vil det være nok å korrigere bare denne ene filen. Sammenlign det med de tidligere metodene. I en av dem må du endre beskrivelsen på hver side, og på den andre, enda mer - nær hver tag, noe som selvfølgelig ikke er inspirerende i det hele tatt.

Hvordan bygger du inn en ekstern fil? Først opprettes en stilfil med en beskrivelse av alle klassene vi trenger (mystyle.css):

Topptekst (tekstjuster: senter; skriftstørrelse: 27 pkt;)
.red (farge: rød;)
p (tekstjustering: senter; skriftstørrelse: 12 pkt;)


....

....


Dette er den mest praktiske metoden og anbefales for hovedstilarket.

Hvorfor sa jeg "grunnleggende"? Faktum er at man i praksis må bruke alle tre metodene, og her spiller «kaskaden» av stiler inn. Men vi snakker om dette neste gang.

Fortsetter samtalen om bruk av stilark. Først, la oss ta for oss kaskaden av stiler, og deretter gå videre til å gjennomgå syntaksen og en oversikt over de vanligste parameterne som brukes når du lager stiler.

Cascading stiler
Så la oss først finne ut hvorfor stiler kalles cascading. Tillat meg, kjære leser, jeg vil nok en gang gi deg måtene å implementere stiler på en side:

ved å bruke en egen stilfil og sette den inn med en tag

beskrivelse av stilen i hodet av dokumentet

bruke en stil som en parameter i en tag.

Kaskaden er at stiler kan overstyres. Listen ovenfor over stilark for å injisere stiler tilsvarer rekkefølgen for overstyring. Nedstrømsmetoden kan overstyre den oppstrøms.

For eksempel har vi definert i den eksterne stilfilen at teksten i taggen

skal skrives med 10-punkts skrift. Men hvis i tittelen på siden vi i tillegg indikerer at den samme teksten i taggen

må skrives med 12 punkts skrift, så vil teksten vises i akkurat den størrelsen - dvs. stilen i overskriften på siden har overstyrt stilen i den eksterne filen.

Hva er den til? Å, dette er en veldig nyttig ting. Og nå skal jeg vise dette med et konkret eksempel. La oss anta at følgende stil er definert for alle koblingene i overskriften på siden vår:




Og derfor blir all tekst som er en hyperkobling automatisk rød og slutter å bli understreket. Og så vi bestemte oss for å indikere opphavsretten på slutten av siden, men å gjøre dette er ikke veldig merkbart, for ikke å fokusere oppmerksomheten på det. Men likevel ønsker vi at opphavsretten også skal være en lenke. Vi trenger kun å gjøre dette på ett sted på siden, og det er upraktisk å definere en ekstra klasse for dette. I dette tilfellet vil kaskaden av stiler komme oss til hjelp. Det er nok å lokalt overstyre lenkefargen:

Opphavsrett (C)
1998-2001 Cherry-Design

Vi gjorde dette ved å bruke stilparameteren, og som du husker, fungerer den bare innenfor grensene til taggen den ble definert i. Det vi trenger.

Du har kanskje lagt merke til at i eksemplet ovenfor introduserte jeg en ny tag i sirkulasjon. Den er designet spesielt for slike tilfeller. Alt det gjør er å definere et område som vi kan bruke stilen på. Dette er en veldig hendig merkelapp fordi setter ikke inn noe unødvendig mellomrom før eller etter seg selv (dvs. tom vertikal plass), slik taggen gjør

I hvilke tagger er det bedre å definere stiler ved å bruke en klasse? Oftest brukes en av følgende konstruksjoner for dette:

Noe



Noe

Noe

stikkord

er lik , men bare med den forskjellen at den gjør et hopp før og etter seg selv (på samme måte som
). Men stilen til teksten som hovedinnholdet på siden skrives med, gjøres best ved å overstyre taggen
Ikke ved å definere en bestemt klasse.
Og et lite tillegg relatert til riktig visning i begge nettlesere - hvis du bruker et tabelloppsett for nettsteddesign, må du definere stilen til hovedteksten, ikke bare i taggen
siden Netscape nekter blankt å arve stiler før bord.
Med cascading i tankene, la oss snakke om syntaksen.
CSS-syntaks
Hver klasse er beskrevet ved hjelp av en konstruksjon som dette:
Liten (skriftstørrelse: 9 pkt;)
Først er navnet på klassen indikert - det kan være vilkårlig, men det er fortsatt ønskelig å gi et meningsfylt navn. Videre, i krøllete klammeparenteser () er alle nødvendige parametere for denne klassen oppført. Parametre er atskilt fra hverandre med semikolon. Her er et annet eksempel som bruker en lengre beskrivelse:
Liten (font-size: 9pt; color: #eeeeee; text-align: center;)
Merk at i begge konstruksjonene startet jeg klassenavnet med en prikk og definerte dermed en generisk klasse, dvs. en som kan brukes på hvilken som helst tag. Og dette gjøres ved å bruke følgende konstruksjon:


Siden det er universelle klasser, så er det sannsynligvis noen andre? Det er riktig, det finnes også såkalte taggede klasser:
p.small (font-size: 9pt;)
En klasse definert på denne måten vil bare fungere i taggen den er ment for, og for alle andre vil den bli ignorert:
Denne teksten vil bli gjengitt med liten stil


Vi kan definere parametere ikke bare for én tag, men for flere samtidig. For å gjøre dette, i definisjonen av stilen, er det nok å liste dem atskilt med kommaer:
p, td (font-size: 9pt; farge: grønn;)
Denne teknikken kalles gruppering, og i dette tilfellet har vi definert for
samme størrelse og farge på teksten.
Ved overstyring av eksisterende tagger kan ikke alle parametere spesifiseres i stilbeskrivelsen, men bare de som vi ønsker å endre. Alle andre parametere vil godta standardverdier, som er forskjellige for forskjellige tagger.
Pseudo-klasser
CSS har noe slikt som en pseudo-klasse. I motsetning til en vanlig klasse, gjelder ikke handlingen til en pseudoklasse for hele teksten som denne stilen er brukt på, men bare for en del av den og er bare mulig i en viss tilstand. For å gjøre det klarere, la oss se på effekten av at koblinger bare understrekes når du holder musepekeren over dem. Effekten er ganske vanlig, og du kan også se den på denne siden. Her er et utdrag av stilarket som oppnår effekten ovenfor:
a (tekst-dekor: ingen;)
a: hover (tekst-dekorasjon: understreking;)
Den øverste linjen er en overstyring av standardbrikken , som forbyr understreking av lenker, men bunnen er stildefinisjonen for hover-pseudoklassen, som beskriver stilen til lenken i øyeblikket når markøren er over den.
Her er et annet eksempel på en pseudo-klasse - definere en drop cap i begynnelsen av et avsnitt:
p: første bokstav (font-size: 200%; font-weight: fet;)
Merk at i begge tilfeller påvirker stilen enten en bestemt tilstand (brukeren er i ferd med å klikke på lenken) eller et tekststykke (bare den første bokstaven i avsnittet endres). Dette er poenget med pseudo-klasser.