Mõnede saidi eriti oluliste elementide rõhutamiseks ei teeks paha kasutada kõikvõimalikke selleks ette nähtud CSS-i stiile ja atribuute. Muidugi ei pea te tekstiga liiga palju vaeva nägema ja seda esile tõstma, näiteks paksus või kaldkirjas, muutke taust või tehke teksti ümber raam. Kuid üks esitatud meetoditest ei ole alati sobiv. Oletame, et teil on tekst, mis tuleb selle semantilise koormuse eripära tõttu jagada. Siin tulevad appi HTML ja CSS omadused.

Kuidas CSS-i abil teksti rida teha

Plaanide elluviimiseks peame ühendust võtma style.css faili, olles sinna kirjutanud vastava omaduse piir. Selle tulemusel ilmub rida teksti kohale, alla või konkreetsele küljele. Rea kuvamise eest vastutavad omakorda mitmed omadused, nimelt:

- piiripealne– horisontaalne joon teksti kohal;

- piir-parem– vertikaalne joon, mis asub tekstist paremal;

- ääris-alumine– teksti all paiknev horisontaaljoon;

- piir-vasak– vasakul asuv vertikaaljoon.

Kuidas teha rida html-is

Kasutades CSS-i omadused HTML-koodi redigeerides saate sisestada kõik vajalikud väärtused. Selleks peate minema saidi haldusosasse. Valige üks avaldatud materjalidest, vahetage tekstiredaktor HTML-koodi redigeerimisrežiimi ja lisage CSS-i atribuudid. Näidist saab näha allpool.

Käskude lühikirjeldus

- laius- joone pikkus;

- tahke- pidev joon;

- täpiline- punktiirjoon.

Stiilide sügavamaks mõistmiseks soovitan seda lugeda.

On vaja mõista, et saidi koodi muutmise protsessis loetletakse atribuudid, mis määravad joone tüübi, selle paksuse ja värvi, eraldatuna tühikuga.

Sellel meetodil on mitmeid eeliseid:

Lai valik võimalusi, mille abil saate teha peaaegu iga joont.

Lihtne teha kõiki vajalikke muudatusi otse HTML-koodis. See lihtsustab kogenematute saidiehitajate ülesannet oluliselt.

Kuidas teha HTML-märgendi abil sirget horisontaaljoont

---

Esimene asi, millele tahaksin teie tähelepanu juhtida, on see, et see silt, hoolimata kõigist peensustest ja html põhimõtted, sulgevat silti pole. Seda saab kasutada kõikjal html kood, siltide vahel Ja

.

Sildi atribuudid

---

- laius– vastutab liini pikkuse eest. Saab määrata kas protsentides või pikslites.

- suurus- joone paksus. Määratud pikslites.

- värvi– määrab joone värvi.

- joondada– joonte joondamise eest vastutav atribuut. Meeskond omakorda on temaga seotud.

Loomise ajal HTML-lehed disain mängib olulist rolli. Eriti kui me räägime erinevatest sümbolitest ja dekoratiivsest kujundusest: need pisiasjad aitavad muuta teie lehe "keele" kättesaadavamaks ja selgemaks ning muudavad oluliselt ka selle taju ja välimusüldiselt. Üks neist olulised elemendid disaini jaoks on horisontaalne joon ja siis õpime üksikasjalikumalt, kuidas sellega töötada ja kuidas html-is horisontaalset joont teha.

Mis on horisontaaljoon ja milleks see on mõeldud?

HTML-i horisontaaljoon on lehe kujunduselement, mis täidab mitmeid funktsioone:

1. Dekoratiivne. Aitab lisada lehele atraktiivsust.
2. Jagamine. Soodustab erineva tähendusega teabe tõhusat eraldamist.
3. Esiletõstmine või rõhutamine. Juhib lehekülaliste tähelepanu vajalikule ja kõige olulisemale teabele.

See on horisontaaljoon, mida peetakse kõige rohkem ligipääsetaval viisil mitmesuguste funktsioonide rakendamiseks. Seda on väga lihtne luua ja väljastpoolt tundub see väga kasulik. Html-koodi lihtsate muudatustega saate kohandada:

• pikkus;
• laius;
• värvi omadused;
• joondus piki üht või teist serva.

