Hälsningar till alla läsare. Då och då ställs hantverkare inför problemet med hur man gör en horisontell eller vertikal linje med HTML eller CSS. Detta är vad jag kommer att berätta om idag.

Linjer i CSS

Det finns flera sätt att göra linjer. Ett sådant sätt är att använda CSS. Eller snarare, med Border. Låt oss titta på ett exempel.

Och detta är vad som kommer att hända som ett resultat.

Horisontell och vertikal linje med css.

Linjer kan ritas i CSS med Border-operatorn. Om du bara behöver en rektangel med en fast rambredd kan du helt enkelt använda den här operatorn och ge den ett värde. Till exempel border:5px solid #000000; kommer att innebära att blockkanterna har en bredd lika med 5 pixlar av svart färg.

Men om du behöver sätta inte alla gränser, utan bara några, måste du ange vilka gränser som behövs och vilket värde var och en av dem kommer att ha. Dessa är operatörerna:

• border-top – ställer in värdet på den övre kanten
• border-bottom – ställer in värdet på den nedre kanten
• border-left – ställer in värdet på den vänstra kanten
• border-right – ställer in värdet på den högra kanten.

Vertikal och horisontell linje i HTML

Du kan skapa rader i själva HTML-koden. För att göra detta kan du använda hr-taggen.

I det här fallet kommer en horisontell linje att ritas, en pixel hög och full bredd.

Men denna tagg kan också ges vissa värden.

• Bredd– ställer in linjebreddsvärdet.
• Färg– ställer in linjefärgen.
• Justera– ställer in justering till vänster, mitten, höger
• Storlek– ställer in linjetjockleksvärdet i pixlar.

Med hjälp av hr-taggen kan du också ställa in en vertikal linje. Men i det här fallet måste du tillgripa stilar igen.

I det här fallet kommer en vertikal linje att dras hundra pixlar hög, en pixel tjock och fem pixlar indragen.

Slutsats.

Tja, nu vet du hur du kan ställa in en vertikal och horisontell linje. Linjer kan ställas in både på vanliga webbplatser med HTML, och de kan ställas in på en webbplats som använder ett CMS, till exempel WordPress, men i det här fallet måste du byta till HTML-läge.

Tja, om du har några fler frågor, ställ dem i kommentarerna.

När du skapar en HTML-sida spelar styling en viktig roll. Speciellt när vi pratar om olika symboler och dekorativ design: dessa små saker hjälper till att göra "språket" på din sida mer tillgängligt och tydligt, och också avsevärt förändra dess uppfattning och utseende som helhet. En av de viktigaste elementen för design är den horisontella linjen, och då kommer vi att lära oss mer i detalj hur man arbetar med den och hur man gör en horisontell linje i html.

Vad är en horisontell linje och vad är den till för?

En horisontell linje i html är ett siddesignelement som utför ett antal funktioner:

1. Dekorativ. Hjälper till att göra sidan attraktivare.
2. Dela. Främjar effektiv separering av information av olika betydelse.
3. Att framhäva eller framhäva. Uppmärksammar sidans gäster på den nödvändiga och viktigaste informationen.

Det är den horisontella linjen som anses vara det mest tillgängliga sättet att implementera ett antal funktioner. Det är väldigt enkelt att skapa, och från utsidan ser det väldigt fördelaktigt ut. Genom enkla ändringar i html-koden kan du justera:

• längd;
• bredd;
• färgegenskaper;
• inriktning längs den ena eller andra kanten.

Det är värt att notera att den horisontella linjen hänvisar till blockelement. Det betyder att den upptar en ny rad på sidan, och texten som följer kommer att hamna nedan.

Skapa en horisontell linje i HTML

Du kan ställa in en linje med en enkel tagg – hr inom trekantiga parenteser. Det är en förkortning för "Horizontal Rule" och ställer in klassiska externa parametrar. Den skiljer sig från många andra genom att den inte behöver en avslutande tagg och kan existera självständigt. Du kan ändra de yttre egenskaperna för ett element med hjälp av ytterligare värden i taggen:

1. Längd. Om du inte vill att linjens längd ska sträcka sig över hela sidan kan du ställa in önskad storlek i pixlar eller procent. Detta görs med hjälp av tilläggsordet "bredd" i taggen och den numeriska längden som anges efter "="-tecknet inom citattecken.

Det ser ut så här. Till exempel, om vi behöver en längd på 100 pixlar, ställer vi in ​​följande tagg: hr width=”100″

1. Inriktning. Justering är möjlig till vänster eller höger kanter, och även till mitten. Denna egenskap gäller endast om du redan har angett parametern width, eftersom det är omöjligt att justera en linje som sträcker sig över hela sidan. För justering ställer vi in ​​ytterligare ett attribut i taggen "align" och lägger till en riktning till den: center - för central, vänster - för vänster och höger - för högerjustering.

Den färdiga taggen i det här fallet kommer att se ut så här. Till exempel, om vi behöver ställa in mittinriktningen för en horisontell linje 150 pixlar lång, kommer den färdiga taggen att se ut så här: hr align=”center” width=”150″.

Observera att "align", justeringsmåttet, placeras på första plats, även om attributet är beroende av breddmåttet.

1. Bredd. Du kan också välja att ange bredden, skapa en fet eller tunn understrykning. Detta kriterium beror inte på någonting och kan användas som ett oberoende kriterium utan att specificera längd eller anpassning. För det använder vi storleksattributet i taggen och ett numeriskt värde lika med önskad bredd i pixlar. Numret anges inom citattecken efter storleksattributet och symbolen "=".

Således, om vi behöver skapa en linje med en bredd på 15 pixlar, måste vi skapa följande tagg: hr size=”15″.

1. Färg. Den anges också som en oberoende indikator. För att ändra det, använd färgattributet i kombination med namnet på färgen i form av en kod eller på engelska. Färgen anges inom citattecken efter symbolen "=".

Således kan taggen för en vanlig vit linje skrivas på två sätt: hr color=”#FFFFFF” eller hr color=”white”

Svart kan skapas med koden #000000.

1. Lägga undan skugga. Om du behöver ett element som inte innehåller en skugga, bör du använda noshade-attributet i taggen. Den kan användas ensam eller i kombination med andra element. En tagg för en standardlinje som använder den kommer att se ut så här: hr noshade

Skapa en horisontell linje med video

Och om du vill få information i ett mer visuellt format, se följande video, som i detalj beskriver möjligheterna att arbeta med en horisontell linje.

Efter att ha bestämt de nödvändiga dimensionerna för den horisontella linjen kan du designa webbsidorna på ett sådant sätt att informationen är strukturerad och visuellt kompetent. Detta hjälper besökarna att lättare uppfatta informationen som presenteras och gör att din webbplats sticker ut från andra.

Från författaren: Jag hälsar dig. Behovet av att presentera flera block på en webbsida på en rad är en mycket vanlig uppgift som layoutdesigners står inför. Det inträffar under layouten av nästan varje mall, så i alla fall behöver vi alla känna till och tillämpa de grundläggande sätten att ändra beteendet hos block.

Innan vi tittar på de vanligaste teknikerna vill jag komma ihåg lite teori. Webbsideselement är uppdelade i block- och inline-element. Och skillnaden mellan dem är mycket enkel - små bokstäver kan placeras på en rad, men block kan inte. Naturligtvis slutar inte skillnaderna där, men detta är den största skillnaden. Block kan redan ha stoppning upptill och nedtill (små bokstäver har inte), och fler egenskaper kan appliceras på dem.

Grundläggande sätt att rada upp block i CSS

Vi kommer inte att komplicera något, det finns tre huvudsakliga sätt:

Konvertera block till inline-element. I det här fallet går blockegenskaper förlorade, så det här alternativet används nästan aldrig

Gör de nödvändiga elementen block-line. Detta är en speciell typ där elementet behåller sina egenskaper, men samtidigt tillåter andra block att placeras i närheten.

