Lägger till CSS. Vad är CSS, vad är CSS-stilar för? Egna css-stilar

Vi vet redan att för att en webbplats ska se vacker och snygg ut måste vi arbeta med CSS-filen. Och för att våra stilar ska tillämpas måste vi ansluta HTML-fil och CSS-fil.

Det finns flera alternativ för att implementera den här operationen: att använda kapslade formatmallar, externa formatmallar och inbäddade formatmallar.

Idag kommer vi att prata om den senare metoden.

Injicera stil i en HTML-tagg

väsen den här metoden saken är nödvändigt tillstånd vi bäddar in i taggen. För detta, en separat attribut - stil. Detta attribut Kan appliceras till vilken tagg som helst, men bara inom webbplatsens kropp, det vill säga inom kroppen. Värdet på detta attribut är stilsatsen som ska tillämpas på det givna elementet.

Låt oss till exempel ställa in olika teckenstorlekar för två olika textstycken:

< p style= "font-size:25px;" >Ställ in denna text på en höjd av 25 pixlar. < p style= "font-size:15px; color:#2400ff;"> Och den här texten kommer att vara med bokstäver, 15 pixlar hög, och vi kommer också att färga den blå för att visa användningen av flera stilar samtidigt.

Brister

Exemplet visar perfekt hur en sådan upphängning av stilar täpper till sidkoden.

Du kan också notera ett par nackdelar med att använda denna stylingteknik. Den första av dessa kan kallas stilspridning genom hela dokumentet, vilket i framtiden kommer att komplicera redigeringsprocessen ibland.

Det kommer också att vara svårt att utforma stora volymer text. Jag tror att ingen är nöjd med möjligheten att föreskriva en teckenstorlek för varje stycke, särskilt om det finns 40 sådana stycken.

Även när man använder inline-stilar blir det omöjligt att använda pseudoklasser, vilket i hög grad binder händerna på en webbdesigner.

Det är också värt att notera den förvirring som säkerligen kommer upp i användningen av stilattributet. Denna förvirring kommer att uppstå på grund av användningen av olika citat när du skriver in stilar.

För tydlighetens skull, låt oss titta på exemplet nedan:

< div style= "font-family: "Roboto Condensed", sans-serif"> Inmatningen är korrekt. < div style= "font-family: "Robot Condensed", sans-serif"> Det är också korrekt. < div style= "font-family: " Roboto Condensed ", sans-serif" >Detta är inte en korrekt inmatning. < div style= "font-family: " Roboto Condensed ", sans-serif" >Och det stämmer inte heller.

Om man tittar på beräkningarna ovan är den logiska slutsatsen att användningen av inline-stilar är förknippad med ett antal betydande komplikationer och olägenheter.

När ska man använda inline-stil

Trots alla brister uppfanns inte den inline-stilen förgäves. Webbansvariga hänvisar ofta till dem vid programmatisk styling. Låt oss till exempel titta på den här koden

< div id= "productRate" > < div style= "width: 40%" >

Att skriva önskad bredd för detta block skulle vara den enklaste operationen.

En liknande situation kan uppstå när det är nödvändigt att byta ut bakgrundsbilden (till exempel) av en användare under administratörsrollen. I det här fallet kanske img-taggen inte fungerar. Därför är det värt att hänvisa till stilattributet:

< div style= "background:url(fon.jpg)" >

Dessutom hänvisar programmerare ofta till inline-stilar i processen att lägga ut popup-fönster. Ofta går denna process som följer: blocket som designas är satt till display:block, och resten av fönstren döljs med display:none så att de inte visuellt stör programmerarens arbete. Här är ett exempel:

< div class = "element" style= "display:block" >Popup-fönstret som för närvarande renderas

Resultat

Att använda inline-stilar är förknippat med ett antal svårigheter och olägenheter, men i processen att styla vissa element vänder sig webbansvariga ofta till denna metod för att optimera sitt arbete.

I det här kapitlet kommer vi att prata om hur man bäddar in CSS i ett HTML-dokument, det vill säga länkar stilbeskrivningen för ett element direkt till själva elementet, med hjälp av någon form av HTML-tagg.

Genomföra denna uppgift möjligt på tre sätt:

