Nå er det vanskelig å forestille seg å endre utseendet og formateringen av HTML-dokumenter uten å bruke CSS-stilark, siden HTML lenge har sluttet å være et selvforsynt språk for design og begynte å oppfylle sine opprinnelige funksjoner for å strukturere og merke nettdokumenter. I denne artikkelen vil vi lede deg gjennom detaljene om hvordan du kan koble CSS til HTML-dokumentet ditt.

Kort om CSS og HTML

Tidligere ble nettsider utelukkende designet med HTML. I dag praktiseres ikke denne tilnærmingen, og CSS-verktøy brukes til styling, som har et veldig bredt spekter av muligheter for å lage fantastiske design.

For at nettstedets design skal vises riktig, er det nødvendig å koble CSS til HTML-dokumentet, disse verktøyene fungerer uatskillelig fra hverandre - HTML skaper strukturen, og stilark er ansvarlige for utseendet.

Det er flere hovedmåter du kan tilpasse gjengivelsen av stiler i HTML-kode, hver med sine egne fordeler og ulemper.

Inkludert CSS-fil

Dette er hovedmetoden som utviklere anser som den mest praktiske og praktiske.

Ved å bruke denne metoden kan du raskt endre utformingen av en nettside, hvis det er en gitt struktur i HTML-dokumentet - for eksempel for samme nettsted kan du skrive flere designalternativer og koble dem til avhengig av behovet.

For å koble en fil med stiler må du først konfigurere filstrukturen - dette gjøres slik at du kan skrive riktig sti til ønsket dokument direkte i koden.

Lag en katalog der hoved-HTML-dokumentet skal ligge, i samme mappe lag en fil som heter stil i et tekstredigeringsprogram og lagre den i .css-oppløsning. Den vil inneholde CSS-koden med alle spesifiserte regler for styling av dokumentet.

CSS-tilkobling gjøres ved hjelp av HTML-tag med href-attributtet. Det ser slik ut:

Her er koden plassert i dette anses som optimalt, men ikke nødvendig. Den kan plasseres hvor som helst i dokumentet.

Denne metoden er praktisk ved at alle endringer i stilarket gjøres i en egen fil, noe som gjør koden lettere å forstå og lese, og gjør dokumentet ryddigere.

Hvis du gjør endringer i style.css og åpner index.html i en nettleser, vil du kunne se alle endringene som ble registrert.

På samme måte kan du angi ikke bare banen til filen i nettstedstrukturen, men også lenken til siden med stilen som ligger på Internett. I et slikt tilfelle er det også omgitt av anførselstegn etter href-attributtet.

Metoden for å koble til stilarket fra en egen fil optimerer nettstedets arbeid, da det lar nettleseren laste data fra hurtigbufferen, som et resultat av at sidene lastes raskere.

Stilark i et HTML-dokument

Noen ganger settes verdien til en stilparameter direkte i brødteksten i et HTML-dokument ved å bruke stilattributtet.

Syntaks:

I dette avsnittet er teksten rød

Den åpenbare ulempen er mangelen på allsidighet; du må foreskrive en verdi for hver kode.

Også tilkobling ved hjelp av interne stilark forhindrer nettleseren i å bufre informasjon, i motsetning til den forrige metoden.

Global stil

Hvis du trenger å style et spesifikt element gjennom HTML-dokumentet, bruk taggen

Den angitte stilen vil bli brukt på taggen.

så snart det er registrert på siden.

Å inkludere CSS på denne måten vil ha høyere prioritet for nettleseren å lese enn et eksternt stilark.

Hvordan koble en font til nettstedet

Font er et av de grunnleggende designelementene til enhver nettside. Inntrykket et nettsted gjør på en bruker avhenger direkte av fonten som brukes. Heldigvis kan du gå lenger enn standard headset, du kan koble til andre - vi skal fortelle deg hvordan.

Ved å bruke CSS kobles fonter til som følger:

• Finn og last ned et passende headset.
• Åpne CSS-filen og legg til følgende kode til den:

@ font-face (font-family: "Open Sans"; src: url ("../ fonts / OpenSans.ttf") format ("truetype"); font-style: normal; font-weight: normal;)

