Lektion 7. Text och bakgrundsfärger i HTML.

Datum: 2008-12-05

Hur ställer man in bakgrunden och textfärgen på en webbsida?

Som standard är färgen på text och i allmänhet alla teckensnitt på webbsidor alltid svart (#000000 ). Men vi kan alltid ställa in absolut vilken färg som helst som vi gillar och ser anständiga ut eller är mer lämplig för designen av en viss webbplats.

Ställ in textfärgen

I HTML kan färgen på text, teckensnitt, bakgrund och andra element ställas in på två sätt:

1. Metod 1. I parade taggar attribut skrivs anger namnet på den önskade färgen. Färgnamnet anges på engelska. Till exempel kan färgen på titeln på vår webbsida ställas in på detta sätt:

Kommentarer till denna artikel (lektion):

Andrey! Vilken underbar sida du har! Jag har använt det regelbundet under den andra veckan nu: jag studerar dina lektioner och videohandledningar; Jag läser din litteratur och laddar ner program; Jag tar mina första steg inom webbprogrammering! Och viktigast av allt, jag kan göra det!!! Men jag är ingen fysiker alls, utan en textförfattare! Och alla som besöker min litterära webbplats kan övertygas om detta: "DIKT AV OLEG GUZ" Mina uppgifter: e-post: [e-postskyddad] webbplats: http://sites.google.com/site/stihiolegguz/

kontrollera koden noggrant

Jag försökte ändra bakgrundsfärgen men det fungerar inte! Hur ändrar man bakgrundsfärgen?

Att ställa in en bakgrundsfärg och/eller bild för en sida eller dess individuella element är ganska enkelt. Det viktigaste är att veta var och hur man gör detta, samt ha en färgkod och/eller bakgrundsbild. Det är möjligt att du kommer att lära dig många nya saker från den här artikeln, men jag skapade den speciellt för nybörjare. Därför blir allt så kort och detaljerat som möjligt på samma gång. Huvudsaken är att du inte bara får en allmän idé och färdiga exempel, utan också en förståelse för hur man gör en bakgrund i HTML.

För att ställa in bakgrunden i HTML, använd mellanliggande DOCTYPE

Och jag börjar med det faktum att i HTML5 det går inte att ställa in. Det beslutades att lägga till denna funktion till CSS. Därför, om du planerar att använda följande och vill få giltig (korrekt) kod, måste du välja övergångsdokumenttyp. För att göra detta måste din webbsida börja med följande rad:

Övergångsvis//SV" "http://www.w3.org/TR/html4/loose.dtd">

Med det ur vägen, låt oss gå vidare till att förstå hur bakgrunden skapas. Och det första att notera här är skillnaden mellan bakgrundsfärg Och bakgrundsbild. I början går det bakgrundsfärg, som fyller hela det tillgängliga utrymmet på sidan eller dess element. Överlagrat ovanpå det är en upprepning bakgrundsbild. Visuellt kan detta avbildas enligt följande:

Bakgrund för ett HTML-dokument och dess element

Det andra du behöver veta är skillnaden mellan dokumentets brödtext Och dokumentelement. Dokumentets kropp indikeras i HTML-koden för en webbsida med BODY-taggen, som inkluderar hela innehållet på webbsidan. Uppenbarligen kan dokumentets bakgrund inte vara transparent. Om dokumentets bakgrund inte anges används standardvärdet som anges i webbläsarinställningarna.

Sidelement finns inuti BODY-taggen. Det är anmärkningsvärt att det inte är möjligt att ställa in färg och/eller bakgrundsbild med HTML för alla dokumentelement. Till exempel kan en bakgrundsbild endast anges för tabeller. Som standard har de vanligtvis en genomskinlig bakgrund.

Attributet bgcolor för att skapa en bakgrundsfärg

Att fråga bakgrundsfärg dokumentet eller dess element använder attributet bgcolor, till exempel:

I det här fallet ställer vi in ​​bakgrundsfärgen för sidan som helhet. Och här är ett exempel på hur man ställer in bakgrundsfärgen för en tabell i TABLE-taggen:

Det är anmärkningsvärt att bakgrundsfärgen i tabellen kan anges för båda raderna i TR-taggen och för deras celler i TD-taggen.

Hur får man reda på färgkoden?

Du har förmodligen redan märkt att färg i HTML är inställd på en speciell koda, till exempel: #ec008c . För att ta reda på koden för den färg du behöver kan du använda en av de grafiska redaktörerna. Till exempel, i Photoshop kan du använda " Pipettverktyg» (Pipett) för att få färg från en punkt i bilden. Sedan måste du klicka på den resulterande färgen i verktygsfältet och i fönstret som öppnas " Färgväljare» (Färgval) kopiera färgkoden.

Observera att den här koden inte kommer att ha ett pundtecken (#) i början. Detta tecken måste läggas till manuellt.

Du kan också använda många onlinetjänster, till exempel:

• etc.

Deras funktionsprincip är ännu enklare - klicka på önskad färg och få dess kod.

Bakgrundsattributet för att skapa en bakgrundsbild

Samma som i fallet med bakgrundsfärgen, och i fallet med bakgrundsbild Du måste använda ett speciellt attribut, nämligen bakgrund , till exempel:

I det här fallet ställer vi in ​​en bakgrundsbild för sidan som helhet. Det är anmärkningsvärt att på grund av begränsningen av bildens storlek kommer det att upprepas, till exempel:

Som du kan se är övergången mellan bilder märkbar när den upprepas. Därför används ofta speciella bilder där denna punkt beaktas.

Och här är ett exempel på hur man ställer in en bakgrundsbild för en tabell i TABLE-taggen:

Det är anmärkningsvärt att bakgrundsbilden endast kan ställas in för tabellen som helhet och/eller dess individuella cell. Det här fungerar inte för en sträng.

Absolut och relativ väg till bakgrundsbilden

Det är värt att ägna särskild uppmärksamhet bakgrundsbildens adress. I detta fall används en relativ väg till bilden, dvs. Adressen anges i förhållande till platsen för bildfilen för webbsidesfilen. Detta alternativ kan inte kallas särskilt framgångsrikt. Det är bäst att använda en absolut väg till bilden, d.v.s. dess fullständiga URL, Till exempel:

I det här fallet kommer du inte att ha några relaterade problem. Du kan läsa mer om detta.

Låt oss sammanfatta det

Användningen av bgcolor- och bakgrundsattributen är föråldrad, så för HTML-kodens giltighet måste du använda övergångsdokumentet DOCTYPE . För att ställa in bakgrundsfärgen i HTML använder den speciella koder, som du kan ta reda på i en grafikredigerare eller med hjälp av speciella onlinetjänster. Bakgrundsbilden dupliceras inom det område som tilldelats den och ligger ovanpå bakgrundsfärgen. För att ange en bakgrundsbild är det bättre att använda dess fullständiga URL. Det är allt jag har. Tack för din uppmärksamhet. Lycka till!

Från författaren: Välkommen till webformyself och idag vill jag berätta hur du ändrar bakgrunden på sidan. Bakgrundsfärgen eller bilden i bakgrunden kan spela en stor roll för hur en webbplats ser ut, så du måste veta hur du ställer in den.

Hur man ändrar bakgrund i wordpress

Återigen, om du har en WordPress-motor kommer det inte att vara svårt att ändra sidans allmänna bakgrund. Du behöver bara klicka på knappen "Anpassa" på fliken "Utseende". Här måste du välja "Färger". Beroende på vilken mall du väljer kan du kanske välja färger för olika element. Men du kan välja färg på sidan i alla fall - en bekväm färgpanel öppnas framför dig.

Antalet inställningar här beror på vilken mall du har. Hur som helst ska det absolut gå att ställa in färgen för hela sidan i olika mallar man kan även ställa in bakgrund och färg för rubriker, länkar osv.

Egentligen är det allt du behöver veta. Om du behöver ladda ner en bakgrundsbild, välj lämpligt objekt och hitta önskad fil på din dator.

JavaScript. Snabb start

På ett bra sätt bör bilden inte vara för tung, eftersom detta i hög grad kommer att påverka sajtens laddningshastighet. Det är idealiskt att använda så kallade sömlösa bakgrundsbilder, som upprepas horisontellt och vertikalt och därmed fyller hela utrymmet.

Efter att ha laddat bilden kommer du att presenteras med ett par användbara inställningar att konfigurera. Bekvämligheten med WordPress är att du ser ändringar direkt, beroende på vilka inställningar du väljer.

Först kommer du att bli ombedd att välja en upprepningsmetod. Det finns redan 4 alternativ: upprepa endast horisontellt, endast vertikalt, på båda sidor och upprepa inte. Beroende på vilken bild du använder måste du göra ett val.

Upprepning gör att du kan spara avsevärt på storleken på bilden när den är liten och kan upprepas så att skarpa övergångar mellan upprepningar inte syns. På så sätt kan du spara tiotals kilobyte jämfört med metoden där en bild i full storlek av stora storlekar laddas.

Placera. Det finns inget att förklara här, titta bara på hur sidans utseende förändras med olika bakgrundspositioner. Välj det alternativ som du gillar bäst.

Bindande. Detta är en mycket intressant inställning, den låter dig välja om du vill rulla bakgrundsbilden tillsammans med innehållet eller frysa den på ett ställe. Personligen gillar jag alltid att välja det fasta alternativet eftersom när du scrollar ner är det bara innehållsblocken som rör sig.

Till exempel, om du har en bakgrundsbildshöjd på 1000 pixlar och du inte upprepar eller fångar den, försvinner den helt enkelt ur bilden när du rullar nedåt. Genom att fixa bakgrunden kan bilden vara synlig hela tiden. Ibland är detta en mycket effektiv lösning.

JavaScript. Snabb start

Lär dig grunderna i JavaScript med ett praktiskt exempel på hur du skapar en webbapplikation

Egentligen är det allt för att ändra bakgrunden i WordPress. Som du kan se är allt så enkelt som möjligt.

Hur man ändrar bakgrunden på en webbplats i html

Okej, vi har tittat på en rent visuell version, där du inte behöver gå in i koden och skriva något där. Låt oss nu ta reda på hur man ändrar bakgrunden genom html och css. Vilka fördelar ger detta? Du kan ställa in bakgrundsbilder inte bara för webbplatsen i allmänhet, utan också för varje element separat. Till exempel för någon widget, meny, rubrik, etc. Detta ger mycket fler möjligheter inom webbdesign och att ändra dess design.

För att komma åt all denna styling måste du hitta mallens huvudstilmall. Vanligtvis ligger den i roten, eller i css-mappen, och kallas style.css eller main.css.

I den kommer du att se koden som designar olika delar av din webbplats. Om du vill ställa in bakgrunden globalt kan du göra detta genom att tilldela en bakgrund till kroppsväljaren, det vill säga sidans brödtext.

Hur är bakgrunden inställd?

Kom ihåg - bakgrundsegenskapen. Idag är det bättre att använda den förkortade versionen av att skriva den här egenskapen. Till exempel:

body( bakgrund: #ccc url(bg.png) no-repeat 50% 50% fix; )

Vad betyder allt detta? Den första parametern är vanligtvis en solid färg. Låt oss säga att vi ställer in den på grått. Färgen kanske inte anges om en bakgrundsbild anges. Som du kan se specificeras bilden med url-konstruktionen (filsökväg). Följaktligen måste du korrekt skriva ner sökvägen till filen, och även se till att ange dess förlängning.

Alla parametrar som jag skrev ner efter detta är valfria och kan specificeras efter önskemål. Så jag specificerade att bakgrundsbilden inte skulle upprepas, placeras i mitten både horisontellt och vertikalt, och även fixeras på ett ställe för att inte försvinna när du rullar.

Som du kan se, här är alla samma parametrar som du konfigurerade visuellt, men här registreras de som värden för bakgrundsegenskapen.

I det här exemplet använde jag en förkortad egenskapsnotation, det är bara mer bekvämt, men i själva verket har varje enskild parameter sin egen egenskap: bakgrundsfärg för färg, bakgrundsbild för en bild, bakgrundsposition för att ställa in en position.

Naturligtvis, för att bli flytande i dessa egenskaper, råder jag dig att först ta vår kurs, och om du vill bli en avancerad användare av css-språket, då. Där får du lära dig hur du ställer in flera bakgrunder samtidigt, ställer in deras upprepning, använder gradienter osv. Informationen är mycket intressant och användbar för webbplatsbyggare.

Jo, jag berättade om grunderna för att arbeta med bakgrunden. Prenumerera på vår portal för att få nyheter och lära dig mer om webbplatsbyggande.

JavaScript. Snabb start

Lär dig grunderna i JavaScript med ett praktiskt exempel på hur du skapar en webbapplikation

17.10.2015

Inte än

Hej alla!
Låt oss fortsätta lära oss grunderna i HTML.
I den här lektionen kommer jag att berätta och visa exempel hur man gör en bakgrund från en färg eller bild på en HTML-sida.
Det är ganska enkelt!
Låt oss börja med färg!
Jag tror att du inte missade det, där jag berättade hur du ändrar färgen på texten och i slutet av artikeln gav jag koder för olika färger och nyanser. Varför påminde jag dig om den här lektionen? Ja, eftersom det finns ett bord med färdiga färgkoder, ta dem och öva på dem direkt i den här lektionen.
Så, hur man gör en bakgrundsfärg i HTML...

Bakgrundsfärg i HTML

Standardbakgrundsfärgen i ett HTML-dokument är vit. Hur ställer man in färgen som önskat?
Attributet "bgcolor" hjälper oss med detta. För att måla över bakgrunden, lägg till det här attributet i "body"-taggen:

Eller så här:

Här är hela HTML-koden:

Sidans text kommer att vara grön och bakgrunden blir svart.

Resultatet blir så här:

Om du vill skapa en bakgrund från en bild, lägg sedan till attributet "bakgrund" till taggen "kropp":

Fyll i valfri bild där din webbsida är (i mitt exempel kallas sidan "fon" med tillägget ".gif"):

Här är hela HTML-koden:

Resultatet blir så här:

Om bakgrundsbilden finns i mappen bilder eller någon annan mapp kommer den att se ut så här:

Här är hela HTML-koden:

Sidtext på en vacker bakgrund.

Det är allt för idag! Jag tror att lektionen inte var svår och du förstod allt. Om du har frågor, skriv i kommentarerna.
Jag ser fram emot att se dig på nästa lektion.

Tidigare inlägg
Nästa inlägg

I den här handledningen kommer du att lära dig hur du ändrar bakgrunden och textfärgen för ett element på en HTML-sida. I allmänhet, i HTML-språket, har vissa taggar speciella attribut som ändrar färg, till exempel bgcolor (bakgrundsfärg). Men för det första är dessa attribut föråldrade (jag tror du kommer ihåg vad det betyder), och för det andra, som jag redan sa, inte alla taggar har dem. Så låt oss säga att du ville ändra bakgrundsfärgen för ett textstycke. Och hur kommer du att göra detta, eftersom taggen

Finns det inget sådant attribut? Därför, som i tidigare lektioner, kommer vi att använda stilar (CSS), det vill säga det universella stilattributet, vilket gör att vi kan ändra färgen var vi vill.

Hur kan du ange en färg?

Färger i HTML (och CSS) kan specificeras på flera sätt, jag kommer att visa dig de mest populära och vanliga:

• Färgnamn- HTML har en stor lista och för att ange en färg räcker det att skriva dess namn på engelska, till exempel: röd, grön, blå.
• HEX färgkod– Absolut vilken färg som helst kan fås genom att blanda tre grundfärger i olika proportioner – röd, grön och blå. En HEX-kod är tre par hexadecimala värden som ansvarar för antalet av dessa färger i varje färg. Färgkoden måste föregås av ett hash-tecken (#), till exempel: #FF8C00, #CC3300 och så vidare.

Tidigare rekommenderades det att endast använda HTML i HTML , som garanterat visas identiskt i alla webbläsare och på alla bildskärmar. Men idag finns det ingen anledning att begränsa sig till det, eftersom både webbläsare och bildskärmar länge har lärt sig att korrekt visa en mycket större lista med färger. Men jag rekommenderar inte att du anger färger efter namn, faktum är att många webbläsare fortfarande associerar olika färger med samma namn. Därför kommer jag alltid att använda HEX-färgkoder i denna handledning.

Hur ändrar man textfärg?

För att ändra textfärgen i ett element på en HTML-sida måste du ange stilattributet inuti taggen. Den allmänna syntaxen är följande:

<тег style= "color:color name" >... - ange textfärgen med namn.

<тег style= "color:#HEX-kod" >... - ange textfärgen med kod.

Och som vanligt, för att ändra textfärgen på hela sidan, anger du bara stilattributet i taggen . Och om du behöver ändra teckensnittsfärgen för ett stycke text, bifoga det i en tagg och tillämpa attributet på det.

Exempel på att ändra textfärg

Röd titeltext

Blå stycketext.

Grön kursiv stil. Röd text.

Resultat i webbläsaren

Hur ändrar man bakgrundsfärgen?

Bakgrundsfärgen för alla sidelement kan också ändras med stilattributet. Den allmänna syntaxen är:

<тег stil= "bakgrund:färgnamn">... - ange bakgrundsfärgen med namn.

<тег style= "bakgrund:#HEX-kod" >... - ange bakgrundsfärgen med kod.

Exempel på att ändra bakgrundsfärgen

Titel.

Paragraf.

Miniatyr. Oformatterad text.

Resultat i webbläsaren

Titel.

Paragraf.

Miniatyr. Oformatterad text.

När du ändrar bakgrundsfärgen på elementen blir det väldigt tydligt hur brett vart och ett av dem faktiskt upptar. Som du kan se tar blockelement som stycken och rubriker i allmänhet hela den tillgängliga bredden, även om de innehåller väldigt lite text, men inline-taggar är lika breda som innehållet. Förresten, det sista stycket i exemplet upptar också hela bredden, det är bara att dess bakgrund är transparent, så bakgrunden på sidan är synlig genom den. I allmänhet är bakgrunden för alla element på sidan där det inte uttryckligen anges transparent, det är allt.

Läxa.

1. Skapa en rubrik för artikeln och dess två avsnitt. Skriv ett stycke i början av artikeln och varje avsnitt.
2. Ställ in hela sidan på Courier-fontstorlek 16px, artikeltiteln till 22px och underrubriker till 19px.
3. Låt artikeltiteln ha textfärgen #0000CC och underrubrikerna har textfärgen #CC3366.
4. Använd bakgrundsfärg #66CC33 för att markera de två orden i andra stycket. Och i tredje stycket, i samma färg, men med ett understruket ord.
5. Glöm inte att du kan gruppera stilattributvärden genom att placera ett semikolon (;) mellan dem.