Eksterne stilark er mye mer vanlig. Du trenger bare å koble tabellen til alle nødvendige nettsider ved å bruke taggen med et rel-attributt (definerer forholdet mellom siden og den inkluderte filen) og en stilarkverdi, som betyr at den inkluderte filen inneholder et stilark. href-attributtet er banen (URL) til .css-filen din:

Ved å redigere kun én fil kan du endre stilen for hele nettstedet på en gang, uavhengig av hvor mange sider det er. Dette er veldig praktisk, spesielt for store ressurser.

Leksjon: lage et stilark

Siden eksterne stilark er de mest praktiske og mye brukt i designutvikling, vil vi lære hvordan du lager dem. Du kan laste ned arkivet med filer for denne leksjonen på denne siden.

I mappen finner du et HTML-dokument med et eksempel på en enkel side og et bilde (vil bli brukt i opplæringen). Åpne HTML-dokumentet i en nettleser. Du vil se at siden ser helt normal ut. For å få henne til å se mer attraktiv ut, la oss skrive en stil for henne.

Foreløpig trenger du ikke gå for dypt inn i hva et stykke kode betyr. Nå må du forstå hvordan det fungerer. La oss komme i gang.

Kobler CSS til HTML

Først åpner du et tekstredigeringsprogram på datamaskinen din (notisblokk gjør det) og lag en tom fil med navnet style, og lagre den med .css-utvidelsen (du bør få en style.css-fil). Lagre filen i samme mappe som det nedlastede HTML-dokumentet.

Åpne HTML-dokumentet i et tekstredigeringsprogram, så vel som i en nettleser (slik at du enkelt kan se endringene i utseendet til siden). Legg til mellom tagger følgende kode:

Kort om hva du nettopp gjorde. Ved å lime inn denne koden i HTML-dokumentet ditt:

• angitt en lenke til en font kalt Roboto Condensed, som vil bli hentet fra Google-serveren (vi vil fortelle deg mer om Google-fonter senere);
• lagt til sitt eget eksterne style.css-stilark (tomt foreløpig).

Skrive CSS-styling

Lagre endringene i HTML-dokumentet og naviger til den tomme .css-filen du nettopp opprettet. La oss style siden:

Html (padding-top: 5px; bakgrunnsbilde: url (background.jpg);)

Lagre endringene dine. Gratulerer, du skrev den første regelen - den omhandler taggen ... Den første egenskapen, padding-top, vil legge til en topppolstring på 5 piksler mellom nettleservinduet og innholdet på nettsiden. Med den andre egenskapen, bakgrunnsbilde, har du inkludert et bilde for bakgrunnen på hele siden, og spesifiserer banen til grafikkfilen (plassert i samme mappe som HTML-dokumentet).

Oppdater den åpne nettsiden i nettleseren din. Hvis alt er gjort riktig, vil du se at det har dukket opp en bakgrunn på siden, og innrykket har økt litt mellom toppen av vinduet og teksten.

