HTML-sivua luotaessa tyylillä on tärkeä rooli. Varsinkin kun puhumme erilaisista symboleista ja koristeellisesta suunnittelusta: nämä pienet asiat auttavat tekemään sivusi "kielestä" helpomman ja selkeämmän sekä muuttavat merkittävästi sen käsitystä ja ulkonäköä kokonaisuutena. Yksi suunnittelun tärkeimmistä elementeistä on vaakaviiva, ja sitten opimme tarkemmin, kuinka sen kanssa työskennellä ja kuinka tehdä vaakasuora viiva html:ssä.

Mikä on vaakaviiva ja mihin se on tarkoitettu?

Vaakaviiva html:ssä on sivun suunnitteluelementti, joka suorittaa useita toimintoja:

1. Koriste. Auttaa lisäämään sivun houkuttelevuutta.
2. Jakaminen. Edistää erimerkityksien tietojen tehokasta erottamista.
3. Korostaminen tai korostaminen. Kiinnittää sivuvieraiden huomion tarpeellisiin ja tärkeimpiin tietoihin.

Se on vaakaviiva, jota pidetään helpoimmin saavutettavissa olevana tapana toteuttaa useita toimintoja. Se on hyvin yksinkertainen luoda, ja ulkopuolelta se näyttää erittäin edulliselta. Yksinkertaisilla muutoksilla html-koodiin voit säätää:

• pituus;
• leveys;
• värin ominaisuudet;
• kohdistus toista reunaa pitkin.

On syytä huomata, että vaakaviiva viittaa lohkoelementteihin. Tämä tarkoittaa, että se vie sivulla uuden rivin ja sitä seuraava teksti menee alapuolelle.

Vaakaviivan luominen HTML:ään

Voit asettaa viivan yksinkertaisella tunnisteella – hr kolmiosuluissa. Se on lyhenne sanoista "Horizontal Rule" ja asettaa klassiset ulkoiset parametrit. Se eroaa monista muista siinä, että se ei tarvitse sulkevaa tunnistetta ja voi olla olemassa itsenäisesti. Voit muuttaa elementin ulkoisia ominaisuuksia käyttämällä tunnisteen lisäarvoja:

1. Pituus. Jos et halua rivin pituuden ulottuvan koko sivulle, voit asettaa halutun koon pikseleinä tai prosentteina. Tämä tehdään käyttämällä tagissa olevaa lisäsanaa "width" ja lainausmerkeissä "="-merkin jälkeen merkittyä numeerista pituutta.

Se näyttää tältä. Jos tarvitsemme esimerkiksi 100 pikselin pituuden, asetamme seuraavan tunnisteen: hr width=”100″

1. Tasaus. Kohdistus on mahdollista vasempaan tai oikeaan reunaan sekä myös keskelle. Tämä ominaisuus pätee vain, jos olet jo määrittänyt leveysparametrin, koska on mahdotonta tasata viivaa, joka kattaa koko sivun. Tasausta varten asetamme ylimääräisen attribuutin "align" -tunnisteeseen ja lisäämme siihen suunnan: center - keskimmälle, vasemmalle - vasemmalle ja oikealle - oikealle tasaukselle.

Valmis tagi näyttää tässä tapauksessa tältä. Jos meidän on esimerkiksi asetettava keskitasaus 150 pikseliä pitkälle vaakaviivalle, valmis tunniste näyttää tältä: hr align=”center” width=”150″.

Huomaa, että "align", tasausmittari, sijoitetaan ensimmäiselle paikalle, vaikka attribuutti riippuu leveysmittarista.

1. Leveys. Voit myös määrittää leveyden ja luoda lihavoitun tai ohuen alleviivauksen. Tämä kriteeri ei ole riippuvainen mistään ja sitä voidaan käyttää itsenäisenä kriteerinä pituutta tai kohdistusta määrittelemättä. Sitä varten käytämme tagissa olevaa size-attribuuttia ja numeerista arvoa, joka on yhtä suuri kuin haluttu leveys pikseleinä. Numero ilmoitetaan lainausmerkeissä kokomääritteen ja "="-symbolin jälkeen.