Først settes navnet på skriften, deretter banen til den, på slutten - parametrene. Vær oppmerksom, i dette eksemplet ligger skriftfilen i fontmappen, som igjen ligger i rotkatalogen. For enkelhets skyld er det best å lage separate mapper for forskjellige filer og elementer (bilder, skript, stilark osv.).

Så i fontmappen har vi en fil som heter OpenSans.ttf, med de vanlige parameterne. Den vil nå vises i nettleseren.

Vi kobler fonten via Google Fonts

En av de vanligste måtene å inkludere fonter i CSS og HTML er Google Fonts-tjenesten.

Grensesnittet er intuitivt - du må finne en passende font ved navn eller spesifiserte parametere, klikk på Velg denne font-knappen, og tjenesten genererer umiddelbart en kode som settes inn i tag-feltet HTML-dokument, samt den tilsvarende CSS-filen med stiler.

Slik skal det se ut i HTML:

Og i CSS-filen med stiler:

Font-familie: "Open Sans", sans-serif;

Denne metoden er praktisk ved at den lar deg raskt finne ønsket skrift fra en veldig stor database og sparer mye tid, samt eliminerer problemer som oppstår på grunn av feil visning av fonter i enkelte nettlesere.

La oss oppsummere

Så vi har dekket de viktigste måtene å koble CSS-stiler til HTML-dokumenter på. Basert på oppgavene som stilles til utvikleren i hvert enkelt tilfelle, kan du velge det mest prioriterte alternativet.

Webdesign er en kreativ prosess som krever nøye oppmerksomhet. Benytt muligheten til å kommentere koden og ikke glem nettstedoptimalisering.

Hei, mine kjære lesere av bloggsiden. Dagens artikkel vil snakke om teknikker eller måter å inkludere et CSS-stilark. Jeg skal fortelle deg hvordan du kan koble CSS til html-siden på fire måter. Disse fire tilkoblingsmetodene vil være nyttige for deg i fremtiden, siden det er tider når du trenger å bruke alle disse tilkoblingsmetodene på nettstedet. For de som ikke vet hva CSS-stilark er,.

La oss komme i gang ...

Relaterte stilark.

CSS-tilkoblingsmetode - # 1

Metode nummer 1 - den mest praktiske måten å definere stiler for nettstedet. Alle nettstedstiler lagres i én separat fil og brukes for alle nettsider. For å koble til eller koble en CSS-tabell til en HTML-side, bruk LINK-koden i sideoverskriften.

Overskrift

Fordelene med denne metoden:

1. Bruke én CSS-stilfil for alle nettsider på nettstedet;

2. Du kan endre utseendet på nettstedet gjennom stilarket uten å redigere nettsider;

3. Når du endrer stilen i én fil style.css, blir stilen automatisk brukt på alle sider, hvor det kun er en tilkobling på CSS-filen. Det er veldig praktisk;

4. Når nettsiden lastes inn for første gang, plasseres CSS-stilfilen i cachen på brukerens lokale datamaskin, atskilt fra nettsidene, av denne grunn går nettsiden mye raskere.

Globale stilark.

CSS-tilkoblingsmetode - # 2

Metode #2 er ikke like effektiv og praktisk som metode #1, men det er tider når denne metoden for å inkludere CSS er nødvendig.
Denne stilen er koblet sammen og skrevet i selve dokumentet og plasseres i overskriften på nettsiden mellom taggene ... Stilen er forbundet med en tag

Overskrift

I dette eksemplet har jeg vist endring av overskriftsstil

... Nå, på denne nettsiden, trenger du bare å spesifisere taggen

og stiler legges til den automatisk.

Interne stiler.

CSS-tilkoblingsmetode - # 3

Metode nummer 3 brukes i sjeldne tilfeller. Indre styling brukes til å endre en enkelt kode på en nettside. For å koble til stilen, bruk parameteren stil.

Eksempel på tilkobling av en CSS-tabell:

Overskrift

Kombinert metode for å koble stiler.

CSS-tilkoblingsmetode - # 4

I denne metoden brukes flere stiler på en gang, som vi brukte ovenfor (metode nr. 1 - nr. 3).

Eksempel på tilkobling av en CSS-tabell:

Overskrift

Overskrift

