Lai uzsvērtu dažus īpaši svarīgus vietnes elementus, nenāktu par ļaunu izmantot visu šim nolūkam paredzēto CSS stilu un rekvizītus. Protams, jums nav jāraizējas ar tekstu un jāizceļ tas, piemēram, treknrakstā vai slīprakstā, jāmaina fons vai jāveido rāmis ap tekstu. Bet ne vienmēr viena no piedāvātajām metodēm ir piemērota. Pieņemsim, ka jums ir teksts, kas jāatdala tā semantiskās slodzes specifikas dēļ. Šeit parādās HTML un CSS rekvizīti.

Kā izveidot rindiņu tekstā, izmantojot CSS

Lai īstenotu mūsu plānu, mums ir jāatsaucas uz style.css failu ierakstot tajā atbilstošo īpašumu robeža... Tādējādi tiks izveidota līnija virs, zem vai noteiktā teksta pusē. Savukārt ir vairāki rekvizīti, kas ir atbildīgi par rindas parādīšanu, proti:

- robeža-augša- horizontāla līnija virs teksta;

- robeža pa labi- vertikāla līnija, kas atrodas pa labi no teksta;

- robeža-apakšā- horizontāla līnija zem teksta;

- robeža pa kreisi- vertikālā līnija pa kreisi.

Kā izveidot rindiņu html

Izmantojot CSS rekvizītus, varat uzrakstīt visas nepieciešamās vērtības, rediģējot HTML kodu. Lai to izdarītu, jums jāiet uz vietnes administratīvo daļu. Atlasiet vienu no publicētajiem materiāliem, pārslēdziet teksta redaktoru uz HTML koda rediģēšanas režīmu un pievienojiet CSS rekvizītus. Paraugu var redzēt zemāk.

Īss komandu skaidrojums

- platums- līnijas garums;

- ciets- cieta līnija;

- punktēts- punktētā līnija.

Lai dziļāk iepazītos ar stiliem, iesaku izlasīt šo.

Ir jāsaprot, ka, veicot izmaiņas vietnes kodā, rekvizīti, kas nosaka līnijas tipu, tā biezumu un krāsu, ir uzskaitīti ar atstarpi.

Šai metodei ir vairākas priekšrocības:

Plašs iespēju klāsts, ar kuru jūs varat izveidot gandrīz jebkuru līniju.

Viegli veikt visas nepieciešamās izmaiņas tieši HTML kodā. Tas ievērojami vienkāršo uzdevumu nepieredzējušiem vietņu veidotājiem.

Kā izveidot taisnu horizontālu līniju, izmantojot HTML tagu

---

Pirmā lieta, kurai es gribētu pievērst jūsu uzmanību, ir tā, ka šim tagam, neskatoties uz visiem html smalkumiem un principiem, nav noslēguma birkas. To var izmantot jebkur html kodā, starp tagiem un.

Tagu atribūti

---

- platums- ir atbildīgs par rindas garumu. To var norādīt gan procentos, gan pikseļos.

- Izmērs- līnijas biezums. Norādīts pikseļos.

- krāsa- nosaka līnijas krāsu.

- izlīdzināt- atribūts, kas atbild par līniju izlīdzināšanu. Savukārt komanda atsaucas uz to.

Būtībā horizontālās līnijas tiek izmantotas, lai dekorētu vietnes HTML lapas, piešķirot tām pievilcīgāku izskatu. Bet tie var arī vizuāli norobežot informāciju par blakus esošajām sadaļām, pievienojot lasītājiem ērtības, to pētot. Vispār, zīmējiet horizontālas līnijas, kur jums ir nepieciešams, tas arī viss.

Kā uzzīmēt horizontālu līniju?

Horizontālu līniju zīmēšanai HTML ir īpašs tags

---

... Turklāt viņš ir bloķēt tagu, tas ir, tas rada rindu pārtraukumus pirms un pēc sevis, tāpēc līnija vienmēr tiek iegūta atsevišķā rindā. Attiecīgi to var norādīt tikai tagu iekšpusē, kas, piemēram, var saturēt bloķēšanas elementus vai

