Meniul
AcasăInternet

Bazele CSS. Noțiuni de bază CSS în trei minute - ușor și accesibil pentru toată lumea. Schimbarea culorii paginii

Dacă sunteți interesat de subiectul creării site-urilor, atunci probabil că ați auzit de mai multe ori despre CSS (Cascading Style Sheets). Este posibil să fi încercat chiar să înveți această tehnologie, deoarece abilitățile CSS sunt o bază esențială în arta creării site-urilor web. Foile de stil în cascadă sunt una dintre triada de tehnologii pe care fiecare dezvoltator web ar trebui să le stăpânească (împreună cu HTML și JavaScript).

În acest sens, cu această postare încep o serie de publicații despre CSS. Am încercat să compun lecțiile în așa fel încât chiar și o persoană care este un zero complet în dezvoltare web să poată învăța această tehnologie minunată.

Cu toate acestea, cred că designerii de layout mai experimentați vor găsi o mulțime de lucruri noi și utile în aceste lecții. De asemenea, vă sfătuiesc să vă abonați la actualizări pentru a nu rata lansarea noilor lecții.

Citiți mai multe despre ce este Foaia de stil în cascadă (CSS) și pentru ce este folosită mai jos.

Versiunea video:

Ce este CSS?

După cum știți, atunci când creăm un site web, formăm conținutul acestuia folosind limbajul de marcare hipertext - HTML (Hypretext Markup Language). Folosind-o, creăm blocuri de navigare și umplem pagina web cu conținut text, audio/video. În general, creăm structura site-ului.

După formarea conținutului site-ului, în etapa următoare, trecem la etapa de proiectare a aspectului acestuia astfel încât să fie frumos și plăcut. Și, de asemenea, pentru a arăta bine pe diferite rezoluții de afișare. Acesta este motivul pentru care folosim foi de stil CSS în cascadă.

Aceasta înseamnă că pentru a învăța și a utiliza eficient CSS, trebuie să cunoașteți elementele de bază ale HTML. Fără aceasta, înțelegerea foilor de stil în cascadă nu are sens practic. Dacă încă nu sunteți familiarizat cu elementele de bază ale limbajului hipertext, parcurgeți-l pe al meu.

Un exemplu bun

Figurat vorbind, crearea de site-uri web poate fi comparată cu desenul. Înainte de a începe să manipulăm cu îndemânare pensula și pânza, ar trebui să decidem ce anume va fi reprezentat în pictura noastră. Să ne imaginăm că am decis să desenăm un peisaj în care o pasăre va fi înfățișată pe un fundal de copaci și munți. Putem spune că în această etapă am determinat însuși conținutul imaginii.


O situație similară este și cu HTML, cu care formăm conținutul unei pagini web.


Site-ul pe HTML simplu, fără CSS
Același site cu foi de stil conectate

Pentru o mai mare claritate, să mergem la un site web, de exemplu, facebook.com. Următorul pas este să instalați o extensie de browser numită WEbDeveloper. L-am instalat deja, dar tot ce trebuie să faceți este să introduceți expresia WEbDeveloper într-un motor de căutare, urmați linkul și faceți clic pe butonul „Instalare” din fereastra care se deschide.

Am această extensie instalată și controlată folosind pictograma roată din partea dreaptă sus a ecranului. Vă sugerez pe facebook.com să dezactivați foile de stil și să vă uitați numai la conținut. Pentru a face acest lucru, mergem la secțiunea CSS și facem clic pe Disable All Styles. Stilurile sunt dezactivate și vedem cât de neatractiv arată conținutul acestei pagini web fără design.


Apariția unei rețele sociale fără fișiere CSS conectate

Adică, acum vedem un site pe HTML simplu. Pentru a activa fișierele CSS ale acestei pagini, revenim la WEbDeveloper și debifăm Dezactivați toate stilurile.

Foaia de stil este conectată din nou și putem vedea conținutul paginii web cu designul.


Social rețea cu fișiere CSS conectate

Cum funcționează CSS?

Toate regulile de proiectare a site-ului web sunt stocate într-un fișier cu extensia css, care la rândul său este încărcat pe pagina web prin intermediul etichetei .

În timpul încărcării paginii html, prin etichetă Se incarca si fisierul CSS, dupa care browserul incepe sa il proceseze si site-ul este afisat conform regulilor specificate in acest fisier. Descrie proprietățile de afișare ale elementelor paginii web.

De exemplu, prin selectorul „p” specificăm tipul, dimensiunea și culorile fonturilor din paragrafe. Pentru a configura fonturile de antet de primul nivel, folosim selectorul „h1”.

Cred că principiul general de funcționare este destul de simplu și de înțeles, așa că nu vom intra în detalii. Dacă unele momente îți provoacă dificultăți, este în regulă în lecțiile ulterioare, în practică, totul va fi foarte ușor și de înțeles.

De ce să înveți CSS?

Nu cred că în zilele noastre poți găsi cel puțin un site web mai mult sau mai puțin „decent” fără a folosi CSS. Această tehnologie s-a dovedit foarte bine și astăzi este foarte greu de imaginat aspectul unui site web fără utilizarea foilor de stil în cascadă.

Odată cu actualizarea sa, multe etichete HTML 4 nu mai sunt folosite. Practic, acestea sunt etichete care au fost responsabile pentru designul paginilor web. Și nu este nimic surprinzător aici, deoarece proprietățile CSS sunt acum responsabile pentru acest lucru. Dacă cunoști deja elementele de bază ale HTML, următorul pas logic este să înveți CSS. Aceasta este etapa pe care nu o puteți sări dacă doriți să învățați aspectul site-ului. În plus, nu va dura mult timp.