Få element att flyta med hjälp av float-egenskapen.

Låt oss fokusera på dessa alternativ. Vi kommer inte att överväga Flexbox, bordsvisning och andra aspekter. Så låt oss säga att vi har 3 underrubriker.

Rubrik 1

Rubrik 2

Rubrik 3

Naturligtvis måste alla css-egenskaper skrivas i en separat fil (style.css), som måste kopplas till html-dokumentet. I den här filen kommer jag att skriva en minimal stil så att våra underrubriker helt enkelt syns.

h3( bakgrund: #EEDDCD; )

h3 ( bakgrund : #EEDDCD;

Här är de på sidan:

De beter sig som block. Var och en ligger på sin egen linje, det finns indrag mellan dem. Om du vill kan du även ställa in valfri inre stoppning och göra vad du vill.

Låt oss konvertera det till rader och omedelbart lägga till indrag. För att göra detta måste h3-väljaren lägga till följande egenskaper:

display: inline; stoppning: 30px;

Det finns två huvudproblem som uppstår när man använder denna teknik. Den första är den minsta indragningen. Det bildas på grund av det faktum att det i koden finns ett mellanslag mellan blocken, som bildar denna indragning. Om detta problem behöver lösas finns det två huvudalternativ:

I html, placera koden för de nödvändiga blocken på en rad utan mellanslag

Lägg till en negativ marginal till höger om -4 pixlar. Så mycket tar ett utrymme.

Det andra problemet är att om elementen har olika höjd kan visningsproblem uppstå. I allmänhet är det bästa alternativet flytande block. Istället för display: inline-block skriver vi detta:

Block i en linje med hjälp av ramverket

Jag ska genast säga att om du ska använda något normalt CSS-ramverk (till exempel Bootstrap), så är allt fortfarande mycket enklare. All CSS-kod som ansvarar för att arrangera elementen har redan skrivits och allt du behöver göra är att ställa in rätt klasser. För att göra detta, lär dig bara rutnätssystemet, så kommer du att kunna göra flerkolumnsresponsiva mallar utan större svårighet. Det blir åtminstone mycket lättare än att skriva css från grunden.

En annan utmaning med att skriva kod från grunden kommer när du behöver responsiv design. Naturligtvis kan du implementera det själv genom att äga mediefrågor, men det blir mycket svårare om du har en komplex mall.

Till exempel när du ska ha 4 kolumner på stora skärmar, 3 på medelstora skärmar och 2 på mobiltelefoner.Med hjälp av ramverk som Bootstrap, eller snarare med hjälp av dess rutnät, kan implementeringen av detta ta bara några minuter .

När jag smidigt översätter ämnet till Bootstrap-ramverket, kommer jag återigen att notera att om du står inför uppgiften att lägga ut en komplex adaptiv mall, så är det helt enkelt synd att inte använda rutnätet. För att göra detta behöver du inte ens ansluta den fullständiga versionen av ramverket - du kan anpassa det och stanna där bara vad du verkligen behöver.

Du kan lära dig hur du arbetar med ramverket med hjälp av . Teorin förklaras där, men viktigast av allt, det finns praktik. Du kommer att skapa 3 adaptiva mallar och få en utmärkt upplevelse som gör att du kan designa webbplatser på beställning eller för dig själv. Och om du vill bekanta dig med fördelarna och funktionerna i ramverket gratis, föreslår jag att du tittar igenom vår serie med artiklar om Bootstrap, såväl som om enkel layoutdesign. Jag önskar dig framgång med layout och webbplatsbyggande i allmänhet.

För att betona några särskilt viktiga delar av webbplatsen, skulle det inte skada att använda alla typer av CSS-stilar och egenskaper som tillhandahålls för detta. Naturligtvis behöver du inte oroa dig för mycket över texten och markera den, till exempel i fetstil eller kursiv stil, ändra bakgrund eller skapa en ram runt texten. Men en av de presenterade metoderna är inte alltid lämplig. Låt oss säga att du har en text som måste delas upp på grund av detaljerna i dess semantiska belastning. Det är här HTML- och CSS-egenskaperna kommer till undsättning.

Hur man gör en rad i text med CSS

För att genomföra våra planer måste vi kontakta style.css-filen, efter att ha skrivit i den motsvarande egenskapen gräns. Detta gör att en rad visas ovanför, under eller på en specifik sida av texten. I sin tur finns det flera egenskaper som ansvarar för att visa raden, nämligen:

- border-top– en horisontell linje ovanför texten.

- gräns-höger– en vertikal linje till höger om texten;

- gräns-botten– en horisontell linje under texten.

- gräns-vänster– vertikal linje placerad till vänster.

Hur man gör en rad i html

Med hjälp av CSS-egenskaper kan du ange alla nödvändiga värden genom att redigera HTML-koden. För att göra detta måste du gå till den administrativa delen av webbplatsen. Välj ett av de publicerade materialen, växla textredigeraren till HTML-kodredigeringsläge och ange CSS-egenskaper. Ett prov kan ses nedan.

Kort beskrivning av kommandon

- bredd– linjelängd;

- fast- solid linje;

- prickad- prickad linje.

För en djupare förståelse av stilar rekommenderar jag att du läser den här.

Det är nödvändigt att förstå att i processen att göra ändringar i webbplatskoden listas egenskaperna som bestämmer typen av linje, dess tjocklek och färg separerade med ett mellanslag.

Denna metod har flera fördelar:

Ett brett utbud av möjligheter med vilka du kan göra nästan vilken linje som helst.

Enkelt att göra alla nödvändiga ändringar direkt i HTML-koden. Detta förenklar uppgiften avsevärt för oerfarna webbplatsbyggare.

Hur man gör en rak horisontell linje med en HTML-tagg

---

Det första jag skulle vilja fästa er uppmärksamhet på är att denna tagg, trots alla finesser och principer i html, inte har en avslutande tagg. Den kan användas var som helst i html-koden, mellan taggar Och.

Tag attribut

---

- bredd– ansvarar för linans längd. Kan anges antingen som procent eller i pixlar.

- storlek– linjetjocklek. Anges i pixlar.

- Färg– definierar färgen på linjen.

- justera– ett attribut som ansvarar för linjeanpassning. I sin tur relaterar teamet till honom.

Uppgift

Gör en horisontell linje på sidan.

Lösning

Horisontella linjer är bra för att skilja ett textblock från ett annat. Liten text med horisontella linjer upptill och nedtill drar till sig mer läsarens uppmärksamhet än vanlig text.

Använda en tagg

---

du kan rita en horisontell linje, vars utseende beror på de attribut som används, såväl som webbläsaren. Taggen hänvisar till blockelement, så raden börjar alltid på en ny rad, och efter den visas alla element på nästa rad. Tack vare de många taggattributen

---

raden som skapas genom denna tagg är lätt att hantera. Om du också ansluter kraften i stilar blir det en enkel uppgift att lägga till en rad i ett dokument.

Standardrad

---

visas i grå färg och med volymeffekt. Denna typ av linje passar inte alltid webbplatsens design, så utvecklarnas önskan att ändra färgen och andra parametrar på linjen genom stilar är förståelig. Men webbläsare har blandade tillvägagångssätt för detta problem, vilket är anledningen till att du måste använda flera stilegenskaper samtidigt. I synnerhet använder äldre versioner av Internet Explorer egenskapen color för linjefärg, medan andra webbläsare använder bakgrundsfärg . Men det är inte allt, du måste ange linjetjockleken (höjdegenskapen) så att den inte är noll och ta bort ramen runt linjen genom att ställa in gränsegenskapen till ingen. Genom att sätta ihop alla egenskaper för hr-väljaren får vi en universell lösning för populära webbläsare (exempel 1).

Exempel 1: Horisontell linje

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Textsträng

---

Resultatet av detta exempel visas i fig. 1.

Ris. 1. Färgad horisontell linje