Brødtekst (bredde: 75 %; polstring: 40px; margin: 15px auto; bakgrunnsfarge: #EBEBEB; kantradius: 30px;)

Lagre endringene i filen. Nå du:

• angi omfanget for tag-innholdet , som er lik 75 % av bredden på nettleservinduet;
• Gir en margin på 40 piksler fra alle sider av innholdsområdet.
• plasserte området i midten av siden, og også rykke inn toppen og bunnen med 15 piksler;
• angi bakgrunnsfargen #EBEBEB for innholdsområdet;
• avrundet hjørnene på det rektangulære området, og spesifiserte en radius på 30 piksler.

Oppdater HTML-dokumentet på nytt. I dette tilfellet, sørg for at hurtigbufferen er deaktivert, eller last inn siden på nytt med oppdateringen av alle filene knyttet til den, ved å bruke en spesiell tastekombinasjon (for eksempel for Chrome Ctrl + F5).

Du vil se at et rektangulært område med avrundede hjørner er lagt til midt på siden. Dette er resultatet av handlingene dine i CSS-filen. Du kan også prøve å krympe nettleservinduet og beundre hvordan bredden på det rektangulære området tilpasser seg størrelsen. Dette skyldes at bredden er oppgitt i prosent.

Endre skrift ved hjelp av CSS

Det er på tide å dekorere teksten vår. Legg til denne koden i stilarket og lagre endringene:

H1 (farge: # E87E04; font-size: 2em; margin-venstre: 20px; font-family: "Roboto Condensed", sans-serif;) h2 (farge: # E87E04; font-size: 1.7em; margin-venstre : 20px; font-family: "Roboto Condensed", sans-serif;) p (farge: # 22313F; linjehøyde: 150%; margin-top: 20px; margin-venstre: 20px; font-family: "Roboto Condensed ", sans serif;)

Ved å skrive dette angir du skriftfargene for h1, h2, p-taggene, spesifiserte størrelsene deres, la til 20 piksler med marg fra venstre, og i tillegg for

Vi rykker inn toppen med 20 piksler og setter linjehøyden til 50 % mer enn standarden. I tillegg koblet du Roboto Condensed-fonten til alle tre taggene (det var derfor du helt i begynnelsen måtte spesifisere en lenke til den i HTML-filen).

Oppdater siden i nettleseren og beundre resultatet av arbeidet. I denne opplæringen skal vi prøve en ting til. Legg til denne koden i CSS:

Utheving (font-weight: fet;)

Lagre og oppdater siden i nettleseren din. Du vil se at i siste avsnitt har noe av teksten blitt fet. For å forstå hva som skjedde, gå til tekstredigeringsvinduet der du åpnet HTML-filen helt i begynnelsen. Ta en titt på siste avsnitt: en del av setningen er pakket inn i en tag med klassevekt. Slik skrev du stilen for en enkelt tekstlinje i et avsnitt. Vi snakker mer om klasser i neste kapittel.

Du bør ende opp med en side som denne:

Som en praksis, prøv å endre tekststørrelsen for

(la oss si 1.1em), og øke også innrykk mellom

Og venstre kant av innholdsområdet ytterligere 10 piksler.

konklusjoner

Dette kapittelet har dekket syntaksen til CSS, samt hvordan du lager et rudimentært stilark. Du har lært hvordan du kobler CSS til en HTML-side og også lært hvordan du lager enkle stiler. La oss fremheve de viktigste tingene å huske fra dette kapittelet:

Enhver CSS-stil består av flere elementer: en velger, en stilegenskap og verdien til den egenskapen.

Alle egenskaper og deres verdier er skrevet i deklarasjonsblokken mellom to krøllete klammeparenteser () etter å ha spesifisert velgeren.

Du må være nøye med skiltene: to krøllete seler (åpnes i begynnelsen av erklæringsblokken og lukkes på slutten). Uten disse parentesene vil ikke CSS fungere riktig.

Det er påkrevd å sette et kolon etter egenskapen og et semikolon etter verdien.

For enkelhets skyld og en bedre lesbarhet av CSS-koden, skriv hver egenskap på en ny linje, og spar heller ikke på mellomrom og tabulatorer.

Eksterne stilark

Lag en vanlig HTML-side med følgende kode:

Overskrift på første nivå

Lag nå et tomt dokument i notisblokk style.css og lagre den i samme mappe som html-siden:

Dette er vår stilside. La oss legge til stiler (style.css) til html-siden. Det er en tag i html som er ansvarlig for å koble til eksterne filer. Legge til til html side:

Overskrift på første nivå

Interne stilark

Dette stilarket er spesifisert i et HTML-element ved å bruke attributtet stil... Her er et eksempel:

Dette er en rød tittel

Ulempen med denne metoden er åpenbar: parameteren stil du må angi hver overskrift og mister derfor fordelen med CSS.

Innebygde stilark

I dette tilfellet er stilarket innebygd i overskriften på html-siden. HTML har tagger , med parameter type, indikerer det at et CSS-stilark blir inkludert. Her er et eksempel:

Alle h1-overskrifter på siden vår er røde. Hvis du vil, kan du male en av dem på nytt i blått, for dette må du bruke det interne stilarket:

Denne tittelen vil være i rødt

I denne situasjonen brukes prinsippet om kaskade, det vil løse konflikten. I vårt eksempel har den interne tabellen høyere prioritet og derfor blir tittelen blå.

Ulempene med denne metoden er åpenbare ... Et stilark må lages for hver HTML-side, så vi vil bruke et eksternt stilark.

Nå har vi sett på måter å koble CSS til HTML, deretter skal vi se på CSS-syntaks.

Det er tre måter å koble til CSS-stiler for nettstedet ditt: du kan bruke globale CSS-stiler ved å legge til CSS-regler i beholderen HTML-dokument, kan du legge til en lenke til den eksterne .css en fil som inneholder alle nødvendige regler eller bruk intern CSS for å bruke reglene på et spesifikt element. I denne opplæringen vil vi se på alle tre alternativene for å koble til CSS, lære fordelene og ulempene deres.

Global CSS er plassert i en beholder spesifikk side. Med dette tilkoblingsalternativet kan klasser og identifikatorer (ID) brukes til å referere til CSS-koden, men de vil være aktive kun på denne siden. CSS-stiler inkludert på denne måten lastes inn hver gang siden lastes inn på nytt, slik at de kan påvirke hastigheten på innlastingen. Det er imidlertid flere situasjoner der bruk av global CSS kan være nyttig. Hvis du for eksempel trenger å sende noen en sidemal, vil det være mye lettere for deg å gi et foreløpig resultat hvis alt er på én side. Global CSS plasseres mellom tagger... Her er et eksempel på et globalt stilark:

Fordeler med global CSS:

• Stilarket påvirker bare én side.
• Klasser og ID-er kan brukes i global CSS.
• Det er ikke nødvendig å laste opp flere filer. HTML og CSS kan være i samme fil.

Ulemper med Global CSS:

• Økt sideinnlastingstid.
• Kobles til kun én side – ineffektivt hvis du vil bruke samme CSS for flere sider.

Hvordan koble CSS til HTML-side

1. Åpne HTML-siden din i et hvilket som helst tekstredigeringsprogram. Hvis siden allerede er lastet opp til hostingkontoen din, kan du bruke tekstredigeringsprogrammet fra hostingen din. Hvis dette HTML-dokumentet er på datamaskinen din, kan du bruke et hvilket som helst tekstredigeringsprogram for å redigere det, og deretter laste det opp på nytt til vertskontoen din ved hjelp av.
2. Finn åpningstaggen og legg til følgende kode etter den:

Etter alle trinnene skal HTML-dokumentet med global CSS se omtrent slik ut :

Hostinger guide

Dette er vår tekst.

Alternativ 2 - Ekstern CSS

Det kanskje mest praktiske alternativet for å koble CSS til nettstedet ditt er å koble det til et eksternt. .css fil. I dette tilfellet vil alle endringer som gjøres i den eksterne CSS-filen vanligvis gjenspeiles på nettstedet ditt. En lenke til en ekstern CSS-fil plasseres i en beholder sider:

Mens selve stilarkene er plassert i filen style.css... For eksempel:

Xleftcol (flyt: venstre; bredde: 33 %; bakgrunn: # 809900;) .xmiddlecol (flyt: venstre; bredde: 34 %; bakgrunn: # eff2df;)

Fordeler med ekstern CSS:

• Mindre HTML-sidestørrelse og renere filstruktur.
• Rask nedlastingshastighet.
• Det samme kan brukes til forskjellige sider. .css fil.

Ulemper med ekstern CSS:

• Siden kan ikke gjengis riktig før den eksterne CSS-en er fulllastet.

Alternativ 3- Intern CSS

Indre CSS brukes for en spesifikk HTML-tag. Egenskap

• 
  
  Vårblomster levende bakgrunnsbilde for Android
• 
  
  "Barnemodus" i Xiaomi: hvordan komme ut av det For de minste - blokkering i applikasjonen
• 
  
  Vårblomster levende bakgrunnsbilde for Android Last ned friske blomster på smarttelefonen din
• 
  
  Last ned nyttår og jul levende bakgrunnsbilde for Android Animert bakgrunnsbilde for telefonen vinter
• 
  
  Mint - nyheter fra vkontakte