Jos meidän on siis luotava 15 pikseliä leveä viiva, meidän on luotava seuraava tunniste: hr size=”15″.

1. Väri. Se on myös määritelty itsenäiseksi indikaattoriksi. Voit muuttaa sitä käyttämällä color-attribuuttia yhdessä värin nimen kanssa koodin muodossa tai englanniksi. Väri ilmoitetaan lainausmerkeissä "="-symbolin jälkeen.

Siten tavallisen valkoisen viivan tunniste voidaan kirjoittaa kahdella tavalla: hr color=”#FFFFFF” tai hr color=”white”

Musta voidaan luoda koodilla #000000.

1. Laita pois varjo. Jos tarvitset elementin, joka ei sisällä varjoa, käytä tagissa noshade-attribuuttia. Sitä voidaan käyttää yksinään tai yhdessä muiden elementtien kanssa. Sitä käyttävän vakiorivin tagi näyttää tältä: hr noshade

Vaakaviivan luominen videon avulla

Ja jos haluat vastaanottaa tietoa visuaalisessa muodossa, katso seuraava video, jossa kuvataan yksityiskohtaisesti mahdollisuudet työskennellä vaakaviivalla.

Kun olet määrittänyt vaakaviivan tarvittavat mitat, voit suunnitella verkkosivuston sivut siten, että tiedot ovat jäsenneltyjä ja visuaalisesti päteviä. Tämä auttaa vierailijoita näkemään esitetyt tiedot helpommin ja erottuu muista.

Tehtävä

Tee sivulle vaakasuora viiva.

Ratkaisu

Vaakaviivat sopivat hyvin tekstilohkon erottamiseen toisesta. Pieni teksti, jonka ylä- ja alareunassa on vaakasuoria viivoja, herättää enemmän lukijan huomiota kuin tavallinen teksti.

Tunnisteen käyttäminen

---

voit piirtää vaakaviivan, jonka ulkonäkö riippuu käytetyistä attribuuteista sekä selaimesta. Tunniste viittaa lohkoelementteihin, joten rivi alkaa aina uudelta riviltä ja sen jälkeen kaikki elementit näytetään seuraavalla rivillä. Kiitos monien tag-attribuuttien

---

tämän tagin kautta luotua riviä on helppo hallita. Jos yhdistät myös tyylien voiman, rivin lisääminen asiakirjaan on yksinkertainen tehtävä.

Oletuslinja

---

näytetään harmaalla värillä ja äänenvoimakkuuden tehosteella. Tämäntyyppinen viiva ei aina sovi sivuston suunnitteluun, joten kehittäjien halu muuttaa viivan väriä ja muita parametreja tyylien kautta on ymmärrettävää. Selaimilla on kuitenkin sekalaisia ​​lähestymistapoja tähän ongelmaan, mikä tarkoittaa, että sinun on käytettävä useita tyyliominaisuuksia kerralla.

Erityisesti Internet Explorerin vanhemmat versiot käyttävät väriominaisuutta viivan värinä, kun taas muut selaimet käyttävät taustaväriä . Mutta tässä ei vielä kaikki, sinun tulee myös määrittää viivan paksuus (korkeusominaisuus) muuksi kuin nolla ja poistaa viivan ympäriltä oleva kehys asettamalla border-ominaisuuden arvoksi none.

Yhdistämällä kaikki tuntivalitsimen ominaisuudet, saamme yleisen ratkaisun suosituille selaimille (esimerkki 1).

---

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Vaakaviivan väri

Tekstimerkkijono

Tämän esimerkin tulos on esitetty kuvassa. 1.

Riisi. 1. Värillinen vaakaviiva
Vaikuttaa siltä, ​​miksi neljää menetelmää voidaan tarvita? Loppujen lopuksi melkein jokainen ihminen käyttää yhtä menetelmää, johon hän on tottunut. Painoin esimerkiksi vaihtonäppäintä ja viivanäppäintä useita kertoja, jolloin sain vaakaviivan.

