Bună ziua, dragi cititori ai blogului! Astăzi vom continua să învățăm despre foile de stil în cascadă sau CSS. În articolele anterioare ne-am uitat deja schiță generală bloc aspectul site-ului. Drept urmare, am început să avem pagini web destul de profesionale, dar le lipsea ceva. Dar, cel mai probabil, le lipsesc indentări și rame. Astăzi ne vom uita la regulile de stil de margine, padding și chenar, care vă permit să setați indentări și cadre pentru elementele html.
Opțiuni de umplutură CSS
Cu ajutorul foilor de stil în cascadă, este posibil să setați două tipuri de indentări.
1.Indentare este distanța de la granița imaginară a elementului până la conținutul său. Valoarea distanței este specificată cu ajutorul parametrului umplutura. Această indentare aparține elementului însuși și se află în interiorul acestuia.
2. Marja— distanța dintre marginea elementului curent al paginii web și marginile elementelor învecinate sau element părinte. Mărimea distanței este controlată de proprietate marginea. Această indentare este situată în afara elementului.
Pentru claritate, poza:
De exemplu, luați în considerare o celulă plină cu text. Apoi padding-ul este distanța dintre chenarul imaginar al celulei și textul pe care îl conține. Și marginea exterioară este distanța dintre marginile celulelor adiacente. Să începem cu umplutura.
Umplutură în CSS folosind padding (sus, jos, stânga, dreapta)
Proprietățile stilului padding-left, padding-top, padding-right și padding-bottom vă permit să setați valorile de umplutură, respectiv, în stânga, sus, dreapta și jos a unui element de pagină web:
padding-top | padding-dreapta | captuseala-fund | padding-left: valoare | interes | moşteni
Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte unități acceptabile pentru CSS. La specificarea procentelor, valoarea este calculată din lățimea elementului. Înţeles inherit indică faptul că este moștenit de la părinte.
De exemplu, pentru paragraful curent, am aplicat o regulă de stil care setează umplutura din stânga la 20 de pixeli, umplutura de sus la 5 pixeli, umplutura din dreapta la 35 de pixeli și umplutura de jos la 10 pixeli. Intrarea regulii va arăta astfel:
p.test(
padding-stânga:20px;
padding-top:5px;
padding-dreapta:35px;
padding-bottom:10px
}
Regula de umplutură compozită vă permite să specificați indentări pe toate părțile unui element de pagină web simultan:
umplutura:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
ÎN regula colectivă Puteți utiliza una, două, trei sau patru valori, separându-le cu un spațiu. În acest caz, efectul depinde de numărul de valori:
- dacă specificați o valoare, aceasta va seta cantitatea de indentare pe toate părțile elementului de pagină;
- dacă specificați două valori, prima va seta cantitatea de indentare în partea de sus și de jos, iar a doua - la stânga și la dreapta;
- dacă specificați trei valori, atunci prima va determina cantitatea de indentare în partea de sus, a doua - în stânga și în dreapta, iar a treia - în partea de jos;
- dacă sunt specificate patru valori, prima va seta cantitatea de indentare în partea de sus, a doua la dreapta, a treia în partea de jos și a patra la stânga.
Astfel, regula CSS de mai sus poate fi scurtată pe cât posibil și scrisă după cum urmează:
p.test( umplutură: 5px 35px 10px 20px)
Proprietatea sau marjele în CSS
Atributele stilului margin-left, margin-top, margin-right și margin-bottom vă permit să setați valorile marginii, respectiv stânga, sus, dreapta și jos:
margine-top | margine-dreapta | margine-jos | margine-stânga:<значение>|auto|moştenire
După cum sa menționat mai sus, marginea este distanța de la marginea elementului curent până la marginea elementului adiacent sau, dacă nu există elemente învecinate, până la marginea internă a containerului părinte.
Cantitatea de indentare poate fi specificată în pixeli (px), procent (%) sau alte unități permise pentru CSS:
p(
margine-stânga: 20px;
}
h1(
marja-dreapta:15%;
}
Valoarea auto înseamnă că dimensiunea indentării va fi calculată automat de browser. Dacă utilizați notația procentuală, indentările sunt calculate în funcție de lățimea containerului părinte. Mai mult, acest lucru se aplică nu numai pentru margine-stânga și margine-dreapta, ci și pentru margine-sus și margine-jos, marjele procentuale vor fi calculate în funcție de lățimea, nu de înălțime, a containerului.
Este permisă utilizarea ca valori ale indentărilor externe valori negative:
p(
margine-stânga:-20px;
}
Dacă, cu valori pozitive ale indentării, elementele învecinate sunt îndepărtate, atunci cu valoare negativă blocul adiacent se va ciocni cu elementul pentru care am setat un astfel de offset negativ.
De asemenea, putem specifica umplutura folosind atributul style marginea. Setează valorile de indentare simultan pe toate părțile unui element de pagină web:
marja:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Când se specifică una, două, trei sau patru valori de umplutură, această proprietate respectă aceleași legi ca și regula de umplutură.
Opțiuni de chenar folosind proprietatea Border
La setarea cadrelor, există trei tipuri de parametri:
- border-width — grosimea chenarului;
- border-color — culoarea chenarului;
- border-style — tipul de linie cu care va fi desenat cadrul.
Să începem cu parametrul de grosime a cadrului:
border-width: [valoare | subțire | mediu | gros] (1,4) | moşteni
Grosimea ramei poate fi specificat în pixeli sau în alte unități disponibile în CSS. Variabilele subțire, mediu și gros setează grosimea marginii la 2, 4 și, respectiv, 6 pixeli:
lățime margine: medie;
Ca și în cazul proprietăților de umplutură și margine, parametrul border-width permite una, două, trei sau patru valori, setând astfel lățimea chenarului pentru toate părțile simultan sau pentru fiecare parte separat:
lățime chenar: 5px 3px 5px 3px
Pentru paragraful curent, faceți grosimea marginii de sus 1px, dreapta 2px, jos 3px și stânga 4px folosind regula (border-width: 1px 2px 3px 4px;)
Folosind atributele de stil border-left-width, border-top-width, border-right-width și border-bottom-width, puteți seta grosimea laturilor din stânga, sus, dreapta și, respectiv, de jos ale chenarului:
border-left-width|border-sus-width|border-right-width|border-bottom-width: subțire|mediu|gros|<толщина>|moştenire
Următorul parametru este culoarea marginii cu care puteți controla culoarea cadrului:
culoare-chenar: [culoare | transparent] (1,4) | moşteni
Proprietatea vă permite să setați culoarea chenarului pentru toate părțile elementului simultan sau numai pentru cele specificate. Ca valoare, puteți utiliza metodele folosite pentru specificarea culorilor în HTML: cod hexazecimal, cuvinte cheie etc.:
p (lățimea chenarului: 2px; culoarea chenarului: roșu)
Valoarea transparentă se stabilește culoare transparentă frame și moștenește valoarea părintelui. În mod implicit, dacă culoarea chenarului nu este specificată, se va folosi cea folosită pentru fontul din interiorul elementului.
Folosind atributele de stil border-left-color, border-top-color, border-right-color și border-bottom-color, puteți seta culoarea părților din stânga, sus, dreapta și, respectiv, de jos ale chenarului:
border-left-color|border-top-color|border-right-color|border-bottom-color: transparent|<цвет>|moştenire
ȘI ultimul parametru stilul de chenar specifică tipul de cadru:
chenar-stil: (1,4) | moşteni
Tipul de cadru poate fi specificat pentru toate laturile unui element deodată sau numai pentru cele specificate. Se pot folosi mai multe valori Cuvinte cheie. Aspectul va depinde de browserul utilizat și de grosimea cadrului. Sens nici unul este utilizat în mod implicit și nu afișează un cadru, iar grosimea acestuia este setată la zero. Valoarea ascunsă are același efect. Cadrul rezultat pentru alte valori, în funcție de grosime, este prezentat în tabelul de mai jos:
Atributele stilului border-left-style, border-top-style, border-right-style și border-bottom-style specifică stilul liniilor care vor fi desenate pe părțile din stânga, sus, dreapta și jos ale chenarului, respectiv:
border-left-style|border-top-style|border-right-style|border-bottom-style: niciunul|ascuns|punctat|liniat|solid|dublu|canelură|cresta|inserție|început|moștenire
Ca și în cazul opțiunilor de umplutură și umplutură, există universal proprietate de frontieră . Vă permite să setați simultan grosimea, stilul și culoarea chenarului în jurul unui element:
hotar: | moşteni
Valorile pot fi în orice ordine, separate prin spații:
td (chenar: 1px galben solid)
Pentru a seta un chenar numai pe anumite laturi ale unui element, există proprietățile margine-sus, chenar-jos, chenar-stânga, chenar-dreapta, care vă permit să setați parametrii pentru partea de sus, jos, stânga și partea dreapta cadru
Rămâne doar să rezumam:
- pentru sarcina umplutura folosim proprietatea umplutura;
- pentru setari marginile exista o regula marginea;
- parametrii cadrului sunt specificate folosind atributul frontieră.
Observ că toate aceste proprietăți CSS măresc dimensiunea elementului paginii web. Prin urmare, dacă modificăm grosimea chenarului sau dimensiunea căptușelii containerelor bloc care formează designul paginii web, va trebui să modificăm dimensiunea acestor containere în mod corespunzător, în caz contrar se pot muta și designul va fi spart.
Asta e tot, ne vedem data viitoare!
Aspectul bloc este adesea folosit la crearea unui site web sau blog. Ca o consecință a acestui fapt, este adesea necesară indentarea blocurilor. Din acest motiv, aproximativ cum să indentați în CSS descrisă în detaliu în această lecție. Pentru browser, fiecare etichetă este un container care are conținut, umplutură, margini exterioare și o chenar. În această lecție vom învăța cum să facem intern și marginile, să luăm în considerare principalii lor parametri.
Figura de mai jos arată clar parametrii de indentare a blocului:
După cum puteți vedea, liniuțele pot fi făcute în patru direcții: liniuță de sus (sus), liniuță de jos (jos), liniuță din stânga (stânga) și liniuță din dreapta (dreapta). Unitățile de măsură pot fi pixeli, procente și altele. unități CSS- mai multe despre ei. Acest tutorial folosește pixeli.
Blocuri de umplutură
Proprietatea responsabilă pentru completarea în CSS este umplutura. Deci, să ne uităm la un exemplu de setare a umpluturii pentru un bloc:
padding-top: 5px; /*padding-ul de sus*/ padding-left: 8px; /*padding stânga*/ padding-dreapta: 8px; /*padding dreapta*/ padding-bottom: 5px; /*umplutură de jos*/
ÎN în acest exemplu Căptușeala internă este setată separat pentru fiecare parte a blocului. În plus, există mai multe moduri de a seta indentarea în CSS:
margine: 5px 8px 5px 8px; /*margini sus, dreapta, jos, stânga*/ margine: 5px 8px 5px; /*descrie marginile de sus, stânga, dreapta, jos*/ margine: 5px 8px; /*descrie marginile de sus și de jos, din dreapta și din stânga*/ margine: 7px; /*descrie toate marginile interne de 7px*/
Este mai ușor să-l amintești pe primul și ultimele moduri. În primul caz, indentațiile sunt plasate în sensul acelor de ceasornic (sus, dreapta, jos, stânga) - putem specifica orice cantitate de indentare, în cel din urmă caz, indentările de pe toate părțile vor fi aceleași;
Blocați marginile
Proprietatea responsabilă pentru marjele în CSS este marginea. Exemple de marje în CSS:
margine-sus: 5px; /*margine de sus*/ margine-stânga: 10px; /*marginea din stânga*/ marginea-dreapta: 10px; /*margine din dreapta*/ margine-jos: 5px; /*marginea de jos*/
umplutură: 5px 10px 5px 10px; /*margini sus, dreapta, jos, stânga*/ padding: 5px 10px 5px; /*descrie umplutura de sus, stânga și dreapta, de jos*/ padding: 5px 10px; /*descrie umplutura de sus și de jos, dreapta și stânga*/ padding: 7px; /*descrie toate marginile de 7px*/
Prin urmare, cum să indentați în CSS- întrebarea nu este dificilă, dar foarte relevantă. Pentru a înțelege mai bine informațiile descrise mai sus, ar trebui să rețineți că există două proprietăți: padding - indentări interne și margine - indentări externe. De asemenea, după cum știți deja, există mai multe moduri de a seta indentări, le puteți utiliza.
Bine ati venit pe blogul meu. Css (Cascading Style Sheets) oferă o mulțime de opțiuni de personalizare aspect pagini web. Astăzi aș dori să vă arăt pe scurt cum să definiți în CSS umplutura din partea de sus sau pe orice altă parte pentru orice element.
Marja
Marja este setată folosind proprietatea margine. Cu acesta, puteți seta margini pe toate cele patru laturi simultan sau puteți utiliza alte proprietăți: margine-sus, margine-stânga, margine-dreapta, margine-jos, care vă permit să o creați doar pe o singură parte.
Marja determină distanța la care marginea selectată a unui element va fi decalată față de alte elemente de pe pagină. De exemplu, intrarea:
P, div( Marja-top: 20px; )
Aceasta înseamnă că toate blocurile și paragrafele vor fi indentate în partea de sus cu 20 de pixeli, adică marginea lor superioară va fi îndepărtată de elementele adiacente cu această distanță.
Marginile pot fi scrise pe fiecare parte folosind o singură proprietate de marjă, la care sunt scrise 4 valori pe rând:
Div( Marja: 20px 10px 20px 10px; )
Căptușeala va fi dată de la marginile de sus, dreapta, jos și respectiv stânga. Deoarece în acest caz sunt egale pe părți opuse, am putea scrie și astfel:
Div( Marja: 20px 10px; )
Prima valoare este marja din partea de sus și de jos, iar a doua este marja din laterale.
Indentare
Căptușeala interioară funcționează diferit - nu îndepărtează blocul de alte elemente, ci adaugă acel spațiu în interiorul elementului, îndepărtând conținutul blocului de marginile acestuia. Este confortabil. Unde ați văzut un site web în care textul începe în partea din stânga sus a ferestrei?
Nu am văzut asta, deoarece dezvoltatorii web folosesc întotdeauna indentări externe și interne pentru a face textul cât mai ușor de citit. Umplutura internă este specificată folosind proprietatea padding, în care pot fi enumerate 4 valori deodată, separate printr-un spațiu, pentru toate marginile, respectiv.
De asemenea, similar cu marginea, puteți adăuga numele părții și puteți seta distanța doar pentru aceasta. De exemplu, liniuța de sus poate fi scrisă cu folosind umplutura-top. În general, proprietatea padding funcționează exact la fel ca proprietatea margine.
De exemplu, puteți da această bucată de cod:
Bloc (Latime: 200px; Umplutura: 20px; )
Care crezi că va fi lățimea reală a elementului nostru? Aici puteți vedea că este de 200 de pixeli, dar căptușelele adaugă încă 20 pe fiecare parte, pentru un total de 240 de pixeli. Luați în considerare acest lucru atunci când proiectați.
Aș dori, de asemenea, să remarc că umplutura este dată în mod normal doar pentru elementele bloc, este mai bine să nu o dați elementelor inline. Marja funcționează bine cu orice element.
Aspectul CSS a fost întotdeauna dreptunghiular. Orice linii netede sunt responsabilitatea dezvoltatorului. Regulile de stil oferă suficiente opțiuni pentru a da paginii o formă netedă în limitele rezoluției ecranului. Dar orice element de aspect este întotdeauna un dreptunghi în care aranjarea informațiilor este guvernată de regulile CSS.
Umplutura pe toate părțile este importantă pentru fiecare element de pagină atunci când este poziționat în mod absolut, iar umplutura superioară CSS este definită în mod specific deoarece contează pentru diverse elemente, mai ales cele mici.
Reguli de bază de poziționare
Un element bloc are o regulă de marjă, o regulă de umplutură pentru elementele din interiorul său și o lățime a marginii care poate fi, de asemenea, utilizată.
Indentarea din partea de sus este de o importanță deosebită. CSS într-un bloc asociază regulile de umplutură cu reguli pentru elementele poziționate absolut și relativ în acel bloc.
O practică obișnuită pentru regulile CSS: puteți specifica aceeași umplutură pe toate părțile, în perechi sus/jos și dreapta/stânga, sau pentru fiecare parte separat. De exemplu,
- marja: 10px;
- umplutură: 10px20px;
- umplutură: 10px20px30px40px.
În primul caz, este stabilită indentarea elementului de pe părțile laterale ale containerului exterior în care este amplasat. În al doilea caz, marginile din partea de sus și de jos sunt 10px, în stânga și în dreapta - 20px. În al treilea caz, dimensiunea indentărilor este indicată pe toate părțile: sus, dreapta, jos și stânga.
În toate aceste cazuri, indentarea CSS de sus este de 10 px.
Reguli care schimbă poziția elementelor
Dacă un element de aspect nu este poziționat în mod absolut, acesta este poziționat în procedura generala formarea paginii.
Dacă definim umplutură pe CSS de sus în elementul scCurrInfo, obiectivul va fi atins, dar dacă la nivelul li nu va fi.
În acest exemplu, folosind regula de umplutură: 40px; necesită o reducere adecvată a regulilor de lățime și înălțime cu 80px. În caz contrar, dimensiunea blocului scCurrInfo va depăși limitele blocului exterior.
Dacă eliminăm regula de umplutură din descrierea scCurrInfo, dar o adăugăm cu o valoare de 20px la descrierea stilului elementului din listă, vom obține doar liniuță de sus. CSS nu va aplica această valoare altor părți.
Desigur, această utilizare a regulii de indentare se aplică fiecărui element li.
Practici generale de formatare a conținutului
Unii dezvoltatori ating perfecțiunea prin aranjarea paginilor elemente de bloc. Se pare că este o practică clasică să începi cu tabele și să termini cu ale tale proces educațional pe blocuri.
Libertate inerentă aspectul blocului, este fascinant, iar imaginația dezvoltatorului poate să nu fie limitată de reguli stricte de tabel: numai rânduri, doar celule, îmbinând doar orizontal și vertical. Nimic specific ideilor relaționale.
Între timp, tabelele, pe lângă dezavantajele evidente, au multe avantaje calitative. La crearea padding-ului în partea de sus, CSS ține cont de padding-ul din stânga, dreapta (jos este un moment special). Regulile pentru celulele tabelului vă permit să controlați atât alinierea verticală, cât și orizontală. Folosind stiluri de rând și combinându-le cu stiluri de celule, puteți crea vizualizări complexe ale conținutului.
Reprezentarea obișnuită a unei pagini sub formă de dreptunghiuri nu împiedică deloc să fie prezentată sub forma unui tabel. Acestea sunt și dreptunghiuri, dar sunt și celule de tabel, adică au propriile reguli care completează regulile blocurilor.
Poziționare absolută
Bloc cu regula POZIȚIA: absolută ; va fi situat într-o locație determinată de coordonatele sale relativ la blocul în care se află.
O trăsătură caracteristică a regulilor CSS este „practica - cel mai bun criteriu truth” în cele mai multe cazuri, mai ales când este necesară compatibilitatea între browsere și aspectul se face manual, este de preferat să studieze manuale cu drepturi depline pe foi de stil în cascadă.
Utilizarea tabelelor duce adesea la probleme de schimbare a conținutului celulei. Un decalaj similar în cadrul unui bloc nu afectează întotdeauna toate elementele. Experimentând, puteți obține rezultatul dorit. O sarcină banală: cum eliminarea umpluturii superioare nu este întotdeauna o soluție banală pentru CSS.
În unele cazuri, atunci când trebuie să așezați elementele paginii în profunzimea unora sistem popular managementul conținutului site-ului web, este încă necesar să se acorde atenție nu numai practicii experimentale, ci și să se uite la experiența colegilor.
O zi buna! Setarea indentărilor pentru text și imagini este subiectul principal al publicației de astăzi. Să aruncăm o privire mai atentă asupra abordărilor care pot fi aplicate în practică.
La crearea unui site web, un webmaster se ocupă de blocuri de textși fraze postate pe paginile proiectului. Rezolvarea problemelor individuale presupune utilizarea Etichete HTML adăugat la editor. Există mai multe tipuri de atribute care vă permit să mutați fraze sau să schimbați locația fragmentelor pagina electronica.
Setarea indentărilor prin inserarea de spații
Să ne uităm la cum să indentați textul în HTML folosind etichetă specială, asigurând formarea unui gol. Este necesar să introduceți codul de numărul necesar de ori pentru a obține abaterea dorită de la marginea paginii.
Codul de mai sus poate fi procesat de toate tipurile de browsere, iar webmasterul va primi un rezultat garantat. Dezavantajul metodei este capabilitățile limitate, deoarece pentru a crește distanța trebuie să adăugați cantitate mare etichete, iar acest lucru aglomera documentul.
Aplicarea unei etichete de citare
Studiind în detaliu cum să indentați textul în codul HTML, puteți întâlni metoda alternativa, dând mai multe posibilitati.
Aici va trebui să utilizați blockquote, care vă permite să mutați fragmentul din stânga și din dreapta cu aproximativ 40 px. Este suficient să scrieți cod identic cu exemplul dat:
Metoda vă permite să manipulați fraze cu o valoare fixă de 40 px. De asemenea, este de remarcat faptul că în această etichetă de obicei se încheie cu un citat.
Opțiuni alternative
Dacă intenționați să mutați o distanță non-standard, va trebui să utilizați parametrul text-indent, care se referă la stil Tabel CSS. Metoda luată în considerare asigură crearea unei abateri a primei linii prin distanta necesara. Următoarele modificări trebuie făcute editorului:
Când este necesar să se măsoare numărul necesar de pixeli dintr-o imagine, se acordă preferință codurilor simple, dar eficiente.
În primul caz, sunt setate doar valorile de offset de la marginile imaginii. În al doilea, poziția imaginii este setată la marginea din stânga cu textul curgând spre dreapta, iar în a treia - invers.
Informația a ajuns la final. Spune-mi, ai găsit informațiile pe care le căutai? Răspunsul poate fi scris în comentarii.
În cele din urmă, voi menționa că blogul Workip este dedicat în primul rând opțiunilor monetare pentru a face bani online. Știți ce metode sunt cu adevărat promițătoare din punct de vedere financiar? Descrierile unora dintre ele au fost deja publicate.
Publicarea materialelor continuă. Aboneaza-te la e-mail pentru actualizări de proiect. Ne vedem mai târziu.
