În CSS, dezvoltare web se înlocuiește aproape complet tag-urile depășite utilizate în primele patru specificațiile Hypertext Markup Language. Astăzi, foaia de stil nu se poate separa numai conținutul unui site de design, dar, de asemenea, vă permit să aplice o varietate de efecte care au fost anterior pe site-urile pot fi realizate numai prin intermediul graficelor.
In articolul de mai jos, vom dezvălui caracteristici ale utilizării moderne de CSS web design, vom înțelege principiile de bază ale creării de Cascading Style Sheets, precum și aspectul la unele dintre proprietățile benefice ale limbajului de marcare care le puteți utiliza pe site-urile lor.
Ce este CSS? Ruslan Tertyshniy
Cine știe HTML, asta e sigur atenție că există un număr de tag-uri și proprietăți care descriu nu numai structura documentului, dar, de asemenea, aspectul său. De exemplu, eticheta , care stabilește culoarea textului selectat, sau proprietatea de frontieră care indică dacă domeniul de aplicare al elementului și grosimea acestuia.
Deoarece cunoașterea CSS și devine necesară tuturor celor care lucrează cu codul HTML. La baza acestuia, Cascading Style Sheets nu sunt un limbaj de programare complet, precum și, de asemenea, HTML, numai un anumit limbaj de marcare. Cu toate acestea, fiecare nouă versiune de capabilități CSS crească, astfel încât în viitorul apropiat, ar putea fi de sprijin variabile și condiții normale.
Între timp, vă sugerez să se familiarizeze cu foi de stil în cascadă, în forma în care acestea sunt acum.
Elementele de bază CSS
foi de stil Cascading conține instrucțiuni pentru proiectarea vizuală a anumitor elemente ale paginii web, care este, descrie stilul lor. Cascada constă și în faptul că stilurile prescrise sunt moștenite de toate componentele care sunt copii ale celor pentru care ne-am stabilit un anumit fel.
În practică, acest lucru înseamnă următoarele. Dacă noi, de exemplu, a cerut o etichetă
culoarea textului, spun verde, atunci toate elementele de text pe pagina (de fapt întregul conținut al paginii vizibile este încorporată în tag-ul body) va fi verde :) Undo stil nu poate fi (care este esența cascada), dar o puteți înlocui prin setarea dreapta elemente ale noului design:În captura de ecran de mai sus, vedem că stilurile înregistrate în (secțiunea HEAD) „cap“ document HTML și limitate tag-uri . Acest lucru nu este singurul sau cel mai bun mod de a declara stiluri, dar pentru o claritate mai avem încă locui pe ea (modul de conectare CSS altfel vom discuta mai jos).
Acum suntem interesați doar în principiu, descrie stilurile. Acest principiu se numește „sintaxa CSS.“ Practic, este destul de simplu de înțeles, dacă știți deja HTML, sau cel puțin limba engleză. sintaxa CSS pentru a descrie în câteva reguli:
Toate regulile de mai sus pot fi exprimate într-o singură imagine:
Aici, de fapt, întreaga bază de sintaxă CSS. Excepții de la regulile de mai sus, dar există unele adăugiri, despre care veți afla în continuare pe măsură ce citiți articolul.
Între timp, putem găsi doar parametrii care pot fi ajustate cu ajutorul CSS. Dacă nu afectează domeniul specific de aplicare a CSS 3 moderne, cum ar fi, de exemplu, animație, lista va fi similară cu următoarea:
- aspectul, dimensiunea și culoarea elementelor de text;
- culori și imagini de fundal;
- Poziția elementelor individuale în raport cu cealaltă;
- indentare în interiorul și între blocuri;
- Prezența și aspectul elementelor bloc accident vascular cerebral si linie;
- aspectul de tip bloc specifice, liste, tabele, și link-uri;
- vizibilitatea sau invizibilității anumitor fragmente ale paginii.
Conectarea CSS
Acum, că avem deja un concept a ceea ce un reguli de stil și de ce acestea sunt utilizate, vom înțelege cum să le pună în aplicare în documentul HTML. In total sunt 4 CSS pentru a conecta:
- Conectarea unui fișier extern cu extensia etichetei de .css :
Sunt punctul elegant :)
Fiecare dintre metodele are prioritate de executie. Cea mai mică prioritate este acordată prima metodă de conectarea unui CSS-fișier extern prin intermediul tag-ul . A doua și a treia metode sunt echivalente. De fapt, a doua modalitate de a importa stiluri dintr-un fișier extern și le înregistrează în internă, dar nu funcționează întotdeauna corect. Cea mai mare prioritate este acordată aceleași stiluri string definite folosind stilul atribuie un element specific pe o pagină.
În practică, acest lucru înseamnă că, inițial se va aplica stilurile care sunt declarate în mod direct în corpul paginii, și apoi (în cazul în care șirul de stiluri nu a fost găsit) sunt cele care sunt stabilite în „cap“ al documentului, și, în ultimă instanță, formularea definită în extern CSS-fișier.
selectoare CSS
Pentru a putea într-un fel de a emite un anumit element pe o pagină Web, trebuie să-l găsească într-un fel. De fapt, doar pentru a indica fragmentele dorite ale paginilor pe care le folosim selectori.
În exemplele de mai sus, am considerat doar selectorii tag-uri specifice. Cu toate acestea, în practică, destul de comună pentru întregul conținut al masei cu aceleași etichete să aloce doar o anumită parte din ele. Prin urmare, în plus față de selectorii de tag-uri, există un număr de diferite tipuri de selectori și combinații ale acestora. Propun să le ia în considerare în forma unui tabel:
Este folosit pentru a insera caractere, cuvinte sau fragmente de text în fața (înainte) sau un element după spus. Pentru a introduce este utilizat proprietatea de conținut obligatoriu.
Există, de asemenea, unele alte tipuri de combinații de selectori și pseudo-clase, dar ele nu sunt folosite la fel de des, astfel încât renunțe până în prezent fără ele. Și acum, uita-te la elementele de bază de lucru cu blocuri, fără de care impun un site în CSS nu va fi capabil să.
blocuri de documente model de bloc și de poziționare
Dispunerea tabular poate fi fixat (pentru fiecare celulă a fost stabilită lățime strict în pixeli), sau „cauciuc“ (valoare procentuală a fost utilizată în loc de dimensiunile exacte). Acest aspect principiu a fost destul de simplu și evident, cu toate acestea, necesită utilizarea de tabele pentru alte scopuri și, prin urmare, încalcă semantica paginii web.
Esența aspectul blocului
Distribuția CSS 2.0, așa cum sa menționat mai sus, a permis separarea aproape completă a conținutului din stilul său, astfel sa născut un nou principiu, relevant pentru ziua de azi - „aspect de bloc“.
Noua abordare se bazează pe așa-numitul model de bloc. Esența ei este de a se asigura că conținutul paginii este situat în blocuri independente sau imbricate, localizarea, care poate fi schimbată folosind CSS destul de flexibil. Baza de structura blocului - bloc (de obicei
Fiecare bloc, în plus față de proprietățile definite în mod explicit lățimea (W) și înălțimea (H) este alcătuit din mai multe componente, care afectează dimensiunile sale. În primul rând, este indentat din textul la frontiera în interiorul unității, exprimă proprietatea „umplutură“, precum și marjele între blocuri din afara, a cerut „marjă“ proprietate.
În al doilea rând, la fel ca în tabele, în unități de cadru pot fi exprimate prin proprietăți „de frontieră“. Cu toate acestea, cadrul unității de celule, spre deosebire de foi de calcul sunt în afara frontierelor sale, crescând lățimea efectivă și înălțime. În parte, acest lucru este rezolvată prin adăugarea la întreg proprietățile documentului „box-dimensionare: border-Box“, cu toate acestea, această caracteristică a fost implementată doar în CSS 3.0 și nu este acceptat de browsere mai vechi.
De altfel, unitatea nu poate bloca numai fi inițial membru de tip. Orice element rând, cum ar fi un paragraf (
), Header (
, . ) Sau un fragment de text () Instrumente CSS pot fi reprezentate ca un bloc. În acest scop, proprietatea „display-ului“, cu o valoare de „bloc“ sau „inline-bloc“. Folosind aceleași valori ca și „inline“ poate fi invers, bloc (de exemplu, ) Pentru a face un element de linie.
blocuri de poziționare
Unități implicite sunt dispuse una deasupra celeilalte, în ordinea de prescripție a acestora în corpul de document HTML. Aceasta se numește un flux standard de. Cu toate acestea, la aproape orice flux vorstke site-ul cade acum și apoi pentru a rupe, deoarece unele blocuri trebuie să fie plasate într-un rând.
Acest lucru se poate face în diferite moduri, fiecare are avantajele și dezavantajele sale, astfel încât nici o rețetă universală, din păcate, nu este. Alegerea metodei depinde de sarcinile specifice cu care ne confruntăm ca typesetter. Cele mai frecvent utilizate metode sunt:
- poziționare relativă ( „poziția: relativă“) în combinație cu proprietățile „float“ și „clar“;
- poziție absolută ( „position: absolute“) în combinație cu proprietățile „stânga“ și „dreapta“ pentru introducerea blocurilor cu margini necesare;
- amestecare variante de înglobare blocuri clasament;
- utilizarea de noi proprietăți CSS 3.0 „flex“ și „grilă“;
- schimbare de poziționare dinamică folosind interogări media.
proprietate modernă, care a apărut în CSS 3.0 simplifica foarte mult procesul de aspect, cu toate acestea, până în prezent nu toate browserele acceptă noile standarde. Prin urmare, o atenție deosebită este acordată cel mai vechi exemplu de poziționare relativă și absolută:
În captura de ecran de mai sus, putem vedea șase blocuri de culoare diferite. Roșu, albastru și roz, cu un accident vascular cerebral gri au de poziționare relativă, chiar și primele două și înfășurați stânga. pătrate verde și galben sunt poziționate absolut cu strict liniuță de la marginile de sus și din stânga. Roz aceeași unitate de accident vascular cerebral cu negru adăugat pentru comparație la sfârșitul anului și are o poziționare relativă.
blocuri roșu și albastru sunt plasate unul lângă altul și, de fapt, poate perturba fluxul de date standard. Acest lucru se traduce prin necesitatea de resetare a primei adâncitura din stânga bloc roz. Denumit în cele ce merge blocuri verde și galben, dar în detrimentul de poziționare absolută, acestea cad din fluxul și după un bloc de roz vine imediat un al doilea roz, cu un accident vascular cerebral negru.
pătrate verde și galben este suprapus pe al doilea bloc de roz într-un contact de locație strict specificate. Prin urmare, examinarea structurii propuse, putem concluziona că elementele absolut poziționate nu interacționează cu restul blocurilor și sunt supuse numai propriile lor reguli stilistice, abandonul din debitul total.
Această proprietate poate fi utilizată, de exemplu, pentru a crea un situs cadru rigid sau punerea în aplicare plutitoare și blocuri suprapuse. Poziționarea relativă este utilă pentru crearea grilelor adaptive, deoarece nu încalcă fluxul de date standard.
aspect adaptiv și receptiv
Apariția și dezvoltarea CSS 3.0, precum și dispozitive pe scară largă pentru a avea acces la Internet cu diferite rezoluții de ecran au condus la apariția unor astfel de tendințe noi-fangled în ambele aspect adaptive și receptiv. Pe scurt, esența sa este de a căuta pagini de site-ul mai ușor de citit în orice dimensiune de afișare.
În acest scop, elementele grafice ale site-ului pot schimba aspectul pentru presiunea degetului convenabil, pentru a trece într-o nouă poziție, sau dispar cu totul. Acest lucru se face atunci accentul principal a fost pe blocul de conținut, care este elementul principal care transportă informații de încărcare.
Pentru a pune în aplicare acest tip de aspect folosind o inovație specială CSS numit interogări media (eng. „Interogări media“). Acestea sunt directive speciale, cum ar fi „@media“, care poate testa un număr de parametri de dispozitiv, care solicită pagina și în funcție de datele de a schimba design-ul.
Pentru a crea cele mai multe site-uri cu impunerea de adaptare este de obicei suficientă pentru a utiliza testul pentru conformitatea cu lățimea ecranului de lățime minimă dispozitivului dorit sau maxim. Aproximativ se pare ca: „ecran @media și (max-lățime 480 x.)“. Aici Directiva „@media“ vom da sarcina de a ști ce dimensiune a ecranului și formatul, în cazul în care o lățime maximă de 480 pixeli.
Aproape că nu am atins codul paginii, tocmai a terminat de scris o interogare media la sfârșitul anului de stiluri, dar rezultatele dorite! În practică, din păcate, pentru ajustarea normală sunt stabilite în paginile anterioare au uneori să rescrie și stiluri parțial, și chiar codul paginii, cu toate acestea, uneori, să fie de ajuns, ca în exemplul nostru, doar modificări minore.
Aici suntem cu voi și ați completat de definire a domeniului familiarizat cu foi de stil în cascadă. Suntem familiarizați cu sintaxa CSS, domeniul de aplicare, principiile de aspect modulare și de adaptare. În spatele scenei au fost, probabil, doar proprietățile CSS, ceea ce este destul de mult și care sunt dedicate ghidajelor speciale online.
În plus față de articolul Puteți descărca o arhivă care conține toate paginile de test cu exemple pe care le-am considerat sub formă de capturi de ecran. Pe baza acestor exemple, puteți face propriile experimente vorstke sau chiar să le utilizeze ca un simplu șablon pentru site-ul dvs. :)
În general, CSS - este destul de un lucru interesant. E ca un puzzle sau un puzzle de cuvinte încrucișate, cules cuvintele potrivite la care puteți vedea o imagine frumoasă, care este, site-ul. Aflați Cascading Style Sheets - nu lasa greabăn creierul. )
articole similare
blocuri de poziționare
Unități implicite sunt dispuse una deasupra celeilalte, în ordinea de prescripție a acestora în corpul de document HTML. Aceasta se numește un flux standard de. Cu toate acestea, la aproape orice flux vorstke site-ul cade acum și apoi pentru a rupe, deoarece unele blocuri trebuie să fie plasate într-un rând.
Acest lucru se poate face în diferite moduri, fiecare are avantajele și dezavantajele sale, astfel încât nici o rețetă universală, din păcate, nu este. Alegerea metodei depinde de sarcinile specifice cu care ne confruntăm ca typesetter. Cele mai frecvent utilizate metode sunt:
- poziționare relativă ( „poziția: relativă“) în combinație cu proprietățile „float“ și „clar“;
- poziție absolută ( „position: absolute“) în combinație cu proprietățile „stânga“ și „dreapta“ pentru introducerea blocurilor cu margini necesare;
- amestecare variante de înglobare blocuri clasament;
- utilizarea de noi proprietăți CSS 3.0 „flex“ și „grilă“;
- schimbare de poziționare dinamică folosind interogări media.
proprietate modernă, care a apărut în CSS 3.0 simplifica foarte mult procesul de aspect, cu toate acestea, până în prezent nu toate browserele acceptă noile standarde. Prin urmare, o atenție deosebită este acordată cel mai vechi exemplu de poziționare relativă și absolută:
În captura de ecran de mai sus, putem vedea șase blocuri de culoare diferite. Roșu, albastru și roz, cu un accident vascular cerebral gri au de poziționare relativă, chiar și primele două și înfășurați stânga. pătrate verde și galben sunt poziționate absolut cu strict liniuță de la marginile de sus și din stânga. Roz aceeași unitate de accident vascular cerebral cu negru adăugat pentru comparație la sfârșitul anului și are o poziționare relativă.
blocuri roșu și albastru sunt plasate unul lângă altul și, de fapt, poate perturba fluxul de date standard. Acest lucru se traduce prin necesitatea de resetare a primei adâncitura din stânga bloc roz. Denumit în cele ce merge blocuri verde și galben, dar în detrimentul de poziționare absolută, acestea cad din fluxul și după un bloc de roz vine imediat un al doilea roz, cu un accident vascular cerebral negru.
pătrate verde și galben este suprapus pe al doilea bloc de roz într-un contact de locație strict specificate. Prin urmare, examinarea structurii propuse, putem concluziona că elementele absolut poziționate nu interacționează cu restul blocurilor și sunt supuse numai propriile lor reguli stilistice, abandonul din debitul total.
Această proprietate poate fi utilizată, de exemplu, pentru a crea un situs cadru rigid sau punerea în aplicare plutitoare și blocuri suprapuse. Poziționarea relativă este utilă pentru crearea grilelor adaptive, deoarece nu încalcă fluxul de date standard.
aspect adaptiv și receptiv
Apariția și dezvoltarea CSS 3.0, precum și dispozitive pe scară largă pentru a avea acces la Internet cu diferite rezoluții de ecran au condus la apariția unor astfel de tendințe noi-fangled în ambele aspect adaptive și receptiv. Pe scurt, esența sa este de a căuta pagini de site-ul mai ușor de citit în orice dimensiune de afișare.
În acest scop, elementele grafice ale site-ului pot schimba aspectul pentru presiunea degetului convenabil, pentru a trece într-o nouă poziție, sau dispar cu totul. Acest lucru se face atunci accentul principal a fost pe blocul de conținut, care este elementul principal care transportă informații de încărcare.
Pentru a pune în aplicare acest tip de aspect folosind o inovație specială CSS numit interogări media (eng. „Interogări media“). Acestea sunt directive speciale, cum ar fi „@media“, care poate testa un număr de parametri de dispozitiv, care solicită pagina și în funcție de datele de a schimba design-ul.
Pentru a crea cele mai multe site-uri cu impunerea de adaptare este de obicei suficientă pentru a utiliza testul pentru conformitatea cu lățimea ecranului de lățime minimă dispozitivului dorit sau maxim. Aproximativ se pare ca: „ecran @media și (max-lățime 480 x.)“. Aici Directiva „@media“ vom da sarcina de a ști ce dimensiune a ecranului și formatul, în cazul în care o lățime maximă de 480 pixeli.
Aproape că nu am atins codul paginii, tocmai a terminat de scris o interogare media la sfârșitul anului de stiluri, dar rezultatele dorite! În practică, din păcate, pentru ajustarea normală sunt stabilite în paginile anterioare au uneori să rescrie și stiluri parțial, și chiar codul paginii, cu toate acestea, uneori, să fie de ajuns, ca în exemplul nostru, doar modificări minore.
Aici suntem cu voi și ați completat de definire a domeniului familiarizat cu foi de stil în cascadă. Suntem familiarizați cu sintaxa CSS, domeniul de aplicare, principiile de aspect modulare și de adaptare. În spatele scenei au fost, probabil, doar proprietățile CSS, ceea ce este destul de mult și care sunt dedicate ghidajelor speciale online.
În plus față de articolul Puteți descărca o arhivă care conține toate paginile de test cu exemple pe care le-am considerat sub formă de capturi de ecran. Pe baza acestor exemple, puteți face propriile experimente vorstke sau chiar să le utilizeze ca un simplu șablon pentru site-ul dvs. :)
În general, CSS - este destul de un lucru interesant. E ca un puzzle sau un puzzle de cuvinte încrucișate, cules cuvintele potrivite la care puteți vedea o imagine frumoasă, care este, site-ul. Aflați Cascading Style Sheets - nu lasa greabăn creierul. )