Mutta entä jos tämä johtaa katkoviivaan, mutta tarvitset kiinteän viivan?

- Todennäköisesti näppäimistön Shift-näppäin on viallinen. Muut menetelmät tulevat apuun täällä.

Ehkä yleisin tapa tehdä rivi Wordissa on käyttää paria näppäimistön näppäintä.

I Ohut, paksu, kaksinkertainen, katkoviiva näppäimistöllä

Näillä kolmella näppäimellä voit piirtää Wordiin jatkuvan vaakaviivan: pisteviiva tai kiinteä, ohut tai paksu, pitkä tai lyhyt.

1) Kun painat "-" (viiva) -näppäintä useita kertoja Word-editorissa, saat minkä tahansa pituisen katkoviivan.

tehdä ohut pitkä rivi koko sivun leveydeltä:

• Löydämme näppäimistön "viiva"-näppäimen ("nolla"-näppäimen oikealta puolelta, vihreästä kehyksestä kuvassa 1).
• Paina tätä näppäintä useita kertoja uudelta (!) Wordin riviltä: -
• Ja paina sitten "Enter" () -näppäintä. Muutama tulostettu viiva muuttuu yhtäkkiä jatkuvaksi vaakasuoraksi ohueksi viivaksi koko sivun leveydeltä.

2) Kun painat samanaikaisesti Shift- ja "-"-näppäintä (viiva), EI tulosteta yhdysviivaa, vaan alaviiva _________. Tällä tavalla voit tehdä mielivaltaisen pituisen jatkuvan rivin mihin tahansa asiakirjaan.

Riisi. 2. Ohut ja paksu vaakasuora viiva Wordissa

Nyt tulostetaan rasvaa vaakaviiva koko sivun leveydeltä:

• Löydämme jälleen saman "viiva"-näppäimen sekä Shift-näppäimen (vasemmalla tai oikealla, kuten haluat). Paina Shift, pidä painettuna äläkä päästä irti.
• Ja nyt, uudelta (!) riviltä, ​​napsauta viivaviivaa useita kertoja (esimerkiksi 3-4 kertaa) (älä vapauta Shift-näppäintä): ___. Vapauta Shift.
• Paina nyt Enter-näppäintä. Näet paksun vaakasuoran yhtenäisen viivan.

Vaakasuora ohut, paksu, katkoviiva ja kaksoisviiva Wordissa näppäimistöllä

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

II rivi Wordissa taulukon avulla

Vaakaviiva saadaan käyttämällä yhden solun (1x1) taulukkoa, jossa vain ylä- tai alareuna on värillinen (näkyy) ja taulukon kolmella muulla sivulla on värittämättömät reunat (ne ovat näkymättömiä) .

Aseta kohdistin kohtaan, jossa viivan pitäisi olla. Napsauta Wordin ylävalikosta:

• Aseta (1 kuvassa 3),
• Taulukko (2 kuvassa 3),
• Yksi solu (3 kuvassa 3).

Riisi. 3. 1x1-taulukon lisääminen (yhdestä solusta) Wordiin

Tuloksena on yhden suuren solun (1x1) taulukko:

Jäljelle jää vain reunusten poistaminen 1x1-taulukon kolmelta sivulta. tätä varten

• mene "Koti"-välilehdelle (1 kuvassa 4),
• sitten "Font"-kohdan vierestä löytyy "Kappale" ja reunat (2 kuvassa 4),
• poista kaikki reunat napsauttamalla "Ei reunaa" (3 kuvassa 4),
• valitse "Yläreuna" tai "Alempi reuna" (4 kuvassa 4).

Riisi. 4. Reunusten valinnan poistaminen Word-taulukosta (reunusten tekeminen näkymättömiksi)

Näytän tämän selvästi videossa (artikkelin lopussa).