Avantajele CSS

  • Odată cu utilizarea stilurilor CSS, codul HTML este redus semnificativ. Uneori de mai multe ori. Acest lucru are un efect pozitiv asupra vitezei de încărcare a site-ului, care la rândul său facilitează promovarea acestuia în motoarele de căutare;
  • Când vă actualizați designul site-ului web, nu mai este nevoie să editați fiecare etichetă separat pe toate paginile web. Este suficient să schimbați câteva linii în foaia de stil;
  • CSS vă deschide posibilități largi în designul și aspectul site-urilor dvs.;
  • Nu este nevoie să folosiți etichete vechi. Multe motoare de căutare nu le plac, iar utilizarea etichetelor învechite este considerată o manieră proastă;
  • Folosind CSS, ții pasul cu vremurile.

Cum să înveți rapid noțiunile de bază CSS

În învățarea CSS, ca și în programare în general, practica joacă un rol vital. Cu cât exersezi mai des, cu atât vei ajunge mai bine la asta.

Salutări, dragi prieteni! În această lecție vei afla ce este CSS, pentru ce este nevoie și cum să-l folosești corect. Aceasta este o lecție de bază din seria „Pentru cei mici”, în care voi încerca să explic într-un limbaj cel mai ușor de înțeles elementele de bază ale stilării documentelor folosind CSS - Cascading Style Sheets ( C ascading S stil S foi).

Misto

Bâlbâi

Partea 1: Bazele CSS

Această lecție este o continuare logică a lecției „Noțiuni de bază HTML pentru începători”, în care am explicat în detaliu ce este limbajul de marcare HTML, cum funcționează și funcționează, etichetele de bază și regulile de layout. În această lecție vom atinge stilul unui document creat folosind un limbaj de marcare, de ex. dând o anumită formă, o anumită culoare, secvență, dimensiunea diferitelor elemente și text de pe pagină, vom lua în considerare cele mai eficiente tehnici de lucru cu foi de stil în cascadă. Odată ce înțelegi elementele de bază, poți stila documentele HTML corect și eficient pe cont propriu.

Vă rugăm să rețineți că în acest tutorial vom lua în considerare CSS numai în contextul utilizării cu documente HTML într-un browser web. De asemenea, puteți stila alte documente folosind diferite limbaje de marcare folosind CSS. De exemplu, stilul XML în aplicații Android, SVG sau diverse medii desktop în sisteme de operare asemănătoare Unix.

În general, CSS este un limbaj formal destul de elementar care a fost inventat pentru a descrie aspectul documentelor. Acest lucru sugerează că este destul de simplu și constă din structuri primitive originale care nu sunt atât de greu de studiat. Cel mai dificil lucru nu este sintaxa, nu regulile de scriere a constructelor, ci numărul imens de proprietăți CSS de reținut care îndeplinesc diverse sarcini. Din fericire, toate regulile sunt în limba engleză cu încărcătura semantică corespunzătoare. O simplă traducere în limba noastră dă ideea a ceea ce face această regulă și invers - atunci când traducem ceea ce dorim să obținem cu o anumită proprietate în engleză, există o probabilitate mare să obținem proprietatea corectă. Acest lucru face mult mai ușor să vă amintiți regulile CSS în mod intuitiv. De exemplu, dacă trebuie să setați culoare de fundal este suficient să traducem în engleză, drept urmare obținem culoare de fundal(cuvintele individuale în CSS sunt scrise cu cratima).

1.1 Utilizarea CSS în documentele HTML

CSS este destul de ușor de utilizat în documentele HTML. Poate fi:


După cum am spus mai devreme, CSS are o sintaxă destul de simplă. Să-l descompunem.


Regulile publicitare sunt atât de simple încât pot fi descrise într-o singură propoziție. Mai întâi este scris selector care selectează un anumit element de pe pagină, după acolade sunt scrise proprietăți cu valorile după colon, iar proprietățile în sine sunt separate unele de altele punct şi virgulă. Asta este tot.

Simplu, nu-i așa?

Cel mai dificil lucru la o declarație CSS este selectorul. Puteți afla mai multe despre modul în care se formează selectorii și cum sunt utilizați în lecția Toate selectoarele CSS într-o lecție - acesta este un subiect foarte important, deoarece toată magia selectării elementelor dintr-o pagină este dezvăluită aici, vă recomand să urmăriți această lecție fără greșeală pentru toți începătorii.

Scurt Selector CSS- (din cuvânt Selectați- select) este o construcție cu care începe fiecare bloc publicitar și care servește la selectarea unui element sau elemente de același tip din pagină pentru stilizare ulterioară. Cel mai adesea, un anume este folosit ca selector Clasă eticheta, de exemplu:

//HTML:

//CSS: .my-class (culoare de fundal: #999; )

Aici selectorul este clasa my-class a etichetei div, care primește designul necesar în fișierul CSS. În acest caz, culoarea de fundal este gri. În consecință, dacă există mai multe etichete pe pagină (nu doar div) cu clasa clasa mea, toate aceste elemente vor primi același design - un fundal gri de culoare #999.

1.3 Cascada, moștenire și prioritate

Principiul cascadării nu este greu de înțeles. Să ne uităm la un exemplu:

//HTML

Mult, mult în spatele cuvântului munți în țară.
Mult, mult dincolo de cuvântul munți.
//CSS .parent .children ( culoare: #666; ) .parent ( umplutură: 10px; culoare: #999; )

Din exemplu vedem că o cascadă este scrisă în CSS, în care clasa .mamă este pe primul loc, după care clasa copil este indicată separat de un spațiu .copii, care este responsabil pentru stilizarea doar elementului copil. Eticheta copil trebuie să fie imbricată într-o etichetă cu o clasă .mamă. Dacă într-un document HTML adăugăm eticheta .copii din eticheta div cu clasa .mamă, își va pierde designul, deoarece cascada nu va mai funcționa, structura este ruptă.

