Rezolvarea problemelor cu CSS. De ce CSS este atât de important în cazul în care pot scrie CSS

O astfel de abordare a fost voluminată din mai multe motive:

• tabele în HTML. variat: Au nevoie de o mulțime de cod de șablon;
• marcajul a fost semantic incorect: Tabelele trebuie utilizate pentru date multidimensionale;
• schimbarea aspectului necesită o modificare a marcajului: Dacă am vrut să mutăm coloana din stânga spre dreapta, ar fi trebuit să fie modificați structura HTML.;
• tabelele au fost predispuse la erori de sintaxă: liniile și celulele pentru corectitudine trebuie să meargă și să investească într-un anumit mod;
• marcajul a fost necitit: Tabelele au fost investite în alte tabele pentru a obține coloane suplimentare în interiorul coloanelor.

Acesta este motivul pentru care de la aplicarea tabelelor ca un instrument a refuzat încet și în loc de ele au folosit CSS.

Ce este CSS.

CSS (foi de stil cascadă) înseamnă foi de stil cascadă și este un limbaj de marcare în stil (ca HTML sau XML). Astfel, CSS nu reprezintă nimic în sine, dacă nu este legat de un document HTML.

CSS a adus o viata Într-un document HTML, alegerea fonturilor, aplicarea culorilor, definirea unor elemente de poziționare, de poziționare, animarea interacțiunilor și multe altele.

Cum funcționează CSS

Css. alege Element HTML (de exemplu, paragraf), întreabă proprietate Pentru a schimba (cum ar fi culoarea) și se aplică o anumită valoare (de exemplu, roșu):

P (culoare: roșu;)

Cuvântul "stil" poate fi înșelător. S-ar putea să credeți că CSS este utilizat numai pentru a schimba culoarea textului, dimensiunii și tipului de font. Dar CSS poate stabili aspectul unui document HTML, determinând câmpurile, lățimea, câmpurile interne și externe, poziția, coloana etc.

Unde pot scrie CSS?

Css ca un atribut

Puteți scrie CSS direct în elementele HTML utilizând atributul de stil:

Acesta este un text important.

CSS B.

Puteți utiliza eticheta

Acest paragraf va fi roșu.

Css într-un fișier separat

Puteți scrie CSS într-un fișier separat cu extensie. CSS, apoi legați-l de la HTML utilizând o etichetă .

P (culoare: roșu;)

Acest paragraf va fi roșu.

Acest document HTML, care "apelează" fișierul CSS, în cazul nostru, fișierul numit stil.css este situat în același folder ca și fișierul CSS.

Acest a treia metodăUtilizarea unui fișier CSS separat este preferat.

Tabelele de stil cascadă (CSS) sunt folosite pentru a face o pagină web atractivă în ochii vizitatorilor. În plus, tabelul CSS Styles simplifică foarte mult procesul de dezvoltare a paginilor web. De asemenea, CSS vă permite să faceți modificări într-un singur loc și să nu editați întregul site. Astfel, nu aveți nevoie să vizitați fiecare pagină web a site-ului și să le editați.

CSS vă salvează timpul și energia prețioasă. Foi de stil cascadă, după cum rezultă din nume, determinați un stil specific pentru paginile web bazate pe o listă de priorități, denumită în mod obișnuit "cascadă". În plus, vă permite, de asemenea, să gestionați diferite elemente pe paginile web ale site-ului dvs. O masă de stiluri CSS poate controla fontul, formatarea, dimensiunea textului, poziționarea, stilul și culoarea întregului site web. Deși foile de stil cascadă pot schimba prezentarea și aspectul site-ului dvs., cu toate acestea, ei nu au nimic de-a face cu designul site-ului.

CSS poate ajuta Master Web în multe feluri. Datorită site-ului CSS va avea un design mai atractiv. În același timp, chiar și motoarele de căutare preferă site-urile web bazate pe CSS atunci când vine vorba de atribuirea rândurilor în indicele de căutare.

Separarea prezentării site-ului din conținutul său.

Cu CSS, puteți obține un control excelent asupra aspectului site-ului dvs., deoarece această tehnologie vă permite să conectați diferite stiluri cu textul site-ului dvs. Ca rezultat, dacă trebuie să modificați aspectul oricărui element al paginii web, atunci va trebui să editați doar o masă externă a mesei CSS Stiluri și acest lucru va afecta întregul site web. Această abordare nu numai că oferă un proces flexibil de gestionare, ci și economisește timp.

Creșteți viteza de încărcare a site-ului.

Deoarece foile de stil cascading sunt fișiere text, cântăresc puțin și folosesc mai puțină lățime de bandă, care la rândul său crește viteza de descărcare a site-ului dvs. Potrivit statisticilor, site-ul care utilizează foi de stil bazat pe CSS externe este încărcat la aproximativ șapte ori mai rapid decât un site similar fără această tehnologie. Deoarece documentele text sunt încărcate foarte repede, paginile web vor fi afișate aproape în câteva secunde, iar acest lucru va avea un efect pozitiv asupra impresiei generale a vizitatorilor atunci când vizitați site-ul dvs.

CSS ușurează modificarea poziției oricăror elemente de pe pagina web. De exemplu, meniul poate fi plasat în orice loc: stânga, dreapta, sus sau jos. În același timp, obiectivul principal al unei astfel de poziții a elementelor este că roboții motorului de căutare scanează în primul rând conținutul principal al site-ului dvs. web. Pentru a realiza acest lucru, toate elementele auxiliare sunt necesare, cum ar fi meniul, în codul HTML pentru a plasa după conținutul principal.

Compatibilitate CSS cu browsere moderne.

Deoarece există în prezent multe browsere diferite, Web Master este dificil de verificat performanța site-ului absolut în toate browserele. Cu toate acestea, dacă rămâneți la aspectul bazat pe standardul CSS, atunci această problemă devine ușor rezolvată.

