CSS (Cascading Style Sheets), eller Cascading Style Sheets används för att beskriva utseendet på ett webbdokument skrivet i ett märkningsspråk. CSS sätter stilregler som ändras utseende element som finns på webbsidor fungerar finjustering deras detaljer som färg, teckensnitt, storlek, ramar, bakgrund och plats i dokumentet.

Du kan infoga CSS direkt i ett uppmärkningselement som ett attributvärde stil... Det här attributet är tillgängligt för alla HTML-element. MED använder CSS du kan ange ett antal stilegenskaper för ett givet HTML-element. Varje egenskap har ett namn och ett värde, åtskilda av ett kolon (:). Varje deklarerad egenskap avgränsas med ett semikolon (;).

Så här ser det ut för ett element

:

Sätt att lägga till CSS-stilar

CSS-standarden erbjuder tre alternativ för att applicera en stilmall på en webbsida:

• Extern stilmall - definiera stilmallsregler i en separat .css-fil och sedan inkludera denna fil i ett HTML-dokument med en tagg
• Intern stilmall - Definiera stilmallsregler med en tagg

  Exempel: Intern stilmall

  • Prova själv "

  Rubrik

  Första texten

  Andra texten

  Tredje texten

  Rubrik

  Första texten

  Andra texten

  Tredje texten

  V detta exempel vi ställer in bakgrundsfärgen för elementet med CSS : bakgrundsfärg: blekgrön, färg och teckensnitt för rubriker

  : färgen blå; teckensnittsfamilj: verdana samt teckenstorlek, färg och mittjustering för stycken

  : teckenstorlek: 20px; färgen röd; text-align: center.

  Inline stil

  När ska formateras separat element HTML-sidor, stilbeskrivningar kan placeras direkt inuti öppningstaggen med det redan specialiserade stilattributet. Till exempel:

  Paragraf

  Sådana stilar kallas inline- eller inline-stilar. Regler definierade direkt inuti öppningstaggen för ett element åsidosätter regler definierade i den externa CSS-filen såväl som regler definierade i elementet

  Rubrik

  Första texten

  Andra texten

  Tredje texten

  Uppgifter

  • Centrera text

    Centrera texten med hjälp av det infogade styckeformatet.

  Dokument innehållsförteckning
  Det finns flera sätt att lägga till stilar på en webbsida, som skiljer sig åt i sina möjligheter och syfte. Följande är sätt att ansluta CSS.

  Relaterad stilmall

  När du använder en tabell med relaterade stilar finns beskrivningen av väljare och deras egenskaper i en separat fil, vanligtvis med tillägget css, och taggen används för att länka dokumentet till denna fil . Den här taggen får plats i en behållare som visas i exempel 1.

  Exempel 1. Ansluta en länkad stilmall
  

  "http://www.htmlbook.ru/main.css">

  Rubrik

  Text

  
  Taggparametervärden - rel och typ förblir oförändrade, som visas i detta exempel. Href-parametern ställer in sökvägen till CSS-filen, den kan ställas in både relativt och absolut. Observera att du på detta sätt kan inkludera en stilmall som finns på en annan webbplats.

  Innehållet i mysite.css-filen kopplat med hjälp av taggen visas i exempel 2.

  Exempel 2. Fil med stil
  

  H1 (färg: marinblå; font-size: 200%; font-family: Arial, Verdana, sans-serif; text-align: center;) P (stoppning-vänster: 20 px;)

  
  Som du kan se från det här exemplet lagrar stilfilen ingen annan data än CSS-syntax. HTML-dokumentet innehåller i sin tur endast en länk till filen med stilen, d.v.s. på detta sätt implementeras principen om separation av innehåll och webbplatsdesign fullt ut. Att använda en länkad stilmall är därför den mest mångsidiga och bekväma metoden för att lägga till stil på din webbplats. När allt kommer omkring lagras stilar i en fil, och HTML-dokument innehåller bara en länk till den.

  Global stilmall

  När du använder en global stilmall CSS-egenskaper beskrivs i själva dokumentet och visas vanligtvis i rubriken på en webbsida. När det gäller dess flexibilitet och möjligheter är denna metod att lägga till en stil sämre än den tidigare, men den låter dig också placera alla stilar på ett ställe. I det här fallet, mitt i dokumentets brödtext, med hjälp av behållaren

  Hej världen!

  
  Det här exemplet definierar taggens stil

  som sedan kan användas överallt på denna webbsida.

  Kommentar

  Den globala stilmallen kan inte bara placeras inuti behållaren men också var som helst i HTML-dokumentkoden.
  Interna stilar

  Inre styling är i huvudsak en förlängning för en enda tagg som används på en webbsida. Stilen definieras med stiltagsparametern och dess attribut specificeras med formatmallsspråket, se exempel 4.

  Exempel 4. Använda interna stilar
  

  Rubrik

  
  I det här exemplet, stilen för taggen

  ställs in med stilparametern, som listar stilattributen separerade med semikolon.

  Kommentar

  Det rekommenderas att använda interna stilar på webbplatsen i begränsad omfattning eller att inte använda dem helt och hållet. Faktum är att att lägga till sådana stilar ökar den totala storleken på filer, vilket leder till längre laddningstider i webbläsaren, och gör det svårt för utvecklare att redigera dokument.

  Alla beskrivna metoder använder CSS kan användas både självständigt och i kombination med varandra. I det här fallet måste du komma ihåg deras hierarki. Den inre stilen tillämpas alltid först, följt av den globala stilmallen och sist den relaterade stilmallen. Exempel 5 använder två metoder samtidigt för att lägga till stilmallar till ett dokument.

  Exempel 5. Kombination olika metoder stilanslutningar
  

  "font-size: 36px; font-family: Times, serif; color: red"> Rubrik 1

  Rubrik 2

  
  I det här exemplet är den första titeln röd med 36 pixlar med inline-stilen, och nästa titel är i grönt genom den globala stilmallen.

  Importerar CSS

  Du kan importera innehållet i CSS-filen till den aktuella formatmallen med kommandot @import. Den här metoden kan användas tillsammans med en länkad eller global stilmall, men inte med inline-stilar. Allmän syntax Nästa.

  @import url ("filnamn") mediatyper;@importera "filnamn" medietyper;

  Efter nyckelord@import anger sökvägen till stilfil på ett av de två angivna sätten - att använda URL-direktiv eller utan det. Exempel 6 visar hur du kan importera en stil från extern fil till den globala stilmallen.

  Exempel 6. Importera CSS till en global stilmall
  

  Rubrik 1

  Rubrik 2

  
  Det här exemplet visar anslutningen av filen header.css, som finns i stilmappen.

  När webbläsaren läser stilmallen formaterar den dokumentet därefter.

  Tre sätt att infoga CSS

  Det finns tre sätt att infoga en stilmall:

  • Extern stilmall
  • Intern stilmall
  • Inline stil

  Extern stilmall

  En extern stilmall är idealisk när stilar behöver appliceras på många sidor. Med en extern stilmall kan du ändra utseendet på en hel webbplats genom att redigera en enda fil. Varje sida ska länka till stilmallen med taggen ... Märka finns i huvudsektionen:

  Lämna inga mellanslag mellan fastighetens värde och dess enheter! "margin-left: 20 px" (istället för "margin-left: 20px") kommer att fungera i IE (webbläsare Internet Explorer), men inte i Firefox webbläsare eller Opera.

  Intern stilmall

  En intern stilmall används när ett enskilt dokument har en unik stil. Du definierar inre stilar i huvudsektionen HTML-sidor använder taggen (förväxla inte med attributet med samma namn) där beskrivningen av de element vi behöver äger rum.

  Ta en titt på exemplet, det kommer att finnas kommentarer nedan.

  
  
  
  
  
  
  
  

  Allt om elefanter

  
  

  På denna sida hittar du all information om elefanter.

  
  

  Köp en elefant

  
  

  Här kan du förmånliga priser köp de bästa elefanterna !!

  
  

  Hyr en elefant

  
  

  Bara här kan du hyra vilka elefanter som helst!

  
  
  
  

  Som du kan se från exemplet uppnådde vi exakt samma resultat som i det första fallet, bara nu föreskriver vi inte en stil för varje element individuellt, utan lägger den i "huvudet" i dokumentet, vilket indikerar att alla rubriker

  ,

  - kommer att vara blå och paragrafer

  - röd. Föreställ dig hur vi skulle underlätta vårt arbete om det fanns hundra sådana stycken och femton rubriker på en sida, och själva dokumentet började väga mindre på grund av att alla repetitiva stilbeskrivningar för varje enskilt element hade "borttagits".

  Nu de utlovade kommentarerna:

  Märka det finns en direkt deklaration av stilarna för vissa HTML-element enligt följande syntax:

  Om flera elementegenskaper är specificerade i stildeklarationsblocket, separeras de med semikolon.

  CSS i en separat extern fil.

  Hur länge är det kort, vi har kommit till den huvudsakliga, enligt min mening, fördelen med CSS, nämligen möjligheten att överföra all information relaterad till designen av webbplatsen i en separat extern fil.

  Så öppna anteckningsblocket (eller en annan redigerare) och skriv följande text i den:

  Brödtext (bakgrundsfärg: # c5ffa0)
  a (färg: # 000060; font-weight: bold;)
  a: hover (färg: # ff0000; font-weight: bold; text-decoration: none)
  h1 (färg: # 0000ff; teckenstorlek: 18px)
  h2 (färg: # ff00ff; teckenstorlek: 16px)
  p (färg: # 600000; teckenstorlek: 14 px)

  Det vi har skrivit så konstigt kommer jag att försöka berätta i detalj i de efterföljande kapitlen i denna handledning.

  Allt! stilbeskrivningsfil skapad! Nu är det bara en liten bit kvar, nämligen att tvinga nödvändiga sidor på vår webbplats för att hämta information från denna fil.

  Detta görs med hjälp av taggen (förbindelse). Märka multipurpose och tjänar till att "länka" HTML-dokumentet med ytterligare externa filer för att säkerställa att det fungerar korrekt. Märka är en slags länk, endast avsedd inte för användare, utan för webbläsarprogram (webbläsare). Eftersom bär endast tjänstinformation, den finns i huvudet på HTML-dokumentet mellan taggarna och visas inte på skärmen av webbläsare.

  Märka har attribut:

  href- Sökvägen till filen.
  rel- Definierar förhållandet mellan det aktuella dokumentet och den refererade filen.

  • genvägsikon - Anger vad inkluderingsfilen är.
  • stilmall- Anger att den medföljande filen innehåller en stilmall.
  • applikation / rss + xml - Fil i XML-format för att beskriva nyhetsflödet.

  typ- MIME-datatyp för den inkluderade filen.

  Eftersom vi inkluderar den överlappande stilmallen som en extern fil, ser vår tjänstlänk ut så här:

  Jag upprepar, för att verkligen skingra eventuella missförstånd. Attribut rel tilldela värde stilmall eftersom vi kopplar samman stilmallen som en extern fil anger vi sökvägen till css-filen (i det här exemplet kallas filen mystyle.css och ligger bredvid HTML-dokumentet där det är skrivet given länk) anger vi det också den här filen text och innehåller en stilbeskrivning typ = "text / css"

  Nu infogar vi den här raden i sidhuvuden på vår webbplats och njuter av resultatet ..

  Mystyle.css-filen
  body (bakgrundsfärg: # c5ffa0)
  a (färg: # 000060; font-weight: bold;)
  a: hover (färg: # ff0000; font-weight: bold; text-decoration: none)
  h1 (färg: # 0000ff; teckenstorlek: 18px)
  h2 (färg: # ff00ff; teckenstorlek: 16px)
  p (färg: # 600000; teckenstorlek: 14 px)
  Index.html-fil
  
  
  
  
  
  
  
  

  Meny:

  
  Allt om elefanter.
  Köp en elefant.
  Hyr en elefant.
  

  ---

  
  

  Allt om elefanter

  
  

  På denna sida hittar du all information om elefanter.

  
  
  
  Elephant.html-fil
  
  
  
  
  
  
  
  

  Meny:

  
  Allt om elefanter.
  Köp en elefant.
  Hyr en elefant.
  

  ---

  
  

  Köp en elefant

  
  

  Du kan köpa de bästa elefanterna från oss till konkurrenskraftiga priser !!

  
  
  
  Elephant1.html-fil
  
  
  
  
  
  
  
  

  Meny:

  
  Allt om elefanter.
  Köp en elefant.
  Hyr en elefant.
  

  ---

  
  

  Hyr en elefant

  
  

  Bara här kan du hyra vilka elefanter som helst!

  
  
  
  

  I exemplet ovan, "elefantplatsen", på det här ögonblicket, det finns tre sidor, som var och en är associerad med en enda extern css-fil- mystyle.css. Således "lastade vi av" den betydligt och gjorde designen av hela sajten "mobil". Föreställ dig hur många b kilobyte vi vann om det fanns hundra fullfjädrade sidor på den här sidan!? Och hur mycket tid skulle du spara om vi behövde ändra något i dess design!?

  I det här kapitlet tittade vi på tre sätt att bädda in CSS i ett HTML-dokument. Vilken är bättre att använda?

  • Använd attributet stil för alla element om detta element med en stil som skiljer sig från andra element är det enda på hela webbplatsen.
  • Använd en tagg