I grund och botten används horisontella linjer för att dekorera HTML-sidorna på webbplatsen, vilket ger dem ett mer attraktivt utseende. Men de kan också visuellt avgränsa informationen från angränsande sektioner, vilket gör det lättare för läsarna när de studerar den. I allmänhet, rita horisontella linjer där du behöver, det är allt.
Hur ritar jag en horisontell linje?
Det finns en speciell tagg för att rita horisontella linjer i HTML
... Dessutom är han det blockera taggen, det vill säga den skapar radbrytningar före och efter sig själv, så linjen erhålls alltid på en separat rad. Följaktligen kan det endast anges inuti taggar som kan innehålla blockelement, till exempel eller
... Men jag själv
kan inte ha innehåll, eftersom den helt enkelt inte har en sluttagg, det vill säga den är tom.Ett exempel på att rita horisontella linjer i HTML
Rita horisontella linjer
Paragraf.
Paragraf.
Paragraf.
Resultat i webbläsaren
Paragraf.
Paragraf.
Paragraf.
Som du kan se är linjerna väldigt tunna, obeskrivliga och dragna till den fulla tillgängliga bredden, så nu ska vi lära oss hur man ändrar dem för att få dem att se mer attraktiva ut.
Hur ändrar jag färg, tjocklek och bredd på horisontella linjer?
I äldre versioner av HTML, taggen
det fanns speciella attribut med vilka det var möjligt att ändra färg, tjocklek och bredd på horisontella linjer. Dessa är färg, storlek respektive bredd. Men i nyare versioner har de förkastats till förmån för Cascading Style Sheets (CSS), så, du gissade rätt, vi kommer att använda vårt favoritstilsattribut igen. Den allmänna syntaxen är:
style = "bakgrund: färg">- linjefärg (eller snarare dess bakgrund).
style = "höjd: storlek">- linjetjocklek.
style = "width: size">- linjebredd.
stil = "bakgrund: färg; höjd: storlek; bredd: storlek"> - men du kan ange alla parametrar på en gång, glöm bara inte semikolonet (;).En färg kan anges med sitt namn på engelska eller med färgens HEX-kod, föregås av en hash (#). Tja, du vet redan om detta från lektionen och framåt ändra färgen på texten och bakgrunden.
Men vi kommer att prata om storleksändring mer i detalj. Kommer du ihåg från handledning om att ändra teckensnitt, det finns ungefär tio enheter i CSS, men linjebredd kan endast anges i pixlar (px) och procentsatser (%), och tjocklek i allmänhet endast i pixlar. Om du tillhandahåller andra enheter kommer detta inte att vara ett fel, utan webbläsare kommer helt enkelt att ignorera dem.
Om du anger dimensioner i pixlar kommer linjens tjocklek och bredd att bero på upplösningen på skärmen som din webbplats visas på (ju högre skärmupplösning, desto tunnare och smalare linjen).
Som sagt, endast linjebredden kan anges i procent. Procentuella storlekar beror alltid på och beräknas utifrån storleken på det överordnade behållarelementet i vilket taggen är placerad
... I det här fallet tas förälderns storlek till 100 %. Till exempel om vi placerar taggen
style = "bredd: 50%"> inre element, oavsett hur vi ändrar storlek på webbläsarfönstret eller bildskärmens upplösning - radbredden kommer alltid att vara hälften av blockets bredd.Ett exempel på att ändra färg, tjocklek och bredd på horisontella linjer.
Ändra färg, tjocklek och bredd på de horisontella linjerna.
Resultat i webbläsaren
Ändra placeringen av horisontella linjer
När du ändrar bredden på en horisontell linje blir det tydligt att webbläsare alltid placerar den i mitten. Om du vill ändra dess position, använd bara inuti
justera attribut med följande värden:
- Centrum- linjen är centrerad (standardvärde).
- vänster- tryckt mot vänster kant.
- höger- tryckt mot högerkanten.
Ett exempel på att rikta in horisontella linjer.
Ändra placeringen av de horisontella linjerna.
Resultat i webbläsaren
Hur tar jag bort gränsen runt linjen?
Ta en titt på det allra första exemplet av denna handledning. Vilken färg tror du att dessa linjer har? Och här är det fel. De är genomskinliga, som alla sidelement som inte har en bakgrundsfärg! Tro mig inte? Ta sedan en titt på ett exempel där vi ändrade färgen på linjerna. För den allra första satte vi inte färgen, utan ökade bara storleken och är inte denna linje genomskinlig? Så att!
Jag ska förklara nu. Som standard ritar webbläsare gränser runt linjer, vilket skapar en tredimensionell effekt. Så när vi inte ökar tjockleken på de horisontella linjerna visar webbläsare oss bara dessa ramar, eftersom tjockleken på själva linjen är 0px.
För att ta bort gränsen runt linjen, som ofta bara förstör utseendet, kommer vi att använda stilattributet igen. Och det är skrivet så här:
Läxa.
- Skapa artikel-, avsnitts- och underavsnittsrubriker. Centrera dem alla.
- Ställ in hela sidan på Arial och Courier för rubriker.
- Låt teckenstorleken på hela sidan vara 85 % av webbläsarens standardstorlek. Och titlar har 145 %, 125 % respektive 110 % av teckenstorleken på sidan.
- Skriv ett stycke under den första rubriken, ett långt citat under den andra och en dikt under den tredje. Och låt dikten vara centrerad på sidan.
- Markera tre ord i fet stil i ditt citat.
- Under rubriken på artikeln ritar du en tre pixlar röd horisontell linje över hela sidans bredd.
- Rita en pixel svarta streck längst upp och längst ner i dikten. Låt den övre radens bredd vara ungefär lika med versens bredd och den nedersta raden hälften så mycket.
- Ta bort onödiga ramar från linjerna.
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. Självklart behöver du inte krångla till texten och markera den, till exempel i fetstil eller kursiv stil, ändra bakgrund eller göra en ram runt texten. Men inte alltid en av de presenterade metoderna är lämplig. Låt oss säga att du har en text som måste separeras på grund av dess semantiska belastning. Det är här HTML- och CSS-egenskaper kommer in.
Hur man gör en rad i texten med CSS
För att genomföra vår plan måste vi hänvisa till style.css-filen genom att skriva motsvarande egenskap i den gräns... Detta skapar en rad ovanför, under eller på en viss sida av texten. I sin tur finns det flera egenskaper som är ansvariga 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- den vertikala linjen till vänster.
Hur man gör en rad i html
Med hjälp av CSS-egenskaper kan du skriva 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 lägg till CSS-egenskaper. Ett prov kan ses nedan.
Hur gör jag en prickad eller rak linje?
Genom att föreskriva dessa egenskaper kommer du att kunna betona vikten av materialet, stycket eller rubriken som presenteras?
Kort förklaring av kommandon
- bredd- linjelängd;
- fast- solid linje;
- prickad- prickad linje.
För en djupare bekantskap med stilarna rekommenderar jag att läsa 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 linjetypen, 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 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 både i procent och i pixlar.
- storlek- linjetjocklek. Anges i pixlar.
- Färg- definierar färgen på linjen.
- justera- attribut som ansvarar för linjeanpassning. I sin tur hänvisar laget till det.
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 mer uppmärksamhet till läsaren än vanlig text.
Använder taggen
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 det visas alla element på nästa rad. Tack vare taggens många attribut
raden som skapas genom denna tagg är lätt att manipulera. I kombination med kraften i stilar blir det enkelt att lägga till en rad i ditt dokument.Standardrad
visas i grått 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 är tvetydiga om detta problem, vilket är anledningen till att du måste använda flera stilegenskaper samtidigt. I synnerhet äldre versioner av Internet Explorer använder egenskapen color för linjefärg, medan andra webbläsare använder bakgrundsfärg. Men det är inte allt, i det här fallet, se till att ange en linjetjocklek (höjdegenskap) annan än noll och ta bort gränsen 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
Horisontell linjefärg
Textsträng
Resultatet av detta exempel visas i fig. 1.
Ris. 1. Färgad horisontell linje
När du skapar en HTML-sida spelar layout 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, dessutom förändrar de avsevärt dess uppfattning och utseende i allmänhet. En av de viktigaste elementen för design är en horisontell linje, och vidare 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:
- Dekorativ... Hjälper till att lägga till attraktivitet till sidan.
- Dela... Främjar effektiv separering av information som har olika betydelse.
- Betona eller understryka... Uppmärksammar sidans gäster på den nödvändiga och viktigaste informationen.
Det är den horisontella linjen som anses vara det mest prisvärda sättet att implementera ett antal funktioner. Det är väldigt enkelt att skapa det, men utåt ser det väldigt lönsamt ut. Genom enkla ändringar i html-koden kan du reglera:
- längd;
- bredd;
- färgegenskaper;
- inriktning mot den ena eller andra kanten.
Observera att den horisontella linjen hänvisar till blockelement. Det betyder att den upptar en ny rad på sidan, och texten efter den kommer att hamna under.
Hur man skapar en horisontell linje i HTML
Du kan ställa in en linje med en enkel tagg - hr inom triangelparenteser. Det är en förkortning för "Horisontal Rule" och ställer in de klassiska externa parametrarna. Den skiljer sig från många andra genom att den inte behöver en slutbricka och kan existera på egen hand. Du kan ändra de yttre egenskaperna för ett element med hjälp av ytterligare värden i taggen:
- 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 ett extra ord "bredd" i taggen och en numerisk längdindikator som anges efter "="-tecknet i citattecken.
Det ser ut så här. Till exempel, om vi vill ha en längd på 100 pixlar, skulle vi ställa in en tagg så här: hr width = "100 ″
- Inriktning... Justering är möjlig på vänster eller höger kanter, och även i mitten. Den här funktionen är endast giltig om du redan har angett breddparametern, eftersom en helsidesrad inte kan justeras. För justering, ställ in ytterligare ett attribut i "align"-taggen och lägg till en riktning till den: center - för mitten, vänster - för vänster och höger - för höger justering.
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 med en längd på 150 pixlar, kommer den färdiga taggen att se ut så här: hr align = "center" width = "150".
Observera att "align", måttet för inriktning, sätts i position 1, även om attributet är beroende av längdmåttets bredd.
- Bredd... Alternativt kan du också ange bredden, skapa en fet eller tunn understrykning. Detta kriterium beror inte på någonting och kan användas oberoende utan att specificera längden eller justeringen. 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 15 pixlar bred, måste vi skapa följande tagg: hr size = "15".
- Färg... Den är också inställd som en oberoende indikator. För att ändra det, använd färgattributet i kombination med färgnamnet 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 färg = "#FFFFFF" eller hr färg = "vit"
Svart kan skapas med kod # 000000.
- Ställ undan skugga... Om du behöver ett element som inte innehåller en skugga, ska noshade-attributet användas 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 nästa 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 sidorna på webbplatsen på ett sådant sätt att informationen är strukturerad och visuellt kompetent inramad. Detta hjälper besökare att lättare uppfatta informationen som presenteras och få din webbplats att sticka ut från andra.
Det verkar, varför kan du behöva fyra metoder? När allt kommer omkring använder nästan varje person en metod som han är van vid. Till exempel, jag tryckte på Shift och "streck"-tangenten flera gånger, och det är resultatet av en horisontell linje.
Men vad händer om detta resulterar i en prickad linje, men du behöver en heldragen?
- Troligtvis är Shift-tangenten på tangentbordet felaktig. Andra metoder kommer till undsättning här.Det kanske vanligaste sättet att göra en rad i Word är att använda ett par tangenter på tangentbordet.
I Tunn, tjock, dubbel, prickad linje efter tangentbord
Nedan är en ritning av ett tangentbord med en engelsk, men utan rysk layout, men det spelar ingen roll, eftersom vi bara är intresserade av tre tangenter: Shift, bindestreck och Enter.
Ris. 1. Tre tangenter på tangentbordet: Shift, bindestreck och Enter för en kontinuerlig horisontell linje i Word
Med dessa tre tangenter kan du rita en kontinuerlig horisontell linje i Word: prickad eller solid, tunn eller tjock, lång eller kort.
1) När du trycker på tangenten "-" (streck) flera gånger i Word-editorn får vi en prickad linje av valfri längd.
Att göra tunn en lång rad över hela sidans bredd:
- Vi hittar på tangentbordet "dash"-tangenten (till höger om "noll"-tangenten, i den gröna ramen i fig. 1).
- Med en ny (!) rad i Word, tryck på denna tangent flera gånger: -
- Och tryck sedan på "Enter" ()-tangenten. Flera utskrivna streck förvandlas plötsligt till en kontinuerlig, horisontell, tunn linje över hela sidans bredd.
2) När Shift och "-" (streck) trycks ned samtidigt, skrivs INTE ett streck ut, utan en understrykning _________. Således kan du göra en kontinuerlig rad med godtycklig längd var som helst i dokumentet.
Ris. 2. Tunn och tjock horisontell linje i Word
Nu trycker vi tjock en horisontell linje över hela sidans bredd:
- Återigen hittar vi samma "dash"-tangent, såväl som Shift-tangenten (vänster eller höger, som du vill). Tryck på Shift, håll nere och släpp inte taget.
- Och nu med en ny (!) Linje flera gånger (till exempel 3-4 gånger) tryck på strecket (utan att släppa Shift): ___. Släpp Shift.
- Tryck nu på Enter-tangenten. Du kommer att se en tjock horisontell heldragen linje.
Horisontell tunn, tjock, streckad och dubbel linje i Word med hjälp av tangentbordet
II Rad i Word med hjälp av en tabell
En horisontell linje kan erhållas genom att använda en tabell med en cell (1 × 1), där endast den övre eller nedre kanten är färgad (kommer att vara synlig), och de andra tre sidorna av tabellen har ofärgade kanter (de kommer att vara osynlig).
Vi sätter markören på den plats där linjen ska vara. Klicka på den övre menyn i Word:
- Sätt in (1 i fig. 3),
- Tabell (2 i fig. 3),
- En cell (3 i fig. 3).
Ris. 3. Hur man infogar en 1x1-tabell i Word (från en cell)
Resultatet blir en tabell med en stor cell (1x1):
Det återstår att ta bort kanter från tre sidor i 1x1-bordet. För detta
- gå till fliken "Hem" (1 i fig. 4),
- sedan bredvid "Font" hittar vi "Paragraph" och kanter (2 i fig. 4),
- ta bort alla kanter genom att klicka på "Ingen kant" (3 i fig. 4),
- välj "Övre kant" eller "Nedre kant" (4 i Fig. 4).
Ris. 4. Hur man tar bort urvalet av gränser i Word-tabellen (gör gränserna osynliga)
Jag visar detta tydligt i videon (i slutet av artikeln).
Förresten, i fig. 3 visar att det finns ett enklare sätt. Du kan placera markören i början av raden i Word och klicka på "Horisontell linje" (5 i fig. 4):
III Linje i Word genom teckning
Infoga (1 i fig. 5) - Former (2 i fig. 5) är ett annat sätt att få en horisontell linje i Word.
För att hålla linjen strikt horisontell, håll nere Shift-tangenten och rita linjen samtidigt.
Ris. 5. Hur man ritar en linje i Word
IV-rad i Word med tangentbordet på skärmen
För Windows 10 kan du också hitta tangentbordet på skärmen genom att skriva "tangentbord på skärmen" i sökfältet.
Ris. 6. Tangentbord på skärmen
Vi kommer att skapa en horisontell linje på samma sätt som i den första versionen med ett vanligt tangentbord. På tangentbordet på skärmen behöver du tre knappar: bindestreck, Shift och Enter.
1 Dash och Enter
Från en ny rad i Word klickar du flera gånger på bindestrecket (1 i fig. 6) och trycker på Enter. Detta kommer att skapa en tunn horisontell linje.
2 Skift, Dash och Enter
Från en ny rad i Word klickar du först på Shift (2 i fig. 6), sedan på Dash (1 i fig. 6). Resultatet är en understrykning. Så vi upprepar två gånger till och trycker sedan på Enter. Som ett resultat kommer vi att se en tjock horisontell linje.