După cum se poate observa din cele de mai sus, tehnologia CSS este dincolo de ceea ce oferă instrumente pentru crearea unor site-uri moderne, atractive, ajută, de asemenea, la rezolvarea unui număr de probleme. Aceasta determină în sine semnificația ridicată a CSS.

Una dintre cele mai vechi servicii de pe Internet este forumurile. Aceste site-uri de comunicare au apărut printre primele și de atunci rămân în formă aproape neschimbată. Dar, în ciuda vârstei lor solide, ei ca înainte de a face față funcțiilor lor. Aici comunică, pune întrebări și primesc răspunsuri.

Bună ziua, Stimate site-ul de cititoare blog. Astăzi aș dori să vorbesc despre faptul că aveți nevoie atunci când lucrați cu cunoașterea limbii HTML (citiți despre ceea ce este), elementele de bază ale colaborării cu tabelele CSS Cascading (articol introductiv pe tema pe care o veți găsi), precum și Înțelegerea cel puțin a fundațiilor și principiilor, construirea de programe în PHP și lucrări logice cu bazele de date MySQL.

vă permite să faceți site-uri, nu dețineți Toți cei menționați deasupra înțelepciunilor, dar, în același timp, veți avea, probabil, întrebări și probleme pe care nu le puteți rezolva mijloacele chiar și cele mai de încredere CMS (Joomla, WordPress, Drupal, etc.).

De ce aveți nevoie atunci când lucrați la site-ul cunoașterii limbilor (marcaj, stiluri, programare server)

Fie că nu veți găsi un astfel de element în admirația CMS printre multe alte setări (logica autorilor motoarelor la stabilirea unor setări rămâne incomprehensibilă și, eventual, puterea obiceiului autorului) este jucată aici, sau dezvoltatorii nu vor include un astfel de element în administrarea sistemului de gestionare a conținutului. Este imposibil să se implementeze setările pentru toate prin admin - acolo, de obicei, sunt afișate numai cele mai necesare și frecvent utilizate setări.

Se întâmplă des este mai ușor să rezolvați problema Nu sunt furnizate regulate în administrator, dar direct, dreptul la ceva în baza de date sau ajustarea conținutului anumitor fișiere de motor prin accesul la FTP.

Da, pentru aceasta va fi necesară petrecerea timpului în studiul cel puțin a fundației limbajului de marcare HTML, pentru a înțelege modul în care tabelele de stil cascadă afectează apariția Webons, precum și a face față dispozitivului de bază de date, învățați cum să se schimbe aceasta. Și, probabil, cel mai dificil lucru este să înțelegem principiile de bază pentru scrierea codului în limba PHP pentru a înțelege ce și unde este posibil să se schimbe fără durere și ceea ce nu poate fi atins.

Voi începe, desigur, cu designul webilor (de fapt, în momentul în care am terminat acest caz și vă puteți familiariza cu rezultatele și). După cum am menționat într-una din postările anterioare, până de curând, toate resursele au constat din pagini HTML. Mai mult, conținutul site-ului (texte, imagini, tabele) și designul acesteia (culori, fundal, liniuțe) au fost întrebat.

Într-o înțelegere modernă a corectitudinii vârfului, umplerea trebuie efectuată utilizând etichetele limbajului de marcare hipertext, iar proiectarea acestei umpleri ar trebui să se datoreze tabelelor de fișiere externe. O astfel de separare vă permite să descărcați pagina site-ului de pe un cod de serviciu excesiv.

Faptul este că motoarele de căutare sunt foarte intenționate vizionând raportul componentei informației Codul paginii web (text afișat în browser) și componenta de service (etichete, o varietate de scripturi etc.). Prin urmare, făcând din această pagină, tot ceea ce nu suportă componenta de informare, dar este responsabilă numai pentru decorarea paginilor, îmbunătățim raportul dintre motoarele de căutare la proiectul nostru (bine, cel puțin teoretic).

În plus, lista regulilor CSS făcute într-un fișier separat vă permite să unificați designul resurselor. Dacă este necesar, va fi întotdeauna posibilă schimbarea ceva în design nu este codul potrivit al tuturor Webons, deoarece În acest caz, va fi suficient pentru a repara proprietățile existente sau adăugarea de noi proprietăți în stilul tuturor paginilor la stilul stilurilor.

Cu apariția de stiluri tabele multe etichete ale limbii de marcaj hipertext și atributele acestora a început să fie considerată depășită și nu este recomandat pentru utilizare. În schimb, ele sunt sfătuite să utilizeze proprietățile CSS care îndeplinesc aceleași acțiuni. Acest lucru nu înseamnă că HTML nu este acum necesar pentru a studia, pur și simplu a scăzut numărul de etichete și atributele acestora care trebuie să le cunoască și să poată folosi pentru a crea și menține în starea corespunzătoare a site-ului. Voi încerca să spun despre acele etichete pe care eu o folosesc în mod constant.

În care editorul este mai bine să editați sau să modificați codul

Nu este nimic dificil în acest lucru, deoarece, de fapt, nu este nici măcar un limbaj de programare, ci un marcaj hipertext, ceva similar cu sintaxa în limba rusă. Ce mi-ar plăcea să vă sfătuim imediat, bazându-vă pe propria experiență? Încercați să scrieți etichete în Notepad, tastați Notepad ++. (Citiți mina) și nu în programe, cum ar fi DRIMVUiver. De ce?

Da, pentru că în acest caz vă pierdeți mâna și amintiți-vă etichetele și atributele de scriere. Da, în programele de tip Dreamvyver este mai convenabil să fiți top. Puteți să o vedeți imediat în browser și opțiunile de scriere pentru această sau eticheta respectivă pot fi selectate din lista derulantă.