Ce obținem ca rezultat al exemplului nostru? Eticheta cu clasa .children va primi culoarea textului #666, deoarece are o cascadă mai lungă, iar .parent va fi colorată cu culoarea #999. Clasa părinte va avea padding de 10px, în timp ce clasa copil nu va avea această umplutură, deoarece proprietatea padding nu se aplică elementelor copil. Totuși, dacă eliminăm culoare: #666; la selector .părinte .copii, atunci textul acestuia va fi colorat în culoarea părintelui culoare: #999;


Cascada și moștenirea vă permit să stilați anumite elemente dintr-o pagină și să stabiliți prioritate care stiluri sunt aplicate. Să ne uităm la ierarhia priorităților.

  1. Proprietățile care au o construcție la sfârșitul declarației au cea mai mare prioritate !important. Nu contează ce fel de imbricare are selectorul, cum sunt folosite stilurile - în linie sau prin conectarea unui fișier extern, acestea vor avea cea mai mare prioritate. Recomand cu caldura sa nu folosesti !important la styling, deoarece în procesul de susținere sau chiar în procesul de dezvoltare în viitor, cu siguranță va apărea confuzie, care poate fi salvată doar prin refactorizarea stilurilor. După cum arată practica, Există întotdeauna o modalitate de a nu folosi! important.
    Exemplu de utilizare!important: .my-class (culoarea de fundal: #999!important; )
  2. Următoarea prioritate cea mai importantă este dată stilurilor inline, scrise în eticheta în sine prin atribut stil pe care ne-am uitat mai devreme:
  3. Stilurile specificate în eticheta de stil din documentul în sine au prioritate mai mică;
  4. Stilurile conectate la document ca fișier CSS extern printr-o etichetă au o prioritate și mai mică.
  5. Prioritatea cea mai scăzută, pe lângă stilurile standard de browser, sunt stilurile selectoarelor părinte înaintea celor secundare, de exemplu:
    //HTML

    Mult, mult dincolo de cuvântul munți.

    //CSS .my-class (marja: 10px; ) va avea prioritate mai mică pentru copil p decât: .my-class p ( margine: 15px; ) Eticheta rezultată

    Situat într-o etichetă cu un class.my-class va primi valoarea proprietății marjă: 15px.

De asemenea, merită remarcat faptul că numărul de clase sau identificatori, precum și prezența unor pseudoclase și constructe suplimentare în selector, crește prioritatea pentru stil:

My-class.class-2 (marja: 10px; ) va avea prioritate față de: .my-class (marja: 15px; )

etc. de-a lungul unui lanț logic.

Și, în sfârșit, în ceea ce privește prioritățile, este important de menționat că stilurile care apar în declarațiile ulterioare mai jos în document au și ele cea mai mare prioritate. De exemplu:

Clasa mea (marja: 10px; ) va avea o prioritate mai mică decât exact același selector care urmează: .clasa mea (marja: 15px; )

Ca urmare, ultimul selector din fluxul de document va primi valoarea marjei: proprietatea 15px, deoarece are cea mai mare prioritate. Cu toate acestea, dacă selectorul primei declarații ar fi mai lung, valorile proprietății sale ar prevala fără îndoială.

În ceea ce privește moștenirea, totul este simplu. Toate elementele copil moștenesc unele proprietăți ale părintelui. Va trebui să aflați ce proprietăți sunt moștenite în procesul de studiu a diferitelor proprietăți și aplicarea lor în practică. De exemplu, culoarea textului este întotdeauna moștenită de copii, dar umplutura nu.

Partea 2. Proprietăți CSS

Cred că nu are rost să enumerați toate proprietățile CSS, deoarece sunt multe și este mai practic să vă referiți la directorul tuturor proprietăților CSS. Recomand să studiați proprietățile CSS în referința HTMLBook.

Cu toate acestea, să ne uităm la cele 10 proprietăți CSS cele mai utilizate în aspect. Am luat 10 fișiere CSS mari din proiectele mele și am sortat proprietățile după frecvența de utilizare.

Proprietate CSS

Frecvența de utilizare

Descriere
culoare de 960 de ori Culoarea textului elementului:
culoare de fundal de 755 de ori Culoarea de fundal a elementului:
marimea fontului de 524 de ori Marimea fontului:
opacitate de 435 de ori Nivelul de transparență al elementului:
căptușeală de 372 de ori Dimensiunea marginii din interiorul elementului:
lăţime de 356 de ori Lățimea unui element bloc, fără a include marginile și marginile:
marginea de 311 ori Marjele elementului:
înălţime de 305 ori Înălțimea unui element de bloc, fără a include dimensiunile marginilor și marginilor:
grosimea fontului de 280 de ori Grosimea fontului:
aliniere text de 245 de ori Alinierea orizontală a textului:

Partea 3: Interogări media

Interogări media în CSS stă la baza creării unui layout responsive, permițându-vă să stilați elemente în funcție de dimensiunea ecranului sau a dispozitivului pe care este afișat site-ul. Tehnic Interogare media este o expresie booleană simplă care poate fi adevărată sau falsă. Condițiile pentru o astfel de expresie sunt fie parametrii dispozitivului pe care este afișată pagina web, fie dimensiunea ecranului în pixeli.

În acest ghid, ne vom uita la capacitățile de bază ale interogărilor media, care sunt necesare pentru aspectul adaptiv al site-ului web și sunt utile practic.

Interogarea media este scrisă în fișierul de stil în sine sau în corpul documentului (eticheta de stil) și începe cu o declarație de regulă @mass-media. Structura unei interogări media este destul de simplă:


Condiția poate fi fie un dispozitiv - toate (toate dispozitivele), ecran, tipărire, tv etc., fie funcții media care setează parametrii dispozitivului sau rezoluția ecranului pe care este afișat documentul.

Cele mai frecvent utilizate funcții media determină rezoluția maximă și minimă a ecranului dispozitivului:


Iată dispozitive cu o rezoluție maximă a ecranului de 480px sau o rezoluție minimă de 320 px va afișa textul etichetei cu class.my-class în gri. Am dat ca exemplu această condiție; practic este inutilă. Cel mai adesea, trebuie să specificați fie doar rezoluția maximă, fie doar minimul în care va fi aplicată proprietatea.

Printre altele, după cum vedem din exemplu, funcțiile pot conține condiții și, nu Nu)Și numai (pentru browsere mai vechi care nu acceptă interogări media). Fără operator logic sau sau), rolul său este jucat de o virgulă. Funcțiile media, după cum vedem, sunt incluse în paranteze obișnuite.

