Lav en linje i css. Vandrette linjer

Mens du skaber HTML-sider design spiller en væsentlig rolle. Især når vi taler om forskellige symboler og dekorativt design: disse små ting hjælper med at gøre "sproget" på din side mere tilgængeligt og tydeligt, og ændrer også dens opfattelse betydeligt og udseende generelt. Et af de vigtigste elementer for design er den vandrette linje, og så lærer vi mere detaljeret, hvordan man arbejder med den, og hvordan man laver en vandret linje i html.

Hvad er en vandret linje, og hvad er den til?

En vandret linje i html er et sidedesignelement, der udfører en række funktioner:

Dekorative. Hjælper med at tilføje attraktivitet til siden.
Opdeling. Fremmer en effektiv adskillelse af information af forskellig betydning.
Fremhævelse eller fremhævelse. Henleder sidegæsternes opmærksomhed på den nødvendige og vigtigste information.

Det er den vandrette linje, der betragtes som mest på en tilgængelig måde at implementere en række funktioner. Det er meget enkelt at skabe, og udefra ser det meget fordelagtigt ud. Ved simple ændringer af html-koden kan du justere:

længde;
bredde;
farveegenskaber;
justering langs den ene eller den anden kant.

Det er værd at bemærke, at den vandrette linje refererer til blokelementer. Det betyder, at den optager en ny linje på siden, og den tekst, der følger efter den, kommer nedenunder.

Oprettelse af en vandret linje i HTML

Du kan indstille en linje ved hjælp af et simpelt tag – hr i trekantede parenteser. Det er en forkortelse for "Horizontal Rule" og definerer klassikeren eksterne parametre. Den adskiller sig fra mange andre ved, at den ikke behøver et lukkemærke og er i stand til at eksistere selvstændigt. Lave om ydre egenskaber element ved hjælp af yderligere værdier i tagget:

Længde. Hvis du ikke ønsker, at linjens længde skal strække sig over hele siden, så kan du indstille den ønskede størrelse i pixels eller procenter. Dette gøres for at få hjælp ekstra ord"bredde" i tagget og en numerisk længde angivet efter "="-tegn i anførselstegn.

Det ser sådan ud. Hvis vi f.eks. har brug for en længde på 100 pixels, sætter vi følgende tag: hr width=”100″

Justering. Justering er mulig til venstre eller højre kant, og også til midten. Denne egenskab virker kun, hvis du allerede har angivet breddeparameteren, da en linje, der strækker sig over hele siden, ikke kan justeres. Til justering sætter vi en ekstra attribut i "align"-mærket og tilføjer en retning til det: center - for central, venstre - for venstre og højre - for højre justering.

Det færdige tag i dette tilfælde vil se sådan ud. For eksempel, hvis vi skal indstille centerjusteringen for en vandret linje på 150 pixels lang, så vil det færdige tag se sådan ud: hr align=”center” width=”150″.

Bemærk, at "align", alignment-metrikken, placeres på 1. pladsen, selvom attributten er afhængig af width-metrikken.

Bredde. Du kan også vælge at angive bredden ved at skabe en fed eller tynd understregning. Dette kriterium afhænger ikke af noget og kan bruges som et selvstændigt kriterium uden at specificere længde eller justering. Til det bruger vi størrelsesattributten i tagget og en numerisk værdi svarende til den ønskede bredde i pixels. Nummeret er angivet i anførselstegn efter størrelsesattributten og "=" symbolet.

Derfor, hvis vi skal oprette en linje med en bredde på 15 pixels, skal vi oprette følgende tag: hr size=”15″.

Farve. Den er også angivet som en uafhængig indikator. Brug for at ændre det farveegenskab i kombination med navnet på farven i form af en kode enten på engelsk sprog. Farven er angivet i anførselstegn efter "="-symbolet.

Så mærket for standardlinjen er hvid kan skrives på to måder: hr farve=”#FFFFFF” eller hr farve=”hvid”

Sort kan oprettes ved at bruge koden #000000.

Lægge væk skygge. Hvis du har brug for et element, der ikke indeholder en skygge, så skal du bruge noshade-attributten i tagget. Den kan bruges alene eller i kombination med andre elementer. Et tag for en standardlinje, der bruger det, vil se sådan ud: hr noshade

Oprettelse af en vandret linje ved hjælp af video

Og hvis du ønsker at modtage information i et mere visuelt format, så se den følgende video, som detaljeret beskriver mulighederne for at arbejde med en vandret linje.

Efter at have bestemt de nødvendige dimensioner af den vandrette linje, kan du designe webstedssiderne på en sådan måde, at informationen er struktureret og visuelt kompetent. Dette hjælper besøgende med lettere at opfatte den præsenterede information og får dit websted til at skille sig ud fra andre.