Dar faptul că trebuie să conduceți în principiu codul existent în fișierele motorului dvs. și veți fi mult mai convenabil dacă vă veți aminti de scrisul tuturor etichetelor și atributele acestora (beneficiul acestora nu este atât de mult). De ce, pentru a corecta o etichetă, deschideți fișierul în Curbersome Dreamvier, atunci când există suficientă notebook obișnuit pentru aceste scopuri, bine sau contrapartida sa avansată pentru numele non-tip plus plus (linkul este ușor mai mare).

Deși, aceasta este opinia mea personală (IMHO) și decideți ce este mai convenabil. De exemplu, Evgeny Popov, pe curs, am studiat tot cazul, aparent, aderența lui DRIMYVEVER. Este important în principiu - astfel încât să conduceți codul în editor care poate menține toate modificările făcute și care pot, dacă se dorește, Întoarce totul așa cum a fost (înapoi).

În acest caz, indiferent de modul în care contrazic, totul va fi fixabil. Și, desigur, iluminarea sintaxei limbii pe care scrieți sau editați codul este foarte convenabilă. Notepad ++ - Aceasta este cu siguranță alegerea mea! Am spus despre posibilitățile sale în articol mai târziu.

Probabil că a spus despre marcaj și designul său la rândul său nu va fi destul de corect, așa că voi încerca să vorbesc despre împărtășirea lor. Trebuie să se înțeleagă că proprietățile CSS sunt înregistrate în unul sau mai multe fișiere individuale pe care le puteți găsi cu ușurință în subiectul înregistrării utilizate pentru motorul dvs.

În timp ce etichetele web în CMS moderne nu sunt înregistrate în unele sau mai multe fișiere, așa cum a fost înainte și este generat (interpretat) de PHP. Și a fost codul care a generat deja astfel încât browserul să fie aplicat browserului, astfel încât, la rândul său, interpretează-o într-o pagină deschisă online pentru noi. Heathwood, nu-i așa?

prin urmare editați etichetele în orice CMS Nu este o sarcină atât de trivială, chiar dacă sunteți complet ușurați cu limba marcajului hipertext. La urma urmei, etichetele pe care trebuie să le conduceți în fișiere PHP și, prin urmare, va trebui să cunoașteți cel puțin conceptele și sintaxa de bază.

Dar nu vă faceți griji, pentru a edita designul de cunoștințe mari în PHP de la dvs. nu va avea nevoie. Etichete acolo minciună, cum să spun, la suprafață și nu este mult dificil de identificat și corect dacă este necesar.

Ce instrumente pe care le puteți utiliza

Problema apare, de regulă, în cealaltă. Cum să găsiți acel fișier cu extensie PHP în care se formează fragmentele necesare de etichete? Iată o chestiune de probleme. Da, desigur, dacă aveți experiență în lucrul cu motoarele de date, atunci tu, cred, Coeal. Dar dacă sunteți nou și nu știți care dintre sute de fișiere PCP pentru ceea ce este responsabil?

Vă va ajuta cu un plugin magnific pentru un browser la fel de magnific, precum și Notepad ++ menționate mai sus, și nu ne-a dus la mulți. Această grămadă de programe vă va ajuta să transformați munții și veți salva masa timpului.

În cele mai apropiate posturi, voi spune în detaliu cum să utilizați aceste programe pentru a aborda în mod eficient problemele emergente cu site-ul. Da, aproape am uitat de un program indispensabil care vă permite să accesați FTP - Filezilla (există deja un articol pe această temă). Ei bine, despre noi, desigur, să vorbim.

Ei bine, obiectivele sunt subliniate, sarcinile sunt livrate, rămân doar să le îndeplinească. Pentru SIM, vă permite să declarați.

Multă baftă! La întâlnirile ambigue pe site-ul web al blogului

S-ar putea să fiți interesat

Fonturile frumoase ruse pentru site și computer în serviciul Google Font - Unde să descărcați și cum să instalați Design adaptiv (receptiv) - optimizarea site-ului pentru ao vizualiza pe dispozitivele mobile
GIF, PNG sau JPG - Formate de grafică raster pentru web, argumente pro și contra atunci când sunt utilizate pe site

Uneori comportamentul CSS se poate confunda. Aflați despre unele proprietăți victime care pot provoca cele mai frecvente probleme și modul în care aceste probleme pot fi rezolvate.

CSS este o mizerie. CSS a fost implementat pentru prima dată în 1995 și a fost inițial intenționată să nu fie elegantă de site-uri web și aplicații web, ci pentru tipografia documentelor simple de text. De atunci, CSS a trecut o cale dificilă. Poate prea complicat.

În primul rând, CSS nu a fost destinat pentru aspectul documentelor multicolon, interfețele adaptive și multe altele. De aceea a devenit o limbă cu o mulțime de hacks și glitches, un fel de mașină de aburi minunată, cu o mulțime de extensii și un rând.

Pe de altă parte, face ca CSS să fie destul de amuzant. Și într-o oarecare măsură - suntem deținuți de faptul că avem de lucru. Sunt complet convins că dezvoltarea absolut a browserului CSS nu este încă posibilă și este puțin probabilă în viitorul previzibil.

În orice caz, nu scriu pentru a-mi exprima credințele și nemulțumirea, dar pentru a vorbi despre CSS. Astăzi vom ridica întrebări cu privire la unele probleme comune și vom încerca soluția noastră pentru a le rezolva.

Curățarea fluxului (curățare float) - întrebarea veche ca lumea

Cred că aceasta este cea mai frecventă întrebare care provoacă uimire atunci când încearcă să stilizeze elementele. El este bătrân ca lumea, așa că sunt 100% sigur că cineva care a scris vreodată stiluri pe CSS a intrat într-o capcană similară.

Practic, atunci când elementul conține blocuri plutitoare în interiorul (plutitor), acesta "colaps" - ia înălțimea minimă. Acest lucru se întâmplă deoarece elementele plutitoare sunt lovite din fluxul total de elemente, astfel încât blocul în care aceste elemente sunt înfășurate, se comportă ca și cum nu conține filiale.