• Skriv en stilbeskrivning direkt på själva elementet. Denna metod är bara bra om ett sådant element är det enda i HTML-dokument e som behöver en separat stilbeskrivning.
• Skriv en stilbeskrivning för alla identiska element i ett HTML-dokument. Denna metod motiverar sig själv om stilen på sidan är fundamentalt annorlunda än den övergripande designen av webbplatsen (en grupp sammanlänkade sidor).
• Flytta stilbeskrivningen av HTML-element till en separat CSS-fil. Detta gör att du kan kontrollera utformningen av hela webbplatsen, varje sida på webbplatsen där referensen till CSS-filen anges. Denna metod är det mest effektiva sättet att använda en överlappande stilmall.

Låt oss titta närmare på varje alternativ och samtidigt bekanta oss med syntaxreglerna för att skriva CSS.

stilattribut.

Nästan varje HTML-tagg har ett attribut stil, vilket indikerar att någon stilbeskrivning tillämpas på den här taggen.

Det är skrivet så här:

style="">

Allt som kommer att skrivas mellan citaten av attributet stil och kommer att vara stilbeskrivningen för det givna elementet, i detta fall elementet

Tja, till exempel:

style="color: #ff0000; font-size:12px"> det är ett stycke med en anpassad stil

I det här fallet har vi specificerat att detta stycke ska visas i rött och ha en teckenstorlek på 12 pixlar. I de följande kapitlen kommer jag att gå in i detalj om vad som står inom citattecken, men nu handlar det om hur man applicerar CSS på valfri HTML-tagg.

Enligt samma princip kan du ange en individuell stil för nästan varje HTML-element.

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px">Allt om elefanter

Köp en elefant

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px">Hyr en elefant

style="color: #ff0000; font-size:14px">

Men återigen, det här sättet att injicera CSS är bra bara om du behöver ställa in en viss stil för ett litet antal HTML-element.

Märka (förväxla inte med attributet med samma namn) där beskrivningen av de element vi behöver förekommer.

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 köpa de bästa elefanterna till konkurrenskraftiga priser!!

Hyr en elefant

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

Som du kan se från exemplet har vi uppnått 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" av 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 cirka femton rubriker på sidan, och själva dokumentet skulle väga mindre genom att "ta bort" alla repetitiva stilbeskrivningar för varje enskilt element.

Nu de utlovade kommentarerna:

Märka det finns en direkt deklaration av stilar 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ång och kort, vi har kommit till den största, enligt min mening, fördelen med CSS, nämligen möjligheten att ta ut all information relaterad till designen av webbplatsen i en separat extern fil.

Så öppna anteckningar (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; font-size:18px)
h2 (färg: #ff00ff; font-size:16px)
p (färg: #600000; font-size:14px)

Jag ska försöka berätta i detalj om vad som är så konstigt vi skrev i de efterföljande kapitlen i denna handledning.

Allt! fil med stilbeskrivning skapad! Nu återstår det bara en liten bit, nämligen att tvinga de nödvändiga sidorna på vår webbplats att hämta information från den här filen.

Detta görs med hjälp av taggen (förbindelse). Märka multifunktionell och tjänar till att "länka" ett HTML-dokument 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). Därför att bär exklusivt serviceinformation den finns i huvudet på HTML-dokumentet mellan taggarna och visas inte 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 att den medföljande filen är en .
• stilmall- Anger att den medföljande filen innehåller en stilmall.
• application/rss+xml - En XML-fil för att beskriva nyhetsflödet.

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

Eftersom vi inkluderar en överlappande stilmall som en extern fil tar vår tjänstlänk följande form:

Jag kommer att upprepa, för att verkligen skingra eventuella missförstånd. Attribut rel tilldela ett värde stilmall eftersom vi inkluderar en överlappande stilmall 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) indikerar också det given fil textuell och innehåller en stilbeskrivning type="text/css"

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