Opgave

Lav en vandret streg på siden.

Løsning

Vandrette linjer er gode til at adskille en tekstblok fra en anden. Lille tekst med vandrette streger foroven og forneden tiltrækker mere læseropmærksomhed end almindelig tekst.

Brug af et tag

du kan tegne en vandret linje, hvis udseende afhænger af de anvendte attributter såvel som browseren. Tagget er et blokelement, så linjen starter altid med ny linje, og efter det vises alle elementer på næste linje. Takket være de mange tag-attributter

linjen oprettet gennem dette tag er nem at administrere. Hvis du også forbinder kraften ved typografier, bliver det en simpel opgave at tilføje en linje til et dokument.

Standard linje

vises grå og med volumeneffekt. Denne type linje passer ikke altid til webstedets design, så udviklernes ønske om at ændre farven og andre parametre på linjen gennem stilarter er forståeligt. Browsere har dog blandede tilgange til dette problem, hvorfor du bliver nødt til at bruge flere stilegenskaber på én gang. Især ældre versioner af browseren Internet Explorer Til linjefarve skal du bruge egenskaben color, og andre browsere bruger baggrundsfarve . Men det er ikke alt, du bør også angive linjetykkelsen ( højde ejendom) ikke nul og fjern grænsen omkring linjen ved at sætte grænseegenskaben til ingen. At sætte alle ejendommene sammen til hr-vælgeren, får vi universal løsning Til populære browsere(eksempel 1).

Eksempel 1: Vandret linje

HTML5 CSS 2.1 IE Cr Op Sa Fx

Vandret linjefarve

Tekststreng

Resultat dette eksempel vist i fig. 1.

Ris. 1. Farvet vandret linje

For at understrege nogle især vigtige elementer websted, ville det ikke skade at bruge alle former for information, der er givet til dette CSS stilarter og ejendomme. Selvfølgelig skal du ikke bøvle for meget med teksten og fremhæve den, f.eks. med fed eller kursiv, ændre baggrunden eller lav en ramme rundt om teksten. Men en af de præsenterede metoder er ikke altid egnet. Lad os sige, at du har en tekst, der skal opdeles på grund af dens semantiske belastning. Det er her de kommer til HTML hjælp og CSS-egenskaber.

Sådan laver du en linje i tekst ved hjælp af CSS

For at implementere vores planer skal vi kontakte style.css-fil, efter at have skrevet den tilsvarende ejendom grænse. Dette vil få en linje til at vises over, under eller på en bestemt side af teksten. Til gengæld er der flere egenskaber, der er ansvarlige for at vise linjen, nemlig:

- border-top– en vandret linje placeret over teksten;

- grænse-højre– en lodret linje placeret til højre for teksten;

- grænse-bund– en vandret linje placeret under teksten;

- grænse-venstre– lodret linje placeret til venstre.

Sådan laver du en linje i html

Ved brug af CSS-egenskaber du kan indtaste alle de nødvendige værdier ved at redigere HTML-koden. For at gøre dette skal du gå til den administrative del af webstedet. Vælg et af de offentliggjorte materialer, skift tekst editor ind i HTML-koderedigeringstilstand og tilføje CSS-egenskaber. Et eksempel kan ses nedenfor.

Hvordan laver man en stiplet eller lige linje?

Ved at specificere disse egenskaber, vil du være i stand til at understrege vigtigheden af det materiale, der præsenteres, afsnit eller overskrift?

Kort beskrivelse af kommandoer

- bredde– linjelængde;

- solid- solid linje;

- prikket- stiplede linje.

For en dybere forståelse af stilarter anbefaler jeg at læse denne.

Det er nødvendigt at forstå, at i processen med at foretage ændringer i webstedskoden, er egenskaberne, der bestemmer typen af linje, dens tykkelse og farve, opført adskilt af et mellemrum.

Denne metode har flere fordele:

En bred vifte af muligheder, som du kan lave næsten enhver linje med.

Nem at foretage alle nødvendige ændringer direkte til HTML-koden. Dette forenkler i høj grad opgaven for uerfarne webstedsbyggere.

Sådan laver du en lige vandret linje ved hjælp af et HTML-tag

Det første jeg gerne vil henlede din opmærksomhed på er, at dette tag, på trods af alle finesser og principper i html, ikke har et afsluttende tag. Den kan bruges overalt html kode, mellem tags Og.

Tag attributter

- bredde– er ansvarlig for linjens længde. Kan angives enten som en procentdel eller i pixels.

- størrelse– linjetykkelse. Angivet i pixels.

- farve– definerer farven på linjen.

- justere– en egenskab, der er ansvarlig for linjejustering. Til gengæld forholder holdet sig til ham.