Kuriant HTML puslapiai dizainas vaidina svarbų vaidmenį. Ypač kai kalbame apie įvairius simbolius ir dekoratyvinį dizainą: šios smulkmenos padeda padaryti jūsų puslapio „kalbą“ prieinamesnę ir aiškesnę, be to, gerokai pakeičia jo suvokimą ir išvaizda apskritai. Vienas iš svarbiausių dizaino elementų yra horizontali linija, o toliau mes išsamiau sužinosime, kaip su ja dirbti ir kaip padaryti horizontalią liniją html.

Kas yra horizontali linija ir kodėl ji reikalinga

Horizontali linija html yra puslapio dizaino elementas, atliekantis keletą funkcijų:

  1. dekoratyvinis. Padeda suteikti puslapiui patrauklumo.
  2. Skirstymas. Prisideda prie efektyvaus skirtingų reikšmių informacijos atskyrimo.
  3. Pabrėžimas arba akcentavimas. Jis atkreips puslapio lankytojų dėmesį į reikalingą ir svarbiausią informaciją.

Tai yra horizontali linija, kuri yra labiausiai vertinama prieinamu būduįgyvendinti daugybę funkcijų. Tai labai paprasta sukurti, o išoriškai jis atrodo labai pelningas. Paprastais html kodo pakeitimais galite valdyti:

  • ilgis;
  • plotis;
  • spalvos charakteristikos;
  • išlyginimas viename ar kitame krašte.

Verta paminėti, kad horizontali linija reiškia bloko elementus. Tai reiškia, kad jis užima naują puslapio eilutę, o po jos einantis tekstas bus žemiau.

Horizontalios linijos kūrimas HTML

Galite nustatyti eilutę naudodami paprastą žymą - hr trikampiuose skliaustuose. Tai trumpas „horizontali taisyklė“ ir nustato klasikinius išorinius parametrus. Jis skiriasi nuo daugelio kitų tuo, kad jam nereikia uždarymo žymos ir ji gali egzistuoti savarankiškai. Keisti išorinės savybės elementą galima atlikti naudojant papildomas žymos reikšmes:

  1. Ilgis. Jei nenorite, kad eilutės ilgis apimtų visą puslapį, tuomet galite nustatyti norimą dydį pikseliais arba procentais. Tai daroma naudojant papildomą žodį „width“ žymoje ir skaitinį ilgio rodiklį, nurodytą po „=“ ženklo kabutėse.

Tai atrodo taip. Pavyzdžiui, jei mums reikia 100 pikselių ilgio, nustatome šią žymą: hr width="100"

  1. lygiavimas. Lygiavimas galimas kairiajame arba dešiniajame krašte, taip pat centre. Ši savybė veikia tik tuo atveju, jei jau nustatėte pločio parametras, nes viso puslapio eilutės negalima lygiuoti. Lygiavimui nustatome papildomą atributą žymoje „lygiuoti“ ir pridedame prie jo kryptį: centre – centrui, kairėn – kairėn ir dešinėn – dešiniam lygiavimui.

Šiuo atveju baigta žyma atrodys taip. Pavyzdžiui, jei reikia nustatyti 150 pikselių ilgio horizontalios linijos lygiavimą centre, baigta žyma atrodys taip: hr align="center" width="150".

Atminkite, kad „lygiuoti“, lygiavimo metrika, nustatyta į 1, net jei atributas priklauso nuo pločio metrikos.

  1. Plotis. Pasirinktinai taip pat galite nurodyti plotį, sukurdami paryškintą arba ploną pabraukimą. Šis kriterijus nuo nieko nepriklauso ir gali būti naudojamas kaip nepriklausomas, nenurodant ilgio ar lygiavimo. Tam naudojame žymos atributą dydis ir skaitinę reikšmę, lygią norimam pločiui pikseliais. Skaičius nurodomas kabutėse po dydžio atributo ir simbolio „=“.