Există multe căi care vă permit să corectați acest comportament. În trecut, a trebuit să adauge goale div cu o proprietate clar: ambele. După toate elementele plutitoare, la sfârșitul recipientului. De asemenea, ați putea avea acest lucru div Înlocuiți eticheta hR. - De asemenea, nu este cea mai bună opțiune.

Dar Nicolas Gallagher a propus o nouă modalitate de a curăța fluxul în elementul părinte fără contaminarea marcajului cu etichete suplimentare. După discuții și teste turbulente, o versiune de lucru a fost identificată cu un set minim de proprietăți, cea mai recentă versiune a căror versiune este dată aici:

Clearfix: După (Conținut: ""; Afișaj: tabel; clar: ambele;)

De fapt, am mințit spunând că această versiune este cea mai recentă, dar este cu siguranță cea mai optimă opțiune. Dacă aveți nevoie de sprijin pentru IE 6/7, atunci aveți nevoie de acest cod opțional:

Ceea ce aveți cu adevărat nevoie este să determinați clasa .Clearfix. În proiectul dvs., pe care îl puteți prescrie elemente în care doriți să curățați fluxul. Acesta este cel mai simplu mod de a lucra cu elemente plutitoare.

Cum să se ocupe de spațiul dintre elementele bloc-blocante?

Să încercăm să punem obiecte la o singură linie, dar fără a folosi proprietatea. pluti, în timp ce le definiți ca elemente de blocare dreaptă (bloc). Proprietate afișaj: Inline-bloc Pentru o lungă perioadă de timp, a rămas subevaluată și puțin folosită, dar în cele din urmă am dat seama cum funcționează și am evaluat punctele forte. În prezent, tot mai mulți dezvoltatori de interfață scapă de elemente plutitoare în favoarea elementelor de tentare, cu condiția ca aceasta să fie posibilă.

Cred că principalul avantaj al elementelor de filtru este că nu trebuie să avem grijă de curățarea fluxului și alte inconveniente care pot provoca elemente plutitoare. Practic, prin definirea unui element, ca un bloc drept, îl transformăm într-un fel de hibrid: o semi-linie și un semi-bloc. Astfel de elemente pot fi schimbate în dimensiune, pot avea liniuțe externe, dar lățimea originală depinde de conținut, în timp ce elementele blocului sunt implicite să ia întreaga lățime a părintelui. Asta este, ele sunt construite unul pe altul orizontal, cum ar fi simbolurile într-un șir, și nu verticale ca blocuri.

Aici veți spune: "Și ce ar putea fi o problemă cu ei?". Problema este că sunt jumătate de rând și, ca niște linii, ele sunt separate unul de celălalt, cu un ușor interval egal cu lățimea simbolului gol. Pentru fontul standard 16px, dimensiunea acestei distanțe este de 4px. În majoritatea cazurilor, această distanță este de 25% din dimensiunea fontului. În orice caz, este annoy când încercați să construiți elemente. Să presupunem că avem un element părinte în 600px larg, cu trei elemente de blocare a fiicei de lățime de 200 de metri. Dacă nu scăpați de aceste spații de patru pixeli, obținem că lățimea rezultată a elementelor va fi mai mare decât lățimea elementului părinte (200 * 3 + 4 * 2 \u003d 608).

Din fericire, există mai multe modalități de a scăpa de aceste intervale nedorite, fiecare cu avantajele și dezavantajele acestora. Pentru a fi absolut cinstiți, voi spune că încă nu există soluții ideale. Să aruncăm o privire la aceste moduri, unul câte unul!

Folosind marcajul: eliminăm golurile

Acordați atenție acestei marcaje - am descris-o în câteva linii înainte.

După cum am spus mai devreme, cele trei blocuri nu se vor potrivi într-o singură linie, deoarece există unul sau mai multe semne spațiu între blocuri (în cazul nostru - un simbol de traducere și două spații). Prima modalitate implică o simplă îndepărtare a spațiilor dintre elemente:

Această metodă funcționează, dar se înrăutățește foarte lizibilitatea codului. Poate că putem converti etichetele noastre în loc să le construim într-o singură linie, codul va deveni mai lizibil:

O altă opțiune neobișnuită:

Da, această abordare funcționează! Dar, în general, nu aș recomanda-o să utilizeze, deoarece nu este intuitivă. În ciuda faptului că am reușit să scăpăm de spațiul nedorit între elemente, în schimb am primit un cod destul de neplăcut. Să încercăm altceva.

Marcarea: comite intervalele

Și dacă comentează decalajele în loc să scape de ele?

Wow! Acest lucru este mult mai bun! Codul a rămas citit și, în general, totul arată bine. Chiar dacă pare ciudat la prima vedere, poate că această abordare vă va fi utilă pentru dvs. Personal, folosesc această abordare când trebuie să scot spațiul dintre elementele blocului de strâmtoare.

Cu toate acestea, unii vor spune că acest lucru nu este calea perfectă, deoarece această soluție necesită controlul de la marcare, iar problemele de poziționare sunt afaceri CSS și numai CSS. Și vor fi absolut dreptate. Acest lucru ne conduce la soluții de baze de date CSS.

CSS: spațiu de manipulare între caractere. Spațierea proprietății

Proprietate spațiul dintre litere Folosit pentru a seta lățimea spațiului între caractere. Ideea drumului nostru este de a face ca spațiul dintre caractere mai puțin decât lățimea spațiului, iar pentru elementele copilului o conduc la forma originală:

Părinte (scrisoarea-spion: -0,3em;) .Child (spațierea literelor: normal;)

Această tehnică este utilizată în Griddle - un motor de rețea dezvoltat de Nicolas Gallagher, astfel încât să putem lua în considerare această opțiune destul de fiabilă. Cu toate acestea, nu-mi place cu adevărat ceea ce ne bazăm pe un fel de număr magic. În plus, pentru unele fonturi, va trebui să setați o valoare sub -0.3em - de exemplu, -0.31em sau -0.32em. Trebuie să vă adaptați la fiecare caz specific.