Plasarea proprietăților într-o interogare media nu oferă nicio prioritate, așa că este mai logic să plasați interogări media la sfârșitul documentului CSS sau să încărcați cu eticheta legătură fișier CSS extern cu interogări media după încărcarea stilurilor principale ale site-ului pentru a le înlocui corect pe acestea din urmă la rezoluții diferite sau pe dispozitive diferite.

  1. Incearca sa folosesti numai fișiere CSS externe incluse. Utilizați stilul intern numai dacă este necesar pentru funcționarea corectă a site-ului;
  2. Încercați să stilizați doar clase. Nu stilați identificatorii (setați folosind id="hash" și scrieți folosind #hash). Încercați să stilizați mai puțin etichetele fără cursuri. De exemplu, dacă stilați o etichetă h3, iar ulterior specialistul SEO decide că titlul nu este adecvat, un div obișnuit ar trebui să aibă aceleași proprietăți cu clasa de titlu și să fie afișat în același mod. Alternativ, puteți crea etichete HTML duplicate în clase, de exemplu, .h1, .h2, .h3, .footer, .header, .aside și le puteți stila corespunzător;
  3. Încercați să stilați elementele cât mai independent posibil, reduceți lanțul în cascadă la un singur bloc, astfel încât să existe mai puține dependențe de elementele părinte. Acest lucru este necesar pentru reutilizarea cât mai eficientă a blocurilor de pe pagină și modificarea lor în alte locuri din layout. Dar fără fanatism. Nu ar trebui să atribuiți clase separate fiecărei etichete dintr-un bloc decât dacă este destinat să fie utilizat independent. Dacă mutați blocul într-o altă locație de pe pagină, acesta ar trebui să apară și să fie independent de părintele său. Folosirea unui fel de metodologie de denumire a clasei vă va ajuta în acest sens. Nu contează dacă este o metodologie BEM, sau una dezvoltată pe baza experienței tale personale, sau reguli simple propuse de mine - asta este mai bine decât să denumești clase la întâmplare și să construiești lanțuri ilogice și lungi de clase;
  4. Încercați să denumiți clasele de etichete în funcție de funcția pe care o îndeplinește blocul și nu de conținutul pe care îl va conține. De exemplu, dacă aveți o secțiune cu recenzii sub formă de carusel, nu ar trebui să denumiți selectorii folosind cuvintele recenzii, otzivy etc. E mai bine să suni carusel-o dată, dacă intenționați să afișați un articol carusel pe pagină. În viitor, poate că veți folosi acest carusel nu numai pentru a afișa recenzii, dar veți folosi acest cod, de exemplu, pentru a afișa o listă a colegilor companiei. În acest caz, numele clasei recenzii va fi oarecum nepotrivit;
  5. Utilizați preprocesoare CSS, nu este nimic complicat. Alegerea mea a căzut pe preprocesorul Sass de ceva timp și îl recomand pentru utilizare. Avem un tutorial bun în care îți spun cât de ușor este să folosești preprocesorul și cum îți simplifică viața: ;
  6. Utilizați resetarea sau normalizarea stilului implicit al browserului, care aduce stilurile standard la un numitor comun în toate browserele. Îl folosesc în proiectele mele Normalize.css, care face parte din cadrul CSS Bootstrap;
  7. Când simțiți că faceți prea multă muncă repetitivă în timpul procesului de layout, treceți la utilizarea unui cadru CSS sau dezvoltați-vă propriul cu elementele cele mai frecvent utilizate, acest lucru vă va accelera munca. Folosesc doar la serviciu Grilă de bootstrap fără design stilistic de butoane, panouri și alte elemente. Acest lucru este suficient pentru o muncă eficientă. Adaptabilitatea implicită a grilei Bootstrap este, de asemenea, plăcută;
  8. Experimentați singur proprietățile. Deschideți cartea de referință CSS și încercați-o. Acesta este singurul mod de a câștiga experiență, de a reține ce proprietate face ce și de a aduce scrierea stilurilor de document la automatitate.

Toți cei care sunt interesați de tehnologiile WEB au auzit despre astfel de tehnologii precum CSS. Și probabil că vor să cunoască elementele de bază ale CSS pentru a putea schimba stilurile site-urilor sau paginilor lor sau pur și simplu să poată citi și înțelege fișierele CSS. Astăzi vom arunca o privire la elementele de bază ale CSS.

Mai întâi, să ne dăm seama ce este CSS. După cum știți HTML este un limbaj de marcare hipertext. Și CSS, la rândul său, este limbajul de design vizual pentru acest marcaj.

CSS (Foi de stil în cascadă) - foi de stil în cascadă. HTML are propriile instrumente de proiectare vizuală, dar ele sunt în multe privințe inferioare capacităților CSS și, chiar dacă aveți o mulțime de pagini, atunci imaginați-vă că dintr-o dată doriți să schimbați culoarea tuturor titlurilor, va trebui să faceți modificări la toate fișierele HTML și acest lucru se face cu CSS într-o singură linie. Cred că doar acest argument este suficient pentru a începe să înveți CSS.

Apropo, CSS este folosit nu numai pentru designul vizual al paginilor marcate în HTML, ci și pentru acele pagini scrise folosind limbajul de marcare XHTML și este excelent și pentru proiectarea documentelor XML.

Deoarece tu și cu mine suntem doar începători, vom începe cu elementele de bază, iar în viitor vom aprofunda această tehnologie, deoarece CSS este un lucru destul de puternic și pur și simplu nu este posibil să încadrezi totul într-un singur articol, așa că Vom împărți studiul CSS în mai multe lecții, cu adâncirea treptată în aceste foi de stil în cascadă.

Ei bine, să trecem la exersare și vom începe cu o sintaxă simplă. Arata cam asa:

Element de design (proprietate: valoare; )

Un element de design se numește de obicei selector, dar pentru simplitate l-am indicat așa.

Pentru a clarifica sintaxa, iată un exemplu simplu:

P (culoare: roșu; )

  • p este o etichetă de paragraf;
  • culoarea este o proprietate, adică în cazul nostru este culoarea;
  • roșu este valoarea, în cazul nostru este roșu.

Și, ca rezultat, textul dvs. din toate paragrafele va deveni roșu.

Acum că am aranjat puțin sintaxa, să trecem la partea în care scriem toate acestea, adică. conectați CSS la documentul nostru HTML.

Modalități de a include CSS

1. Direct în elementul document însuși folosind atributul stil, de exemplu, dacă traduceți exemplul de mai sus în documentul însuși și îl descrieți în elementul în sine, va arăta astfel:

Exemplu

Această metodă nu este convenabilă pentru că, din nou, dacă aveți o mulțime de documente, va trebui să le schimbați în toate aceste documente și în fiecare element.

2. O modalitate puțin mai convenabilă este utilizarea CSS, atunci când foaia de stil este descrisă în documentul în sine. Secțiunea de cap folosește elementul de stil, care descrie foaia de stil în sine. De exemplu, să folosim din nou exemplul de mai sus, dar folosind această metodă:

Exemplu

Rezultatul va fi același ca mai sus. Această metodă este uneori folosită, dar încă nu este ideală.

3. A treia metodă folosește importarea unui document CSS. Am văzut rar această metodă, poate că nu o folosește nimeni, dar trebuie să știi despre ea; Aici foaia de stil este deja descrisă într-un document separat.

Exemplu

css-file.css este un fișier CSS în care este descrisă foaia de stil, dacă se află într-un alt folder, atunci trebuie să scrieți calea către acest fișier;

4. Cel mai obișnuit mod de a utiliza o foaie de stil în cascadă este să includeți un fișier CSS în documentul dvs. Aproape toată lumea folosește această metodă, deoarece este cea mai convenabilă. CSS-ul este conectat folosind eticheta de link din elementul head.

Exemplu

css-file.css este un fișier în care foaia de stil este descrisă din nou, dacă fișierul se află într-un folder diferit de locația documentului în sine, atunci trebuie să scrieți calea acestuia;

Tipuri de selectoare în CSS

Așa că am rezolvat conexiunea CSS, acum să trecem la selectoare, de exemplu. modalități de a căuta aceleași elemente în documentul dvs., cu alte cuvinte, dacă nu aveți nevoie ca toate paragrafele să fie roșii ca în exemplul de mai sus, dar de exemplu, unele paragrafe erau negre, în timp ce altele erau roșii. De fapt, există nouă tipuri, dar ne vom uita la cele mai populare deocamdată.

Cu selectoare de elemente ( Etichete) am întâlnit deja exemplele de mai sus, aplicate tuturor etichetelor:

P (culoare: roșu; )

p – acesta este selectorul de elemente, pot exista aproape orice etichete de document HTML, cum ar fi body, div, table, tr, td, h1 și multe, multe altele.

În opinia mea, cele mai populare tipuri de selectoare folosesc clase și identificatori. Cu alte cuvinte, atunci când marcați documentul, marcați elementele documentului folosind identificatori ( care sunt unice în întregul document) sau aduceți-i la aceeași clasă ( se poate repeta în document). Ca să fie mai clar, să dăm un exemplu în care vom avea două paragrafe, dintre care unul va fi cu roșu, iar celălalt cu negru.

Textul CSS va fi astfel:

#idred ( culoare: roșu; ) .negru ( culoare: negru; )

Textul documentului va fi astfel:

Exemplu de paragraf roșu

Exemplu de paragraf negru

Pentru practică, conectați o foaie de stil în cascadă la documentul dvs. în oricare dintre moduri.

Probabil ați realizat deja că identificatorii în CSS sunt notați folosind simbolul # (#idred), iar clasele sunt notate folosind un punct și numele clasei (.negru).

Într-un document HTML, acestea sunt desemnate folosind etichetele adecvate: id pentru identificator și clasă pentru clase.

Există, de asemenea, selectoare de atribute, de exemplu, dacă doriți ca un anumit link să fie afișat în formularul de care aveți nevoie, în timp ce toate celelalte link-uri sunt neschimbate, atunci puteți utiliza un selector de atribute.

Text CSS:

Textul documentului HTML:

Acum să ne uităm la un alt tip popular de selector: selectoare de descendenți. Cu alte cuvinte, indicați că acest element, identificator sau clasă are acești copii, i.e. este situat într-unul sau altul element care, de exemplu, are unul sau altul id sau clasă. Exemplu:

Text CSS:

P (culoare: roșu; ) div p (culoare: verde; )

Textul documentului HTML:

Exemplu de paragraf roșu

Exemplu de paragraf care are un element div copil

Puteți vedea aici că paragraful care se află în elementul div a devenit verde, iar toate paragrafele care nu sunt în elementul div vor deveni roșii.

Trebuie remarcat faptul că descendenții trebuie selectați de la dreapta la stânga, de exemplu, avem mai întâi un descendent (div), apoi vine elementul dorit (p).

După cum puteți vedea, astăzi am folosit doar două proprietăți: dimensiunea fontului și culoarea. De fapt, sunt foarte multe, așa că cred că este suficient pentru astăzi, în următoarele lecții vom continua să ne uităm la alte proprietăți și multe altele! Între timp, recomand să citești o carte despre CSS pentru începători, care descrie mai detaliat toate caracteristicile CSS și cum să le folosești în practică.

Sper că ați început să înțelegeți măcar puțin esența acestora Foi de stil în cascadă CSS. Vor fi lecții mai dificile în viitor! Pentru a vă asigura că CSS este un lucru foarte tare, iată un exemplu de site culinar, în care meniul principal este implementat doar folosind HTML și CSS, fără niciun script java. Sper că vom învăța și noi să facem asta în viitor.

Tehnologie CSS folosit în primul rând de designeri, deoarece ei sunt cei care creează designul site-ului. Cu toate acestea, este o greșeală să crezi că webmasterii CSS nu trebuie sa stii. Este suficient să amintim măcar un exemplu din descrierea secțiunii de pe. Pe lângă portabilitatea site-ului dvs., foile de stil vă permit să creați diverse soluții clasice de design (de exemplu, un meniu derulant). Și împreună cu acestea vă permit să creați dinamic Pagini HTML (DHTML), a căror frumusețe și comoditate, uneori, sunt pur și simplu uimitoare.

Desigur, pentru a crea astfel de lucruri trebuie să vă familiarizați Bazele CSS. Și această categorie a site-ului vă va ajuta să faceți acest lucru cât mai rapid și eficient posibil.

Curs complet pe HTML, CSS și aspectul site-ului web:

După ce citiți articole despre elementele de bază CSS, veți învăța:

1) Sintaxă CSS.