Väärib märkimist, et horisontaaljoon viitab ploki elemendid. See tähendab, et see võtab lehel uue rea ja sellele järgnev tekst läheb alla.

Horisontaalse joone loomine HTML-is

Joone saate määrata lihtsa sildi abil – hr kolmnurksulgudes. See on lühend sõnast "horisontaalne reegel" ja määratleb klassika välised parameetrid. See erineb paljudest teistest selle poolest, et ei vaja sulgevat silti ja on võimeline eksisteerima iseseisvalt. Muuda välised omadused element, kasutades märgendis lisaväärtusi:

1. Pikkus. Kui te ei soovi, et rea pikkus ulatuks üle terve lehe, saate määrata soovitud suuruse pikslites või protsentides. Seda tehakse abi saamiseks lisasõna„laius” sildis ja numbriline pikkus, mis on märgitud pärast märgi „=” jutumärkides.

See näeb välja selline. Näiteks kui vajame pikkust 100 pikslit, määrame järgmise sildi: hr width=”100″

1. Joondamine. Joondamine on võimalik vasakule või paremale servale ning ka keskele. See omadus kehtib ainult siis, kui olete juba määranud laiuse parameeter, kuna joont, mis katab tervet lehte, ei saa joondada. Joondamiseks määrame sildil "joondamine" täiendava atribuudi ja lisame sellele suuna: keskele - keskele, vasakule - vasakule ja paremale - paremale joondamiseks.

Valmis silt näeb sel juhul välja selline. Näiteks kui peame määrama keskjoonduse jaoks horisontaaljoon 150 pikslit pikk, siis näeb valmis silt välja selline: hr align=”center” width=”150″.

Pange tähele, et joondusmõõdik "joondus" asetatakse 1. kohale, kuigi atribuut sõltub laiuse mõõdikust.

1. Laius. Samuti saate määrata laiuse, luues paksu või õhukese allajoone. See kriteerium ei sõltu millestki ja seda saab kasutada iseseisva kriteeriumina ilma pikkust või joondust määramata. Selle jaoks kasutame märgendis atribuuti size ja soovitud laiusega pikslites võrdne arvväärtus. Number on märgitud jutumärkides suuruse atribuudi ja sümboli “=” järel.

Seega, kui peame looma 15 piksli laiuse joone, peame looma järgmise sildi: hr size=”15″.

1. Värv. See on määratletud ka sõltumatu näitajana. Selle muutmiseks kasutage värvi atribuut kombinatsioonis värvi nimetusega koodi kujul kas sisse inglise keel. Värv on märgitud jutumärkides pärast sümbolit “=”.

Nii et standardrea silt on valge saab kirjutada kahel viisil: hr color=”#FFFFFF” või hr color=”white”

Musta värvi saab luua koodi #000000 abil.

1. Pane ära vari. Kui vajate elementi, mis ei sisalda varju, peaksite kasutama sildis atribuuti noshade. Seda saab kasutada üksi või koos teiste elementidega. Seda kasutava standardrea silt näeb välja selline: hr noshade

Horisontaalse joone loomine video abil

Ja kui soovite saada teavet visuaalsemas vormingus, vaadake järgmist videot, mis kirjeldab üksikasjalikult horisontaaljoonega töötamise võimalusi.

Olles kindlaks määranud horisontaaljoone vajalikud mõõtmed, saate kujundada veebisaidi lehed selliselt, et teave oleks struktureeritud ja visuaalselt pädev. See aitab külastajatel esitatud teavet hõlpsamini tajuda ja tõstab teie saidi teiste seast esile.

Põhimõtteliselt kasutatakse horisontaalseid jooni veebisaidi HTML-lehtede kaunistamiseks, andes neile atraktiivsema välimuse. Kuid nad suudavad ka visuaalselt eristada teavet külgnevatest jaotistest, lisades lugejatele selle uurimisel mugavust. Põhimõtteliselt tõmmake horisontaalsed jooned sinna, kus neid vajate, see on kõik.

Kuidas joonistada horisontaalset joont?

HTML-i horisontaaljoonte joonistamiseks on spetsiaalne silt

---

. Ja ta on blokeerida silt, see tähendab, et see loob reavahetused enne ja pärast iseennast, nii et rida jõuab alati eraldi reale. Seetõttu saab seda määrata ainult selliste siltide sees, mis võivad sisaldada näiteks plokielemente või

. Aga siin ma olen