Taigi, jei norime sukurti 15 pikselių pločio liniją, turime sukurti tokią žymą: hr size="15".

  1. Spalva. Jis taip pat nustatytas kaip nepriklausomas rodiklis. Norėdami jį pakeisti, naudokite spalvos atributą kartu su spalvos pavadinimu kodo forma arba ant Anglų kalba. Spalva nurodoma kabutėse po simbolio "=".

Taigi standartinės baltos linijos žymą galima parašyti dviem būdais: hr color="#FFFFFF" arba hr color="white"

Juoda spalva gali būti sukurta naudojant kodą #000000.

  1. Padėti į šalį šešėlis. Jei jums reikia elemento, kuriame nėra šešėlio, žymoje turėtų būti naudojamas atributas noshade. Jis gali būti naudojamas atskirai arba kartu su kitais elementais. Ją naudojanti standartinės eilutės žyma atrodys taip: hr noshade

Sukurkite horizontalią liniją naudodami vaizdo įrašą

Ir jei norite gauti informaciją vaizdesniu formatu, žiūrėkite šį vaizdo įrašą, kuriame išsamiai aprašomos galimybės dirbti su horizontalia linija.

Nustačius reikiamus horizontalios linijos matmenis, svetainės puslapius galite išdėstyti taip, kad informacija būtų struktūrizuota ir vizualiai gerai suformuota. Tai leidžia lankytojams lengviau suvokti pateiktą informaciją ir atskirti jūsų svetainę iš kitų.

Užduotis

Padarykite horizontalią liniją puslapyje.

Sprendimas

horizontalios linijos gerai naudoti atskiriant vieną teksto bloką nuo kito. Mažas tekstas su horizontaliomis linijomis viršuje ir apačioje atkreipia daugiau skaitytojo dėmesio nei įprastas tekstas.

Su etikete

galite nubrėžti horizontalią liniją, kurios išvaizda priklauso nuo naudojamų atributų, taip pat nuo naršyklės. Žyma yra bloko elementas, todėl eilutė visada prasideda nauja linija, o po jo visi elementai rodomi kitoje eilutėje. Su daugybe žymos atributų
naudojant šią žymą sukurtą eilutę lengva valdyti. Jei taip pat prijungiate stilių galią, eilutės pridėjimas prie dokumento virsta paprasta užduotimi.

Numatytoji eilutė

rodomas pilkai ir su garsumo efektu. Šio tipo linijos ne visada atitinka svetainės dizainą, todėl kūrėjų noras pakeisti linijos spalvą ir kitus parametrus stiliais yra suprantamas. Tačiau naršyklės turi dviprasmiškų požiūrių į šią problemą, todėl vienu metu turėsite naudoti kelias stiliaus ypatybes. Visų pirma, senesnės versijos interneto naršyklė„Explorer“ naudoja spalvos ypatybę linijos spalvai, o kitos naršyklės naudoja fono spalvą . Bet tai dar ne viskas, būtinai nurodykite linijos storį (aukštį), išskyrus nulį, ir pašalinkite rėmelį aplink liniją, nustatydami kraštinės ypatybę į None. Sudėjus visas hr parinkiklio savybes, gauname universalų sprendimą populiarioms naršyklėms (1 pavyzdys).

1 pavyzdys. Horizontali linija

HTML5 CSS 2.1 IE Cr Op Sa Fx

Horizontalios linijos spalva

Teksto eilutė

Rezultatas šis pavyzdys parodyta pav. vienas.

Ryžiai. 1. Spalvota horizontali linija

Sveikinimai visiems skaitytojams. Kartkartėmis meistrai susiduria su problema, kaip padaryti horizontalią ar vertikalią liniją naudojant HTML arba su naudojant CSS. Štai ką aš jums šiandien papasakosiu.

CSS eilutės

Yra keletas būdų, kaip sukurti linijas. Vienas iš šių būdų yra CSS naudojimas. Tiksliau, su Border pagalba. Pažiūrėkime į pavyzdį.

Ir štai rezultatas.