2) Metode și prioritățile lor de atribuire Stilul CSS.

3) Tipuri de selectoare în CSS.

4) CSS Hack-uri de browser.

5) Reguli de scriere CSS.

6) Cum să creați un balon cu instrucțiuni pe CSS.

7) Cum se schimbă aspectul primei litere prin CSS.

8) Cum să setați tipul cursorului prin CSS.

9) Cum să schimbați aspectul cursorului pe mouse-ul peste folosind CSS.

10) Cum se face un submeniu pe CSS.

11) Despre înlocuirea proprietăților lățime minimă V IE6.

12) Despre valabilitate CSS.

13) Cum să setați culoarea linkurilor vizitate.

14) Cum să indentați un paragraf folosind CSS.

15) Cum să faci colțuri rotunjite CSS.

16) Cum să vă plasați imaginea în loc de un marcator de listă CSS.

17) Cum să faci fundalul o imagine.

18) Cum să întuneci fundalul CSS.

19) În ce sunt selectoarele de copii CSS.

20) În ce unități de măsură sunt disponibile CSS.

21) Cum să faci o fereastră pop-up cu estompare.

22) Cum să faci un fundal animat.

23) Cum să faci un câmp de text frumos.

24) Cum să schimbați o imagine când treceți cursorul mouse-ului peste ea.