Som et resultat, etter eksemplet, får vi den første tittelen i rødt med en størrelse på 50 piksler, og den neste i grønn og med en størrelse på 90 piksler.

Igjen kan alle de beskrevne metodene for bruk av CSS brukes uavhengig, eller kan kombineres med hverandre. Dette kan sees i metode #4.

Hei kjære lesere av bloggsiden. Etter en blokk med artikler viet til HTML, bestemte jeg meg for å introdusere deg for CSS, siden markeringsverktøy ikke er nok til å formatere dokumenter. Generelt er det å lære HTML bare det første trinnet i prosessen med å lære å lage nettsider, neste trinn er å lære CSS. Så la oss finne ut av det hva er CSS og hvorfor er det nødvendig.

Hvis du ser på sider med ren HTML, ser de kjedelige ut. Monoton tekst, tabeller uten rammer, triste svart-hvitt-farger ... Selvfølgelig kan du gjøre sidene lysere ved å bruke html, men denne tilnærmingen roter bare til kildekoden og gir ingen fleksibilitet. Derfor, i en moderne layout, er den eksterne utformingen av nettstedssidene ansvarlig Markeringsspråk i CSS-stil eller bare et stilark.

Cascading Style Sheets(dette er hvordan forkortelsen CSS står for Cascading Style Sheets) er et sett med parametere (stiler) som beskriver utformingen av selve nettsiden og dens individuelle elementer. Disse alternativene kontrollerer sidebakgrunnen, tekstfargen, avsnittsjustering, tabellkantalternativer og mer.

Dermed, ved å bruke HTML-språket, danner du strukturen til nettsider, for eksempel sett. Og ved hjelp av CSS-regler definerer du hvordan disse elementene i html-dokumentet skal vises i nettleseren. Det vil si at du angir type og farge på fonten, tekstjustering, bakgrunnsfarge på elementer, ulike innrykk osv. Dessuten kan én CSS-regel påvirke den visuelle presentasjonen av flere elementer på en nettside samtidig.

Derfor vil du mest sannsynlig trenge en minimal kjennskap til mulighetene til overlappende stilark både når du oppretter et nettsted fra bunnen av og når du gjør endringer i et eksisterende prosjekt. Først av alt vil denne kunnskapen være nødvendig når du arbeider med nettsidedesign.

Legge til stiler eller hvordan koble CSS til HTML-dokument

Før du snakker om syntaksen eller egenskapene til overlappende stilark, må du lære hvordan du kobler dem til et html-dokument. Det er tre måter å koble css til html på.

1. Den første måten er å plassere stiler i en separat fil eller i flere filer med filtypen .css. I dette tilfellet, for å koble til CSS-stiler, bruk link, som inneholder banen til det eksterne stilarket. Denne metakoden plasseres i overskriftsdelen på den tilsvarende nettsiden, mellom head-taggene. Her er formatet for å skrive det:

Banen til stilfilen registreres som verdien til href-attributtet. rel-attributtet forteller nettleseren hva filen referert til av link-taggen er. "stilark"-verdien indikerer at denne filen er et eksternt stilark. Type-attributtet spesifiserer MIME-typen til filen. For et eksternt stilark er MIME-typen "tekst / css".

Slik vil linjen med koblende CSS-stiler i html-koden se ut:

...
.css "/>
...

Fordelen med denne metoden er at eksternt stilark kan kobles til flere nettsider samtidig.

2. Den andre måten er å skrive den såkalte globale stiler, som er skrevet direkte i html-koden til nettsiden. De er innesperret i et par stilmerke og er vanligvis plassert i overskriftsdelen mellom head-taggene:

...

...

Ulempen med denne metoden er at de globale CSS-reglene kun gjelder for nettsiden de er skrevet på.

3. Den tredje måten er de såkalte inline- eller inline-stilene. For å gjøre dette, legg inn den nødvendige html-koden Stilattributt, som inkluderer et sett med CSS-egenskaper som parametere:

Avsnitt med grå bakgrunn og rød tekst

Dessuten brukes egenskapene spesifisert i stilattributtet kun på ett html-element. Vanligvis brukes denne metoden for å koble stiler på stadiet med feilsøking av nettsteddesignet, og deretter overføres de resulterende CSS-egenskapene til en fil med eksterne stiler.