---

ei saa olla sisu, kuna sellel lihtsalt pole sulgevat silti, mis tähendab, et see on tühi.

HTML-i horisontaaljoonte joonistamise näide

---

Lõik.

Lõik.

---

Lõik.

Tulemus brauseris

Lõik.

Lõik.

Lõik.

Nagu näete, on jooned väga õhukesed, ebaatraktiivsed ja tõmmatud kogu saadaolevale laiusele, nii et nüüd õpime, kuidas neid atraktiivsemaks muuta.

Kuidas muuta horisontaaljoonte värvi, paksust ja laiust?

Vanas HTML versioonid sildi juures

---

seal olid spetsiaalsed atribuudid, millega sai muuta horisontaaljoonte värvi, paksust ja laiust. Need on vastavalt värv, suurus ja laius. Kuid uutes versioonides loobuti neist CSS-i (Cascading Style Sheets) kasuks, nii et nagu võite arvata, kasutame taas oma lemmikstiili atribuuti. Üldine süntaks on:

---

style="background:color" >- joone (või õigemini selle tausta) värv.

---

style="height:size" >- joone paksus.

---

style="width:size" >- joone laius.

---

stiil= "taust: värv; kõrgus: suurus; laius: suurus"> - või saate määrata kõik parameetrid korraga, lihtsalt ärge unustage semikoolonit (;).

Värvi saab määrata selle ingliskeelse nimega või värvi HEX-koodiga, millele eelneb räsi (#). Noh, te teate seda juba õppetunnist alates muuta teksti ja tausta värvi.

Kuid me räägime lähemalt suuruse muutmisest. Nagu mäletate õppetund fontide muutmise kohta, on CSS-is umbes kümme mõõtühikut, kuid joone laius saab määrata ainult pikslites (px) ja protsentides (%) ning paksusüldiselt ainult pikslites. Kui panete muud mõõtühikud, siis pole viga, vaid brauserid lihtsalt ignoreerivad neid.

Kui määrate mõõtmed pikslites, sõltub joone paksus ja laius selle monitori eraldusvõimest, millelt teie saiti vaadatakse (mida suurem on ekraani eraldusvõime, seda õhem ja kitsam joon).

Nagu ma juba ütlesin, saab protsentides määrata ainult joone laiuse. Protsendi mõõtmed sõltuvad alati ja arvutatakse selle emakonteineri elemendi suuruse põhjal, milles silt asub

---

. Sel juhul võetakse vanema mõõtmed 100%. Näiteks kui paneme sildi

---

style="width:50%" > sisemine element

, siis olenemata sellest, kuidas me muudame brauseriakna suurust või monitori eraldusvõimet, on joone laius alati pool ploki laiusest

.

Horisontaalsete joonte värvi, paksuse ja laiuse muutmise näide.

---

---

---

---

Tulemus brauseris

Horisontaalsete joonte asukoha muutmine

Kui muudate horisontaaljoone laiust, näete selgelt, et brauserid asetavad selle alati keskele. Kui soovite selle asukohta muuta, kasutage lihtsalt sees

---

joonda atribuut järgmiste väärtustega:

• Keskus- joon on joondatud keskele (vaikeväärtus).
• vasakule- surub vastu vasakut serva.
• õige- vajutab paremale servale.

Horisontaalsete joonte joondamise näide.

---

---

---

Tulemus brauseris

Kuidas eemaldada raami ümbert joont?

Vaadake selle õppetunni esimest näidet. Mis värvi need jooned teie arvates on? Kuid see pole tõsi. Need on läbipaistvad, nagu kõik leheelemendid, millel pole määratud taustavärv! Ei usu mind? Seejärel vaadake näidet, kus muutsime joonte värvi. Kõige esimese puhul me ei määranud värvi, vaid suurendasime ainult selle suurust ja kas see joon pole läbipaistev? Nii et!

Nüüd ma selgitan. Vaikimisi joonistavad brauserid joonte ümber raamid, mis loovad kolmemõõtmelise efekti. Seega, kui me horisontaaljoonte paksust ei suurenda, näitavad brauserid meile ainult neid kaadreid, kuna joone enda paksus on 0 pikslit.

Rea ümbert äärise eemaldamiseks, mis sageli välimust rikub, rakendame uuesti stiiliatribuuti. Ja see on kirjutatud nii:

---

Kodutöö.

1. Loo artiklite, jaotiste ja alajaotiste pealkirjad. Asetage need kõik keskele.
2. Määrake kogu lehe font Arial ja pealkirjade jaoks Courier.
3. Olgu kogu lehe fondi suurus 85% brauseri vaikesuurusest. Ja pealkirjadel on vastavalt 145%, 125% ja 110% lehe fondi suurusest.
4. Kirjutage esimese pealkirja alla lõik, teise alla pikk tsitaat ja kolmanda alla luuletus. Ja luuletus olgu lehe keskel.
5. Tõstke esile paksus kirjas kolm sõna tsitaadis.
6. Joonistage artikli pealkirja alla kolme piksli paksune horisontaalne punane joon üle kogu lehe laiuse.
7. Joonistage luuletuse üla- ja alaossa ühe piksli suurused mustad jooned. Olgu ülemise rea laius ligikaudu võrdne salmi laiusega ja alumine - poole väiksem.
8. Eemaldage joontelt mittevajalikud raamid.

Näib, miks võib olla vaja nelja meetodit? Peaaegu iga inimene kasutab ju üht meetodit, millega ta on harjunud. Näiteks vajutasin mitu korda Shift ja kriipsu klahvi ja nii sain horisontaalse joone.

Aga mis siis, kui tulemuseks on punktiirjoon, kuid vajate kindlat joont?
- Tõenäoliselt on klaviatuuri Shift klahv vigane. Siin tulevad appi teised meetodid.

Võib-olla kõige rohkem tavaline viis Wordis rea tegemine tähendab klaviatuuri paari klahvi kasutamist.

I Õhuke, paks, topelt, punktiirjoon, kasutades klaviatuuri

Allpool on pilt ingliskeelse paigutusega, kuid ilma venekeelse paigutuseta klaviatuurist, kuid see ei oma tähtsust, sest meid huvitavad ainult kolm klahvi: Shift, dash ja Enter.

Riis. 1. Kolm klahvi klaviatuuril: tõstuklahv, sidekriips ja sisestusklahv Wordis pideva horisontaalse rea jaoks

Nende kolme klahviga saate Wordis joonistada pideva horisontaalse joone: punktiir või pidev, õhuke või paks, pikk või lühike.

1) Kui vajutate mitu korda klahvi "-" (kriips). Sõnaredaktor saame mis tahes pikkusega punktiirjoone.

