Saidi mõne eriti olulise elemendi rõhutamiseks ei teeks paha, kui kasutate selleks ette nähtud igasuguseid CSS -stiile ja atribuute. Loomulikult ei pea te tekstiga vaeva nägema ja seda esile tõstma, näiteks rasvases või kaldkirjas, muutma tausta või tegema teksti ümber raami. Kuid mitte alati üks esitatud meetoditest ei sobi. Oletame, et teil on tekst, mis tuleb selle semantilise koormuse eripära tõttu eraldada. Siin tulevad esile HTML- ja CSS -atribuudid.

Kuidas CSS -i abil tekstis rida teha?

Oma plaani elluviimiseks peame viitama style.css fail kirjutades sinna vastava omaduse piir... Sellega luuakse rida teksti kohal, all või kindlal küljel. Rea kuvamise eest vastutavad omakorda mitmed omadused, nimelt:

- piir-top- horisontaaljoon teksti kohal;

- piir-parem- vertikaalne joon tekstist paremal;

- piir-alt- horisontaaljoon teksti all;

- piir-vasak- vertikaalne joon vasakule.

Kuidas html -is rida teha

Kasutades CSS -i atribuute, saate HTML -koodi redigeerides kirjutada kõik vajalikud väärtused. Selleks peate minema saidi haldusosasse. Valige üks avaldatud materjalidest, lülitage tekstiredaktor HTML -koodi redigeerimise režiimi ja lisage CSS -i atribuudid. Näidist saab näha allpool.

Käskude lühike selgitus

- laius- rea pikkus;

- tahke- pidev joon;

- punktiir- punktiirjoon.

Stiilidega sügavamaks tutvumiseks soovitan seda lugeda.

On vaja mõista, et saidi koodi muutmise käigus loetletakse joone tüüpi, selle paksust ja värvi määravad atribuudid tühikuga.

Sellel meetodil on mitmeid eeliseid:

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

Kõikide vajalike muudatuste tegemise lihtsus otse HTML -koodis. See lihtsustab oluliselt kogenematute saidiehitajate ülesannet.

Kuidas teha sirget horisontaaljoont HTML -märgendi abil

---

Esimese asjana tahaksin teie tähelepanu juhtida sellele, et sellel märgendil, vaatamata kõigile html -i peensustele ja põhimõtetele, ei ole sulgemissilti. Seda saab kasutada kõikjal html -koodis, siltide vahel ja.

Sildi atribuudid

---

- laius- vastutab liini pikkuse eest. Seda saab määrata nii protsentides kui ka pikslites.

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

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

- joondama- joonte joondamise eest vastutav atribuut. Omakorda viitab meeskond sellele.

Põhimõtteliselt kasutatakse saidi HTML -lehtede kaunistamiseks horisontaalseid jooni, mis annavad neile atraktiivsema ilme. Kuid nad võivad ka visuaalselt piiritleda naaberosade teavet, lisades lugejatele mugavust selle uurimisel. Üldiselt joonistage horisontaalsed jooned sinna, kus vaja, see on kõik.

Kuidas joonistada horisontaaljoont?

Horisontaalsete joonte joonistamiseks HTML -is on spetsiaalne silt

---

... Pealegi on ta blokeerida silt, see tähendab loob reavaheid enne ja pärast ennast, seega saadakse rida alati eraldi realt. Seega saab seda määrata ainult siltide sees, mis võivad sisaldada näiteks plokielemente või

... Aga mina ise

---

ei saa sisaldada sisu, kuna sellel pole lihtsalt lõppmärgendit, see tähendab, et see on tühi.

Näide horisontaaljoonte joonistamisest HTML -is

---

Lõige.

Lõige.

---

Lõige.

Tulemus brauseris

Lõige.

Lõige.

Lõige.

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

Kuidas muuta horisontaaljoonte värvi, paksust ja laiust?

HTML -i vanemates versioonides märgend

---

