Sarcină
Faceți o linie orizontală pe pagină.
Soluţie
Liniile orizontale sunt bune pentru separarea unui bloc de text de altul. Textul mic cu linii orizontale în partea de sus și de jos atrage mai mult atenția asupra cititorului decât textul obișnuit.
Folosind eticheta
puteți desena o linie orizontală, a cărei aspect depinde de atributele utilizate, precum și de browser. Eticheta se referă la elemente de bloc, astfel încât linia începe întotdeauna cu linie nouă, și după el sunt afișate toate elementele următoarea linie... Datorită numeroaselor atribute ale etichetei
linia creată prin această etichetă este ușor de manipulat. Combinat cu puterea stilurilor, adăugarea unei linii la documentul dvs. devine o briză.
Linie implicită
afișat griși cu efect de volum. Acest tip de linie nu se potrivește întotdeauna cu designul site-ului, astfel încât dorința dezvoltatorilor de a schimba culoarea și alți parametri ai liniei prin stiluri este de înțeles. Cu toate acestea, browserele sunt ambigue în legătură cu această problemă, motiv pentru care va trebui să utilizați mai multe proprietăți de stil simultan. În special, versiunile mai vechi ale browserului Internet Explorer pentru culoarea liniei, utilizați proprietatea de culoare, iar alte browsere folosesc proprietatea de culoare de fundal. Dar asta nu este tot, în acest caz, asigurați-vă că specificați o lățime a liniei (înălțimea proprietății) alta decât zero și eliminați marginea din jurul liniei setând proprietatea bordurii la niciuna. Punând toate proprietățile împreună pentru selectorul de ore, obținem o soluție universală pentru browsere populare(exemplu 1).
Exemplul 1. Linia orizontală
HTML5 CSS 2.1 IE Cr Op Sa Fx
Șir de text
Rezultatul acestui exemplu este prezentat în Fig. 1.
Orez. 1. Linie orizontală colorată
De la autor: Te salut. Necesitatea de a prezenta mai multe blocuri pe o pagină web într-o singură linie este o sarcină foarte frecventă care apare pentru proiectanții de layout. Apare în timpul aspectului a aproape fiecare șablon, așa că, în orice caz, trebuie să cunoaștem și să aplicăm metodele de bază pentru schimbarea comportamentului blocurilor.
Înainte de a ne uita la cele mai frecvente trucuri, aș dori să amintesc o mică teorie. Elementele paginii web sunt împărțite în bloc și în linie. Iar diferența dintre ele este foarte simplă - cele cu litere mici pot fi localizate pe o singură linie, dar cele cu blocuri nu. Desigur, diferențele nu se termină aici, dar aceasta este principala diferență. Deja, blocurile pot avea liniuțe superioare și inferioare (cele minuscule nu) și li se pot aplica mai multe proprietăți.
Principalele modalități de a alinia blocuri la rând în CSS
Nu vom complica nimic, există 3 moduri principale:
Convertiți blocurile în elemente în linie. În același timp, proprietățile blocului se pierd, deci această opțiune nu este aproape niciodată folosită.
Faceți elementele dorite blocate în linie. Acesta este un tip special în care elementul își păstrează proprietățile, dar permite în același timp poziționarea altor blocuri una lângă alta.
Elementele plutitoare utilizând proprietatea float.
Să ne oprim asupra acestor opțiuni. Flexbox, afișajul tabelar și alte puncte nu vor fi luate în considerare. Deci, să presupunem că avem 3 subpoziții.
Titlul 1
Rubrica 2
Rubrica 3
Bineînțeles, toate proprietățile CSS trebuie scrise în fișier separat(style.css), care trebuie conectat la documentul html. În acest fișier voi scrie un stil minim, astfel încât subtitlurile noastre să poată fi văzute cu ușurință.
h3 (fundal: #EEDDCD;)
h3 ( fundal: #EEDDCD; |
Iată-le pe pagină:
Acolo se comportă ca niște blocuri. Fiecare este situat pe propria linie, există liniuțe între ele. Dacă doriți, puteți seta, de asemenea, orice liniuță internă pe care o doriți și, în general, puteți face orice doriți.
Convertiți în linii și adăugați imediat umplutura. Pentru aceasta, adăugați următoarele proprietăți la selectorul h3:
display: inline; umplutură: 30 px;
Există 2 probleme principale cu această tehnică. Primul este umplutura minimă. Se formează datorită faptului că există un spațiu între blocurile din cod, care formează această indentare. Dacă această problemă are nevoie de o soluție, există 2 opțiuni principale:
În html, aranjați codul blocurilor necesare într-o singură linie fără spații
Puneți negativ căptușeală exterioarăîn dreapta -4 pixeli. Cam atât ocupă un spațiu.
A doua problemă este că problemele de afișare pot apărea cu diferite înălțimi ale elementelor. În general, blocurile plutitoare sunt cea mai bună opțiune. În loc de display: inline-block, scriem acest lucru:
Blocuri în linie folosind un cadru
Trebuie să spun imediat că, dacă veți folosi orice cadru CSS normal (de exemplu, Bootstrap), atunci este încă mult mai ușor acolo. Tot codul CSS responsabil pentru aranjarea elementelor a fost deja scris și va trebui să setați doar clasele corecte. Tot ce trebuie să faceți este să învățați sistemul de rețea și puteți crea șabloane receptive cu mai multe coloane fără prea multe dificultăți. Cel puțin va fi mult mai ușor decât să scrii css de la zero.
O altă provocare a scrierii codului de la zero apare chiar atunci când aveți nevoie de un design receptiv. Desigur, îl puteți implementa singur deținând interogări media, dar va fi mult mai dificil dacă aveți un șablon complex.
De exemplu, când ai ecrane mari ar trebui să existe 4 coloane, pe mijloc - 3 și pe telefoane mobile- 2. Cu ajutorul unor cadre precum Bootstrap sau, mai bine zis, cu ajutorul grilei sale, este nevoie de doar câteva minute pentru a implementa așa ceva.
Traducerea fără probleme a subiectului Cadrul Bootstrap, încă o dată observ că dacă vă confruntați cu sarcina de a alcătui un șablon adaptativ complex, atunci este pur și simplu un păcat să nu folosiți grila. Nici măcar nu trebuie să fie conectat pentru asta. versiunea completa cadru - îl puteți personaliza și opri acolo doar ceea ce aveți cu adevărat nevoie.
Puteți învăța cum să lucrați cu cadrul. De asemenea, explică teoria, dar cel mai important lucru este că există practică. Impuneți 3 șablon receptivși obțineți o experiență excelentă care vă va permite să creați site-uri web la comandă sau pentru dvs. Și dacă doriți să aruncați gratuit o privire asupra beneficiilor și caracteristicilor cadrului, vă sugerez să consultați seria noastră de articole despre Bootstrap și aspect simplu. Vă doresc succes în amenajarea și construirea site-ului în general.
Bună ziua tuturor! Astăzi vă voi spune cum să creați o linie orizontală folosind html.
De fapt, nevoia de a face o linie orizontală apare destul de des, de exemplu, atunci când trebuie să separați o parte a textului de alta.
Linii orizontale și verticale cu css
Acest lucru se poate face cu folosind css... Pentru a face acest lucru, includ secțiunea de text necesară într-un bloc folosind eticheta div, iar apoi în fișierul style.css sau direct în codul html, scriem proprietăți pentru acest bloc pentru marginea de sus sau de jos folosind border-top și marginea de jos. Iată un exemplu:
În acest caz, am setat stilul cu css direct din codul html și am făcut ca marginea de sus să fie solidă, iar cea de jos linie punctata.
Așa va arăta pe pagină:
Linie orizontală folosind css.
Această metodă are avantajele sale:
- O gamă largă de setări care vă permit să setați aproape orice vizualizare pentru linie;
- Puteți crea atât orizontale, cât și linii verticale... Pentru a crea linii verticale, trebuie să schimbați frontiera-sus în frontiera-stânga și frontiera-jos în frontiera-dreapta.
Dezavantajele includ greutatea relativă a codului.
Cu toate acestea, după cum sa dovedit, puteți introduce și o linie orizontală în text folosind html. În același timp, nici măcar nu este necesar să intrați în CSS. Pentru a face acest lucru, utilizați eticheta
.
Linie orizontală folosind etichetă html
Prima caracteristică a acestei etichete este că nu are o etichetă finală potrivită. Poate fi folosit oriunde în codul html între etichete
și.
Această etichetă are următoarele atribute:
- Lăţime- determină lungimea liniei noastre orizontale în pixeli sau procente;
- Culoare- definește culoarea liniei;
- Alinia- setează alinierea liniei la dreapta - dreapta, stânga - stânga, centru - centru;
- mărimea- lățimea liniei în pixeli.
Aici exemplu html- cod.
Practic, liniile orizontale sunt folosite pentru a decora paginile HTML ale site-ului, oferindu-le un aspect mai atractiv. Dar, de asemenea, pot delimita vizual informațiile secțiunilor învecinate, adăugând comoditate cititorilor atunci când o studiază. În general, trasați linii orizontale acolo unde aveți nevoie, atât.
Cum desenez o linie orizontală?
Există o etichetă specială pentru desenarea liniilor orizontale în HTML
... Mai mult, el este etichetă bloc, adică creează pauze de linie înainte și după sine, deci linia se obține întotdeauna pe o linie separată. În consecință, poate fi specificat numai în etichete care pot conține elemente de bloc, de exemplu sau
... Dar eu însumi
nu poate avea conținut, deoarece pur și simplu nu are o etichetă finală, adică este goală.Un exemplu de desenare a liniilor orizontale în HTML
Desenați linii orizontale
Paragraf.
Paragraf.
Paragraf.
Rezultat în browser
Paragraf.
Paragraf.
Paragraf.
După cum puteți vedea, liniile sunt foarte subțiri, nedescrise și trase la întreaga lățime disponibilă, așa că acum vom învăța cum să le schimbați pentru a le face să pară mai atractive.
Cum schimb culoarea, grosimea și lățimea liniilor orizontale?
În versiunile mai vechi de HTML, eticheta
existau atribute speciale cu care era posibil să se schimbe culoarea, grosimea și lățimea liniilor orizontale. Acestea sunt culoarea, dimensiunea și, respectiv, lățimea. Dar în versiunile mai noi au fost abandonate în favoarea Cascading Style Sheets (CSS), așa că, ați ghicit, vom folosi din nou atributul nostru de stil preferat. Sintaxa generală este:
style = "background: color">- culoarea liniei (sau mai bine zis fundalul acesteia).
style = "height: size">- grosimea liniei.
style = "width: size">- lățimea liniei.
stil = "fundal: culoare; înălțime: dimensiune; lățime: dimensiune"> - dar puteți specifica toți parametrii simultan, nu uitați de punct și virgulă (;).O culoare poate fi specificată prin numele său în limba engleză sau prin codul HEX al culorii, precedat de un hash (#). Ei bine, știți deja despre asta din lecția de mai departe schimbarea culorii textului și a fundalului.
Dar despre redimensionare vom vorbi mai detaliat. Îți amintești de la tutorial despre schimbarea fonturilor, există aproximativ zece unități în CSS, dar lățimea liniei poate fi specificat numai în pixeli (px) și procente (%) și grosimeîn general numai în pixeli. Dacă furnizați alte unități de măsură, atunci aceasta nu va fi o eroare, dar browserele le vor ignora pur și simplu.
Dacă specificați dimensiunile în pixeli, atunci grosimea și lățimea liniei vor depinde de rezoluția monitorului pe care este vizualizat site-ul dvs. (cu cât este mai mare rezoluția ecranului, cu atât linia este mai subțire și mai îngustă).
După cum am spus, numai lățimea liniei poate fi specificată ca procent. Dimensiunile procentuale depind întotdeauna și sunt calculate pe baza mărimii elementului container părinte, în interiorul căruia se află eticheta
... În acest caz, dimensiunea părintelui este luată ca 100%. De exemplu, dacă plasăm eticheta
style = "width: 50%"> element interior, indiferent de modul în care am redimensiona fereastra browserului sau rezoluția monitorului - lățimea liniei va fi întotdeauna la jumătate din lățimea blocului.Un exemplu de schimbare a culorii, grosimii și lățimii liniilor orizontale.
Schimbați culoarea, grosimea și lățimea liniilor orizontale.
Rezultat în browser
Schimbarea poziției liniilor orizontale
Când modificați lățimea unei linii orizontale, devine clar vizibil faptul că browserele o plasează întotdeauna în centru. Dacă doriți să-i schimbați poziția, utilizați-l doar în interior
aliniază atributul cu următoarele valori:
- centru- linia este centrată (valoare implicită).
- stânga- apăsat pe marginea stângă.
- dreapta- apăsat pe marginea dreaptă.
Un exemplu de aliniere a liniilor orizontale.
Schimbați poziția liniilor orizontale.
Rezultat în browser
Cum pot elimina marginea din jurul liniei?
Aruncați o privire la primul exemplu al acestui tutorial. Ce culoare crezi că au aceste linii? Și aici este greșit. Sunt transparente, ca orice element de pagină care nu a fost specificat. culoare de fundal! Nu mă crede? Apoi aruncați o privire la un exemplu în care am schimbat culoarea liniilor. Pentru prima, nu am setat culoarea, ci am mărit doar dimensiunea acesteia și nu este această linie transparentă? Astfel încât!
Voi explica acum. În mod implicit, browserele desenează margini în jurul liniilor, ceea ce creează un efect tridimensional. Deci, atunci când nu creștem grosimea liniilor orizontale, browserele ne arată doar aceste cadre, deoarece grosimea liniei în sine este 0px.
Pentru a elimina marginea din jurul liniei, care de multe ori se strică aspect, vom aplica din nou atributul de stil. Și este scris astfel:
Teme pentru acasă.
- Creați titluri de articol, secțiune și subsecțiune. Centrează-le pe toate.
- Setați întreaga pagină la Arial și Courier pentru anteturi.
- Lăsați dimensiunea fontului pe întreaga pagină să fie de 85% din dimensiunea implicită a browserului. Și titlurile au 145%, 125% și, respectiv, 110% din dimensiunea fontului de pe pagină.
- Scrieți un paragraf sub primul titlu, un citat lung sub al doilea și un poem sub al treilea. Și lăsați poemul să fie centrat pe pagină.
- Pune in evidenta cu caractere aldine trei cuvinte într-un citat.
- Sub titlul articolului, desenați o linie orizontală roșie de trei pixeli pe toată lățimea paginii.
- În partea de sus și de jos a poeziei, desenați un pixel linii negre. Lățimea liniei de sus să fie aproximativ egală cu lățimea versului, iar linia de jos la jumătate.
- Eliminați cadrele inutile de pe linii.
