I utgangspunktet brukes horisontale linjer til å dekorere HTML-sidene på nettstedet, noe som gir dem et mer attraktivt utseende. Men de kan også visuelt avgrense informasjonen til nærliggende seksjoner, og legge til bekvemmelighet for leserne når de studerer den. Generelt tegner du horisontale linjer der du trenger det, det er alt.
Hvordan tegner jeg en horisontal linje?
Det er en spesiell tag for å tegne horisontale linjer i HTML
... Dessuten er han det blokkere tag, det vil si at den lager linjeskift før og etter seg selv, slik at linjen alltid hentes på en egen linje. Følgelig kan det bare spesifiseres i tagger som for eksempel kan inneholde blokkelementer eller
... Men meg selv
kan ikke ha innhold, siden den rett og slett ikke har en sluttkode, det vil si at den er tom.Et eksempel på å tegne horisontale linjer i HTML
Tegn horisontale linjer
Avsnitt.
Avsnitt.
Avsnitt.
Resultat i nettleseren
Avsnitt.
Avsnitt.
Avsnitt.
Som du kan se, er linjene veldig tynne, ubeskrivelige og trukket til full tilgjengelig bredde, så nå skal vi lære hvordan du endrer dem for å få dem til å se mer attraktive ut.
Hvordan endrer jeg farge, tykkelse og bredde på horisontale linjer?
I eldre versjoner av HTML er taggen
det var spesielle attributter som det var mulig å endre farge, tykkelse og bredde på horisontale linjer med. Disse er henholdsvis farge, størrelse og bredde. Men i nyere versjoner har de blitt droppet til fordel for Cascading Style Sheets (CSS), så du gjettet riktig, vi kommer til å bruke favorittstilattributtet vårt igjen. Den generelle syntaksen er:
style = "bakgrunn: farge">- linjefarge (eller rettere sagt bakgrunnen).
style = "høyde: størrelse">- linjetykkelse.
style = "bredde: størrelse">- linje bredde.
stil = "bakgrunn: farge; høyde: størrelse; bredde: størrelse"> - men du kan spesifisere alle parameterne samtidig, bare ikke glem semikolonet (;).En farge kan spesifiseres med navnet på engelsk eller med HEX-koden til fargen, etterfulgt av en hash (#). Vel, du vet allerede om dette fra leksjonen av endre fargen på teksten og bakgrunnen.
Men vi vil snakke om å endre størrelse mer detaljert. Husker du fra veiledning for å endre fonter, det er omtrent ti enheter i CSS, men linje bredde kan spesifiseres kun i piksler (px) og prosenter (%), og tykkelse vanligvis bare i piksler. Hvis du leverer andre enheter, vil ikke dette være en feil, men nettlesere vil ganske enkelt ignorere dem.
Hvis du angir dimensjoner i piksler, vil tykkelsen og bredden på linjen avhenge av oppløsningen til skjermen som nettstedet ditt vises på (jo høyere skjermoppløsning, desto tynnere og smalere er linjen).
Som sagt er det kun linjebredden som kan angis i prosent. Prosentstørrelser avhenger alltid av og beregnes basert på størrelsen på det overordnede beholderelementet, der taggen er plassert
... I dette tilfellet tas størrelsen på forelderen til 100 %. For eksempel hvis vi plasserer taggen
style = "bredde: 50%"> innvendig element, så uansett hvordan vi endrer størrelsen på nettleservinduet eller skjermoppløsningen - vil linjebredden alltid være halvparten av blokkens bredde.Et eksempel på endring av farge, tykkelse og bredde på horisontale linjer.
Endre farge, tykkelse og bredde på de horisontale linjene.
Resultat i nettleseren
Endre plasseringen av horisontale linjer
Når du endrer bredden på en horisontal linje, blir det godt synlig at nettlesere alltid plasserer den i midten. Hvis du vil endre posisjonen, er det bare å bruke innsiden
juster attributtet med følgende verdier:
- senter- linjen er midtstilt (standardverdi).
- venstre- presset mot venstre kant.
- Ikke sant- presset mot høyre kant.
Et eksempel på justering av horisontale linjer.
Endre plasseringen av de horisontale linjene.
Resultat i nettleseren
Hvordan fjerner jeg kanten rundt linjen?
Ta en titt på det aller første eksemplet av denne opplæringen. Hvilken farge tror du disse linjene har? Og her er det feil. De er gjennomsiktige, som alle sideelementer som ikke har en bakgrunnsfarge! Tro meg ikke? Ta så en titt på et eksempel hvor vi endret fargen på linjene. For den aller første satte vi ikke fargen, men økte bare størrelsen og er ikke denne linjen gjennomsiktig? Så det!
Jeg skal forklare nå. Som standard tegner nettlesere rammer rundt linjer, som skaper en tredimensjonal effekt. Så når vi ikke øker tykkelsen på de horisontale linjene, viser nettlesere oss bare disse rammene, siden tykkelsen på selve linjen er 0px.
For å fjerne grensen rundt linjen, som ofte bare ødelegger utseendet, vil vi bruke stilattributtet på nytt. Og det er skrevet slik:
Hjemmelekser.
- Lag artikkel-, seksjons- og underseksjonsoverskrifter. Sentrer dem alle.
- Sett hele siden til Arial og Courier for overskrifter.
- La skriftstørrelsen for hele siden være 85 % av nettleserens standardstørrelse. Og titler har henholdsvis 145 %, 125 % og 110 % av skriftstørrelsen på siden.
- Skriv et avsnitt under den første overskriften, et langt sitat under den andre og et dikt under den tredje. Og la diktet være sentrert på siden.
- Sett tre ord med fet skrift i sitatet ditt.
- Under overskriften til artikkelen tegner du en rød horisontal linje med tre piksler over hele sidens bredde.
- På toppen og bunnen av diktet tegner du en piksel svarte linjer. La bredden på den øverste linjen være omtrent lik bredden på verset, og den nederste linjen halvparten så mye.
- Fjern unødvendige rammer fra linjene.
For å understreke noen spesielt viktige elementer på nettstedet, ville det ikke skade å bruke alle slags CSS-stiler og egenskaper som er gitt for dette. Du trenger selvfølgelig ikke bry deg for mye med teksten og fremheve den, for eksempel med fet skrift eller kursiv, endre bakgrunn eller lage en ramme rundt teksten. Men ikke alltid en av de presenterte metodene er egnet. La oss si at du har en tekst som må skilles på grunn av dens semantiske belastning. Det er her HTML- og CSS-egenskaper kommer inn.
Hvordan lage en linje i teksten ved hjelp av CSS
For å gjennomføre planene våre må vi henvise til style.css-filen ved å skrive den tilsvarende egenskapen i den grense... Dette vil lage en linje over, under eller på en bestemt side av teksten. I sin tur er det flere egenskaper som er ansvarlige for å vise linjen, nemlig:
- border-top- en horisontal linje over teksten;
- grense-høyre- en vertikal linje til høyre for teksten;
- grense-bunn- en horisontal linje under teksten;
- grense-venstre- den vertikale linjen til venstre.
Hvordan lage en linje i html
Ved å bruke CSS-egenskapene kan du skrive alle nødvendige verdier ved å redigere HTML-koden. For å gjøre dette, må du gå til den administrative delen av nettstedet. Velg et av de publiserte materialene, bytt tekstredigering til HTML-koderedigeringsmodus og legg til CSS-egenskaper. Et eksempel kan sees nedenfor.
Hvordan lager jeg en prikket eller rett linje?
Ved å foreskrive disse egenskapene vil du kunne understreke viktigheten av materialet, avsnittet eller overskriften som presenteres?
Kort forklaring av kommandoer
- bredde- linjelengde;
- fast- solid linje;
- prikkete- stiplet linje.
For en dypere kjennskap til stilene anbefaler jeg å lese denne.
Du må forstå at i prosessen med å gjøre endringer i nettstedskoden, er egenskapene som bestemmer linjetypen, tykkelsen og fargen oppført atskilt med et mellomrom.
Denne metoden har flere fordeler:
Et bredt spekter av muligheter som du kan lage nesten hvilken som helst linje med.
Enkelt å gjøre alle nødvendige endringer direkte i HTML-koden. Dette forenkler oppgaven betraktelig for uerfarne nettstedbyggere.
Hvordan lage en rett horisontal linje ved hjelp av HTML-tag
Det første jeg vil gjøre oppmerksom på er at denne taggen, til tross for alle finesser og prinsipper i html, ikke har en avsluttende tag. Den kan brukes hvor som helst i html-koden, mellom tagger
og
.Tag-attributter
- bredde- er ansvarlig for lengden på linjen. Kan spesifiseres både i prosent og i piksler.
- størrelse- linjetykkelse. Spesifisert i piksler.
- farge- definerer fargen på linjen.
- tilpasse- attributt ansvarlig for linjejustering. På sin side viser laget til det.
Oppgave
Lag en horisontal linje på siden.
Løsning
Horisontale linjer er gode for å skille en tekstblokk fra en annen. Liten tekst med horisontale linjer øverst og nederst trekker mer oppmerksomhet til leseren enn vanlig tekst.
Ved hjelp av taggen
du kan tegne en horisontal linje, hvis utseende avhenger av attributtene som brukes, så vel som nettleseren. Taggen refererer til blokkelementer, så linjen starter alltid på en ny linje, og etter det vises alle elementene på neste linje. Takket være de mange egenskapene til taggen
linjen opprettet gjennom denne taggen er lett å manipulere. Kombinert med kraften i stiler, blir det en lek å legge til en linje i dokumentet.Standardlinje
vises i grått og med volumeffekt. Denne typen linje passer ikke alltid til nettstedets design, så utviklernes ønske om å endre fargen og andre parametere på linjen gjennom stiler er forståelig. Nettlesere er imidlertid tvetydige om dette problemet, og det er derfor du må bruke flere stilegenskaper samtidig. Spesielt eldre versjoner av Internet Explorer bruker fargeegenskapen for linjefarge, mens andre nettlesere bruker bakgrunnsfarge. Men det er ikke alt, i dette tilfellet, sørg for å spesifisere en linjetykkelse (høydeegenskap) annet enn null og fjern grensen rundt linjen ved å sette kantegenskapen til ingen. Ved å sette sammen alle egenskapene for hr-velgeren får vi en universalløsning for populære nettlesere (eksempel 1).Eksempel 1. Horisontal linje
HTML5 CSS 2.1 IE Cr Op Sa Fx
Horisontal linjefarge
Tekststreng
Resultatet av dette eksemplet er vist i fig. 1.
Ris. 1. Farget horisontal linje
Når du oppretter en HTML-side, spiller layout en viktig rolle. Spesielt når vi snakker om ulike symboler og dekorativ design: disse små tingene bidrar til å gjøre "språket" på siden din mer tilgjengelig og tydelig, dessuten endrer de oppfatningen og utseendet generelt. Et av de viktigste elementene for design er en horisontal linje, og videre vil vi lære mer detaljert hvordan du jobber med den og hvordan du lager en horisontal linje i html.
Hva er en horisontal linje og hva er den for
En horisontal linje i html er et sidedesignelement som utfører en rekke funksjoner:
- Dekorativt... Bidrar til å legge til attraktivitet til siden.
- Deling... Fremmer effektiv separering av informasjon av ulik betydning.
- Fremheve eller understreke... Henleder oppmerksomheten til sidegjestene på den nødvendige og viktigste informasjonen.
Det er den horisontale linjen som anses som den rimeligste måten å implementere en rekke funksjoner på. Det er veldig enkelt å lage det, men utad ser det veldig lønnsomt ut. Ved enkle endringer i html-koden kan du justere:
- lengde;
- bredde;
- fargeegenskaper;
- innretting til den ene eller andre kanten.
Merk at den horisontale linjen refererer til blokkelementer. Dette betyr at den opptar en ny linje på siden, og teksten etter den vil gå under.
Hvordan lage en horisontal linje i HTML
Du kan sette en linje ved å bruke en enkel tag - hr i trekantparenteser. Det er en forkortelse for "Horisontal Rule" og definerer de klassiske eksterne parameterne. Den skiller seg fra mange andre ved at den ikke trenger en sluttbrikke og kan eksistere på egenhånd. Du kan endre de ytre egenskapene til et element ved å bruke tilleggsverdier i taggen:
- Lengde... Hvis du ikke vil at lengden på linjen skal strekke seg over hele siden, kan du angi ønsket størrelse i piksler eller prosent. Dette gjøres ved hjelp av et ekstra ord "bredde" i taggen og en numerisk lengdeindikator spesifisert etter "="-logget i anførselstegn.
Det ser slik ut. For eksempel, hvis vi vil ha en lengde på 100 piksler, vil vi sette en tag slik: hr width = "100"
- Justering... Justering er mulig på venstre eller høyre kant, og også i midten. Denne funksjonen er bare gyldig hvis du allerede har spesifisert breddeparameteren, siden en helsideslinje ikke kan justeres. For justering, sett et ekstra attributt i "align"-taggen og legg til en retning til den: senter - for midten, venstre - for venstre og høyre - for høyre justering.
Den ferdige taggen i dette tilfellet vil se slik ut. For eksempel, hvis vi trenger å sette senterjusteringen for en horisontal linje med en lengde på 150 piksler, vil den ferdige taggen se slik ut: hr align = "center" width = "150".
Merk at "align", målet for justering, settes i posisjon 1, selv om attributtet er avhengig av lengdemålets bredde.
- Bredde... Eventuelt kan du også spesifisere bredden, lage en fet eller tynn understreking. Dette kriteriet er ikke avhengig av noe og kan brukes uavhengig uten å spesifisere lengden eller justeringen. For det bruker vi størrelsesattributtet i taggen og en numerisk verdi lik ønsket bredde i piksler. Tallet er angitt i anførselstegn etter størrelsesattributtet og "="-symbolet.
Derfor, hvis vi trenger å lage en linje 15 piksler bred, må vi lage følgende tag: hr size = "15".
- Farge... Den er også satt som en uavhengig indikator. For å endre det, bruk fargeattributtet i kombinasjon med fargenavnet i form av en kode eller på engelsk. Fargen er angitt i anførselstegn etter "="-symbolet.
Dermed kan koden for en standard hvit linje skrives på to måter: hr farge = "#FFFFF" eller hr farge = "hvit"
Svart kan lages ved å bruke kode # 000000.
- Legge vekk skygge... Hvis du trenger et element som ikke inneholder en skygge, bør noshade-attributtet brukes i taggen. Den kan brukes alene eller i kombinasjon med andre elementer. En tag for en standardlinje som bruker den, vil se slik ut: hr noshade
Lag en horisontal linje ved hjelp av video
Og hvis du ønsker å få informasjon i et mer visuelt format, kan du se neste video, som i detalj beskriver mulighetene for å jobbe med en horisontal linje.
Etter å ha bestemt de nødvendige dimensjonene til den horisontale linjen, kan du designe sidesidene på en slik måte at informasjonen er strukturert og visuelt kompetent innrammet. Dette hjelper besøkende til å lettere oppfatte informasjonen som presenteres og få nettstedet ditt til å skille seg ut fra andre.
Det ser ut til, hvorfor trenger du fire metoder? Tross alt bruker nesten hver person en metode han er vant til. For eksempel, jeg trykket Shift og "dash"-tasten flere ganger, og det er resultatet av en horisontal linje.
Men hva om dette resulterer i en stiplet linje, men du trenger en solid en?
- Mest sannsynlig er Shift-tasten på tastaturet feil. Andre metoder vil komme til unnsetning her.Den kanskje vanligste måten å lage en linje på i Word er å bruke et par taster på tastaturet.
I Tynn, tykk, dobbel, stiplet linje etter tastatur
Nedenfor er et bilde av et tastatur med engelsk, men uten russisk layout, men det spiller ingen rolle, fordi vi bare er interessert i tre taster: Shift, dash og Enter.
Ris. 1. Tre taster på tastaturet: Shift, bindestrek og Enter for en kontinuerlig horisontal linje i Word
Med disse tre tastene kan du tegne en kontinuerlig horisontal linje i Word: stiplet eller solid, tynn eller tykk, lang eller kort.
1) Når du trykker på "-" (bindestrek)-tasten flere ganger i Word-editoren, får vi en stiplet linje av vilkårlig lengde.
Å gjøre tynn en lang linje over hele bredden av siden:
- Vi finner på tastaturet "dash"-tasten (til høyre for "null"-tasten, i den grønne rammen i fig. 1).
- Med en ny (!) linje i Word, trykk denne tasten flere ganger: -
- Og trykk deretter på "Enter" ()-tasten. Flere streker som har blitt skrevet ut vil plutselig bli til en kontinuerlig, horisontal, tynn linje over hele sidens bredde.
2) Når Shift og "-" (strek) trykkes samtidig, skrives IKKE en strek, men en understreking _________. Dermed kan du lage en sammenhengende linje med vilkårlig lengde hvor som helst i dokumentet.
Ris. 2. Tynn og tykk horisontal linje i Word
Nå skriver vi ut tykk en horisontal linje over hele bredden av siden:
- Igjen finner vi den samme "dash"-tasten, så vel som Shift-tasten (venstre eller høyre, som du vil). Trykk på Shift, hold inne og ikke slipp.
- Og nå med en ny (!) linje flere ganger (for eksempel 3-4 ganger) trykk på streken (uten å slippe Shift): ___. Slipp Shift.
- Trykk nå på Enter-tasten. Du vil se en tykk horisontal heltrukket linje.
Horisontal tynn, tykk, stiplet og dobbel linje i Word ved hjelp av tastatur
II Linje i Word ved hjelp av en tabell
En horisontal linje kan oppnås ved å bruke en tabell med én celle (1 × 1), der bare den øvre eller nedre kanten er farget (vil være synlig), og de tre andre sidene av tabellen har ufargede kanter (de vil være usynlig).
Vi setter markøren på stedet der linjen skal være. I toppmenyen i Word klikker du:
- Sett inn (1 i fig. 3),
- Tabell (2 i fig. 3),
- En celle (3 i fig. 3).
Ris. 3. Slik setter du inn en 1x1-tabell i Word (fra én celle)
Resultatet vil være en tabell med én stor celle (1x1):
Det gjenstår å fjerne grenser fra tre sider i 1x1-bordet. For dette
- gå til "Hjem"-fanen (1 i fig. 4),
- så ved siden av "Skrift" finner vi "Avsnitt" og kantlinjer (2 i fig. 4),
- fjern alle grenser ved å klikke på "Ingen kant" (3 i fig. 4),
- velg "Upper kant" eller "Nedre kant" (4 i fig. 4).
Ris. 4. Hvordan fjerne utvalget av kantlinjer i Word-tabellen (gjør kantlinjene usynlige)
Jeg demonstrerer dette tydelig i videoen (på slutten av artikkelen).
Forresten, i fig. 3 viser at det er en enklere måte. Du kan sette markøren på begynnelsen av linjen i Word og klikke på "Horisontal Line" (5 i fig. 4):
III Linje i Word ved tegning
Sett inn (1 i fig. 5) - Former (2 i fig. 5) er en annen måte å få en horisontal linje i Word.
For å holde linjen strengt horisontal, hold nede Shift-tasten og tegn linjen samtidig.
Ris. 5. Hvordan tegne en linje i Word
IV-linje i Word ved hjelp av skjermtastaturet
For Windows 10 kan du også finne skjermtastaturet ved å skrive "skjermtastatur" i søkefeltet.
Ris. 6. Skjermtastatur
Vi vil lage en horisontal linje på samme måte som i den første versjonen med et vanlig tastatur. På skjermtastaturet trenger du tre knapper: bindestrek, Shift og Enter.
1 Stryk og Enter
Fra en ny linje i Word klikker du flere ganger på streken (1 i fig. 6) og trykker Enter. Dette vil skape en tynn horisontal linje.
2 Shift, Dash og Enter
Fra en ny linje i Word, klikk først Shift (2 i fig. 6), deretter Dash (1 i fig. 6). Resultatet er en understreking. Så vi gjentar 2 ganger til, og trykk deretter Enter. Som et resultat vil vi se en tykk horisontal linje.