... Bet es pats

---

nevar būt satura, jo tam vienkārši nav beigu taga, tas ir, tas ir tukšs.

Horizontālu līniju zīmēšanas piemērs HTML

---

Paragrāfs.

Paragrāfs.

---

Paragrāfs.

Rezultāts pārlūkprogrammā

Paragrāfs.

Paragrāfs.

Paragrāfs.

Kā redzat, līnijas ir ļoti plānas, neaprakstītas un novilktas uz visu pieejamo platumu, tāpēc tagad mēs uzzināsim, kā tās mainīt, lai tās izskatītos pievilcīgākas.

Kā mainīt horizontālo līniju krāsu, biezumu un platumu?

Vecākās HTML versijās tags

---

bija īpaši atribūti, ar kuriem bija iespējams mainīt horizontālo līniju krāsu, biezumu un platumu. Tie ir attiecīgi krāsa, izmērs un platums. Bet jaunākās versijās tie ir atcelti par labu kaskādes stila lapām (CSS), tāpēc, kā jūs uzminējāt, mēs atkal izmantosim savu iecienīto stila atribūtu. Vispārējā sintakse ir šāda:

---

style = "background: color">- līnijas krāsa (vai drīzāk tās fons).

---

style = "height: size">- līnijas biezums.

---

style = "width: size">- līnijas platums.

---

stils = "fons: krāsa; augstums: izmērs; platums: izmērs"> - bet jūs varat norādīt visus parametrus uzreiz, tikai neaizmirstiet par semikolu (;).