Arkiv mystyle.css
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; font-size:18px)
h2 (färg: #ff00ff; font-size:16px)
p (färg: #600000; font-size:14px)
index.html filen

Meny:

Allt om elefanter

På denna sida hittar du all information om elefanter.

Meny:

Köp en elefant

Här kan du köpa de bästa elefanterna till konkurrenskraftiga priser!!

Meny:

Hyr en elefant

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

I exemplet ovan, "The Elephant Site", finns det för närvarande tre sidor, var och en länkad till en enda sida. 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 kilobyte vi skulle vinna om det fanns hundra helsidor på den här sidan!? Dessutom, hur mycket tid skulle det 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 attribut 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 taggen
  
  

  Det här är en rubrik

  
  

  Detta är ett stycke.

  
  

  Extern CSS

  En extern stilmall används för att definiera stilen för många HTML-sidor.

  Med en extern stilmall kan du ändra utseendet och känslan på en hel webbplats genom att ändra en fil!

  För att använda en extern stilmall, lägg till en länk till den i avsnittet HTML-sidor:

  Exempel

  
  
  
  
  
  

  Det här är en rubrik

  
  

  Detta är ett stycke.

  
  

  En extern stilmall kan skrivas i vilken som helst textredigerare. Filen får inte innehålla HTML-kod och måste sparas med filtillägget. CSS.

  Så här ser "styles.css" ut:

  kropp (
  bakgrundsfärg: puderblå
  }
  h1 (
  färgen blå;
  }
  p(
  färgen röd;
  }

  CSS-teckensnitt

  CSS-färgegenskapen anger vilken textfärg som ska användas.

  CSS font-family-egenskapen anger typsnittet som ska användas.

  Egenskapen CSS font-size bestämmer storleken på texten som ska användas.

  Exempel

  
  
  
  
  
  

  Det här är en rubrik

  
  

  Detta är ett stycke.

  
  

  css gräns

  CSS border-egenskapen definierar en kant runt ett HTML-element:

  Exempel

  p(
  }
  

  CSS stoppning

  Padding CSS-egenskapen definierar utfyllnaden (mellanrummet) mellan texten och gränsen:

  Exempel

  p(
  kant: 1px fast puderblå;
  stoppning: 30px
  }

  Från författaren: hej kära läsare av webformyself-portalen. Vid webbplatsbyggande är utformningen av en webbresurs av stor betydelse. Detta är vad css-språket (cascading style sheets) ansvarar för, vilket vi kommer att prata om idag. Eller snarare, om dess koppling och användning. Överväg några css-stilar för webbplatsen, som används vid design av webbsidor.

  css-anslutning

  Idag hittar du knappast en webbsida någonstans som har skapats enbart med hjälp av html-funktionerna. I själva verket skulle utseendet på sådana webbplatser helt enkelt vara hemskt, därför, när markeringen av de nödvändiga elementen är klar måste de omedelbart utformas, och detta görs med css i separat fil.

  Det måste sägas att det generellt finns också möjligheter att inkludera stilar i en html-fil. Till exempel kan de definieras med stilattributet eller samma tagg. Detta kallas inline-stilar. Detta tillvägagångssätt är inte välkommet i dag och bryter mot moderna utvecklingsstandarder.

  Men hur gör man det rätt, frågar du? För detta måste du skapa ny fil med css-tillägget och anslut det sedan till html. Detta görs väldigt enkelt med hjälp av länktaggen, som är ansvarig för att ansluta externa filer. Det görs så här:

  < link rel = "stylesheet" type = "text/css" href = "style.css" >

  Taggen är singel, som du redan förstått. Jag ska berätta lite mer om dess egenskaper:

  rel = "stylesheet" - i allmänhet skrivs rel-attributet för att bestämma filens roll på sidan. I vårt fall är rollen en stilmall, som anges.

  typ = "text/css" - den så kallade MIME-typen, som vanligtvis anges för alla ingående filer så att webbläsaren tolkar dem korrekt. Moderna webbläsare behöver inte skriva detta attribut.

  href = "style.css" är ett standardattribut som anger adressen till vår externa fil. I det här fallet skrivs det utifrån det faktum att filen har namnstilen, css-tillägget och ligger i samma mapp som html-dokumentet.

  Som du kan se, när du ansluter css-filer kommer bara href-attributet att ändras, allt annat behöver inte ändras. Du kan koppla hur många stilmallar du vill till sidan, men inte fler än 2-4 anses vara optimala, eftersom för många förfrågningar till servern inte heller är särskilt bra.

  Var kan jag få färdiga css-stilar för sajten?

  Nåväl, med kopplingen hoppas jag att allt är mer eller mindre klart. Men du skapar en tom fil, och för att se effekten av att lägga till den måste du antingen skriva reglerna själv eller ta dem någonstans ifrån.

  

  Det finns många gratis html-mallar på webben till exempel. Om du laddar ner någon av dem, så kommer det definitivt att finnas ett färdigt stilark med de nödvändiga reglerna för webbdesign. Men det fungerar bara korrekt för sitt eget html-dokument. Faktum är att dessa två språk är sammankopplade med hjälp av så kallade väljare.

  En väljare är en funktion i css-språket som är unik för den. Vad behövs de till? Tja, föreställ dig den här koden:

  Titeltext

  Text i ett stycke

  Och hur kan vi till exempel formatera ett stycke och en rubrik i css? Det är vad väljare är till för, för att bara komma åt de element du behöver. Till exempel:

  p( font-size: 12px; ) .title( font-size: 36px; )

  teckenstorlek: 12px; Titel ( teckenstorlek: 36px;

  Vi satte teckenstorleken på alla stycken till 12 pixlar, medan elementen med titelklassen (h1 i vårt fall) fick en mycket större storlek på 36 pixlar. Observera att när det gäller stycken gäller formatmallar för alla, oavsett hur många det finns på sidan.

  Den andra väljaren adresserade endast ett element - med titelklassen. Naturligtvis är det möjligt att skapa andra element med exakt samma klass, det är inte förbjudet, och de kommer att få samma regel, men om vi bara skriver in html-tagg h1 (utan titelklassen), så kommer inga regler att läggas till för det.

  Så här gör det bekvämt möjligt för css att välja de nödvändiga elementen och lämna ifred de som inte behövs. Vad har detta med att göra färdiga stilar som du kan hitta på internet? Allt där är knutet till vissa klasser och identifierare, så du kan inte bara koppla dessa tabeller till vilka filer som helst, de kommer inte att fungera om de nödvändiga klasserna inte är fästa i html för de nödvändiga elementen.

  Till exempel, i stilmallen ser vi följande kod:

  Nav( width: 300px; bakgrund: aqua; ... ) .nav a( display: block; color: #ccc; ... )

  Nav ( bredd: 300px

  Redan av detta kan vi dra slutsatsen att någonstans på vår html-sida måste det finnas ett element med nav-klassen, och länkar måste ligga i det. Om detta är sant kommer utseendet att tillämpas på dem och deras utseende kommer att ändras i enlighet med detta. Om inga sådana element hittas ignoreras koden helt enkelt.

  Återigen, på nätet kan du hitta en hel del färdiga mallar, där du kan se denna klasskoppling, så om du ändrar något i html måste motsvarande operationer utföras i stilmallen.

  Hur gör man css-stilar för webbplatsen?

  CSS är inte något skrämmande och extremt komplext. Detta är en vanlig teknik skapad av människor för design av webbsidor, som har sina egna regler. Det räcker att förstå dem, och du kommer också att kunna skapa utseendet på webbresurser med detta språk.

  

  Den viktigaste förutsättningen för snabb utveckling är ständig övning, tillsammans med ny kunskap som du kommer att lära dig själv. Vår kan ge dig en liknande praxis.

  Dessutom kan du lära dig och bemästra grunderna i css i vår premiumsektion. Det finns en av kurserna som helt ägnas åt de grundläggande egenskaperna hos detta språk. .

  Viktigast av allt, resolut ställa in studien och kasta bort fördomen om att det är mycket svårt. Du kan också hjälpa till med gratis material på vår webbplats, artiklar och videohandledningar. Om du vill kan du använda dem för att skaffa dig de grundläggande kunskaper som behövs när du arbetar med css.

  På detta säger jag adjö till dig. Läs vår webformyself-blogg för att förbättra din kunskap om webbplatsbyggande.

  > Grundläggande css-stilar för att skapa en webbplats Som regel skrivs stilarna för att visa behållare och deras innehåll i en stilmall, som vanligtvis kallas stile.css, även om du kan kalla den vad du vill. Huvudsaken är att på sidan i taggen var rätt väg till stilmallen

  För att utforma en behållare på en sida kan du ge den en klass. Till exempel container

  du kan tilldela en stil som heter chapka_saita, sedan tilldelas klassen behållaren på sidan

  innehåll

  . Stilarket specificerar stilarna för chapka_saita. Namnet i stile.css-tabellen börjar med en punkt.

  Chapka_saita (ange stilar inom parentes)

  Dessutom kan stilen för behållaren anges direkt om den inte har tilldelats en klass. Till exempel stil för behållare

  innehåll

  börjar med behållarens namn

  Rubrik (inom parentes indikerar stilar)

  Du kan också ange stilar för behållare med hjälp av en identifierare, då ser det ut så här

  innehåll

  , i stilmallen börjar identifieraren med ett pundtecken

  #blok1 (inom parentes ange stilar)

  Om du behöver specificera stilarna för rubriker i behållare, länkar, bilder, så ser det ut så här.

  Chapka_saita ( med lockiga hängslen huvudcontainerstilen )
  .chapka_saita h1, h2 ( stil för rubriker i taggar

  och

  för denna behållare)
  .chapka_saita a ( stil för länkar i denna i den här behållaren )
  .chapka_saita a:hover ( stilar för svävande länkar )
  .chapka_saita img ( stilar för bilder i den här behållaren )
  Stilarna i sig är skrivna inom dessa lockiga hängslen och är åtskilda av semikolon;

  Teckensnittsfamilj: Arial; anger teckensnittet för behållaren, som vanligtvis används i taggen , där allt innehåll på sidan

  Linjehöjd: 1,2; ställer in höjden på linjerna för teckensnittet

  Indrag

  stoppning: 10px ställer in den inre utfyllnaden av innehållet från behållarkanten, i det här fallet är utfyllnaden 10 pixlar, du kan ange värdet i procent eller i em
  marginal: 5px ställer in behållarens marginaler,
  marginal: 10px 5px 0px 15px; indrag kan anges separat för varje sida
  margin-bottom: 10px; du kan endast ange indraget på en sida, i det här fallet är indraget från botten 10 pixlar. Detsamma kan appliceras på stoppning.

  Nedan finns ett exempel på stilar för taggen

  Brödtext (marginal-vänster: auto; marginal-höger: auto; bredd: 930px; font-size: 12px; font-family: Arial; line-height: 1.2; background-image: url(images/fon.jpg); )

  Stilar för text

  teckenstorlek: 12px; anger teckenstorleken, kan anges i pixlar, procent eller ems
  färg: #0000ff; anger färgen på teckensnittet, i det här fallet #0000ff blå, kan anges som ett ord, till exempel färg: grön; dvs färgen är grön.
  text-dekoration: ingen; tar bort understrykningar, används för länkar för att ta bort understrykningar
  text-transform:versaler; gör alla bokstäver i texten versaler, istället för versaler kan du skriva andra värden, och vice versa, göra en övre eller nedre understrykning, genomstruken.
  font-weight: fet; kommer att göra typsnittet fetstilt, andra värden kan användas istället för fetstil
  text-align:left; ställer in textjusteringen, i det här fallet vänster, till vänster sida av behållaren, kan du ställa in värdet conter, hight.
  text-shadow: 1px 2px 1px 0px #000000; färg: #f9f5ed; skugga för text

  Behållarstilar

  bakgrundsfärg: #DCDCDC; tilldelar en bakgrundsfärg till behållaren, i det här fallet #DCDCDC grå
  bakgrundsbild: url(images/fon.jpg); ställer in bakgrundsbilden

  Kant: 1px fast #E8E8E8; tilldelar en kant, frasen solid betyder en hel kant, #E8E8E8 är färgen på kanten. Du kan ange en separat ram för varje sida, till exempel border-top: 2px solid #E8E8E8;
  kantradie: 10px rundar du behållarens hörn kan du ställa in olika avrundningar på varje hörnkantradie: 2px 6px 10px 0px;
  box-shadow: #2C2C29 10px 10px 10px; skugga för behållare

  Bredd:926px; anger behållarens bredd
  höjd: 240px; containerhöjd

  flyta till vänster; trycker behållaren till vänster sida, som standard går behållarna i ordning, och om du vill rada upp flera block i en rad, måste de ställa in float:left-egenskapen; och breddhöjd: px; så att de passar på bredden i föräldrabehållaren.
  float:right; samma, men behållarna pressas mot höger sida.
  Om du vill göra behållaren i mitten, anger du bredden, och indragen är avto , exempel: margin-left: auto; margin-right: auto; bredd: 150px