Horizontalūs ir vertikali linija su css.

CSS linijas galima nubrėžti naudojant Border operatorių. Jei norite tik stačiakampio su fiksuoto krašto pločio, galite tiesiog naudoti šį operatorių ir suteikti jam reikšmę. Pavyzdžiui border:5px solid #000000; reikš, kad dėžutės kraštinės yra 5 pikselių pločio juodos spalvos.

Tačiau jei reikia nustatyti ne visas ribas, o tik kai kurias, tuomet reikia tiksliai nurodyti, kokios ribos reikalingos ir kokią vertę kiekviena iš jų turės. Tai yra operatoriai:

  • border-top – nustato viršutinės kraštinės reikšmę
  • border-bottom – nustato apatinės kraštinės reikšmę
  • border-left – nustato kairiosios kraštinės reikšmę
  • border-right – nustato dešinės kraštinės reikšmę.

Vertikalios ir horizontalios linijos HTML

Taip pat galite kurti eilutes pačiame HTML. Norėdami tai padaryti, galite naudoti žymą hr.

Tokiu atveju bus nubrėžta vieno pikselio aukščio ir viso pločio horizontali linija.

Tačiau ši žyma galite nustatyti kai kurias vertes.

  • Plotis– nustato linijos pločio reikšmę.
  • spalva- nustato linijos spalvą.
  • Lygiuoti- nustato lygiavimą kairėje, centre, dešinėje
  • dydis– nustato linijos storio reikšmę pikseliais.

Naudodami hr žymą taip pat galite nustatyti vertikalią liniją. Tačiau tokiu atveju vėl teks griebtis stilių.

Tokiu atveju vertikali linija bus nubrėžta šimto pikselių aukščio, vieno pikselio storio ir penkių pikselių įtrauka.

Išvada.

Na, dabar jūs žinote, kaip galite nustatyti vertikalią ir horizontalią liniją. Linijas galima nustatyti kaip įprastose svetainėse, su naudojant HTML, ir nustatyti svetainėje, kurioje naudojama TVS, pavyzdžiui, „WordPress“, tačiau tokiu atveju turėsite perjungti į HTML režimą.

Na, o jei turite daugiau klausimų, užduokite juos komentaruose.

Atrodytų, kam gali prireikti keturių metodų? Juk beveik kiekvienas žmogus naudoja vieną metodą, prie kurio yra pripratęs. Pavyzdžiui, kelis kartus paspaudžiau Shift ir brūkšnelio klavišą, taip išėjo horizontali linija.

Bet ką daryti, jei dėl to atsiranda punktyrinė linija, bet jums reikia vientisos linijos?
- Labiausiai tikėtina, kad klaviatūros klavišas Shift yra sugedęs. Štai keletas kitų pagalbos būdų.

3.
4.
5.

Galbūt labiausiai įprastu būdu Norėdami sukurti eilutę „Word“, turite naudoti kelis klaviatūros klavišus.

I Plona, ​​stora, dviguba, punktyrinė linija naudojant klaviatūrą

Žemiau yra klaviatūros brėžinys su anglišku išdėstymu, bet be rusiško išdėstymo, tačiau tai nesvarbu, nes mus domina tik trys klavišai: Shift, brūkšnys ir Enter.

Ryžiai. 1. Trys klaviatūros klavišai: „Shift“, brūkšnys ir „Enter“ – ištisinei horizontaliai „Word“ linijai

Naudodami šiuos tris klavišus galite nubrėžti ištisinę horizontalią liniją „Word“: brūkšninę arba vientisą, ploną arba storą, ilgą arba trumpą.

1) Kelis kartus paspausdami mygtuką „-“ (brūkšnelis). Žodžių redaktorius gauname bet kokio ilgio punktyrinę liniją.