Muuten, kuvassa. 3 on selvää, että on olemassa helpompikin tapa. Voit asettaa kohdistimen Wordin rivin alkuun ja napsauttaa "Vaakaviiva" (5 kuvassa 4):

III Line Wordissa piirustuksen avulla

Insert (1 kuvassa 5) - Muodot (2 kuvassa 5) - tämä on toinen tapa saada vaakaviiva Wordissa.

Jotta viiva pysyy täysin vaakasuorassa, pidä Shift-näppäintä painettuna ja piirrä viiva samanaikaisesti.

Riisi. 5. Viivan piirtäminen Wordissa

IV Line Wordissa näyttönäppäimistöllä

Windows 10:ssä voit etsiä näyttönäppäimistön myös kirjoittamalla hakupalkkiin "on-screen keyboard".

Riisi. 6. Näyttönäppäimistö

Luomme vaakaviivan samalla tavalla kuin ensimmäisessä vaihtoehdossa tavallisella näppäimistöllä. Tarvitset näyttönäppäimistössä kolme painiketta: Dash, Shift ja Enter.

1 Viiva ja Enter

Napsauta Wordin uudelta riviltä viivaa (1 kuvassa 6) useita kertoja ja paina Enter. Saat ohuen vaakaviivan.

2 Vaihto, viiva ja Enter

Napsauta Wordin uudelta riviltä ensin Shift (2 kuvassa 6) ja sitten Dash (1 kuvassa 6). Saat alleviivauksen. Toistamme tämän vielä 2 kertaa ja paina sitten Enter. Tämän seurauksena näemme paksun vaakasuoran viivan.

Sivuston eräiden erityisen tärkeiden elementtien korostamiseksi ei haittaisi käyttää kaikenlaisia ​​CSS-tyylejä ja -ominaisuuksia. Tekstistä ei tietenkään tarvitse liikaa murehtia ja korostaa sitä esimerkiksi lihavoidulla tai kursiivilla, vaihtaa taustaa tai tehdä tekstin ympärille kehys. Mutta yksi esitetyistä menetelmistä ei aina ole sopiva. Oletetaan, että sinulla on teksti, joka on jaettava sen semanttisen kuormituksen erityispiirteiden vuoksi. Tässä HTML- ja CSS-ominaisuudet tulevat apuun.

Kuinka tehdä rivi tekstiin CSS:n avulla

Suunnitelmien toteuttamiseksi meidän on otettava yhteyttä style.css-tiedosto kirjoitettuaan siihen vastaavan ominaisuuden rajaa. Tämä aiheuttaa rivin ilmestymisen tekstin ylä-, ala- tai tietylle puolelle. On puolestaan ​​useita ominaisuuksia, jotka vastaavat rivin näyttämisestä, nimittäin:

- reuna-yläosa– tekstin yläpuolella oleva vaakaviiva;

- raja-oikea– pystysuora viiva tekstin oikealla puolella;

- raja-ala– tekstin alla oleva vaakaviiva;

- raja-vasen– pystysuora viiva vasemmalla.

Kuinka tehdä rivi html:ssä

CSS-ominaisuuksien avulla voit määrittää kaikki tarvittavat arvot muokkaamalla HTML-koodia. Voit tehdä tämän siirtymällä sivuston hallinnolliseen osaan. Valitse jokin julkaistuista materiaaleista, vaihda tekstieditori HTML-koodin muokkaustilaan ja syötä CSS-ominaisuudet. Esimerkki löytyy alta.

Lyhyt kuvaus komentoista

- leveys- rivin pituus;

- kiinteä– kiinteä viiva;

- pilkullinen– katkoviiva.

Tyylien syvempää ymmärtämistä varten suosittelen lukemaan tämän.

On ymmärrettävä, että sivustokoodiin muutettaessa ominaisuudet, jotka määrittävät viivan tyypin, sen paksuuden ja värin, luetellaan välilyönnillä erotettuina.

Tällä menetelmällä on useita etuja:

Laaja valikoima mahdollisuuksia, joilla voit tehdä melkein minkä tahansa linjan.

Kaikki tarvittavat muutokset on helppo tehdä suoraan HTML-koodiin. Tämä yksinkertaistaa huomattavasti kokemattomien sivustonrakentajien työtä.

Kuinka tehdä suora vaakasuora viiva HTML-tunnisteen avulla

---

Ensimmäinen asia, johon haluan kiinnittää huomiosi, on se, että tällä tunnisteella ei ole kaikista html:n hienouksista ja periaatteista huolimatta lopputunnistetta. Sitä voidaan käyttää missä tahansa html-koodissa, tunnisteiden välissä Ja

.

Tunnisteen attribuutit

---

- leveys– vastaa linjan pituudesta. Voidaan määrittää joko prosentteina tai pikseleinä.

- koko– viivan paksuus. Ilmoitettu pikseleinä.

- väri– määrittää viivan värin.

- kohdistaa– attribuutti, joka vastaa viivojen kohdistamisesta. Joukkue puolestaan ​​​​liittyy häneen.

Pohjimmiltaan vaakaviivoja käytetään verkkosivuston HTML-sivujen koristeluun, jolloin ne näyttävät houkuttelevammilta. Mutta ne voivat myös visuaalisesti erottaa tiedot viereisistä osioista, mikä lisää lukijoille mukavuutta tutkiessaan sitä. Pohjimmiltaan piirrä vaakaviivat sinne, missä niitä tarvitset, siinä kaikki.

Kuinka piirtää vaakaviiva?

HTML:ssä on erityinen tunniste vaakaviivojen piirtämiseen

---

. Ja hän on estää tag, eli se luo rivinvaihtoja ennen ja jälkeen itsensä, joten rivi päätyy aina erilliselle riville. Vastaavasti se voidaan määrittää vain tunnisteiden sisällä, jotka voivat sisältää esimerkiksi lohkoelementtejä tai

. Mutta tässä minä olen

---

ei voi sisältää sisältöä, koska siinä ei yksinkertaisesti ole sulkevaa tunnistetta, mikä tarkoittaa, että se on tyhjä.

Esimerkki vaakaviivojen piirtämisestä HTML:ään

---

Kohta.

Kohta.

---

Kohta.

Tulos selaimessa

Kohta.

Kohta.

Kohta.

Kuten näet, viivat osoittautuvat erittäin ohuiksi, houkuttelemattomiksi ja vedetyiksi koko käytettävissä olevaan leveyteen, joten nyt opimme, kuinka niitä voidaan muuttaa, jotta ne näyttävät houkuttelevammilta.

Kuinka muuttaa vaakaviivojen väriä, paksuutta ja leveyttä?

Vanhemmissa HTML-versioissa tunniste

---

siellä oli erikoisattribuutteja, joilla voit muuttaa vaakaviivojen väriä, paksuutta ja leveyttä. Nämä ovat väri, koko ja leveys. Mutta uusissa versioissa ne hylättiin CSS:n (Cascading Style Sheets) hyväksi, joten, kuten olet ehkä arvannut, käytämme jälleen suosikkityyliattribuuttiamme. Yleinen syntaksi on:

---

style="background:color" >- viivan väri (tai pikemminkin sen tausta).

---

style="height:size" >- linjan paksuus.

---

style="width:size" >- viivan leveys.

---

tyyli = "tausta: väri; korkeus: koko; leveys: koko"> - tai voit määrittää kaikki parametrit kerralla, älä vain unohda puolipistettä (;).