Oppretting av CSS-stiler. Cascading style sheet syntaks - regler, egenskaper, velgere.

Velger (
Eiendomsverdi;
Eiendomsverdi;
...
Eiendomsverdi
}

De. en stilregel inkluderer en stilvelger og en liste over stilegenskaper med deres verdier i krøllete klammeparenteser ("(" og ")"):

• velger brukes til å binde til elementer på en nettside som den skal utvide handlingen til;
• "Egenskap: Verdi"-par er atskilt med semikolontegnet (";") og det kan være et hvilket som helst antall av dem;
• mellom det siste paret av "Property: Value" og den avsluttende krøllete klammeparentesen, kan semikolontegnet utelates;
• stil eiendom representerer en av parameterne til sidens html-element: tekstfarge, skrifttype, innrykkverdi;
• mellomrom og nylinjer når du skriver css-regler er ikke kritiske, nettleseren ignorerer dem, slik at du kan style koden som du vil;
• også koden skiller ikke mellom store og små bokstaver.

For å gjøre det klarere, se noen eksempler.

La oss ta en titt på denne CSS-regelen:

• body er en velger som er navnet på taggen ;
• background - stilegenskap som brukes til å angi bakgrunnsparametere;
• # 0000FF er verdien av bakgrunnsstilegenskapen, som er fargekoden i RGB-format.

Som et resultat vil denne stilen bli brukt på hovedelementet på nettsiden og vil farge bakgrunnen til siden i den angitte fargen. Den betraktede stilen kalles tagoverstyringsstil fordi velgeren er et merkenavn uten tegn< и >.

La oss vurdere et annet eksempel:

h1 (
skriftstørrelse: 24px;
farge: grønn;
}

Denne stilen sier at nettleseren vil vise all tekst plassert i tagger

grønn og gi den en skriftstørrelse på 24 piksler.

Som merkevelger kan du i tillegg til merkenavnet spesifisere Klasse:

Gul tekst (farge: gul)

Klassenavnet må bestå av bokstaver i det latinske alfabetet, tall og bindestreker og må begynne med en bokstav. Og i definisjonen av CSS-regelen må klassenavnet innledes med et punktum, som betyr at stilklassen blir definert. Denne stilen vil bli brukt på alle tagger som har klasseattributt og dens verdi vil være stilklassenavn uten punktum:

Dette avsnittet har oransje tekst

I eksemplet festet vi til taggen

Css-regel med gultekst-klassenavn. Som et resultat vil teksten i dette avsnittet vises i oransje.

Flere stilklassenavn kan spesifiseres som clsss-attributtverdien, atskilt med mellomrom. I dette tilfellet vil effekten av stilklassene være:

Kursivtekst (skriftstil: kursiv)

gul kursiv tekst

I dette eksemplet, til taggen

Vi har bundet to klasser samtidig: gultekst og kursivtekst. Som et resultat vil innholdet i taggen vises i gul og kursiv skrift.

I tillegg til klasser, som en css-regelvelger, kan du bruke identifikator som definerer det unike navnet på elementet. Alt her er det samme som i stilklasser, bare det er noen få forskjeller:

• i velgeren til CSS-regelen er navnet på identifikatoren også satt, bare i stedet for et punktum foran navnet, setter de hash-symbolet "#";
• binding til html-elementet gjøres gjennom id-attributt, hvis verdi er satt til stilnavnet uten et pundtegn;
• verdien av id-attributtet må være unikt på siden, det vil si at det bare kan være ett element i html-koden med den gitte verdien av id-attributtet, ellers vil koden være ugyldig.

La oss se på et eksempel for klarhet:

#tekstsenter (tekstjustering: senter;)

Sentrert tekst

En css-regel er knyttet til p-elementet (avsnitt) ved å bruke id-attributtet, som justerer teksten til midten av siden. Det er ikke lenger tillatt å lage elementer på siden med denne id-attributtverdien, ellers vil html-koden være ugyldig.

I tillegg til de vurderte metodene for å beskrive stiler, lar css deg lage kombinerte stiler og angi flere identiske stiler samtidig. La oss se et eksempel:

h1.redtext, p strong (farge: rød)