Daryti plonas ilga eilutė per visą puslapio plotį:

  • Klaviatūroje randame klavišą „brūkšnelis“ (dešinėje nuo „nulio“ klavišo, žaliame rėmelyje 1 pav.).
  • Iš naujos (!) Word eilutės paspauskite šį klavišą kelis kartus: -
  • Tada paspauskite „Enter“ () klavišą. Keli atspausdinti brūkšniai staiga virs ištisine horizontalia plona linija per visą puslapio plotį.

2) Kai vienu metu paspausite Shift ir "-" (brūkšnelį), spausdinamas NE brūkšnys, o apatinis brūkšnys _________. Taigi bet kurioje dokumento vietoje galite sukurti ištisinę savavališko ilgio eilutę.

Ryžiai. 2. Plona ir stora horizontali linija Word

Dabar spausdiname storas horizontali linija per visą puslapio plotį:

  • Vėl randame tą patį brūkšnelio klavišą, taip pat Shift klavišas(kairėje arba dešinėje, kaip jums patinka). Paspauskite Shift, laikykite ir nepaleiskite.
  • O dabar iš naujos (!) eilutės kelis kartus (pavyzdžiui, 3–4 kartus) spustelėkite brūkšnelį (neatleisdami „Shift“): ___. Atleiskite Shift.
  • Dabar paspauskite klavišą Enter. Pamatysite storą horizontalią ištisinę liniją.

Apibendrinkime kai kuriuos rezultatus lentelės pavidalu:

(Spustelėkite norėdami padidinti) Eilutės programoje Word naudojant klaviatūrą

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

II eilutė programoje Word naudojant lentelę

Horizontalią liniją galima gauti naudojant vieno langelio (1x1) lentelę, kurioje nuspalvinta tik viršutinė arba apatinė kraštinė (bus matoma), o kitos trys lentelės pusės turi nedažytus rėmelius (jos bus nematomos) .

Mes pastatome žymeklį į vietą, kurioje turėtų būti eilutė. AT viršutinis meniuŽodžio paspaudimas:

  • Įdėkite (1 3 pav.),
  • Lentelė (2 3 pav.),
  • Viena ląstelė (3 pav. 3).

Ryžiai. 3. Kaip įterpti 1x1 lentelę į Word (iš vieno langelio)

Rezultatas yra vieno didelio langelio (1x1) lentelė:

Jis lieka 1x1 lentelėje iš trijų pusių, kad būtų pašalintos kraštinės. Už tai

  • eikite į skirtuką „Pagrindinis“ (1 4 pav.),
  • šalia "Šriftas" randame "Paragraph" ir kraštines (2 pav. 4),
  • pašalinkite visas kraštines, spustelėdami „No border“ (3 4 pav.),
  • pasirinkite "Viršutinė kraštinė" arba "Apatinė kraštinė" (4 pav. 4).

Ryžiai. 4. Kaip pašalinti kraštinių pasirinkimą „Word“ lentelėje (padaryti kraštines nematomas)

Tai aiškiai parodau vaizdo įraše (straipsnio pabaigoje).

Beje, pav. 3 rodo, kad yra paprastesnis būdas. Galite įdėti žymeklį į Word eilutės pradžią ir spustelėti "Horizontali linija" (5 pav. 4):

III eilutė programoje Word piešiant

Įterpimas (1 pav. 5) – figūros (2 pav. 5) yra dar vienas būdas gauti horizontalią liniją programoje Word.

Norėdami, kad linija būtų griežtai horizontali, laikykite nuspaudę klavišą Shift ir tuo pačiu metu nubrėžkite liniją.

Ryžiai. 5. Kaip nubrėžti liniją programoje Word

IV eilutė programoje „Word“ naudojant ekraninę klaviatūrą

Norėdami rasti ekrano klaviatūrą, paieškoje įvedame frazę „ekrano klaviatūra“, daugiau informacijos, skirtos „Windows 7“ ir „Windows 8“.

Jei naudojate „Windows 10“, ekrano klaviatūrą taip pat galite rasti paieškos juostoje įvedę „on-screen keyboard“.

Ryžiai. 6. Ekrano klaviatūra