25) În ce sunt pseudoelementele CSS.

26) Ce este Sprite-uri CSS.

27) Cum să apăsați subsolul (subsolul) până în jos CSS.

28) Cum să preveniți redimensionarea zona textului prin CSS.

29) Cum să desenezi un triunghi CSS.

30) Cum să gestionați un eveniment clic prin CSS.

31) Cum să vă setați cursorul prin CSS.

32) Cum să activați un meniu vertical orizontal CSS.

33) Cum să utilizați un font non-standard pe site.

34) Cum se schimbă fundalul unui buton radio prin CSS.

35) Pot folosi CSS3.

36) Cum să faci o umbră CSS.

37) Cum să setați atributele umplutură celularăȘi spațierea celulelor pe CSS.

38) Cum se face div cu 100% înălțime.

39) Despre compatibilitate indicele zși jucător Youtube.

40) De ce este rău de utilizat -moz, -Domnișoară, -webkitși alte proprietăți.

41) Merită folosit Resetare CSS.

42) Cum să aliniați vertical un marcator de listă.

43) Cum se face o versiune imprimabilă.

44) Cum să activați transparența între browsere CSS.

45) Ce este clearfix.

46) Cum să anulați parțial pluti.

47) Cum se face un aspect cu două coloane cu înălțimi egale de coloane.

48) Ce este aspectul adaptiv.

49) În ce sunt interogările media CSS.

50) Ce este Mai puțin.

51) Cum se face Efectul Dog Corner în CSS.

52) Cum se face subsolul site-ului „lipicios” receptiv.

53) Cum se utilizează Google Fonts API.

54) Cum se utilizează serviciul Livetools.

55) Cum să permiteți sau să dezactivați selecția textului pe CSS.

56) Cum se schimbă aspectul unui element la standard folosind o proprietate aspect V CSS.

57) De ce este necesar proprietatea de întrerupere a paginii V CSS.

58) Cum aliniere centrală bloc cu lățime variabilă pe CSS.

59) Cum se face triunghiuri în CSS pur.

60) Service de către generând triunghiuri CSS.

61) Cum să împingeți subsolul în partea de jos a paginii(pozitionare).

62) Cum să împingeți subsolul în partea de jos a paginii(metoda tabelară).

63) Studiind Sass. Instalare și configurare.

64) Cum să ascunzi un element pe o pagină pe CSS.