seal olid spetsiaalsed atribuudid, millega oli võimalik muuta horisontaaljoonte värvi, paksust ja laiust. Need on vastavalt värv, suurus ja laius. Kuid uuemates versioonides on need loobutud kaskaadlaadilehtede (CSS) kasuks, nii et arvate, et kasutame uuesti oma lemmikstiili atribuuti. Üldine süntaks on järgmine:

---

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

---

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

---

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

---

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

Värvi saab määrata nimega inglise keeles või värvi HEX-koodiga, millele eelneb räs (#). Noh, sa tead seda juba õppetunnist alates teksti ja tausta värvi muutmine.

Kuid me räägime suuruse muutmisest üksikasjalikumalt. Kas mäletate alates õpetus fontide muutmiseks, CSS -is on umbes kümme ühikut, kuid joone laius saab määrata ainult pikslites (px) ja protsentides (%) ja paksusüldiselt ainult pikslites. Kui tarnite muid seadmeid, ei ole see viga, vaid brauserid lihtsalt ignoreerivad neid.

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

Nagu ma ütlesin, saab protsentides määrata ainult joone laiuse. Protsendisuurused sõltuvad alati ja arvutatakse lähtemälu elemendi suuruse järgi, mille sees silt asub

---

... Sellisel juhul võetakse vanema suurus 100%. Näiteks kui asetame sildi

---

style = "width: 50%"> sisemine element

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

.

Näide horisontaaljoonte värvi, paksuse ja laiuse muutmisest.

---

---

---

---

Tulemus brauseris

Horisontaaljoonte asukoha muutmine

Kui muudate horisontaaljoone laiust, muutub selgelt nähtavaks, et brauserid asetavad selle alati keskele. Kui soovite selle asendit muuta, kasutage seda lihtsalt sees

---

joondage atribuut järgmiste väärtustega:

• Keskus- rida on joondatud keskele (vaikeväärtus).
• vasakule- surutud vastu vasakut serva.
• õige- surutud vastu paremat serva.

Näide horisontaaljoonte joondamisest.

---

---

---

Tulemus brauseris

Kuidas eemaldada joone ümber olev piir?

Vaadake selle õpetuse esimest näidet. Mis värvi need jooned teie arvates on? Ja siin on see vale. Need on läbipaistvad, nagu kõik lehe elemendid, millel pole taustavärvi! Ei usu mind? Seejärel vaadake näidet, kus muutsime joonte värvi. Esimese puhul me ei määranud värvi, vaid suurendasime selle suurust ja kas see joon pole läbipaistev? Nii et!

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

Joone ümber oleva piiri eemaldamiseks, mis sageli ainult välimust rikub, rakendame stiili atribuudi uuesti. Ja see on kirjutatud nii:

---

Kodutöö.

1. Looge artiklite, jaotiste ja alajaotiste pealkirjad. Keskendage need kõik.
2. Määrake päiste jaoks kogu leht Arial ja Courier.
3. Olgu kogu lehe fondisuurus 85% brauseri vaikesuurusest. Ja pealkirjades on lehe fontide suurusest vastavalt 145%, 125%ja 110%.
4. Kirjutage esimese pealkirja alla lõik, teise alla pikk tsitaat ja kolmanda alla luuletus. Ja las luuletus keskendub lehele.
5. Tõstke oma tsitaadis esile kolm paksus kirjas olevat sõna.
6. Joonistage artikli pealkirja alla kolme piksliga punane horisontaalne joon kogu lehe ulatuses.
7. Joonista luuletuse üla- ja alaossa üks piksliline must joon. Olgu ülemise rea laius ligikaudu võrdne salmi laiusega ja alumine rida poole vähem.
8. Eemaldage joonelt mittevajalikud raamid.

Autorilt: Ma tervitan sind. Vajadus esitada veebisaidil mitu plokki ühes reas on küljendusdisainerite jaoks väga levinud ülesanne. See esineb peaaegu iga malli paigutuse ajal, nii et me kõik peame igal juhul teadma ja rakendama plokkide käitumise muutmise põhimeetodeid.

Enne kui vaatame kõige tavalisemaid trikke, tahaksin meenutada väikest teooriat. Veebilehe elemendid on jagatud plokkideks ja tekstisisesteks. Ja erinevus nende vahel on väga lihtne - väiketähed võivad asuda ühel real, kuid plokkid mitte. Loomulikult ei lõpe erinevused sellega, kuid see on peamine erinevus. Plokkidel võivad juba olla ülemised ja alumised veerised (väiketähtedel seda pole) ning neile saab rakendada rohkem atribuute.

Peamised viisid plokkide järjestamiseks rida css -is

Me ei tee midagi keeruliseks, on kolm peamist viisi:

Teisendage plokid tekstisisestesse elementidesse. Samal ajal kaotatakse plokkide omadused, nii et seda võimalust ei kasutata peaaegu kunagi.

Muutke soovitud elemendid in-line. See on eriline tüüp, milles element säilitab oma omadused, kuid võimaldab samal ajal ka teisi plokke kõrvuti paigutada.

Ujuvad elemendid, kasutades ujuki omadust.

Peatume nendel valikutel. Flexboxi, tabeliekraani ja muid punkte ei võeta arvesse. Oletame, et meil on 3 alamrubriiki.

Rubriik 1

Rubriik 2

Rubriik 3

Loomulikult tuleb kõik css atribuudid kirjutada eraldi faili (style.css), mis tuleb ühendada html -dokumendiga. Sellesse faili kirjutan minimaalse stiili, et meie alamrubriike oleks lihtne näha.

h3 (taust: #EEDDCD;)

h3 ( taust: #EEDDCD;

Siin nad on lehel:

Seal käituvad nad nagu klotsid. Igaüks asub oma joonel, nende vahel on taanded. Soovi korral saate määrata ka mis tahes sisemised taanded ja üldiselt teha ükskõik mida.

Teisendage joonteks ja lisage kohe polster. Selleks lisage h3 valijale järgmised omadused:

kuva: inline; polster: 30 pikslit;

Selle tehnikaga on 2 peamist probleemi. Esimene on minimaalne polster. See moodustub tänu sellele, et koodi plokkide vahel on üks tühik, mis moodustab selle taande. Kui see probleem vajab lahendust, on kaks peamist võimalust.

Html -is korraldage vajalike plokkide kood ühele reale ilma tühikuteta

Negatiivse veerise määramine -4 pikslist paremale. Nii palju üks ruum võtab.

Teine probleem on see, et kuvamisprobleeme võib esineda elementide erineva kõrgusega. Üldiselt on ujuvplokid parim valik. Display: inline-block asemel kirjutame selle:

Blokeerib raamistiku abil reas

Pean kohe ütlema, et kui kavatsete kasutada mõnda tavalist css -raamistikku (näiteks Bootstrap), siis on seal siiski palju lihtsam. Kogu elementide paigutuse eest vastutav css-kood on juba kirjutatud ja teil on vaja ainult õiged klassid määrata. Peate vaid õppima ruudustikusüsteemi ja saate luua tundlikke mitmeveerulisi malle ilma liigsete raskusteta. Vähemalt on see palju lihtsam kui nullist css -i kirjutamine.

Teine väljakutse koodi nullist kirjutamiseks kerkib esile just siis, kui vajate reageerivat disaini. Loomulikult saate seda ise rakendada, omades meediumipäringuid, kuid keerulise malli kasutamisel on see palju raskem.

Näiteks kui teil peaks olema 4 veergu suurtel ekraanidel, 3 keskmistel ja mobiiltelefonidel 2. Selliste raamistike abil nagu Bootstrap või õigemini selle ruudustik, kulub sellise asja rakendamiseks vaid mõni minut .

Teema sujuvalt Bootstrap raamistikku üle viies, märgin veel kord, et kui teil on ees ülesanne luua keeruline reageeriv mall, siis on lihtsalt patt ruudustikku mitte kasutada. Selleks ei pea te isegi raamistiku täisversiooni ühendama - saate seda kohandada ja peatada ainult selle, mida tegelikult vajate.

Saate õppida raamistikuga töötamist abiga. See seletab ka teooriat, kuid kõige tähtsam on see, et on olemas praktika. Ehitate 3 tundlikku malli ja saate suurepärase kogemuse, mis võimaldab teil veebisaite tellida või ise teha. Ja kui soovite tasuta vaadata raamistiku eeliseid ja funktsioone, soovitan teil tutvuda meie artiklite sarjaga Bootstrap ja lihtne paigutus. Soovin teile edu paigutuse ja saidi ülesehitamisel üldiselt.

HTML -lehe loomisel mängib paigutus olulist rolli. Eriti kui me räägime erinevatest sümbolitest ja dekoratiivsest kujundusest: need pisiasjad aitavad muuta teie lehe "keelt" kättesaadavamaks ja selgemaks, pealegi muudavad need oluliselt selle taju ja välimust üldiselt. Disaini üks olulisemaid elemente on horisontaaljoon ning edasi õpime üksikasjalikumalt, kuidas sellega töötada ja kuidas horisontaaljoont html -is teha.

Mis on horisontaaljoon ja milleks see on mõeldud

Horisontaaljoon html -is on lehe kujunduselement, mis täidab mitmeid funktsioone:

1. Dekoratiivne... Aitab lehele atraktiivsust lisada.
2. Jagamine... Edendab erineva tähendusega teabe tõhusat eraldamist.
3. Rõhutades või rõhutades... Juhib lehe külaliste tähelepanu vajalikule ja kõige olulisemale teabele.

Just horisontaaljoont peetakse kõige taskukohasemaks mitmete funktsioonide rakendamiseks. Selle loomine on väga lihtne, kuid väliselt tundub see väga kasumlik. Html-koodi lihtsate muudatuste abil saate kohandada järgmist.

• pikkus;
• laius;
• värvi omadused;
• joondamine ühe või teise servaga.

Pange tähele, et horisontaaljoon viitab plokielementidele. See tähendab, et see võtab lehel uue rea ja sellele järgnev tekst läheb allpool.

Kuidas HTML -is horisontaalset joont luua

Joone saate määrata lihtsa sildi abil - hr kolmnurksulgudes. See on lühend "horisontaalne reegel" ja seab klassikalised välisparameetrid. See erineb paljudest teistest selle poolest, et ei vaja lõppmärgendit ja on võimeline iseseisvalt eksisteerima. Saate muuta elemendi väliseid omadusi, kasutades märgendis lisaväärtusi:

1. Pikkus... Kui te ei soovi, et rea pikkus ulatuks üle kogu lehe, saate määrata soovitud suuruse pikslites või protsentides. Seda tehakse märgendis oleva täiendava sõna "laius" ja numbrilise pikkuse indikaatori abil, mis on määratud pärast "=" märki jutumärkides.

See näeb välja selline. Näiteks kui soovime 100 piksli pikkust, määraksime sellise sildi: hr width = "100"

1. Joondamine... Joondamine on võimalik vasakul või paremal serval ja ka keskel. See funktsioon kehtib ainult siis, kui olete juba määranud laiuse parameetri, kuna täislehekülje rida ei saa joondada. Joondamiseks määrake sildile "align" täiendav atribuut ja lisage sellele suund: keskel - keskel, vasakul - vasakul ja paremal - paremal joondamisel.

Valmis silt näeb sel juhul välja selline. Näiteks kui peame seadma keskjoonduse horisontaalse joone jaoks, mille pikkus on 150 pikslit, näeb valmis märgend välja selline: hr align = "center" width = "150".

Pange tähele, et joondusmõõt "align" pannakse asendisse 1, kuigi atribuut sõltub pikkuse mõõtme laiusest.

1. Laius... Soovi korral saate määrata ka laiuse, luues julge või õhukese allajoonimise. See kriteerium ei sõltu millestki ja seda saab kasutada iseseisvalt ilma pikkust või joondust täpsustamata. Selle jaoks kasutame märgendis atribuuti size ja numbrilist väärtust, mis võrdub soovitud laiusega pikslites. Number on märgitud jutumärkides pärast atribuuti size ja sümbolit "=".

Seega, kui meil on vaja luua 15 piksli laiune rida, peame looma järgmise sildi: hr size = "15".

1. Värv... See on seatud ka sõltumatuks näitajaks. Selle muutmiseks kasutage värvi atribuuti koos värvi nimega koodi kujul või inglise keeles. Värv on märgitud jutumärkides pärast sümbolit "=".

Seega saab tavalise valge joone märgendit kirjutada kahel viisil: hr color = "#FFFFF" või hr color = "white"

Musta saab luua koodi # 000000 abil.

1. Pane ära vari... Kui vajate elementi, mis ei sisalda varju, tuleks märgendis kasutada atribuuti noshade. Seda saab kasutada üksi või koos teiste elementidega. Seda kasutava standardse rea silt näeb välja selline: hr noshade

Looge video abil horisontaalne joon

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

Olles kindlaks määranud horisontaaljoone nõutavad mõõtmed, saate saidi lehed kujundada nii, et teave oleks struktureeritud ja visuaalselt pädev. See aitab külastajatel hõlpsamini esitatud teavet tajuda ja muudab teie saidi teistest eristuvaks.

Tervitused kõigile lugejatele. Aeg -ajalt seisavad võlurid silmitsi probleemiga, kuidas HTML -i või CSS -i abil horisontaalset või vertikaalset joont teha. Seda ma täna teile ütlen.

Ridad CSS -is

Jooni saab joonistada mitmel viisil. Üks selline viis on CSS -i kasutamine. Täpsemalt Border abiga. Võtame näite.

Ja siin on tulemus.

Horisontaalne ja vertikaalne joon css abil.

CSS -i jooni saab joonistada, kasutades lauset Border. Kui soovite lihtsalt fikseeritud äärise laiusega ristkülikut, saate seda operaatorit lihtsalt kasutada ja sellele väärtuse määrata. Näiteks ääris: 5px tahke # 000000; tähendab, et ploki piirid on musta värvi 5 pikslit laiad.

Kui aga peate seadma mitte kõik piirid, vaid ainult mõned, peate täpselt kirja panema, millised piirid on vajalikud ja milline väärtus neil kõigil on. Need on operaatorid:

• border -top - määrab ülemise piiri väärtuse
• border -bottom - määrab alumise piiri väärtuse
• border -left - määrab vasaku piiri väärtuse
• border -right - määrab parema piiri väärtuse.

Vertikaalne ja horisontaalne joon HTML -is

Samuti saate HTML -is ise ridu luua. Selleks saate kasutada märgendit hr.

Sel juhul joonistatakse horisontaalne joon, üks piksel kõrge ja täislaius.

Kuid selle sildi abil saate määrata mõned väärtused.

• Laius- määrab rea laiuse väärtuse.
• Värv- määrab joone värvi.
• Joondage- seab joondamise vasakule, keskele, paremale
• Suurus- määrab joone laiuse väärtuse pikslites.

Märgendiga hr saate määrata ka vertikaalse joone. Kuid sel juhul peate uuesti kasutama stiile.

Sel juhul tõmmatakse vertikaalne joon saja piksli kõrgusele, ühe piksli paksusele ja taandele viis pikslit.

Järeldus.

Nüüd teate, kuidas vertikaalset ja horisontaalset joont seada. Jooni saab määrata nii tavalistele saitidele HTML -i abil kui ka saidile, mis kasutab CMS -i, näiteks WordPress, kuid sel juhul peate lülituma HTML -režiimile.

Noh, kui teil on veel küsimusi, küsige neid kommentaarides.