Horizontalią liniją sukursime taip pat, kaip ir pirmoje versijoje su įprasta klaviatūra. Ant ekrano klaviatūra jums reikės trijų mygtukų: brūkšnys, Shift ir enter.

1 brūkšnys ir Enter

Naujoje Word eilutėje kelis kartus spustelėkite brūkšnelį (1 pav. 6) ir paspauskite Enter. Gausite ploną horizontalią liniją.

2 Shift, brūkšnys ir Enter

Naujoje Word eilutėje pirmiausia spustelėkite Shift (6 pav. 2), tada Dash (1 6 pav.). Gaukite pabraukimą. Taigi pakartokite dar 2 kartus, tada paspauskite Enter. Dėl to pamatysime storą horizontalią liniją.

Norint pabrėžti kai kuriuos svarbiausius svetainės elementus, nepakenktų naudoti visų rūšių ir tam skirtų dalykų CSS stiliai ir savybes. Žinoma, negalima per daug vargti su tekstu ir jį paryškinti, pavyzdžiui, paryškintu arba kursyvu, pakeisti fonas arba padarykite rėmelį aplink tekstą. Tačiau ne visada vienas iš pateiktų metodų tinka. Tarkime, kad turite tekstą, kurį reikia atskirti dėl jo semantinės apkrovos specifikos. Čia atsiranda HTML ir CSS ypatybės.

Kaip sukurti teksto eilutę naudojant CSS

Norėdami pasiekti savo tikslą, turime atsigręžti style.css failą, įrašant jame atitinkamą savybę siena. Dėl to eilutė bus rodoma virš, žemiau arba tam tikroje teksto pusėje. Savo ruožtu yra keletas savybių, atsakingų už linijos rodymą, būtent:

- kraštinė viršuje– horizontali linija, esanti virš teksto;

- siena-dešinė- vertikali linija, esanti teksto dešinėje;

- kraštinė-apačia– horizontali linija, esanti po tekstu;

- siena-kairė yra vertikali linija kairėje.

Kaip sukurti eilutę html

Naudojant css savybės galite nustatyti visas reikalingas reikšmes redaguodami HTML kodą. Norėdami tai padaryti, eikite į administracinę svetainės dalį. Pasirinkite vieną iš paskelbtų medžiagų, perjunkite teksto redaktoriusį HTML kodo redagavimo režimą ir pridėkite CSS ypatybes. Pavyzdį galite pamatyti žemiau.



Kaip padaryti punktyrinę ar tiesią liniją?



Ar rašydami šias savybes galėsite pabrėžti pateikiamos medžiagos, pastraipos ar antraštės svarbą?


Trumpas komandų paaiškinimas

- plotis– linijos ilgis;

- kietas- Ištisinė linija;

- taškuotas- punktyras.

Norėdami giliau suprasti stilius, rekomenduoju perskaityti tai.

Turite suprasti, kad keičiant svetainės kodą savybės, lemiančios linijos tipą, jos storį ir spalvą, pateikiamos su tarpu.

Šis metodas turi keletą privalumų:

Platus galimybių spektras, su kuriuo galite sukurti beveik bet kokią liniją.

Lengva atlikti visus reikiamus pakeitimus tiesiai į HTML kodą. Tai labai supaprastina užduotį nepatyrusiems svetainių kūrėjams.

Kaip sukurti tiesią horizontalią liniją su HTML žyma

Pirmas dalykas, į kurį norėčiau atkreipti jūsų dėmesį, yra tai, kad ši žyma, nepaisant visų html subtilybių ir principų, neturi baigiamosios žymos. Jis gali būti naudojamas bet kur html kodas, tarp žymų ir.

Žymės atributai

- plotis- yra atsakingas už linijos ilgį. Jį galima nurodyti ir procentais, ir pikseliais.

- dydis- linijos storis. Nurodyta pikseliais.

- spalva– apibrėžia linijos spalvą.

- lygiuotis– atributas, atsakingas už linijų lygiavimą. Savo ruožtu komanda kreipiasi į jį.