65) Studiind Sass. Bazele.

66) Când să utilizați resetare.cssȘi normaliza.css.

67) Serviciu de imagine cu puternic API.

68) Cum se face Efect de mărire a imaginii CSS.

69) Koala- compilare rapidă sass fișiere.

70) Cum se adaugă filtre pentru fotografii folosind CSS.

71) Studiind Sass. Migurină.

72) Studiind Sass. Operatii matematice.

73) Animat pictograma meniu în Sass.

74) Studiind Sass. Funcții.

75) Ce este PostCSS.

76) Cum se instalează și se configurează PostCSS.

77) Cum se face posibilitatea de evaluare pe CSS.

78) Studiind Sass. Stilul de scriere a codului.

79) Studiind Sass. Extinderea selectorului de părinte.

80) 10 utile SASS mixuri.

81) Cum se face Introducere în stil Star Wars folosind CSS.

82) Bootstrap 4. Introducere.

83) Bootstrap 4. Instalare.

84) Bootstrap 4. Reporniți.

85) Bootstrap 4. Containere și puncte cheie.

86) Bootstrap 4. Sistem grilă.

87) Bootstrap 4. Proprietăți flexibile ale rețelei.

88) În ce 5 inovații vor apărea CSS4.

89) Bootstrap 4. Ce sunt Jumbotronii?

90) Bootstrap 4. Utilități și tipografie.

91) Bootstrap 4. Componenta cardurilor.

92) Diferența dintre clasăȘi id folosind o etichetă ca exemplu div.

93) Elemente nereușite web design, care nu trebuie folosit.

94) Bootstrap 4. Ferestre modale.

95) Oh prioritateȘi moştenire V CSS pe practică

96) Cum să dispuneți un aspect PSD folosind Grilă de bootstrap. Partea 1.

97) Cum să dispuneți un aspect PSD folosind Grilă de bootstrap. Partea 2.

98) Cum se utilizează pseudo elemente după și înainte în CSS.

99) Despre caracteristici lățimea și înălțimea blocului în CSS.

100) Pseudo elemente după și pseudo-clasa ultimul-copil.

101) Cum să afișați un site pe diverse dispozitive.

102) Aspect pe o grilă Bootstrap(partea 1)

103) Aspect pe o grilă Bootstrap(partea 2)

104) Aspect pe o grilă Bootstrap(partea 3)

105) Aspect pe o grilă Bootstrap(partea 4)

În 2011, când terminam clasa a 8-a, profesorul meu de informatică și profesorul meu de clasă au combinat 4 jucători pasionați, inclusiv pe a ta cu adevărat. Ea ne-a reunit pentru a ne învăța cum să creăm site-uri web și atunci am făcut cunoștință cu atât , cât și cu elementele de bază ale CSS, despre care veți afla chiar acum.

CSS (Cascading Style Sheets, tradus ca „cascading style sheets”) este un limbaj pentru controlul aspectului documentelor HTML (pagini de site). Ceea ce vedeți în fiecare zi în fereastra browserului este creat de foi de stil în cascadă: culoarea de fundal a diferitelor elemente ale site-ului este stabilită de proprietăți CSS speciale; în ce font este scris textul este specificat de proprietăți speciale CSS; tot ceea ce vedeți acum în timp ce citiți acest tutorial este setat de proprietățile CSS.

Vă spun imediat că lecția va conține doar cele mai elementare stiluri pentru începători. Nu va exista nicio practică astăzi, vreau să discut despre asta într-o postare separată.

selectoare CSS

O foaie de stil CSS constă din reguli de stil, iar regulile, la rândul lor, constau din două elemente:

  1. Selector;
  2. Bloc de anunțuri.

Blocul de declarare include: o proprietate și valoarea proprietății, dar mai multe despre asta puțin mai târziu.

Acum să aruncăm o privire mai atentă asupra selectoarelor. Există mai multe tipuri:

  • Selector de etichete. Selectorul este eticheta HTML la care trebuie aplicată regula de stil; div(lățime:100px; înălțime:100px)
  • Selector de clasă. Selectorul este clasa de elemente, care este specificată în documentul HTML. Un punct este plasat înaintea numelui clasei; .block(lățime:100px; înălțime:100px)
  • Selector ID. Selectorul este ID-ul elementului specificat în documentul HTML. Numele de identificare este precedat de un semn hash (#). #bloc(lățime:100px; înălțime:100px)

De fapt, sunt mult mai multe, dar nu vom aprofunda, deoarece baza tuturor celorlalți selectori sunt cele enumerate mai sus.

Nu voi vorbi despre designul regulilor CSS, imaginea de mai sus vă va spune totul.

Toate regulile de stil CSS sunt în fișierul style.css. Caută-l.

Proprietăți și valori CSS

O regulă CSS poate specifica mai multe proprietăți și valorile acestora. Acestea sunt listate folosind punct și virgulă (;):

Bloc (lățime:100px; înălțime:100px; fundal:#fff)

Pentru a face informațiile mai ușor de perceput, voi enumera proprietățile în funcție de scopul lor, adică pentru fundal - separat, pentru text - separat și așa mai departe.

Să începem cu fundalul.

fundal

Există mai multe proprietăți pentru a controla fundalul unui site sau al unui element individual.

fundal– proprietatea principală a fundalului, cu care puteți seta până la cinci caracteristici (valori): culoare, imagine, dacă fundalul se va derula sau nu împreună cu derularea (defilarea), controlul repetării imaginii de fundal, poziția inițială a imaginea de fundal. Toate aceste caracteristici sunt, de asemenea, responsabile pentru proprietățile individuale, care sunt enumerate mai jos;

fundal: url( imagini/hand.png ) repetă-y #fc0; /* Culoare de fundal, calea imaginii de fundal, repetare verticală a fundalului */
  • imagine de fundal– setează imaginea de fundal a site-ului sau a elementului. Valori: url (calea către fișier) | niciunul (anulează imaginea de fundal) | moștenire (moștenirea valorii părinte). Exemplu: backround-image: url(images/hand.png);
  • fundal-repetare– controlați repetarea imaginii de fundal a unui site sau element. Valori:
    • no-repeat (fără repetare a imaginii de fundal);
    • repetare (repetare imagine);
    • repeat-x (repetă imaginea pe orizontală);
    • repeat-y (repetă imaginea pe verticală);
    • moștenire (moștenind imaginea părinte). backround-repeat: fără repetare;
  • fundal-poziție– controlați poziția imaginii de fundal. Valori:
    • stânga (stânga);
    • corect corect);
    • centru (centru);
    • umple);
    • jos (jos). spate-poziție: stânga;
  • culoare de fundal– controlați culoarea de fundal a unui site sau a unui element individual. Valoare: valoarea codului unei anumite culori. Îl puteți găsi folosind servicii online speciale (ColorScheme). culoare de fundal: #fff; /*Culoare de fundal alb*/