CSS: liniuță externă negativă

O altă modalitate similară cu cea anterioară este utilizarea unei pensii negative. Această metodă oferă eșecuri în IE 6/7, deoarece acestea nu sunt prietenoase cu retrageri negative. În plus, trebuie să eliminați o liniuță negativă la primul element copil, astfel încât să nu se deplaseze spre stânga și că elementele copilului sunt complet urcate în container:

Copil (margine-stânga: -0,25em;) .Child: prim-de-de tip (margine-stânga: 0;)

Dacă nu aveți nevoie să sprijiniți IE 6/7 sau dacă aveți un fișier de stil separat pentru aceste browsere - cred că este o soluție destul de bună și sigură.

CSS: Dimensiunea fontului

Și ultima, dar departe de cel mai rău mod este că puteți încerca să setați dimensiunea fontului elementului părinte în 0, astfel încât caracterele goale să devină, de asemenea, zero lățime și apoi restaurați dimensiunea fontului pentru elementele copilului.

Părinte (font-dimensiune: 0;) .Child (font-dimensiune: 16px;)

Această metodă funcționează bine, dar are, de asemenea, dezavantajele sale:

• nu puteți restabili dimensiunea fontului utilizând o valoare relativă. em.Deoarece dimensiunea fontului elementului părinte este 0px
• spațiile nu sunt îndepărtate în browserele standard Android către Bean de Jelly
• dacă vă schimbați în context @ Font-fata, fontul nu poate fi netezit în Safari 5
• unele browsere nu sunt permise unui font de înălțime zero, de exemplu, Chrome Chineză prezintă un astfel de font la standardul 12px

Deci, aceasta nu este cu siguranță cea mai bună soluție. După cum am vorbit deja mai devreme, aș înceta să folosesc metoda cu comentarii.

Noi dezasamblați poziționarea absolută

Poziționarea este un lucru destul de complicat. Mulți nou-veniți sunt blocați în momentul în care este necesar să se preleveze elementul de pe pagină. Și de obicei folosesc prost sau invers - abuz - proprietate poziţie. Această proprietate determină modul în care elementul va fi deplasat relativ la o parte ( top., dreapta, fund și stânga.). Este nevoie de patru valori:

• static. - valoarea implicită, deplasările nu funcționează
• relativ. - stratul vizual este mutat, dar nu elementul însuși
• absolut. - elementul este mutat în contextul înconjurător (primul strămoș non-static)
• fix - elementele sunt poziționate în zona de vizualizare, nu contează care poziția sa în DOM

De obicei, problema apare atunci când este utilizată poziția: Absolute.. S-ar putea să fi întâlnit deja similare: specificați elementul cu o poziție absolută, deoarece doriți ca acesta să fie desfigurat în raport cu unghiul drept superior al elementului părinte (de exemplu, ca un mic buton de închidere al ferestrei modelului sau ceva similar)

Element (poziție: absolut; sus: 0; stânga: 0;)

... și este afișat în colțul din dreapta sus al ferestrei. Și tu crezi: "Ce figule?". De fapt, este un comportament predeterminat de browser. Cuvânt cheie aici - context.

Codul de mai sus înseamnă de fapt: " vreau ca elementul meu să fie plasat în colțul din dreapta sus în raport cu contextul său". Deci ce este " context”? Acesta este primul strămoș non-static.. Poate fi un element părinte direct. Sau elementul părinte părinte. Sau părinte părinte al părintelui ... și astfel va fi o căutare la primul element, a cărui poziționare nu este specificată ca static..

Poate fi oarecum dificil de înțelegere, în special pentru începători, dar dacă ați învățat odată acest lucru - puteți controla foarte flexibil poziționarea absolută.

Iată un exemplu simplu care arată despre ce am vorbit. Două elemente părinte, fiecare în interiorul unui element copil, care este propus de valori absolut top: 0. și dreapta: 0.. În partea stângă, elementul părinte este poziționat relativ (comportamentul așteptat). Elementul părinte dreapta este lăsat static (incorect).

Când să utilizați o înălțime / lățime de 100%?

100% înălțime

Să-i dau seama mai întâi cu un exemplu mai puțin complex. Când să utilizați Înălțime: 100%? De fapt, mulți dintre noi cel puțin o dată se întrebă de întrebarea "Ce dracu? M-am așteptat ca pagina mea să fie cel puțin să ocupe întreaga înălțime a ecranului! " Am dreptate?

Pentru a răspunde la această întrebare, trebuie să înțelegeți ce înseamnă de fapt o proprietate. Înălțime: 100%: Înălțimea completă a elementului părinte. Nu înseamnă "toată înălțimea ecranului". Deci, dacă doriți ca recipientul să ocupe întreaga înălțime a ecranului, Înălțime: 100% Insuficient.

De ce? Deoarece elementul părinte al containerului dvs. ( corp.) are înălțimea implicită aUTO.Ce înseamnă că dimensiunea sa este determinată de conținut. Deci, puteți încerca să puneți Înălțime: 100% Și pentru element corp. - Încă nu va da efectul dorit.

De ce? Deoarece eticheta elementului părinte corp. (hTML.) are înălțimea implicită aUTO.Ce înseamnă că dimensiunea sa depinde de conținut. Și dacă încercați să întrebați un element hTML Înălțime: 100%? Lucrări!

De ce? De fapt, deoarece elementul rădăcină ( hTML.) - Acesta nu este ultimul bloc parental pe pagina - Există, de asemenea, o fereastră de vizualizare. Pur și simplu pune - aceasta este o fereastră de browser. Deci, dacă întrebați Înălțime: 100% Element hTML.Veți face o înălțime egală cu altitudinea browserului. Asta e doar.

Rezultatul istoriei noastre se reflectă în următorul cod:

HTML, corp, .container (înălțime: 100%;)

Și dacă elementul părinte este setat min-înălțime, dar nu a fost întrebat în înălțime?