Krāsu var norādīt pēc tās nosaukuma angļu valodā vai ar krāsas HEX kodu, pirms kura ir hash (#). Nu, jūs jau zināt par to no nodarbības mainot teksta un fona krāsu.

Bet par izmēru maiņu mēs runāsim sīkāk. Vai atceraties no apmācība par fontu maiņu, CSS ir aptuveni desmit vienības, bet līnijas platums var norādīt tikai pikseļos (px) un procentos (%), un biezums parasti tikai pikseļos. Ja piegādājat citas vienības, tad tā nebūs kļūda, bet pārlūkprogrammas tās vienkārši ignorēs.

Ja norādāt izmērus pikseļos, līnijas biezums un platums būs atkarīgs no tā monitora izšķirtspējas, kurā tiek skatīta jūsu vietne (jo augstāka ekrāna izšķirtspēja, jo plānāka un šaurāka līnija).

Kā jau teicu, procentos var norādīt tikai līnijas platumu. Procentuālie izmēri vienmēr ir atkarīgi un tiek aprēķināti, pamatojoties uz konteinera vecāka elementa lielumu, kurā atrodas tags

---

... Šajā gadījumā vecāku lielums tiek uzskatīts par 100%. Piemēram, ja mēs ievietojam tagu

---

style = "width: 50%"> iekšējais elements

, tad neatkarīgi no tā, kā mainām pārlūka loga izmērus vai monitora izšķirtspēju - līnijas platums vienmēr būs puse no bloka platuma

.

Horizontālo līniju krāsas, biezuma un platuma maiņas piemērs.

---

---

---

---

Rezultāts pārlūkprogrammā

Mainot horizontālo līniju stāvokli

Mainot horizontālās līnijas platumu, kļūst skaidri redzams, ka pārlūkprogrammas vienmēr novieto to centrā. Ja vēlaties mainīt tā pozīciju, izmantojiet to tikai iekšpusē

---

saskaņojiet atribūtu ar šādām vērtībām:

• centrā- līnija ir centrēta (noklusējuma vērtība).
• pa kreisi- piespiests pie kreisās malas.
• taisnība- nospiests pret labo malu.

Horizontālu līniju izlīdzināšanas piemērs.

---

---

---

Rezultāts pārlūkprogrammā

Kā noņemt robežu ap līniju?

Apskatiet pašu pirmo šīs apmācības piemēru. Kāda krāsa, jūsuprāt, ir šīm līnijām? Un šeit tas ir nepareizi. Tie ir caurspīdīgi, tāpat kā visi lapas elementi, kuriem nav fona krāsas! Netici man? Pēc tam apskatiet piemēru, kurā mēs mainījām līniju krāsu. Pirmajā gadījumā mēs neuzstādījām krāsu, bet tikai palielinājām tās izmēru un vai šī līnija nav caurspīdīga? Tā ka!

Es tagad paskaidrošu. Pēc noklusējuma pārlūkprogrammas ap līnijām zīmē robežas, kas rada trīsdimensiju efektu. Tātad, ja mēs nepalielinām horizontālo līniju biezumu, pārlūkprogrammas parāda mums tikai šos kadrus, jo pašas līnijas biezums ir 0 pikseļi.

Lai noņemtu apmali ap līniju, kas bieži vien sabojā tikai izskatu, mēs atkārtoti izmantosim stila atribūtu. Un tas ir rakstīts šādi:

---

Mājasdarbs.

1. Izveidojiet rakstu, sadaļu un apakšsadaļu virsrakstus. Centrējiet tos visus.
2. Virsrakstiem iestatiet visu lapu uz Arial un Courier.
3. Lai visas lapas fonta lielums būtu 85% no pārlūka noklusējuma lieluma. Un nosaukumos ir attiecīgi 145%, 125%un 110%no lapas fonta lieluma.
4. Uzrakstiet rindkopu zem pirmā virsraksta, garu citātu zem otrā un dzejoli zem trešās. Un ļaujiet dzejolim būt lapas centrā.
5. Savā citātā izceliet trīs vārdus treknrakstā.
6. Zem raksta virsraksta visā lapas platumā uzzīmējiet trīs pikseļu sarkanu horizontālu līniju.
7. Dzejoļa augšpusē un apakšā uzzīmējiet vienu pikseļu melnas līnijas. Lai augšējās līnijas platums būtu aptuveni vienāds ar panta platumu, bet apakšējā līnija - uz pusi mazāka.
8. Noņemiet nevajadzīgos rāmjus no līnijām.

No autora: Es sveicu jūs. Nepieciešamība tīmekļa vietnē vienā rindā parādīt vairākus blokus ir ļoti biežs uzdevums, kas rodas maketētājiem. Tas notiek gandrīz katras veidnes izkārtojuma laikā, tāpēc mums visiem jebkurā gadījumā ir jāzina un jāpiemēro pamatmetodes, kā mainīt bloku uzvedību.

Pirms mēs aplūkojam visbiežāk sastopamos trikus, es gribētu atgādināt nelielu teoriju. Web lapas elementi ir sadalīti blokos un rindās. Un atšķirība starp tām ir ļoti vienkārša - mazos burtus var izvietot vienā rindā, bet bloķētus - ne. Protams, atšķirības nebeidzas, bet šī ir galvenā atšķirība. Blokiem jau var būt augšējā un apakšējā mala (mazajiem nav), un tiem var piemērot vairāk rekvizītu.

Galvenie veidi, kā sakārtot blokus pēc kārtas css

Mēs neko nesarežģīsim, ir 3 galvenie veidi:

Pārvērst blokus par iekļautajiem elementiem. Tajā pašā laikā tiek zaudēti bloku rekvizīti, tāpēc šī opcija gandrīz nekad netiek izmantota.

Iestatiet vēlamos elementus blokā. Šis ir īpašs veids, kurā elements saglabā savas īpašības, bet vienlaikus ļauj novietot citus blokus blakus.

Peldošie elementi, izmantojot pludiņa īpašību.

Ļaujiet mums pakavēties pie šīm iespējām. Flexbox, tabulas displejs un citi punkti netiks ņemti vērā. Tātad, pieņemsim, ka mums ir 3 apakšvirsraksti.

1. pozīcija

2. pozīcija

3. pozīcija

Protams, visi css rekvizīti jāraksta atsevišķā failā (style.css), kam jābūt savienotam ar html dokumentu. Šajā failā es uzrakstīšu minimālu stilu, lai mūsu apakšvirsraksti būtu viegli redzami.

h3 (fons: #EEDDCD;)

h3 ( fons: #EEDDCD;

Šeit viņi atrodas lapā:

Tur viņi uzvedas kā kluči. Katrs no tiem atrodas savā līnijā, starp tiem ir ievilkumi. Ja vēlaties, varat arī iestatīt vēlamos iekšējos ievilkumus un vispār darīt visu, ko vēlaties.

Pārveidojiet par līnijām un nekavējoties pievienojiet polsterējumu. Lai to izdarītu, atlasītājam h3 pievienojiet šādus rekvizītus:

displejs: inline; polsterējums: 30 pikseļi;

Šai tehnikai ir 2 galvenās problēmas. Pirmais ir minimālais polsterējums. Tas veidojas sakarā ar to, ka kodā starp blokiem ir viena atstarpe, kas veido šo ievilkumu. Ja šai problēmai nepieciešams risinājums, ir 2 galvenās iespējas:

Html sakārtojiet nepieciešamo bloku kodu vienā rindā bez atstarpēm

Iestatiet negatīvu malu labajā pusē no -4 pikseļiem. Tik daudz aizņem viena telpa.

Otra problēma ir tā, ka displeja problēmas var rasties ar dažādu elementu augstumu. Kopumā peldošie bloki ir labākais risinājums. Displeja: inline-block vietā mēs rakstām šādi:

Bloķē rindā, izmantojot ietvaru

Uzreiz jāsaka, ka, ja jūs izmantosit jebkuru parastu css ietvaru (piemēram, Bootstrap), tad tur joprojām ir daudz vieglāk. Viss css kods, kas ir atbildīgs par elementu izvietojumu, jau ir uzrakstīts, un jums būs jāiestata tikai pareizās klases. Viss, kas jums jādara, ir apgūt režģa sistēmu, un jūs varat izveidot atsaucīgas vairāku kolonnu veidnes bez lielām grūtībām. Vismaz tas būs daudz vieglāk nekā rakstīt css no nulles.

Vēl viens izaicinājums rakstīt kodu no nulles rodas tieši tad, kad jums ir nepieciešams atsaucīgs dizains. Protams, jūs varat to īstenot pats, iegūstot multivides vaicājumus, taču tas būs daudz grūtāk, ja jums būs sarežģīta veidne.

Piemēram, ja lielos ekrānos vajadzētu būt 4 kolonnām, 3 vidējiem un mobilajos tālruņos - 2. Izmantojot tādas sistēmas kā Bootstrap vai drīzāk ar tā režģi, šādas lietas ieviešana aizņem tikai dažas minūtes .

Gludi pārnesot tēmu uz Bootstrap ietvaru, es vēlreiz atzīmēšu, ka, ja jūs saskaraties ar uzdevumu izveidot sarežģītu reaģējošu veidni, tad vienkārši ir grēks neizmantot režģi. Lai to izdarītu, nav pat jāpievieno pilna ietvara versija - varat to pielāgot un apstāties tikai pie tā, kas jums patiešām nepieciešams.

Jūs varat uzzināt, kā strādāt ar sistēmu. Tas arī izskaidro teoriju, bet vissvarīgākais ir tas, ka ir prakse. Jūs izveidosit 3 atsaucīgas veidnes un iegūsit lielisku pieredzi, kas ļaus jums izveidot vietnes pēc pasūtījuma vai sev. Un, ja vēlaties bez maksas apskatīt ietvara priekšrocības un funkcijas, iesaku apskatīt mūsu rakstu sēriju par Bootstrap un vienkāršu izkārtojumu. Es novēlu jums panākumus izkārtojumā un vietņu veidošanā kopumā.

Veidojot HTML lapu, izkārtojumam ir būtiska loma. It īpaši, ja mēs runājam par dažādiem simboliem un dekoratīvu dizainu: šie sīkumi palīdz padarīt jūsu lapas "valodu" pieejamāku un skaidrāku, turklāt būtiski maina tās uztveri un izskatu kopumā. Viens no vissvarīgākajiem dizaina elementiem ir horizontāla līnija, un tālāk mēs sīkāk uzzināsim, kā ar to strādāt un kā izveidot horizontālu līniju html.

Kas ir horizontāla līnija un kam tā paredzēta

Horizontāla līnija html ir lapas dizaina elements, kas veic vairākas funkcijas:

1. Dekoratīvs... Palīdz lapai pievienot pievilcību.
2. Sadalīšana... Veicina efektīvu informācijas nošķiršanu dažādās nozīmēs.
3. Uzsverot vai pasvītrojot... Vērš lapas apmeklētāju uzmanību uz nepieciešamo un vissvarīgāko informāciju.

Tieši horizontālā līnija tiek uzskatīta par vislētāko veidu, kā īstenot vairākas funkcijas. To izveidot ir ļoti vienkārši, bet ārēji tas izskatās ļoti izdevīgi. Vienkārši mainot html kodu, varat regulēt:

• garums;
• platums;
• krāsu īpašības;
• izlīdzināšana vienā vai otrā malā.

Ņemiet vērā, ka horizontālā līnija attiecas uz bloka elementiem. Tas nozīmē, ka tas lapā ieņem jaunu rindu, un teksts, kas seko tam, būs zemāk.

Kā izveidot horizontālu līniju HTML

Jūs varat iestatīt līniju, izmantojot vienkāršu tagu - hr trīsstūra iekavās. Tas ir saīsinājums no "Horizontālais noteikums" un nosaka klasiskos ārējos parametrus. Tas atšķiras no daudziem citiem ar to, ka tam nav nepieciešams beigu tags un tas spēj pastāvēt pats. Jūs varat mainīt elementa ārējās īpašības, izmantojot tagā papildu vērtības:

1. Garums... Ja nevēlaties, lai līnijas garums stiepjas pa visu lapu, varat iestatīt vēlamo izmēru pikseļos vai procentos. Tas tiek darīts, izmantojot papildu vārdu "platums" tagā un skaitlisku garuma indikatoru, kas norādīts pēc pēdiņas "=".

Tas izskatās šādi. Piemēram, ja mums ir nepieciešams 100 pikseļu garums, mēs iestatītu tagu šādi: hr width = "100"

1. Izlīdzināšana... Izlīdzināšana ir iespējama kreisajā vai labajā malā, kā arī centrā. Šī funkcija ir derīga tikai tad, ja esat jau norādījis platuma parametru, jo visas lapas rindu nevar izlīdzināt. Lai veiktu izlīdzināšanu, tagā "align" iestatiet papildu atribūtu un pievienojiet tam virzienu: centrs - centram, kreisais - kreisajam un labais - labajai līdzināšanai.

Gatavā atzīme šajā gadījumā izskatīsies šādi. Piemēram, ja mums ir jāiestata centra izlīdzināšana horizontālai līnijai ar 150 pikseļu garumu, tad gatavais tags izskatīsies šādi: hr align = "center" width = "150".

Ņemiet vērā, ka izlīdzināšanas mērs "align" ir novietots 1. pozīcijā, lai gan atribūts ir atkarīgs no garuma mērījuma platuma.

1. Platums... Pēc izvēles varat norādīt arī platumu, izveidojot treknrakstu vai plānu pasvītrojumu. Šis kritērijs nav atkarīgs no nekā un to var izmantot neatkarīgi, nenorādot garumu vai izlīdzinājumu. Tam tagā izmantojam atribūtu size un skaitlisku vērtību, kas vienāda ar vēlamo platumu pikseļos. Skaitlis ir norādīts pēdiņās aiz lieluma atribūta un simbola "=".

Tādējādi, ja mums ir jāizveido 15 pikseļu plata līnija, mums ir jāizveido šāds tags: hr size = "15".

1. Krāsa... Tas ir iestatīts arī kā neatkarīgs rādītājs. Lai to mainītu, izmantojiet atribūtu color kombinācijā ar krāsas nosaukumu koda veidā vai angļu valodā. Krāsa ir norādīta pēdiņās aiz simbola "=".

Tādējādi standarta baltas līnijas tagu var rakstīt divos veidos: hr color = "#FFFFFF" vai hr color = "white"

Melnu var izveidot, izmantojot kodu # 000000.

1. Nolikt malā ēna... Ja jums ir nepieciešams elements, kas nesatur ēnu, tad tagā jāizmanto atribūts noshade. To var izmantot atsevišķi vai kombinācijā ar citiem elementiem. Standarta līnijas atzīme, izmantojot to, izskatīsies šādi: hr noshade

Izmantojot video, izveidojiet horizontālu līniju

Un, ja vēlaties iegūt informāciju vizuālā formātā, skatiet nākamo videoklipu, kurā sīki aprakstītas iespējas strādāt ar horizontālu līniju.

Nosakot nepieciešamos horizontālās līnijas izmērus, jūs varat noformēt vietnes lapas tā, lai informācija būtu strukturēta un vizuāli kompetenti ierāmēta. Tas palīdz apmeklētājiem vieglāk uztvert sniegto informāciju un padarīt jūsu vietni atšķirīgu no citām.

Sveiciens visiem lasītājiem. Laiku pa laikam vedņi saskaras ar problēmu, kā izveidot horizontālu vai vertikālu līniju, izmantojot HTML vai CSS. To es jums šodien pastāstīšu.

Līnijas CSS

Ir vairāki veidi, kā izdarīt līnijas. Viens no šādiem veidiem ir CSS izmantošana. Precīzāk, ar Border palīdzību. Ņemsim piemēru.

Un šāds būs rezultāts.

Horizontālā un vertikālā līnija, izmantojot css.

Līnijas CSS var zīmēt, izmantojot paziņojumu Robeža. Ja vēlaties tikai taisnstūri ar fiksētu apmales platumu, varat vienkārši izmantot šo operatoru un iestatīt tam vērtību. Piemēram, apmale: 5 pikseļi cieta # 000000; nozīmē, ka bloka apmales ir 5 pikseļus platas melnā krāsā.

Tomēr, ja jums ir jānosaka ne visas robežas, bet tikai dažas, tad jums precīzi jāpieraksta, kuras robežas ir vajadzīgas un kāda vērtība būs katrai no tām. Šie ir operatori:

• border -top - nosaka augšējās robežas vērtību
• border -bottom - nosaka apakšējās robežas vērtību
• border -left - iestata kreisās apmales vērtību
• border -right - iestata labās robežas vērtību.

Vertikāla un horizontāla līnija HTML

Jūs varat arī izveidot līnijas pašā HTML. Lai to izdarītu, varat izmantot tagu hr.

Šajā gadījumā tiks novilkta horizontāla līnija, viena pikseļa augsta un pilna platuma.

Bet šo tagu, jūs varat iestatīt dažas vērtības.

• Platums- iestata līnijas platuma vērtību.
• Krāsa- nosaka līnijas krāsu.
• Izlīdzināt- iestata līdzinājumu pa kreisi, centrā, pa labi
• Izmērs- iestata līnijas platuma vērtību pikseļos.

Izmantojot tagu hr, varat definēt arī vertikālu līniju. Bet šajā gadījumā jums atkal būs jāizmanto stili.

Šajā gadījumā tiks novilkta vertikāla līnija, kas ir simts pikseļu augsta, viena pikseļa bieza un ievilkta pieci pikseļi.

Secinājums.

Tagad jūs zināt, kā iestatīt vertikālu un horizontālu līniju. Līnijas var iestatīt gan parastajās vietnēs, izmantojot HTML, gan vietnēs, kurās tiek izmantota CMS, piemēram, WordPress, taču šajā gadījumā jums būs jāpāriet uz HTML režīmu.

Nu, ja jums ir vēl kādi jautājumi, uzdodiet tos komentāros.