Väri voidaan määrittää sen nimellä englanniksi tai värin HEX-koodilla, jota edeltää hash (#). No, tiedät tämän jo oppitunnin jälkeen muuttaa tekstiä ja taustaväriä.

Mutta puhumme lisää koon muuttamisesta. Kuten muistat oppitunti fonttien vaihtamisesta, CSS:ssä on noin kymmenen mittayksikköä, mutta viivan leveys voidaan määrittää vain pikseleinä (px) ja prosentteina (%), ja paksuus yleensä vain pikseleinä. Jos laitat muita mittayksiköitä, se ei ole virhe, vaan selaimet yksinkertaisesti jättävät ne huomioimatta.

Jos määrität mitat pikseleinä, viivan paksuus ja leveys riippuvat sen näytön resoluutiosta, jolla sivustoasi tarkastellaan (mitä suurempi näytön tarkkuus, sitä ohuempi ja kapeampi viiva).

Kuten jo sanoin, vain viivan leveys voidaan määrittää prosentteina. Prosenttiosuudet riippuvat aina ja lasketaan sen pääsäiliöelementin koon perusteella, jossa tunniste sijaitsee

---

. Tässä tapauksessa vanhemman mitoiksi otetaan 100 %. Jos esimerkiksi asetamme tunnisteen

---

style="width:50%" > sisäinen elementti

, riippumatta siitä, kuinka muutimme selainikkunan kokoa tai näytön resoluutiota, viivan leveys on aina puolet lohkon leveydestä

.

Esimerkki vaakaviivojen värin, paksuuden ja leveyden muuttamisesta.

---

---

---

---

Tulos selaimessa

Vaakaviivojen sijainnin muuttaminen

Kun muutat vaakaviivan leveyttä, näet selvästi, että selaimet sijoittavat sen aina keskelle. Jos haluat muuttaa sen sijaintia, käytä vain sisällä

---

kohdista attribuutti seuraavien arvojen kanssa:

• keskusta- viiva on kohdistettu keskelle (oletusarvo).
• vasemmalle- painaa vasenta reunaa vasten.
• oikein- painautuu oikeaa reunaa vasten.

Esimerkki vaakasuuntaisesta viivojen kohdistamisesta.

---

---

---

Tulos selaimessa

Kuinka poistaa kehys viivan ympäriltä?

Katso tämän oppitunnin ensimmäistä esimerkkiä. Minkä värisiä nämä viivat mielestäsi ovat? Mutta se ei ole totta. Ne ovat läpinäkyviä, kuten mikä tahansa sivuelementti, jolle ei ole määritetty taustaväriä! Etkö usko minua? Katso sitten esimerkkiä, jossa muutimme viivojen väriä. Ensimmäiselle emme määrittäneet väriä, vaan vain lisäsimme sen kokoa, eikä tämä viiva ole läpinäkyvä? Siinä se!

Nyt minä selitän. Oletuksena selaimet piirtävät kehyksiä viivojen ympärille, mikä luo kolmiulotteisen tehosteen. Joten kun emme lisää vaakasuuntaisten viivojen paksuutta, selaimet näyttävät meille vain nämä kehykset, koska itse viivan paksuus on 0px.

Poistaaksemme viivan ympäriltä reunuksen, joka usein pilaa ulkoasun, käytämme uudelleen tyylimääritettä. Ja se on kirjoitettu näin:

---

Kotitehtävä.

1. Luo artikkelin, osion ja alaosion otsikot. Aseta ne kaikki keskelle.
2. Aseta fontiksi Arial koko sivulle ja Courier otsikoille.
3. Olkoon koko sivun fonttikoko 85 % selaimen oletuskoosta. Otsikoissa on 145 %, 125 % ja 110 % sivun fonttikoosta.
4. Kirjoita kappale ensimmäisen otsikon alle, pitkä lainaus toisen alle ja runo kolmanteen. Ja anna runon sijaita sivun keskellä.
5. Lihavoitu kolme sanaa lainauksessa.
6. Piirrä artikkelin otsikon alle kolmen pikselin paksuinen vaakasuora punainen viiva koko sivun leveydelle.
7. Piirrä runon ylä- ja alaosaan yhden pikselin paksuiset viivat mustalla. Olkoon ylärivin leveys suunnilleen sama kuin jakeen leveys ja alaosan - puolet.
8. Poista tarpeettomat kehykset viivoista.