Roger Johansson a dezvăluit recent o problemă cu Înălțime: 100% În cazul în care elementul părinte nu are o înălțime numită, dar înălțimea minimă este setată pentru aceasta. Nu voi deplasa în descriere, ci ca rezultat, decizia este că elementul părinte trebuie să stabilească o înălțime de 1px, astfel încât elementul copil să-l întindă min-înălțime.

Părinte (min-înălțime: 300px; înălțime: 1px; / * Suntem necesari, astfel încât elementul copilului a fost dezvăluit pentru întreaga înălțime a min-înălțime * /) .Child (înălțime: 100%;)

100% Lățime

Acum să ne ocupăm de parametru lățime: 100%. Amintiți-vă imediat că, ca și cu o înălțime, setare lățime: 100% - Aceasta este o indicație că elementul ar trebui să aibă aceeași lățime ca elementul părinte. Nu există surprize aici.

Și acum voi împărtăși un mic secret. Lățimea nu este exact numele corect pentru această proprietate. Proprietate lăţime. De fapt, nu definește întreaga lățime a elementului, ci doar lățimea conținutului său, care este complet diferită de lățimea completă a elementului.

Dacă adăugăm un câmp interior și frontiere la elementul dvs. la care este expusă lățimea lățime: 100%Acest element nu se va potrivi în părinte - va depăși limitele sale. Toate acestea se datorează câmpurilor și frontierelor. Și de aceea proprietatea lăţime. Se numea lățimea conținutului (lățimea conținutului). Vă rugăm să luați în considerare următorul exemplu pentru a înțelege ce vreau să spun:

Lățimea elementului părinte este egală cu 25em.. Lățimea elementului copil este de 100% egală cu 100% (de la elementul părinte), dar are, de asemenea, un câmp de 1em (1EM stânga, 1em dreapta. În sumă orizontal va fi 2EM), precum și granița la 0,5em (numai 1em orizontal), ceea ce duce la faptul că lățimea rezultată a elementului copil va complimenta 25EM (100%) + 2em + 1em \u003d 28em. Hmm ... Houston pare să aibă o problemă.

Există patru modalități de a corecta starea de lucruri. În primul rând, și cu siguranta cea mai bună - evita instalarea lățime: 100%, mai ales dacă nu există nici o utilizare în acest caz, ca în acest caz. Un element copil este un element bloc care îl extinde automat la lățimea elementului părinte (fără această problemă pe care o vedem mai sus). Din păcate, dacă avem de-a face cu elemente de blocare, puteți utiliza următoarea soluție.

Nu pot folosi lățime: 100%, și stabilește o lățime specifică elementului singur. În cazul nostru, este de 20- (2 + 1) \u003d 22em. Trebuie spus că această soluție este rea, deoarece este necesară calcularea manuală a lățimii dorite a elementului. Plata unui alt mod!

A treia opțiune va fi utilizată calc ()Pentru a automatiza calculele: lățime: Calc (100% - 3em). Toate aceleași rele. În primul rând, trebuie să calculam suma câmpurilor orizontale + limite verticale. În al doilea rând, calc () Nu este acceptată în cele mai bune browsere (nu acceptă IE 8, Safari 5, Opera 12 și Browser Android standard).

A patra opțiune - utilizați proprietatea dimensionarea casetei: Border-cutie. În esență, modifică comportamentul modelului de container, astfel încât proprietatea lățimii să reflecte lățimea totală a elementului, limitele și câmpurile sunt incluse. Vestea bună este că suportul pentru browserele acestei proprietăți este destul de bun (totul, cu excepția IE 7 și Opera 9).

Cum să nu faceți o greșeală cu indicele Z?

Toate elementele de pe pagină sunt poziționate în spațiu tridimensional: În plus față de poziționarea verticală și orizontală, elementele sunt de asemenea amplasate de-a lungul axei Z. La prima vedere, acest concept pare a fi destul de simplu: elementele cu indicele Z mai mare sunt afișate pe partea superioară a elementelor cu indicele Z inferior.

Din păcate, lucrurile pot fi mai complicate decât par a fi la prima vedere. În general, sunt încrezător că aceasta este cea mai confuză proprietate CSS. Sunt încrezător că problemele cu indicele Z sunt cele mai frecvente și enervante, cu care vă puteți întâlni numai în timp ce lucrați cu CSS. Dar vom încerca să găsim o soluție.

Să începem de la început: proprietatea lui Z-Index nu funcționează cu elemente statice. Pentru a muta elementul de-a lungul axei Z, trebuie să determinați poziționarea pentru element ca relativ., absolut. sau fix. Deci, primul lucru pe care trebuie să-l facem este să ne asigurăm că elementul este poziționat corect înainte de a vă gândi la numirea indicelui Z.

Acum, trebuie să vă amintiți că elementele din DOM nu sunt situate pe același strat. Aceasta înseamnă că indicele Z-Exponate într-o valoare foarte importantă poate să nu fie suficientă pentru ao afișa asupra altor elemente. Se numeste contextul suprapunerii.

Prin schimbarea poziției de-a lungul axei z, elementele pot fi făcute reciproc în ordinea dorită. Iată cum, conform CSS, specificația afișează elemente în cadrul unui context de grup:

1. fundal și frontiere ale elementului care formează un context de grup
2. contextele grupului de fiți cu niveluri negative (primele sunt cele mai mici)
3. in-streaming, non-linie, non-abordări
4. elemente plutitoare non-sociabile
5. În-streaming, linie, descendenți neprovizionați, inclusiv tabele și cele mai mici blocuri
6. cONTEXTURILE GRUPULUI DIN CU NIVEL 0 ȘI DESENDI SOCOTICE CU NIVEL 0
7. contextele grupului de fiți cu niveluri pozitive (de la mai mult la mai mult)

Când rezultatul este teribil