Tegema õhuke pikk rida lehe täislaius:

• Leiame klaviatuurilt klahvi “kriips” (nullklahvist paremal, joonisel 1 rohelises raamis).
• Wordi uuel (!) real vajutage seda klahvi mitu korda: -
• Ja seejärel vajutage klahvi "Enter" (). Mõned prinditud kriipsud muutuvad ootamatult pidevaks horisontaalseks õhukeseks jooneks kogu lehe laiuse ulatuses.

2) Kui vajutate samaaegselt klahvi Shift ja "-" (kriips), siis EI prindita kriipsu, vaid alljoont _________. Nii saate teha suvalise pikkusega pideva rea ​​kõikjal dokumendis.

Riis. 2. Õhuke ja paks horisontaaljoon Wordis

Nüüd trükime rasv horisontaaljoon kogu lehe laiuses:

• Jälle leiame sama kriipsu klahvi ja ka Tõstuklahv(vasakule või paremale, nagu soovite). Vajutage tõstuklahvi, hoidke all ja ärge laske lahti.
• Ja nüüd klõpsake uuel (!) realt mitu korda (näiteks 3–4 korda) mõttekriipsu (tõstuklahvi mitte vabastades): ___. Vabastage Shift.
• Nüüd klõpsake nuppu Sisestage võti. Näete paksu horisontaalset pidevat joont.

Horisontaalne õhuke, paks, punktiirjoon ja topeltjoon Wordis klaviatuuri abil

­­­­­­­­­­­­­­­­­­­­­

II rida Wordis tabeli abil

Horisontaalse joone saab ühe lahtri (1x1) tabeli abil, milles on värvitud ainult ülemine või alumine ääris (nähtav) ja ülejäänud kolm tabeli külge on värvimata ääristega (need jäävad nähtamatuks) .

Asetage kursor kohta, kus joon peaks olema. IN ülemine menüü Sõna klõps meie:

• Sisestage (1 joonisel 3),
• Tabel (2 joonisel 3),
• Üks lahter (3 joonisel 3).

Riis. 3. Kuidas lisada Wordi 1x1 tabelit (ühest lahtrist).

Tulemuseks on ühe suure lahtri (1x1) tabel:

Jääb üle vaid 1x1 tabelis äärised kolmest küljest eemaldada. Selle jaoks

• minge vahekaardile "Kodu" (1 joonisel 4),
• siis "Font" kõrval leiame "Lõige" ja äärised (2 joonisel 4),
• eemaldage kõik äärised, klõpsates nuppu "Piirideta" (3 joonisel 4),
• valige "Ülemine ääris" või " Alumine joon"(4 joonisel 4).

Riis. 4. Kuidas eemaldada Wordi tabelist ääriste valik (muuta äärised nähtamatuks)

Näitan seda selgelt videos (artikli lõpus).

Muide, joonisel fig. 3 on selge, et on olemas lihtsam viis. Saate asetada kursori Wordis rea algusesse ja klõpsata "Horizontal Line" (5 joonisel 4):

III rida Wordis joonist kasutades

Insert (1 joonisel 5) - Kujundid (2 joonisel 5) - see on veel üks viis horisontaalse joone saamiseks Wordis.

Joone rangelt horisontaalseks hoidmiseks hoidke all tõstuklahvi ja tõmmake joon samal ajal.

Riis. 5. Kuidas Wordis joont tõmmata

IV rida Wordis ekraaniklaviatuuri abil

Windows 10 puhul leiate ka ekraaniklaviatuuri, tippides otsinguribale "ekraaniklaviatuur".

Riis. 6. Ekraaniklaviatuur

Loome horisontaalse joone samamoodi nagu esimeses variandis tavaline klaviatuur. Peal ekraanil kuvatav klaviatuur Teil on vaja kolme nuppu: kriips, tõstuklahv ja sisestus.

1 kriips ja sisestus

KOOS uus rida Wordis klõpsake mitu korda kriipsu (1 joonisel 6) ja vajutage sisestusklahvi. Saate õhukese horisontaalse joone.

2 Tõstuklahv, kriips ja sisestus

Wordi uuel real klõpsake esmalt klahvi Shift (2 joonisel 6), seejärel Dash (1 joonisel 6). Saate allajoone. Kordame seda veel 2 korda ja seejärel vajutage sisestusklahvi. Selle tulemusena näeme paksu horisontaalset joont.

Ülesanne

Tehke lehele horisontaalne joon.

Lahendus

Horisontaalsed read sobivad hästi ühe tekstiploki teisest eraldamiseks. Väike tekst horisontaalsete joontega üla- ja alaosas tõmbab lugeja tähelepanu rohkem kui tavaline tekst.

Sildi kasutamine

---

saate joonistada horisontaalse joone, mille välimus sõltub kasutatavatest atribuutidest, samuti brauserist. Silt viitab plokielementidele, nii et rida algab alati uuelt realt ja pärast seda kuvatakse kõik elemendid järgmine rida. Tänu paljudele sildi atribuutidele

---

selle sildi kaudu loodud rida on lihtne hallata. Kui ühendada ka stiilide jõud, muutub rea lisamine dokumendile lihtsaks ülesandeks.

Vaikimisi rida

---

kuvatakse hall ja helitugevuse efektiga. Seda tüüpi joon ei sobi alati saidi kujundusega, seega on arendajate soov muuta joone värvi ja muid parameetreid stiilide kaudu. Siiski on brauserites sellele probleemile erinevaid lähenemisviise, mistõttu peate korraga kasutama mitut stiiliatribuuti. Eelkõige vanemad versioonid interneti lehitseja Explorer kasutab joonevärvi atribuuti color ja teised brauserid taustavärvi . Kuid see pole veel kõik, kindlasti tuleks määrata joone paksus (kõrgusomadus) peale null ja eemaldada raam joone ümbert, täpsustades väärtus puudub piirikinnistul. Pannes kõik omadused tunnivalija jaoks kokku, saame universaalne lahendus Sest populaarsed brauserid(näide 1).

Näide 1: Horisontaalne joon

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Tekstistring

---

Tulemus see näide näidatud joonisel fig. 1.

Riis. 1. Värviline horisontaaljoon