Cum să indentați în CSS? Ce este CSS, conectarea unui fișier CSS

Astăzi vreau să vorbesc despre ce sunt stilurile, cum să creez un fișier de stil și cum să-l folosești.

CSS – Foi de stil în cascadă. Un fișier special (sau mai multe fișiere) care este responsabil pentru designul paginii. Are o extensie *.css. Acest fișier conține parametri care vor fi aplicați anumitor elemente din pagină.

Să creăm un fișier de stil pas cu pas și să îi adăugăm mai mulți parametri pentru pagina web.

1. Să creăm o pagină HTML.

Am pus acest cod in el:

Cam asa arata pagina:

2. Al doilea pas este crearea unui fișier style.css

(acest lucru se face printr-un bloc de note: creați un fișier, faceți clic pe „salvare ca”, puneți toate fișierele în parametrul tip fișier, puneți style.css în nume). Nu vom scrie nimic în fișier deocamdată. Să-l salvăm.
3. Acum, pentru ca foaia de stil să funcționeze, trebuie să o atașăm la pagina HTML.

Acest lucru se face astfel:

ÎN eticheta HEAD trebuie să scrieți un rând:

Fișierul meu de stiluri se află în același folder cu fișierul Pagini HTML, așa că ofer doar numele. Dacă stilurile dvs. sunt, de exemplu, în folderul css, atunci ar trebui să scrieți href="css/style.css" .

Nimic nu s-a schimbat încă pe pagina noastră:

4. Acum puteți începe să scrieți stiluri.

Să deschidem fișierul style.css folosind Notepad și să scriem regula pentru antet în el:

H1 (dimensiune font: 18px; familie font: Arial;)

Reîmprospătăm pagina și vedem că nimic nu s-a schimbat.

Pentru ca modificările să intre în vigoare, trebuie să adăugați la eticheta dorită attribute class="nume stil".

Să adăugăm atributul class="h1" la eticheta h1. Rezultatul ar trebui să se schimbe acum:

De fapt, stilul pe care îl specificăm printr-un punct, cum ar fi .h1, este universal. Putem aplica acest stil nu numai pentru h1, ci și pentru un paragraf, o listă, un element de listă și așa mai departe. Poți să încerci.

5. Acum să setăm un stil pentru un paragraf simplu. Să facem asta într-un mod diferit.

Să adăugăm următoarele în foaia de stil:

P (familie de font:Verdana; culoare:#cc0000;)

Să reîmprospătăm pagina. După cum ați observat, nu am adăugat un atribut de clasă aici, iar paragrafele s-au schimbat, ambele. Cert este că am introdus „p” în stilurile fără punct. Aceasta înseamnă că pentru întreaga pagină la care este legat aceasta masa stiluri, am reatribuit parametrii etichetei paragraf. Indiferent dacă are Opțiuni suplimentare sau nu.

6. Acum să ne uităm la o altă modalitate de a atribui stiluri.

Să adăugăm următoarea linie la foaia de stil:

p#abc (familie font:Arial; dimensiune font:14px; culoare:#c0c0c0;)

După cum puteți vedea, al doilea paragraf s-a schimbat. Dacă vă amintiți, am atribuit id=”abc” acestui paragraf. Linia noastră din foaia de stil înseamnă doar asta această regulă va fi valabil doar pentru acele paragrafe care au id=”abc”.

7. Să începem cu lista.

Să adăugăm următoarele reguli la foaia de stil:

ul (border:1px solid #000000; culoare de fundal:#CCCCCC;)

li (dimensiune font: 16px; culoare:#FF0000; text-decor: subliniat;)

După cum puteți vedea, în jurul listei noastre a apărut un cadru, fundalul a devenit gri, iar elementele din listă sunt roșii și subliniate.

Indiferent dacă stilizați textul cu CSS sau cu elemente de formular, se procedează în același mod. Principalul lucru este să înțelegeți structura regulilor CSS, iar restul este trivia.

Acesta este rezultatul final al muncii noastre.

Nu a fost niciun scop să facă din asta o capodopera, așa că te rog nu mă certa. Principalul lucru este că înțelegeți cum funcționează CSS.
__
Cu sprijinul Everalp.ru - lucrări de acoperiș.

În acest capitol vom vorbi despre cum să implementăm CSS într-un document HTML, adică să legăm descrierea stilului unui element direct la elementul în sine, cumva Etichetă HTML ohm

Implementează aceasta sarcina posibil în trei moduri:

Scrieți o descriere a stilului direct în elementul în sine. Această metodă este bună numai dacă există un singur astfel de element document HTML e care necesită o descriere separată a stilului.
Scrieți o descriere de stil pentru toate elementele identice ale documentului HTML. Această metodă este justificată dacă stilul paginii este fundamental diferit de designul general al site-ului (un grup de pagini interconectate).
Inserați descrierea stilului elementelor HTML în dosar separat CSS. Acest lucru vă va permite să gestionați designul întregului site, fiecare pagină a site-ului în care este indicată o referință la un fișier CSS. Această metodă este cea mai mare utilizare eficientă foi de stil în cascadă.

Să aruncăm o privire mai atentă la fiecare opțiune și, în același timp, să ne familiarizăm cu regulile sintaxei de scriere CSS.

Atributul stilului.

Aproape fiecare etichetă HTML are un atribut stil, ceea ce indică faptul că acestei etichete i se aplică o anumită descriere a stilului.

Este scris astfel:

stil="">

Tot ce va fi scris între ghilimele de atribut stilși va fi o descriere de stil pentru a acestui element, V în acest caz, element

Ei bine, de exemplu:

style="color: #ff0000; font-size:12px"> acesta este un paragraf cu un stil personal

În acest caz, am precizat că acest paragraf ar trebui să fie afișat cu roșu și să aibă dimensiunea fontului de 12 pixeli. În capitolele următoare voi vorbi în detaliu despre ceea ce este scris între ghilimele, acum despre care vorbim despre cum să aplicați CSS oricărei etichete HTML.

Folosind același principiu, puteți specifica un stil individual pentru aproape fiecare element HTML.

atribut de stil

style="background-color: #c5ffa0">

style="color: #0000ff; font-size:18px"> Totul despre elefanți

Cumpără un elefant

style="color: #ff0000; font-size:14px">

style="color: #0000ff; font-size:16px"> Închiriază un elefant

style="color: #ff0000; font-size:14px">

Dar încă o dată, această metodă de introducere a CSS este bună numai dacă trebuie să setați un anumit stil la un număr mic elemente HTML.

Etichetă (a nu se confunda cu atributul cu acelasi nume) in care sunt descrise elementele de care avem nevoie.

Aruncă o privire la exemplu, vor fi comentarii mai jos.

<a href="https://viws.ru/ro/atributy-style-css-v-html-oformlenie-html-tegov-atributom-style-vstroennye-stili-css.html">Etichetă de stil</a>

Totul despre elefanți

Pe acest site veți găsi orice informații despre elefanți.

Cumpără un elefant

Cu noi poți preturi favorabile cumpara cei mai buni elefanti!!

Închiriază un elefant

Doar aici puteți închiria orice elefanți!!

După cum se poate vedea din exemplu, am obținut exact același rezultat ca în primul caz, doar că acum nu atribuim un stil fiecărui element individual, ci l-am plasat în „capul” documentului, indicând astfel că toate titlurile

,
- paragrafele vor fi albastre
- roșu. Imaginează-ți cât de ușoară ar fi munca noastră dacă ar exista o sută de astfel de paragrafe și aproximativ cincisprezece titluri pe o pagină, iar documentul în sine ar cântări mai puțin prin „eliminarea” tuturor descrierilor de stil repetate pentru fiecare element individual.

Acum comentariile promise:

Etichetă stilurile anumitor elemente HTML sunt declarate direct conform următoarei sintaxe:

Dacă într-un bloc de declarație de stil sunt specificate mai multe proprietăți ale unui element, acestea sunt separate prin punct și virgulă.

CSS într-un fișier extern separat.

Cât timp durează până la scurt, ajungem la principalul, în opinia mea, avantajul CSS, și anume capacitatea de a pune toate informațiile legate de designul site-ului într-un fișier extern separat.

Deci, deschideți notepad (sau alt editor) și scrieți următorul text în el:

Corp (culoare de fundal: #c5ffa0)
a (culoare:#000060; greutatea fontului: bold;)
a:hover (culoare:#ff0000; font-weight: bold; text-decoration:none)
h1 (culoare: #0000ff; dimensiunea fontului: 18px)
h2 (culoare: #ff00ff; dimensiunea fontului: 16px)
p (culoare: #600000; dimensiunea fontului: 14px)

Voi încerca să vă spun în detaliu ce am scris despre acest lucru ciudat în capitolele următoare ale acestui manual.

Toate! Fișierul de descriere a stilului a fost creat! Acum nu mai rămâne decât puțin, și anume să forțezi paginile necesare site-ul nostru pentru a obține informații din acest fișier.

Acest lucru se face folosind eticheta (conexiune). Etichetă multifuncțional și servește la „legarea” unui document HTML cu fișiere externe suplimentare care asigură funcționarea sa corectă. Etichetă este un fel de link, destinat doar nu utilizatorilor, ci programelor browser (browsere). Deoarece transportă exclusiv informații de serviciu; se află în capul documentului HTML între etichete și nu este afișat pe ecran de browsere.

Etichetă are atribute:
href- Calea către fișier.
rel- Definește relația dintre documentul curent și fișierul la care se face referire.
pictogramă de comandă rapidă - Specifică faptul că fișierul inclus este un .
foaia de stil- Specifică faptul că fișierul inclus conține o foaie de stil.
application/rss+xml - Fișier în format XML pentru a descrie fluxul de știri.

tip - tip MIME datele fișierului de conexiune.
Din moment ce ne conectăm ca fișier extern foaie de stil în cascadă, atunci linkul nostru de serviciu ia următoarea formă:

Repet, pentru a risipi cu siguranță eventualele neînțelegeri. Atribut rel atribuie o valoare foaia de stil Deoarece conectăm o foaie de stil în cascadă ca fișier extern, indicăm calea către fișierul CSS (în acest exemplu fișierul se numește stilul meu.cssși se află lângă documentul HTML în care este scris acest link) mai indicăm că acest fișier text și conține o descriere a stilului tip="text/css"

Acum inserăm această linie în anteturile paginii site-ului nostru și ne bucurăm de rezultat.

fișierul mystyle.css
corp (culoare de fundal: #c5ffa0)
a (culoare:#000060; greutatea fontului: bold;)
a:hover (culoare:#ff0000; font-weight: bold; text-decoration:none)
h1 (culoare: #0000ff; dimensiunea fontului: 18px)
h2 (culoare: #ff00ff; dimensiunea fontului: 16px)
p (culoare: #600000; dimensiunea fontului: 14px)
fișier index.html

foaie de stil în cascadă

Meniul:

Totul despre elefanți.
Cumpără un elefant.
Închiriază un elefant.

Totul despre elefanți

Pe acest site veți găsi orice informații despre elefanți.

Fișierul elefant.html

foaie de stil în cascadă

Meniul:

Totul despre elefanți.
Cumpără un elefant.
Închiriază un elefant.

Cumpără un elefant

Cu noi puteți achiziționa cei mai buni elefanți la prețuri competitive!!

Fișierul elefant1.html

foaie de stil în cascadă

Meniul:

Totul despre elefanți.
Cumpără un elefant.
Închiriază un elefant.

Închiriază un elefant

Doar aici puteți închiria orice elefanți!!

În exemplul de mai sus, „site despre elefanți”, pe acest moment, există trei pagini, fiecare fiind asociată cu o singură pagină css extern fișier - mystyle.css. Astfel, l-am „descărcat” în mod semnificativ și am făcut ca designul întregului site să fie „compatibil cu dispozitivele mobile”. Imaginează-ți câți kilobytes am câștiga dacă acest site ar avea o sută de pagini cu drepturi depline!? Și, de asemenea, cât timp am economisi dacă ar fi nevoie să schimbăm ceva în designul său!?

În acest capitol, am analizat trei moduri de a încorpora CSS într-un document HTML. Care este mai bine de folosit?

Utilizați atributul stil pentru orice element, dacă acest element cu un stil diferit de alte elemente este singurul de pe întregul site.
Utilizați eticheta
Blocați în css -1.

Blocați în css - 2.

Blocați în css - 3.

Dacă nu înțelegeți unde și unde am intrat în CSS, atunci acordați atenție rândurilor de la 4 la 17. Și dacă mai aveți întrebarea că am făcut-o, repetați lecția nr. 3 - „”.

Rezultat:

Acum puteți vedea limitele blocului, iar când limitele sunt vizibile, atunci este mai ușor să lucrați cu blocurile.

Blocați indentarea în CSS

proprietate "MARJA»
Pentru a seta distanța (indentarea) de la bloc, utilizați regula „marjă”.
Acordați atenție diagramei. Parametrii sunt setați din bloc:

Proprietăți:

top- partea superioară

dreapta- Partea dreapta

fund- partea de jos

stânga- partea stângă

Marja-top: 30px; /* partea de sus */ margin-right:70px; /* partea dreaptă */ margin-bottom:90px; /* partea de jos */ margin-left:120px; /* partea stângă */
Forma prescurtată

Puteți scrie tot ce am notat pentru indentare pentru fiecare bloc separat într-o formă prescurtată:

Sintaxă:
Marja: partea de sus latura dreapta partea de jos partea stângă;
Marja: 30px 70px 90px 120px; /* forma prescurtata */
Blocați în css
Blocați în css -1.

Blocați în css - 2.

Blocați în css - 3.

Rezultat:

Dacă setați un parametru la regula „marjă” (linia nr. 22):
Marja: 100px; /* forma prescurtata */
atunci distanța față de bloc pe toate părțile va fi de 100 px.

Indentarea într-un bloc în CSS

proprietate "CAPTURĂ»
Pentru a seta distanța (indentarea) în interiorul unui bloc, utilizați regula „căptușeală”.
Acordați atenție diagramei:

Proprietăți:

top- partea superioară

dreapta- Partea dreapta

fund- partea de jos

stânga- partea stângă

Umplutură-top: 30px; /* partea de sus */ padding-right:70px; /* partea dreaptă */ padding-bottom:90px; /* partea de jos */ padding-left:120px; /* partea stângă */
Forma prescurtată

Puteți nota tot ce am scris mai sus într-o formă prescurtată.

Sintaxă:
Căptușeală: partea de sus partea dreaptă partea de jos partea stângă;
Umplutură: 30px 70px 90px 120px; /* forma prescurtata */
Înregistrează-te fișier HTML ca aceasta:
Blocați în css
Blocați în css -1.

Blocați în css - 2.

Blocați în css - 3.

Rezultat:

Dacă setați un parametru la regula „padding” (linia nr. 21):
Umplutură: 50px; /* forma prescurtata */
atunci distanța în interiorul blocului pe toate părțile va fi de 50 px.

Lățimea și înălțimea blocului în CSS

proprietate "LĂŢIME" Și "ÎNĂLŢIME»
Puteți crea lățimea și înălțimea blocului. Pentru a face acest lucru, utilizați regulile „lățime” - lățime și „înălțime” - înălțime.

Sintaxă:

inaltime - inaltime bloc;

lățime - lățime bloc;

Sens:
Valoarea este specificată în px sau %.

Latime: 600px; /* latime bloc */ inaltime: 250px; /* înălțimea blocului */
Cred că nu este nevoie să explic cum să inserați o regulă în CSS în același timp, voi verifica cum ați stăpânit lecția nr. 3 despre cum să includeți CSS.

Rezultat:
Blocul va avea o lățime și o înălțime fixe.

Dacă aveți nevoie și de non-fix bloc de cauciuc(un bloc care se întinde pe lungimea monitorului), apoi în loc de px, trebuie să specificați %. Nu uitați: întregul monitor este 100%.

Latime: 90%; /* latimea blocului de cauciuc */
Blocați fundalul în CSS

proprietate "FUNDAL»
Știți deja regula „fondului”, așa că nu văd rostul să mă repet.
Și cine nu știe, ești binevenit pe pagina cu.

Blocați în css
Blocul 1.

Linia nr. 7 – cu regula „fondul” am înlocuit fundalul cu culoarea verde

Rezultat:

Puteți umple fundalul nu numai cu culoare, ci și cu o imagine:
Imagine de fundal: url(bg.gif); /* Imagine de fundal */
Blocați în css
Blocul 1.

Linia nr. 7 – folosind regula „imagine de fundal”, am înlocuit fundalul cu o imagine de fundal.
bg.gif este imaginea de fundal.

Rezultat:

PLUS

Blocați transparența în CSS

Proprietatea „OPACITATE”
Blocul poate fi făcut transparent folosind regula CSS"opacitate".

Sintaxă:
Opacitate: valoare;
Sens:
valorile specifică un număr în intervalul de la 0 la 1.

Valoarea 0 – transparență completă a blocului.

Valoarea 1 – opacitatea blocului (blocul va rămâne așa cum este).

Valoarea în fracții (0,5) este transluciditatea blocului.

Blocați în css

Blocul 1.

Rezultat:

Ascunde blocul în CSS

proprietate "AFIŞA»
Regula „afișează” va ajuta la ascunderea unui bloc pe o pagină web. Adesea, această regulă este folosită într-un meniu derulant sau atunci când trebuie să ascundeți unele blocuri versiune mobila site-ul.
Bloc1(afișare:niciuna;)
proprietate "OPACITATE»
Regula „opacității” va ajuta, de asemenea, la ascunderea unui bloc pe o pagină web.
Blok1 (opacitate: 0;)
proprietate "VIZIBILITATE»
„vizibilitatea” este o altă regulă care va ajuta și la ascunderea unui bloc al unei pagini web. Pentru regula „vizibilitate”, adăugați valoarea „ascunsă”:
Bloc 1(vizibilitate: ascuns;)
proprietatea de debordare

Proprietate „OVERFLOW”.
Cu regula „depășire”, puteți defini ce se va face dacă conținutul unui element depășește dimensiunea acestuia. De exemplu, o imagine sau un text este mai mare decât blocul în sine.

Sintaxă:
Overflow: valoare;
Sens:

Vizibil- indică faptul că atunci când elementul depășește conținut, acesta nu va fi tăiat, ci pur și simplu va depăși cadrul (valoare implicită).

Ascuns- indică faptul că conținutul care nu se încadrează în element va fi tăiat (partea tăiată va fi invizibilă).

Sul- indică faptul că conținutul care nu se încadrează în element va fi tăiat, dar puteți folosi bara de derulare pentru a vizualiza porțiunea tăiată.

Auto- când un element debordează de conținut, barele de defilare sunt adăugate automat.

Exemplu cu „Vizibil” (implicit):
Blocați în css

Blocul 1.

Rezultat:

Exemplu cu „Ascuns”»:
Bloc1 (înălțime: 200 px; /* înălțime */ lățime: 250 px; /* lățime */ chenar: 2 px punctat #cc0000; /* cadru */ overflow: Ascuns; )
Rezultat:

Exemplu cu „Scroll”»:
Bloc1 (înălțime: 200 px; /* înălțime */ lățime: 250 px; /* lățime */ chenar: 2 px punctat #cc0000; /* cadru */ depășire: derulați; )
Rezultat:

Exemplu cu „Automat”:
Bloc1 (înălțime: 200px; /* înălțime */ lățime: 250px; /* lățime */ chenar: 2px punctat #cc0000; /*cadru */ overflow: automat; )
Rezultat:

Box Shadow în CSS

Proprietatea „BOX-SHADOW”
Puteți face o umbră din bloc. Regula „cutie-umbră”.

Sintaxă:

Blok1 ( înălțime: 200px; /* înălțime */ lățime: 250px; /* lățime */ chenar: 1px solid #ccc; /*cadru */ casetă-umbră: -19px 0 22px -19px #000.19px 0 22px -19px # 000 /*bloc umbră*/ )
Rezultat:

Alinierea unui bloc la centru

Proprietate „MARGIN”
Pentru a alinia blocul la centru, setați regula „marginei” la „0 auto”:
Marja: 0 auto;
Bloc1 (înălțime: 100px; /* înălțime */ lățime: 100px; /* lățime */ chenar:1px solid #ccc; /*cadru */ margine: 0 automat; )
Asta e tot! Este timpul să termin această lecție, altfel a ieșit prea mare! Și deja aud sforăitul în afara monitorului.
Încă puțin și vom termina de învățat elementele de bază ale CSS.

Abonați-vă la actualizări!

Postarea anterioară
Următoarea intrare

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ă, marginile externe, precum și un cadru. Î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ă

In spate umpluturaîn CSS proprietatea corespunde umplutura. Deci, să ne uităm la un exemplu de setare a umpluturii interne 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 umpluturile 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.