Ei bine, au fost cele mai de bază informații despre indicele Z proprietate. Cunoașterea acestui lucru vă poate economisi mult timp și reduceți numărul de probleme, asigurați-vă că sunteți sigur. Din păcate, acest lucru nu este suficient. Acestea erau încă flori!

Faptul este că fiecare context de grup are propria sa scară de-a lungul axei Z. Practic, elementul A din contextul grupului 1 și elementul B din contextul grupului 2 nu poate interacționa cu indicele Z. Aceasta înseamnă că un element A face parte dintr-un context de grup care se află chiar la fundul grupului de grupare și nu există nicio posibilitate de ao deduce în fața elementului B, care este într-un alt context de grup, care are o mai mare Ordinea grupului, chiar dacă îl configurați foarte mult Z -Index.

Dar așteptați - de fapt, este încă mai rău. Element hTML. Formează contextul grupului rădăcină. În acest caz, fiecare bloc socotizat (non-static) cu valoarea indicelui Z este mai mare decât aUTO. Creează un context de grup nou. Nu este nimic nou în acest lucru. Și aici totul devine destul de trist: unele proprietăți CSS care nu au legătură cu poziționarea creării unor contexte de grup noi. De exemplu, opacitate.

Da, da - proprietate opacitate Creează un context de grup nou. De asemenea, se aplică proprietăți transforma și perspective.. Dar nu are sens, nu-i așa? Înseamnă că dacă aveți un element cu transparență, diferit de 1, sau cu o altă transformare decât nici unul - Aveți o problemă potențială.

Din păcate, fiecare problemă cu indicele Z este unică, deci nu este posibilă oferirea unei soluții universale pentru toate problemele cu indicele Z. La final, puteți retrage mai multe concluziile:

• verificați întotdeauna că elementele dvs. sunt setate la poziționare înainte de aplicarea acestora Z-Index
• nu utilizați indicele z cu valori mari, este absolut lipsit de sens. În majoritatea cazurilor, este suficient z-Index: 10
• asigurați-vă că elementele pe care doriți să le modificați ordinea afișajului aparțin unui context de grup
• dacă încă nu ați rezolvat problema, asigurați-vă că nu aveți elemente transformate sau translucide pe drum

Care este uniunea de liniuță?

Cred că aceasta este una dintre "glitches" CSS, care a luat cea mai mare parte a timpului meu. Cred că veți spune că este la fel de ciudat ca și comportamentul indicelui Z. Pe scurt, Uniunea Indicațiilor este atunci când linia superioară și inferioară a celor două elemente se îmbină în cea mai mare dintre cele două dintre aceste liniste. În general, indentarea verticală dintre cele două blocuri se calculează după cum urmează:

Aparent, acesta este exact motivul pentru care totul funcționează exact ca (așa cum este definit și descris în specificația CSS). Fie ca, cum ar fi, uneori nu vrem ca linii verticale să se unească. Pentru a înțelege cum să o rezolvați, luați în considerare mai întâi motivul pentru o astfel de problemă. Uniunea Indicațiilor se întâmplă în trei cazuri diferite:

Blocuri similare

Atunci când două blocuri adiacente au linii verticale, ele sunt combinate în cea mai mare liniuță din depunerea inferioară a unui element și retragerea superioară a celui de-al doilea. Acest lucru poate fi prevenit de mai multe căi:

• Ștergeți: Stânga; Plutește la stânga; Pentru blocurile adiacente (funcționează și de asemenea)
• afișaj: Inline-bloc Pe frați (declanșează și tabelul inline)

Element parental și primul element fiica

De obicei, liniuța părinte și liniuța superioară a primului element copil este combinată în cea mai mare liniuță. În mod similar, linia inferioară parentală și linia inferioară a ultimului element copil este combinată în cel mai mare. Acest fenomen este, de asemenea, cunoscut sub numele de "Ancestor Union". Există mai multe soluții pentru a combate un astfel de comportament. Cele mai multe dintre ele constau în adăugarea uneia dintre următoarele proprietăți la elementul părinte:

• depășirea: ascunsă. (sau altul decât auto)
• padding: 1px. (sau orice altă valoare, mai mult de 0); Unele browsere chiar suportă valorile Subpixel)
• frontieră: 1px solid transparent (sau orice graniță)
• afișaj: Inline-bloc (Tabelele de așteptare, de asemenea, în tabelul inline)
• plutește la stânga. (Chiar se potrivește și)

Următorul exemplu demonstrează aceste remedii în acțiune:

Blocuri goale

Când blocul gol nu are frontiere sau câmpuri, nici înălțimea - limita superioară și inferioară sunt combinate într-una. În acest caz, acest lucru este potrivit pentru primul sau al doilea caz, care sunt descrise mai sus - combinația de frontiere cu elementul părinte / adiacent. Cu toate acestea, elementele goale sunt, de asemenea, în general, o idee rea, așa că sper că nu va trebui să vă ocupați de acestea de multe ori.

Rezultate

Wow, destul de multe lucruri, nu-i așa? Dar, din păcate, este doar partea de sus a bug-urilor de aisberg, hack-uri și glitches. Am descris numai problemele cele mai frecvent întâlnire cu care vă puteți întâlni în timp ce lucrați cu CSS, dar există încă multe lucruri similare ca incompatibilități ale browserelor, mizeria producătorilor, specificitatea selectorilor, cascadelor și moștenirii și multe altele.

În orice caz, sper că unele soluții vă vor permite să economisiți timp.

Prezentăm traducerea articolului "De ce Grilă CSS este mai bună decât Bootstrap pentru crearea layout-urilor" de la Per Harald Borgen, publicată pe site-ul Ru.hexlet.io.

Grid CSS este o modalitate nouă de a crea layout-uri pe Internet. Pentru prima dată, un sistem complet de straturi este disponibil direct în browser, ceea ce oferă o mulțime de avantaje.

