Sivuston eräiden erityisen tärkeiden elementtien korostamiseksi ei haittaisi käyttää kaikenlaisia ​​CSS-tyylejä ja -ominaisuuksia. Sinun ei tietenkään tarvitse liikaa vaivautua tekstin kanssa ja korostaa sitä esimerkiksi lihavoidulla tai kursiivilla, muuta tausta tai tee kehys tekstin ympärille. 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ä

Käyttämällä CSS-ominaisuudet voit syöttää kaikki tarvittavat arvot muokkaamalla HTML-koodia. Voit tehdä tämän siirtymällä sivuston hallinnolliseen osaan. Valitse yksi julkaistuista materiaaleista, vaihda tekstieditori HTML-koodin muokkaustilaan ja lisää CSS-ominaisuuksia. 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ämä tagi kaikista hienouksista huolimatta ja html periaatteet, ei sulkevaa tunnistetta. Sitä voidaan käyttää missä tahansa html-koodi, 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.

Luodessaan HTML-sivut suunnittelulla 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ö yleensä. Yksi niistä olennaiset elementit suunnittelulle on vaakasuora viiva, ja sitten opimme yksityiskohtaisemmin työskentelemään sen kanssa 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ää eri merkityksien tietojen tehokasta erottamista.
3. Korostaminen tai korostaminen. Kiinnittää sivuvieraiden huomion tarpeellisiin ja tärkeimpiin tietoihin.

Se on vaakaviiva, jota pidetään eniten saavutettavalla tavalla toteuttaa useita toimintoja. Se on hyvin yksinkertainen luoda, ja ulkonäöltään se näyttää erittäin kannattavalta. Yksinkertaisilla muutoksilla html-koodiin voit säätää:

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

On syytä huomata, että vaakaviiva viittaa lohkon elementtejä. 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 määrittelee klassikon ulkoiset parametrit. Se eroaa monista muista siinä, että se ei tarvitse sulkevaa tunnistetta ja voi olla olemassa itsenäisesti. Muuttaa ulkoiset ominaisuudet elementti käyttämällä lisäarvoja tagissa:

1. Pituus. Jos et halua rivin pituuden ulottuvan koko sivulle, voit asettaa halutun koon pikseleinä tai prosentteina. Tämä tehdään avuksi lisäsana"leveys" tagissa ja numeerinen pituus, joka näkyy "="-merkin jälkeen lainausmerkeissä.

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 voimassa vain, jos olet jo määrittänyt leveysparametri, koska riviä, joka kattaa koko sivun, ei voida tasata. 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ä. Esimerkiksi, jos meidän on asetettava keskikohdistus vaakasuora viiva 150 pikseliä pitkä, valmis tagi 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 määritellään myös itsenäiseksi indikaattoriksi. Käytä sen vaihtamiseen väri attribuutti yhdessä värin nimen kanssa koodin muodossa joko päällä englanti. Väri ilmoitetaan lainausmerkeissä "="-symbolin jälkeen.

Joten vakiorivin tunniste on valkoinen 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.

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 niiden tutkimisen aikana. 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ä?

Vanhassa HTML-versiot tagissa

---

siellä oli erikoisattribuutteja, joilla voit muuttaa vaakaviivojen väriä, paksuutta ja leveyttä. Nämä ovat väri, koko ja leveys. Mutta uusissa versioissa niistä luovuttiin 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ää englanninkielisellä nimellä 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. Prosenttimitat 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- painaa 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 kaikki sivuelementit, joilla ei ole määritettyä taustaväri! Etkö usko minua? Katso sitten esimerkkiä, jossa muutimme viivojen väriä. Ensimmäisessä tapauksessa 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ät.

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 toiseen ja runo kolmanteen. Ja anna runon sijaita sivun keskellä.
5. Kohokohta lihavoitu kolme sanaa lainauksessa.
6. Piirrä artikkelin otsikon alle kolmen pikselin punainen vaakasuora viiva koko sivun leveydelle.
7. Piirrä runon ylä- ja alaosaan yhden pikselin paksuiset viivat mustalla. Olkoon ylärivin leveys suunnilleen yhtä suuri kuin jakeen leveys ja alaosan - puolet.
8. Poista tarpeettomat kehykset viivoista.

Vaikuttaa siltä, ​​miksi neljää menetelmää voidaan tarvita? Loppujen lopuksi melkein jokainen ihminen käyttää yhtä menetelmää, johon hän on tottunut. Painoin esimerkiksi Shift-nä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ä eniten tavallisella tavalla rivin tekeminen Wordissa tarkoittaa muutaman näppäimistön näppäimen käyttöä.

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

Alla on kuva näppäimistöstä, jossa on englanti, mutta ilman venäjän asettelua, mutta tällä ei ole väliä, koska olemme kiinnostuneita vain kolmesta näppäimestä: Shift, dash ja Enter.

Riisi. 1. Näppäimistön kolme näppäintä: Vaihto, viiva ja Enter jatkuvan vaakaviivan Wordissa

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 sisään Sanaeditori saamme minkä tahansa pituisen katkoviivan.

tehdä ohut pitkä rivi koko sivun leveys:

• 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ä. Muutamat tulostetut viivat muuttuvat yhtäkkiä jatkuvaksi vaakasuuntaiseksi ohueksi viivaksi koko sivun leveydeltä.

2) Kun painat samanaikaisesti vaihtonäppäintä ja "-" (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 viivanäppäimen ja myös Vaihtonäppäin(vasen tai oikea, 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.
• Napsauta nyt Anna avain. 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. IN ylävalikko Sana napsautus me:

• 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 " Alaraja"(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.

Jos haluat pitää viivan 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 tavallinen näppäimistö. Päällä näytön näppäimistö Tarvitset kolme painiketta: viiva, Shift ja Enter.

1 Viiva ja Enter

KANSSA uusi rivi Napsauta Wordissa 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.

Tehtävä

Tee sivulle vaakasuora viiva.

Ratkaisu

Vaakaviivat sopivat hyvin tekstilohkon erottamiseen toisesta. Pieni teksti, jossa on vaakasuoria viivoja ylä- ja alareunassa, herättää lukijan huomion tavallista tekstiä enemmän.

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 seuraava rivi. 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 harmaa ja volyymiefektillä. 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. Varsinkin vanhemmat versiot Internet-selain Explorer käyttää väriominaisuutta viivan värinä, ja muut selaimet käyttävät taustaväriä . Mutta tässä ei vielä kaikki, sinun tulee ehdottomasti määrittää viivan paksuus (korkeusominaisuus) muu kuin nolla ja poistaa kehys viivan ympäriltä arvo ei mitään rajan kiinteistössä. Kokoamalla kaikki ominaisuudet yhteen tuntivalitsimelle, saamme universaali ratkaisu varten

suositut selaimet

(esimerkki 1).

---

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Vaakaviivan väri Tekstimerkkijono Tulos

tämä esimerkki