V zásade sa horizontálne čiary používajú na zdobenie stránok HTML webu, čo im dodáva atraktívnejší vzhľad. Môžu však tiež vizuálne ohraničiť informácie susedných sekcií, čo čitateľom prinesie pohodlie pri ich štúdiu. Vo všeobecnosti nakreslite vodorovné čiary tam, kde potrebujete, to je všetko.
Ako nakreslím vodorovnú čiaru?
Na kreslenie vodorovných čiar v HTML existuje špeciálna značka
... Navyše je bloková značka, to znamená, že vytvára prerušenia riadkov pred a po sebe, takže riadok sa vždy získa na samostatnom riadku. Preto ho možno špecifikovať iba vo vnútri tagov, ktoré môžu obsahovať napríklad prvky bloku alebo
... Ale ja sám
nemôže mať obsah, pretože jednoducho nemá koncovú značku, to znamená, že je prázdny.Príklad kreslenia vodorovných čiar v HTML
Nakreslite vodorovné čiary
Odstavec.
Odstavec.
Odstavec.
Výsledok v prehliadači
Odstavec.
Odstavec.
Odstavec.
Ako vidíte, čiary sú veľmi tenké, neopísateľné a nakreslené na celú dostupnú šírku, takže sa teraz naučíme, ako ich zmeniť, aby vyzerali atraktívnejšie.
Ako zmením farbu, hrúbku a šírku vodorovných čiar?
V starších verziách HTML značka
existoval špeciálne atribúty, pomocou ktorého bolo možné zmeniť farbu, hrúbku a šírku vodorovných čiar. Ide o farbu, veľkosť a šírku. Ale v novších verziách boli odmietnuté v prospech kaskádových štýlov (CSS), takže, uhádli ste, znova použijeme náš obľúbený atribút štýlu. Všeobecná syntax je:
style = "background: color">- farba čiary (alebo skôr jej pozadie).
style = "height: size">- hrúbka čiary.
style = "width: size">- šírka čiary.
štýl = "pozadie: farba; výška: veľkosť; šírka: veľkosť"> - ale môžete zadať všetky parametre naraz, nezabudnite však na bodkočiarku (;).Farbu je možné zadať jej názvom v angličtine alebo HEX-kódom farby, pred ktorým sa nachádza znak hash (#). O tom už viete z hodiny ďalej zmena farby textu a pozadia.
Ale o zmene veľkosti budeme hovoriť podrobnejšie. Pamätáte si z návod na zmenu písma, v CSS je asi desať jednotiek, ale šírka čiary je možné zadať iba v pixeloch (px) a percentách (%) a hrúbka spravidla iba v pixeloch. Ak dodáte ďalšie jednotky, nebude to chyba, ale prehliadače ich jednoducho budú ignorovať.
Ak zadávate rozmery v pixeloch, hrúbka a šírka čiary bude závisieť od rozlíšenia monitora, na ktorom sa váš web zobrazuje (čím vyššie je rozlíšenie obrazovky, tým je riadok tenší a užší).
Ako som povedal, v percentách je možné zadať iba šírku čiary. Percentuálne veľkosti vždy závisia a sú vypočítané na základe veľkosti nadradeného prvku kontajnera, v ktorom je umiestnená značka
... V tomto prípade sa veľkosť rodiča považuje za 100%. Ak napríklad umiestnime značku
štýl = "šírka: 50%"> vnútorný prvok, potom bez ohľadu na to, ako zmeníme veľkosť okna prehliadača alebo rozlíšenia monitora - šírka riadka bude vždy polovicou šírky bloku.Príklad zmeny farby, hrúbky a šírky vodorovných čiar.
Zmeňte farbu, hrúbku a šírku vodorovných čiar.
Výsledok v prehliadači
Zmena polohy vodorovných čiar
Keď zmeníte šírku vodorovnej čiary, je zrejmé, že prehliadače ju vždy umiestnia do stredu. Ak chcete zmeniť jeho polohu, stačí použiť vnútro
zarovnať atribút s nasledujúcimi hodnotami:
- centrum- čiara je zarovnaná na stred (predvolená hodnota).
- vľavo- pritlačené k ľavému okraju.
- správny- pritlačené k pravému okraju.
Príklad zarovnania vodorovných čiar.
Zmeňte polohu vodorovných čiar.
Výsledok v prehliadači
Ako odstránim okraj okolo čiary?
Pozrite sa na úplne prvý príklad tohto tutoriálu. Akú farbu majú podľa vás tieto riadky? A tu je to nesprávne. Sú priehľadné, ako všetky prvky stránky, ktoré neboli uvedené. farba pozadia! Neveríš mi? Potom sa pozrite na príklad, kde sme zmenili farbu čiar. Pri úplne prvom prípade sme nenastavili farbu, ale iba zväčšili jeho veľkosť a nie je tento riadok priehľadný? Tak to!
Teraz vysvetlím. Prehliadače štandardne kreslia rámčeky okolo čiar, ktoré vytvárajú trojrozmerný efekt. Keď teda nezvyšujeme hrúbku vodorovných čiar, prehliadače nám zobrazujú iba tieto rámce, pretože samotná hrúbka čiary je 0 pixelov.
Ak chcete odstrániť hranicu okolo čiary, ktorá sa často iba kazí vzhľad, znova použijeme atribút style. A je to napísané takto:
Domáca úloha.
- Vytvorte nadpisy článkov, sekcií a podsekcií. Vycentrujte ich všetky.
- Pre hlavičky nastavte celú stránku na Arial a Courier.
- Nech je veľkosť písma na celej stránke 85% predvolenej veľkosti prehliadača. A názvy majú 145%, 125%a 110%veľkosti písma na stránke.
- Pod prvý nadpis napíšte odsek, pod druhý dlhý citát a pod tretí báseň. Nechajte báseň vycentrovať na stránku.
- Vo svojom citáte zvýraznite tri slová hrubým písmom.
- Pod nadpis článku nakreslite trojpixelovú červenú vodorovnú čiaru po celej šírke stránky.
- V hornej a dolnej časti básne nakreslite čierne čiary o jednom pixeli. Nech je šírka horného riadku približne rovnaká ako šírka verša a spodný riadok je o polovicu menší.
- Odstráňte nepotrebné rámčeky z riadkov.
Aby sme zdôraznili niektoré obzvlášť dôležité prvky webu, nebolo by na škodu použiť na to poskytnuté všetky druhy štýlov a vlastností CSS. Samozrejme, nemusíte sa príliš trápiť s textom a zvýrazňovať ho napríklad tučným písmom alebo kurzívou, meniť pozadie alebo vytvárať rámček okolo textu. Nie vždy je však jedna z uvedených metód vhodná. Povedzme, že máte text, ktorý je potrebné oddeliť kvôli špecifikám jeho sémantického zaťaženia. Tu prichádzajú na rad vlastnosti HTML a CSS.
Ako vytvoriť riadok v texte pomocou CSS
Na implementáciu nášho plánu musíme odkazovať na súbor style.css zapísaním zodpovedajúcej vlastnosti do nej hranica... Tým sa vytvorí riadok nad, pod alebo na konkrétnej strane textu. Na druhej strane existuje niekoľko vlastností, ktoré sú zodpovedné za zobrazenie riadka, a to:
- border-top- vodorovná čiara nad textom;
- hraničná-pravá- zvislá čiara umiestnená napravo od textu;
- border-bottom- vodorovná čiara pod textom;
- hranične vľavo- zvislá čiara vľavo.
Ako vytvoriť riadok v html
Použitím Vlastnosti CSS všetky potrebné hodnoty môžete zapísať úpravou kódu HTML. Ak to chcete urobiť, musíte prejsť do administratívnej časti webu. Vyberte jeden z publikovaných materiálov, prepnite textový editor do režimu úprav kódu HTML a pridajte vlastnosti CSS. Ukážku je možné vidieť nižšie.
Ako vytvorím bodkovanú alebo rovnú čiaru?
Predpisovaním týchto vlastností budete môcť zdôrazniť dôležitosť uvádzaného materiálu, odseku alebo nadpisu?
Stručné vysvetlenie príkazov
- šírka- dĺžka riadku;
- pevný- plná čiara;
- bodkovaný- bodkovaná čiara.
Na hlbšie zoznámenie sa so štýlmi odporúčam prečítať si tento.
Je potrebné pochopiť, že v procese zmeny kódu stránky sú vlastnosti, ktoré určujú typ čiary, jej hrúbku a farbu, uvedené oddelene medzerou.
Táto metóda má niekoľko výhod:
Široká škála možností, s ktorými urobíte takmer akúkoľvek linku.
Jednoduché vykonanie všetkých potrebných zmien priamo v kóde HTML. To neskúseným tvorcom stránok výrazne zjednodušuje úlohu.
Ako vytvoriť rovnú vodorovnú čiaru pomocou značky HTML
Prvá vec, na ktorú by som vás chcel upozorniť, je, že táto značka napriek všetkým jemnostiam a zásadám html nemá záverečnú značku. Dá sa použiť kdekoľvek html kód, medzi tagmi
a.Atribúty značky
- šírka- je zodpovedný za dĺžku linky. Je možné ho zadať v percentách aj v pixeloch.
- veľkosť- hrúbka čiary. Špecifikované v pixeloch.
- farba- definuje farbu čiary.
- zarovnať- atribút zodpovedný za zarovnanie čiar. Na druhej strane tím na to odkazuje.
Úloha
Na stránke urobte vodorovnú čiaru.
Riešenie
Vodorovné čiary sú vhodné na oddelenie jedného bloku textu od druhého. Malý text s vodorovnými čiarami v hornej a dolnej časti púta na čitateľa väčšiu pozornosť ako obyčajný text.
Použitie značky
môžete nakresliť vodorovnú čiaru, ktorej vzhľad závisí od použitých atribútov, ako aj od prehliadača. Značka odkazuje na prvky bloku, takže riadok vždy začína na Nový riadok, a potom sa všetky prvky zobrazia na nasledujúcom riadku. Vďaka mnohým atribútom značky
s riadkom vytvoreným prostredníctvom tejto značky sa dá ľahko manipulovať. V kombinácii so silou štýlov je pridanie riadka do dokumentu hračkou.Predvolený riadok
zobrazené sivou farbou a s efektom hlasitosti. Tento druh riadkov nie vždy zodpovedá dizajnu stránky, takže túžba vývojárov zmeniť farbu a ďalšie parametre čiary prostredníctvom štýlov je pochopiteľná. Prehliadače sú však v tejto záležitosti nejednoznačné, a preto budete musieť používať niekoľko vlastností štýlu naraz. Najmä staršie verzie internetový prehliadač Prieskumník používa pre farbu čiary vlastnosť farba a ostatné prehliadače používajú vlastnosť farba pozadia. Ale to nie je všetko, v tomto prípade určite zadajte šírku riadka (vlastnosť výška) inú ako nulu a odstráňte orámovanie okolo čiary nastavením vlastnosti border na hodnotu none. Keď spojíme všetky vlastnosti pre selektor hr, dostaneme univerzálne riešenie pre obľúbené prehliadače (príklad 1).Príklad 1. Vodorovná čiara
HTML5 CSS 2.1 IE Cr Op Sa Fx
Farba horizontálnej čiary
Textový reťazec
Výsledok tento príklad znázornené na obr. 1.
Ryža. 1. Farebná vodorovná čiara
Ahojte všetci! Dnes vám poviem, ako na to pomocou html urobte vodorovnú čiaru.
V skutočnosti potreba vytvoriť vodorovnú čiaru vzniká pomerne často, napríklad keď potrebujete oddeliť jednu časť textu od druhej.
Horizontálne a vertikálne čiary s CSS
To je možné vykonať pomocou pomocou css... Aby som to urobil, uzatvorím požadovanú oblasť textu do bloku pomocou značky div a potom do súboru style.css alebo priamo do kódu html napíšeme vlastnosti tohto bloku pre horný alebo dolný okraj pomocou ohraničenia. -hore a dole. Tu je príklad:
Zvislý riadok HTML Horizontálna čiara pomocou css.V tomto prípade som nastavil štýl pomocou css priamo z html kódu a urobil som z horného okraja plnú čiaru a spodnú prerušovanú čiaru.
Takto to bude vyzerať na stránke:
Horizontálna čiara pomocou css.
Táto metóda má svoje výhody:
- Široká škála nastavení, ktoré vám umožňujú nastaviť takmer akékoľvek zobrazenie linky;
- Môžete vytvárať horizontálne aj vertikálne čiary. Ak chcete vytvárať zvislé čiary, musíte zmeniť okraj zhora na okraj vľavo a okraj dole zospodu na okraj vpravo.
Medzi nevýhody patrí relatívna ťažkopádnosť kódu.
Ako sa však ukázalo, vodorovnú čiaru môžete do textu vložiť aj pomocou html. Zároveň nie je ani potrebné ísť do css. Ak to chcete urobiť, použite značku
.Vodorovná čiara pomocou značky HTML
Prvá vlastnosť tejto značky je, že nemá zodpovedajúcu koncovú značku. Dá sa použiť kdekoľvek v html kóde medzi tagmi
a.Táto značka má nasledujúce atribúty:
- Šírka- určuje dĺžku našej vodorovnej čiary v pixeloch alebo percentách;
- Farba- definuje farbu čiary;
- Zarovnať- nastaví zarovnanie čiary vpravo - vpravo, vľavo - vľavo, stred - stred;
- Veľkosť- šírka riadku v pixeloch.
Tu html príklad- kód.
Horizontálne čiary tvorené nepárovou značkou (koncová značka nie je potrebná)
a môžu to byť celkom jedinečné dizajnové prvky. Navrhovanie textu s pridaním horizontálnych riadkov HTML dodá stránke určitú logiku prezentácie textu a čitateľovi bude tiež jednoduchšie zvýrazniť bloky informácií, ktoré je potrebné sekvenčne študovať. Označiť
môže vytvárať horizontálne čiary rôznych farieb, hrúbok a dĺžok. A je to celkom jednoduché, čo je znázornené na nižšie uvedených príkladoch.Mimochodom, môžete použiť aj vlastnosti štýlu bloku
a
vytvárať čiary
na určitom mieste. Je pravda, že táto možnosť nemusí byť vždy pohodlná, napríklad farbenie sa niekedy nie vždy ospravedlňuje, ale v mnohých možnostiach je možné vyriešiť problémy týmto spôsobom. Napríklad vo vnútri sa vytvorila čiara tag
nevkladaj text. A vo vnútri blokov je to možné a neustále sa cvičí. Musíte si teda vybrať svoju možnosť v závislosti od požiadaviek na dizajn.Zvislé čiary v HTML.
A zvislé čiary sú tvorené prakticky v rovnakých blokoch
a
.
Iba jedna nepríjemnosť - nie vo všetkých prehliadačoch je značka
funguje rovnako, ale tu to musíte vyskúšať
a vyladiť stránku alebo použiť aktualizované prehliadače.Tvorba horizontálnych čiar:
Označiť
vloží na stránku vodorovnú čiaru a má nasledujúce atribúty:Syntax značky
:Príklady vodorovných čiar v HTML:
Príklady zvislých čiar v HTML:
Tu je príklad zvislej červenej čiary vľavo.
Tu je príklad zvislej červenej čiary vpravo.
Tu je príklad vodorovnej červenej čiary v hornej časti.
Tu je príklad vodorovnej červenej čiary nižšie.
Tu je príklad horizontálnych a vertikálnych čiar.
Syntax pre príklady zvislých a vodorovných čiar v HTML je:
všimnite si atribút štýlu
hranica- vľavo (-vpravo): 4px plné # FF0000;:Kruh vytvorený štítkom
Tu je príklad zvislej červenej čiary vľavo.
Tu je príklad zvislej červenej čiary vpravo.
Tu je príklad vodorovnej červenej čiary nižšie.
Tu je príklad horizontálnych a vertikálnych čiar.
A ak analyzujeme tieto príklady, potom môžeme urobiť pomerne jednoduchý záver, že zvislé čiary je najlepšie vytvoriť s pomocou a varianty medziľahlých čiar je možné vykonať pomocou tag
Všetko však závisí od predstavivosti a požiadaviek. Tak si vyber a vytvaruj.