Prima proprietate CSS principală a fost discutată.

Font

Există mai multe proprietăți pentru a controla aspectul textului, precum și fundalul.

  • font– proprietatea principală a unui font. Poate combina mai multe caracteristici;
  • marimea fontului- marimea fontului. Specificat în procente, pixeli (mai frecvent), puncte (pt); dimensiunea fontului: 14px;
  • grosimea fontului– grosimea fontului. Valori:
    • bold – semi-bold;
    • normal – stil normal. greutate font: bold;
  • familie de fonturi– indică familia de fonturi. Valoarea este numele familiei de fonturi; font-family: Impact;
  • stilul fontului– această proprietate specifică stilul fontului. Valori: normal (stil obișnuit) și italic (italic); font-style: italic;

Proprietăți text

Una dintre elementele de bază ale CSS este gestionarea proprietăților textului: alinierea, culoarea, înălțimea liniei, spațierea literelor.

  • aliniere text– alinierea orizontală a textului. Valoare: justificare (lățime), centru (centru), stânga (marginea stângă), dreapta (marginea dreaptă) text-align: left;
  • culoare- culoarea textului. Valoarea codului culorii este folosită ca valoare, puteți utiliza și valorile textului în limba engleză (roșu, alb, negru): roșu;
  • inaltimea liniei- inaltimea liniei. Ca valoare, puteți utiliza atât pixeli (px) cât și procente (%), precum și un multiplicator special (1,5 - o distanță între rânduri și jumătate) înălțimea liniilor: 1,5;
  • spațiul dintre litere– spațierea dintre caractere. Valoarea poate fi setată în pixeli și spațiere normală (spațiere normală) între litere: 3px;

Alinierea elementelor

Puteți alinia orice element de site la dreapta sau la stânga folosind o proprietate de stil - pluti. Valori: stânga (aliniat la stânga), dreapta (aliniat la dreapta).

Plutește la stânga;

Încadrarea elementului

Folosind proprietatea de stil „ frontieră” puteți seta cadrul și marginile vizibile. Puteți specifica mai multe valori: grosimea chenarului (px, %), culoarea chenarului (valoarea codului de culoare), stilul chenarului. Valorile stilului de frontieră determină aspectul acestuia:

De asemenea, puteți seta marginile pentru o parte individuală a unui element folosind următoarele proprietăți:

  • chenar-de jos– marginea inferioară a elementului;
  • border-top– marginea superioară a elementului;
  • granita-dreapta– chenar pe partea dreaptă a elementului;
  • granița-stânga– chenar pe partea stângă a elementului.

Valorile pentru cele de mai sus sunt stabilite exact în același mod ca și pentru proprietatea principală.

Chenar: 1px solid #000;

Indentări

Marginile dintre elemente sunt specificate de proprietatea „margin”.

  • marginea– stabilește indentarea elementului pe fiecare parte. Poate conține mai multe valori, care sunt specificate în pixeli sau procente; margine: 5px (marginea de sus) 5px (marginea din dreapta) 5px (marginea de jos) 5px (marginea din stânga);
  • margine-stânga– crestatură pe partea stângă;
  • margine-dreapta– crestatură pe partea dreaptă;
  • margine-top– liniuță de sus;
  • margine-fond– liniuță de jos.

Margini în jurul unui element

Marginile din jurul unui element sunt stabilite de „ căptușeală„. Este indicat în același mod cu marginile și are proprietăți care stabilesc marginile pe o parte: padding-stânga, umplutura-dreapta, padding-top, umplutură de fund.

Umplutură: 10px 10px 10px 10px;

Dimensiunea articolului

Puteți seta înălțimea și lățimea unui element folosind proprietățile „lățime” și „înălțime”. Valorile sunt valori numerice în pixeli sau procente. De asemenea, puteți seta valorile maxime și minime posibile pentru lățimea și înălțimea unui element folosind proprietățile: max-width, min-width, max-height, min-height.

Latime: 100px; înălțime: 200px;

Așa că am acoperit elementele de bază ale CSS. Eu însumi știu doar ce am enumerat mai sus, așa că nu judeca cu strictețe.

După cum puteți vedea, cu ajutorul foilor de stil CSS în cascadă puteți face orice doriți cu elementele site-ului, iar acestea nu sunt toate proprietățile, există o mulțime de ele. Dacă doriți să studiați proprietățile CSS mai detaliat, atunci utilizați cartea de referință din HTMLbook.

Sper că nu degeaba am petrecut câteva ore scriind acest material.

Mâine vom exersa în editorul Notepad++, fiți pregătiți.

Pana maine!

Articolul anterior
Articolul următor