I den här handledningen kommer vi att använda Notepad++-redigeraren för att skapa HTML- och CSS-filer, den är avsedd för användare Microsoft Windows och alla exempel kommer att utföras i den.

Om du har en Mac kan du köra exemplen i Brackets-redigeraren, precis som Anteckningar++ helt gratis. När det gäller redaktören Fästen, då är det lämpligt för användare Microsoft Windows, kan du sedan välja vad som ligger närmast dig.

Skapa en intern stilmall

Låt oss titta på ett exempel där du kommer att skapa din första interna stilmall.

Steg 1: Öppna en textredigerare

Tryck på WIN + R-knapparna samtidigt (analogt med Start - Kör) och en dialogruta öppnas "Sikt" enter och tryck på Enter (programmet öppnas ), eller kör programmet genom hennes genväg.

Huvudprogramfönstret öppnas framför dig:

Steg 2: Skapa en dokumentstruktur

Kopiera eller klistra in följande HTML-kod i redigeraren:

</span> Intern stilmall

I exempelkoden för denna handledning kommer jag att ge ytterligare kommentarer, markerade i ljusgrönt. HTML använder en speciell tagg för att skapa kommentarer i din kod, texten inuti ett sådant element visas inte av webbläsaren. I CSS-kod, för att lägga till en kommentar, måste du placera kommentarstexten i följande struktur: /* kommentarstext */. Du kan göra kommentarer i CSS-kod både i inbyggda stilar och i externa (in separat fil).

Steg 3: Lägg till inline-stilar

Nästa steg är att lägga till inbyggda stilar på din sida: för rubriken på första nivån är textfärgen röd (färg: röd) och för stycken blå (färg: blå). Dessutom, för rubriken på första nivån kommer vi att göra texten justerad mot mitten (text-align: center). Kontrollera att varje CSS-egenskap och dess betydelse avgränsades av ett kolon, med ett semikolon i slutet av varje deklaration.

</span> Intern stilmall

Det är bra att jag är engagerad i självutveckling.

Jag kan lära mig CSS på en månad eller mindre.

Steg 4: Visa HTML-sidan i en webbläsare

Öppna exemplet i en webbläsare och se till att resultatet av vårt exempel matchar bilden:

Ansluta en extern stilmall