Aceste avantaje sunt deosebit de expresive dacă comparați grila CSS cu cel mai popular cadru de bootstrap. Nu puteți crea doar layout-uri care au fost imposibile anterior fără JavaScript, dar codul dvs. va deveni mai ușor de întreținut și de înțeles.

Să ne uităm la cele trei motive principale pentru care cred că grila CSS este superioară la bootstrap.

Marcajul va fi mai ușor

Înlocuirea Bootstrap pe grila CSS va face HTML Cleaner. Deși acest lucru nu este cel mai important avantaj, este probabil primul prim în observat.

Pentru claritate, am creat un aspect fictiv al site-ului web, astfel încât să puteți compara codul necesar pentru două versiuni. Aici:

Bootstrap.

Să luăm în considerare mai întâi marcajul necesar pentru a crea acest site în bootstrap.

Aici vreau să fiți atenți la ceea ce:

1. Fiecare linie ar trebui să fie cu o etichetă separată
   .
2. Pentru a desemna un aspect, trebuie utilizate nume de clasă (COL-XS-2).
3. Când acest șablon este complicat, și HTML.

Dacă acesta este un site adaptiv, etichetele arată ca o regulă și mai rău:

Grid CSS.

Acum, să ne uităm la modul de a implementa același în grila CSS. Aici este HTML:

Aș putea folosi elemente semantice, dar am decis să adere la div, astfel încât comparația cu bootstrap să arate mai clare.

Puteți vedea imediat că această marcă este mai ușoară. Numele de clasa urâtă și etichetele DIM suplimentare pentru fiecare linie - în trecut. Acesta este doar un computer pentru grila și poziția din interiorul acestuia.

Și spre deosebire de bootstrap, această marcă nu va fi prea complicată cu complexitatea crescândă a aspectului paginii.

În exemplul cu bootstrap, nu a trebuit să adăugați CSS, în grila CSS, desigur că există o nevoie. Dacă trebuie să o adăugați în mod specific:

Pentru unii, poate fi un argument în favoarea bootstrap: Nu este nevoie să vă faceți griji cu privire la CSS pentru a crea o rețea simplă - construiți doar un aspect în HTML.

Dar, după cum veți înțelege din următorul articol, legătura dintre marcaj și aspect este de fapt o vulnerabilitate, dacă vorbim de flexibilitate.

Mult mai multă flexibilitate

Să presupunem că doriți să schimbați aspectul în funcție de dimensiunea ecranului. De exemplu, ridicați meniul la rândul de sus pentru vizualizarea de pe dispozitivele mobile.

Cu alte cuvinte - schimbați aspectul cu acest lucru:

pe aceasta:

Grid CSS.

Fă-o cu grila CSS este foarte simplă. Adăugam o solicitare media și amestecăm blocuri diferite așa cum vrem:

Abilitatea de a crea un aspect în acest fel - fără a vă îngrijora modul în care este scris HTML se numește independență față de ordinul din Cod (independența comenzii sursă), iar aceasta este o victorie uriașă pentru dezvoltatori și designeri.

Gridul CSS vă permite să transformați HTML la ceea ce ar fi trebuit să fie. În aspectul conținutului, nu vizualizarea, care este destinată CSS.

Bootstrap.

Dacă am vrut să facem același lucru în bootstrap, ar trebui să schimbăm HTML. Va trebui să ridicăm eticheta de meniu la rândul de sus, în plus față de antet, deoarece meniul este în al doilea rând ostatic.

Faceți acest lucru cu prezența unei solicitări media nu este o sarcină trivială. Acest lucru poate fi verificat numai cu HTML și CSS și ar trebui să vă încurcați cu JavaScript.

Acest exemplu arată avantajul imens al rețelei CSS, pe care am experimentat-o.

Nu mai există restricții 12 difuzoare

Aceasta nu este cea mai mare problemă, dar a scos o mulțime de ei înșiși. Deoarece grila de bootstrap este împărțită în 12 coloane, veți avea probleme dacă doriți un aspect de cinci. Sau șapte. Sau nouă. Sau de la un număr care nu este doisprezece.

Cu grila CSS, totul este greșit. Puteți face propriul aspect de la atât de multe coloane de la cât de multe doriți. Iată un aspect de șapte coloane.

Acest lucru se face prin setarea valorii repetate (7, 1fr) pentru coloanele de șablon de rețea, astfel:

Poate că există un mod hack pentru a face o asemănătoare în bootstrap ... și știu că Bootstrap 4 utilizează Flexbox, ceea ce face posibilă o astfel de flexibilitate, dar încă nu va ieși din Beta.

Înainte de a finaliza acest articol, în mod natural, trebuie să vorbiți despre sprijinul browserelor. La momentul scrierii acestui articol, 75% din traficul web global acceptă grila CSS.

Dar, înainte de a refuza complet gândul de a folosi grila CSS, vă sfătuiesc să ascultați ceea ce spune Morten Rand-Hendrixen despre asta. El susține că grila CSS este abilitatea de a regândi modul în care prezentăm compatibilitatea înapoi:

"Grid CSS este un modul de marcare, ne permite să modificăm marcajul documentului fără a interfera cu ordinea codului sursă. Cu alte cuvinte, grila CSS este un instrument absolut vizual, iar dacă este utilizat corespunzător, acesta nu va afecta conexiunile interne ale conținutului din document. Din aceasta, ar trebui să fie simplă, dar un fapt uimitor: lipsa suportului de rețea CSS în vechiul browser nu ar trebui să influențeze percepția vizitatorului site-ului, ar trebui să schimbe pur și simplu această percepție ".

Cu alte cuvinte, de îndată ce separați conținutul de vizualizare, toți vizitatorii vor vedea conținutul, dar Grid CSS va urmări cele mai bune pentru cei care au sprijinul său cu marcaje mai bune.

Concluzie

"Cu cât folosesc mai mult grila CSS, cu atât mai convins că nu există nici un avantaj în adăugarea unui strat de abstractizare peste el. Gridul CSS este un cadru de marcare, cusute direct la browser. "