I eksemplet er to velgere spesifisert, atskilt med komma: "h1.redtext" og "p strong". Den første velgeren sier at i alle h1-elementer der verdien av klasseattributtet vil tilsvare rødtekst, vil teksten vises i rødt. Den andre velgeren vil gjøre det samme for alle sterke elementer som er nestet i p-taggen:

Denne tittelen vises i rødt

ren tekst, rød tekst

God dag! I denne artikkelen vil jeg vise deg ulike metoder for å inkludere CSS i HTML. Og jeg vil også forklare de forskjellige finessene og nyansene til forskjellige måter å koble stiler på.

Intern tilkobling

Et internt stilark er et sett med stiler, et stykke nettsidekode, som alltid må være mellom åpnings- og avslutningstaggen. HTML-kode i brødteksten til nettsidetaggen. Eksempel:

Verdana gul tekst

Stiler

Resultatet i dette tilfellet vil være helt det samme som i forrige tilfelle.

Ofte element stil definert inne i et element hode, men kan også brukes i andre deler av HTML-dokumentet. Element stil inneholder sett med stiler. For hver stil er en velger angitt i begynnelsen, hvoretter alle de samme css-egenskapsdefinisjonene og deres verdier vises i krøllete klammeparenteser som ble brukt i forrige eksempel.

Den andre metoden gjør html-koden renere ved å introdusere stiler i stilelementet. Men det er også en tredje måte, som er å overføre stiler til en ekstern fil.

La oss lage en tekstfil i samme mappe med html-siden, som vi vil gi nytt navn til styles.css og definere følgende innhold i den:

H2 (farge: blå;) div (bredde: 100px; høyde: 100px; bakgrunnsfarge: rød;)

Dette er de samme stilene som var inne i stilelementet. Og endre også koden til html-siden:

Stiler

Det er ikke lenger et element her stil, men det er et element link som kobler sammen den ovenfor opprettede filen styles.css:

Dermed, ved å definere stiler i en ekstern fil, gjør vi html-koden renere, strukturen på siden er atskilt fra stilen. Med denne definisjonen er stiler mye lettere å endre enn om de var definert i elementer eller i et element. stil, og denne metoden er foretrukket i HTML5.

Bruk av stiler i eksterne filer kan redusere belastningen på webserveren ved å bruke hurtigbuffermekanismen. Siden nettleseren kan cache css-filen og hente den ønskede css-filen fra cachen når nettsiden senere åpnes.

Det er også mulig at alle disse tilnærmingene er kombinert, og for ett element er noen css-egenskaper definert inne i selve elementet, andre css-egenskaper er definert inne i stilelementet, og andre er i en ekstern tilkoblet fil. For eksempel:

Og style.css-filen definerer følgende stil:

Div (bredde: 50px; høyde: 50px; bakgrunnsfarge: rød;)

I dette tilfellet er width-egenskapen definert på tre steder for div-elementet, og med forskjellige verdier. Hvilken verdi vil bli brukt på elementet som et resultat? Her har vi følgende prioriteringssystem:

• Hvis et element har innebygde stiler definert, har de høyeste prioritet, det vil si at i eksemplet ovenfor vil den endelige bredden være 120 piksler
• Deretter, i prioritert rekkefølge, er stilene som er definert i stilelementet.
• De minst prioriterte stilene er de som er definert i den eksterne filen.

Html-attributter og css-stiler

Mange html-elementer lar deg angi visningsstiler ved hjelp av attributter. For eksempel kan vi på en rekke elementer bruke width- og height-attributtene til å angi henholdsvis elementets bredde og høyde. Imidlertid bør denne tilnærmingen unngås og CSS-stiler bør brukes i stedet for innebygde attributter. Det er viktig å tydelig forstå at HTML-markering bare skal gi strukturen til html-dokumentet, og hele utseendet, stilen bør bestemmes av CSS-stiler.

CSS-kodevalidering

I prosessen med å skrive CSS-stiler kan det oppstå spørsmål om det er riktig å definere stilene, om de er riktige. Og i dette tilfellet kan vi bruke css-validatoren, som er tilgjengelig på http://jigsaw.w3.org/css-validator/.
Her er en videoopplæring om hvordan du kobler CSS til HTML