Nu ska vi skapa en separat fil som kommer att innehålla en stilmall och koppla den till vårt HTML-dokument.

  1. Skapa en ny tom fil i Notepad++ och spara den som page.css (du måste välja Cascade Style Sheets *.css) i samma mapp där du skapade HTML-dokumentet.
  2. Flytta CSS-koden från föregående exempel (innehållet i taggen

    Hej världen!

    Det här exemplet visar hur du ändrar rubrikstilen

    .

    På en webbsida behöver du nu bara ange denna tagg och stilar kommer att läggas till den automatiskt.

    Interna stilar

    Inline-stilar är i huvudsak ett tillägg till en enda tagg som används på en webbsida. Style-attributet används för att definiera en stil, och dess värden specificeras med ett stilmallsspråk (exempel 3).

    Exempel 3: Använda interna stilar

    Stilar

    Hej världen!

    Det rekommenderas att använda inre styling för enskilda taggar eller inte använda det alls, eftersom det blir problematiskt att ändra ett antal element. Interna stilar motsvarar inte ideologin i ett strukturdokument när innehållet och dess utformning separeras. Alla beskrivna metoder använder CSS

    kan användas antingen självständigt eller i kombination med varandra. I det här fallet är det nödvändigt att komma ihåg deras hierarki.

    Exempel 3: Använda interna stilar

    Hej världen!

    Hej världen!

    Den interna stilen tillämpas alltid först, sedan den globala stilmallen och sist den associerade formatmallen. Exempel 4 använder två metoder för att lägga till stilmallar till ett dokument.

    Exempel 4. Kombination av olika stilar anslutningsmetoder I exemplet ovan är den första rubriken inställd på 36px röd, och nästa är inställd på grön och ett annat teckensnitt.

    CSS står för "cascading style sheets" (från engelskan. Cascading Style Sheets). CSS är en uppsättning parametrar som används för att visa ett visst element på en webbsida. Dessa parametrar kan anges antingen i en separat fil eller skrivas direkt i sidans HTML-kod. På vår webbsida kan det till exempel finnas följande element: artikeltitel, stycken, citat, fotnoter, bilder, videor, länkar. Du kan ställa in en specifik visningsstil - storlek, färg, ramtjocklek, etc. När du arbetar med en webbplats rekommenderas det att använda en separat fil med stilar, istället för att bädda in kod med stilinställningar i enskilda sidor. Detta kommer att minska tiden avsevärt - när du vet platsen för stilmallen kan du alltid snabbt hitta en specifik stil och redigera den. Stilfilen har tillägget .css.

    , brukar den heta

    style.css CSS-anslutningar det finns flera sätt att arkivera. Vi kommer att prata om två metoder som oftast används när du skapar webbplatser:

    1. Länka. Den här metoden används när du behöver ställa in stilar för alla sidor på en webbplats i en fil. Denna metod används ofta när du skapar en webbplats. För att ansluta stilmallen använd kommandot , som måste placeras i etikettens kropp .

    De två första egenskaperna indikerar för webbläsaren att webbplatsen använder CSS, sedan anges adressen till stilmallsfilen.

    2. Inbäddning i dokumenttaggar. Med denna metod sätts stilen för ett specifikt sidelement direkt i HTML-koden. Till exempel:

    Här har vi specificerat stilar för behållarna i enlighet med detta

    Och . Dessa stilar kommer att tillämpas exklusivt på dem.

    Låt oss ge ett exempel på en stilmall – skapa en fil .css och skriv stilarna:

    body ( font-family: Arial, Verdana, Sans-serif; /* Font family */ font-size: 12pt; /* Body font size in points */ background-color: #f0f0f0; /* Web page background color * / färg: #000000; /* Brödtextfärg */ ) h1 ( färg: #a52a2a; /* Header color */ font-size: 24pt; /* Font size in points */ font-family: Georgia, Times, serif ; /* Font family */ font-weight: normal /* Normal text style */ )

    Här har vi ställt in stilar för sidkroppen och för titeln

    . Du kan också ställa in specifika stilar för alla andra sidelement på din webbplats.

    Låt oss nu koppla vår stilmall till webbplatsen:

    Ansluter CSS till webbplatsen

    Hej världen!

    Detta är min första sida med CSS-stilar

    Så vi kom på det vad är CSS, För vad denna teknik används, lärt sig hur man kopplar stilar till webbplatsen. Den här lektionen är en slags introduktion till kaskadformatmallar. I andra lektioner kommer vi att prata mer om CSS-teknik.

    Det finns flera sätt att lägga till stilar på en webbsida, som skiljer sig åt i sina möjligheter och syfte. Låt oss titta på dem mer i detalj härnäst.

    Extern stilmall

    Stilar finns i en separat fil med tillägget css elementet används för att länka HTML-dokumentet med CSS-filen . Den ligger inuti , som visas i exempel 1.

    Exempel 1. Ansluta externa stilar

    Exempel 3: Använda interna stilar

    Rubrik

    Värdet på rel-attributet det kommer alltid att finnas en stilmall och förblir oförändrad. href-värdet är sökvägen till CSS-filen; sökvägen kan anges antingen relativ eller absolut. Observera att du på detta sätt kan koppla ihop en stilmall som finns på en annan sida. I exemplet ovan kopplar vi ihop det kyrilliska teckensnittet Lobster från webbplatsen Google Fonts.

    Innehållet i filen style.css visas i exempel 2.

    Exempel 2: Innehållet i filen style.css

    H1 (font-family: "Hummer", kursiv; färg: grön; )

    Som du kan se från det här exemplet är stilfilen normal textfil och innehåller endast CSS-syntax. I sin tur innehåller HTML-dokumentet bara en pekare till filen med stilen på detta sätt, principen om separation av kod och webbplatsdesign är fullt implementerad. Att använda en extern stilmall är därför den mest mångsidiga och bekväma metoden för att lägga till stil på en webbplats. Detta möjliggör oberoende redigering HTML-filer och CSS.

    Intern stilmall

    Stilar skrivs i själva HTML-dokumentet, inuti elementet.

    Rubrik

    I det här exemplet är elementstilen inställd på

    , som sedan kan användas på en given webbsida (Figur 1). Observera att vi säkert kan kombinera med

    Rubrik 1

    Rubrik 2

    I det här exemplet är den första rubriken inställd på röd och storleken 36 pixlar med stilattributet, och den andra rubriken är inställd på grön med hjälp av elementet

    Rubrik 1

    Rubrik 2

    Det här exemplet visar importen av en stilfil från webbplatsen Google Fonts för att ansluta det kyrilliska teckensnittet Lobster.