Adăugarea de stiluri pe pagina web. Adăugarea stilurilor CSS Css este mai precisă
O foaie de stil CSS, care se dorește a fi cel mai important lucru, descrie aspectul documentului. HTML este responsabil pentru structura paginii, iar foaia de stil CSS însăși este responsabilă pentru tot designul. Am colectat informații pentru a vă permite să personalizați în mod liber foaia de stil. Nu scriu despre cei pe care trebuie să le cunoașteți, pentru că este atât de clar - fără el nu veți putea face site-ul să arate normal. Dacă abia începeți să încorporați stiluri CSS, puteți descărca aceste materiale pentru a începe să încorporați CSS.
Pentru a elimina cunoștințele structurate și pentru a compila HTML+CSS+JS cât mai eficient posibil pentru proiectele dvs. și pentru proiectele managerului dvs., trebuie să începeți și să vă mențineți progresul în mod regulat.
Ale bună mamă bază. Majoritatea oamenilor, care învață să lucreze independent, petrec o mulțime de discursuri de bază și apoi suferă pentru clienți, iar oamenii nu înțeleg de ce sunt nemulțumiți.
Pentru a evita astfel de situații, este necesar să înveți abilitățile de bază în succesiunea corectă. Dacă sunteți interesat să dezvoltați site-uri web și doriți să creșteți mai departe, atunci vă recomand să aruncați o privire asupra abilităților sale în școlile online.
Nu durează nici o oră de la munca ta principală, dar cu ajutorul unităților de stocare care pot furniza energie, vei crește și mai repede.
Una dintre aceste școli online este Netologiya și am un curs similar, precum și o alternativă la cursul Skillbox din alte școli. Este important să țineți cont de ele, mai ales pentru cei care predau acest curs.
1. Discursuri de bază
Voi începe cu elementele de bază. Când am început să rulez acest site, am scris scurte tutoriale despre cum să personalizezi foile de stil CSS. Lecțiile sunt bune atât pentru cei care sunt abia la început, cât și pentru cei care știu deja ceva pentru a-și reîmprospăta cunoștințele. Totul acolo este înfățișat în imagini și pe funduri reale.
Acces mic: Când am început să învăț singur subiectul dezvoltării site-ului web, am învățat aproape toate etichetele HTML și nu m-a deranjat. Chiar și după ce am început să creez o foaie de stil CSS și am început să vikorizez pielea autorităților - nu meritam (dacă nu aș fi făcut-o, nu aș fi făcut-o). Am învățat că nu poți lucra cu vorbire ostilă decât cu ajutorul CSS. Aceasta nu este o programare, pentru că este necesar să reziste luni de zile. Foaia de stil poate fi stăpânită într-o (maximum două) zile.
Desigur, nu ține cont de absolut toate puterile care există și nu contează! Trebuie să știi mai mult decât elementele de bază, astfel încât să poți începe să stagnezi și să-ți vikorizezi proiectele. O nuanță importantă este că este necesar să stabiliți puterea, așa cum ați învățat clar, în viața reală. Lasă-l să fie site-ul tău grozav sau un simplu site HTML - nu există nicio diferență. Este important să încercați să scrieți cu propriile mâini și să vedeți rezultatul.
Am o mulțime de aplicații pe site-ul meu care folosesc CSS. Doar faceți mai mult de 100 de lecții deodată! Dacă cunoașteți elementele de bază, atunci puteți schimba și elimina în siguranță toate exemplele din lecții.
Lecțiile mele despre elementele de bază ale stilurilor CSS în cascadă
2. Cheat sheets CSS și CSS3
Ei bine, ai învățat elementele de bază și după câteva zile toată lumea a uitat cu „succes” și, într-o manieră de cântec, crezi că nu este al tău și că totul este în regulă. Vreau să vă încurajez puțin - eu însumi nu cunosc toate puterile CSS. De ce îmi pasă să le admir pe internet?
Este adevărat, atâta timp cât accesați Yandex sau Google, atunci veți introduce întrebarea de care aveți nevoie. Și dacă tot nu vezi ce ai nevoie în căutare. Deci poți petrece mult timp, altfel nu vei ști ce faci în mod eficient.
Din fericire, oameni amabili au pus împreună aceleași cearșafuri pentru pătuț pe care mi le-au spus de mai multe ori. Este suficient să aplici pentru ceva și atunci căutarea autorităților necesare nu creează nicio dificultăți.
Cheat sheets CSS și CSS3
Acestea sunt pur și simplu materiale de neînlocuit atunci când proiectați și dezvoltați un design de site web. Timpul necesar pentru a naviga și a căuta pe internet descrieri ale autorităților se schimbă de multe ori.
Este adevărat, după cum înțelegeți, că mai des amenajați site-uri web sau faceți lucrări de design, aveți mai puțin timp să vă uitați la acest sfat, astfel încât toate puterile necesare să se piardă treptat în memorie. Dar totuși, nu vom avea acest set de cearșafuri pentru pătuț sub mâna mamei noastre.
Pret la scoala: Parcă nu folosești un cearșaf de pătuț, dar cu el încă ai liniște sufletească 😆.
Addendum la lecție - Cheat Sheet HTML
Cheat sheets CSS sunt, de asemenea, cheat sheets HTML. Dacă ați uitat o etichetă, o puteți privi din nou în această foaie de cheat HTML. Vi se cere să vă prezentați după ce apăsați unul dintre butoane măsuri sociale Mai jos este videoclipul.
Visnovok
Dacă abia începi și abia înveți elementele de bază ale CSS, atunci lecțiile mele CSS vor fi perfecte pentru tine. Materialul este prezentat pe scurt și trebuie doar să repeți cu propriile mâini despre ce este vorba în lecție. Și, de asemenea, webmasteri avansați își pot reîmprospăta cunoștințele urmărind rapid toate lecțiile. Puteți consulta, de asemenea, foile de cheat CSS și CSS3, care vă vor ajuta să nu uitați principalele autorități și vor fi mereu la îndemână, astfel încât să puteți afla rapid informațiile necesare.
Ei bine, evident, punctele principale ale statisticilor.
CSSînseamnă „cascading style sheets” (în engleză: Cascading Style Sheets). CSS este un set de parametri care ajută la afișarea oricărui alt element pe o pagină web. Acești parametri pot fi indicați fie în fișierul atașat, fie direct în codul HTML al paginii. De exemplu, pe site-ul nostru pot exista următoarele elemente: titlu de articol, paragrafe, citate, vinuri, imagini, videoclipuri, mesaje. Puteți seta un anumit stil de afișare - dimensiunea, culoarea, grosimea cadrelor etc.
Când lucrați cu site-ul, este recomandat să editați întregul fișier cu stiluri și să nu distribuiți codul cu ajustări de stil în afara paginii. Merită să treceți ora dacă știți unde se află foaia de stil, astfel încât să puteți găsi rapid un anumit stil și să îl editați. Fișierul de stil are o extensie .css, numele celui nou, de regulă, stil.css.
Conectarea unui fișier CSS
Există mai multe moduri de a conecta un fișier CSS. Cunoaștem două metode care sunt cele mai des folosite la crearea site-urilor web:
1. Zvyazuvannya. Această metodă este folosită dacă trebuie să setați stiluri pentru toate paginile site-ului într-un singur fișier. Această metodă este adesea abuzată în timpul creării unui site. Pentru a include o foaie de stil, utilizați comanda , care trebuie plasat în corp
.Primele două autorități îi spun browserului că pe site este folosit CSS, iar apoi sunt specificate adresele fișierului de stil.
2. Utilizați etichetele documentului. Cu această metodă, stilul unui anumit element de pagină laterală este specificat direct în codul HTML. De exemplu:
Aici am scris stiluri special pentru containere
Să creăm un tabel de stil - să creăm un fișier stil.css Să scriem stilurile:
body ( font-family: Arial, Verdana, Sans-serif; /* Font family */ font-size: 12pt; /* Dimensiunea fontului principal în puncte */ background-color: #f0f0f0; /* Culoarea web-ului fundalul paginii * / culoare: #000000; /* Culoarea textului corpului */ ) h1 ( culoare: #a52a2a; /* Culoare titlu */ dimensiunea fontului: 24pt; /* Dimensiunea fontului în puncte */ familia fontului: Georgia, Times, serif /* Familia de fonturi */ font-weight: normal; /* Pondere normală pentru text */ )
Aici am setat stiluri pentru corpul paginii
eu pentru titlu. De asemenea, puteți seta stiluri specifice pentru orice alte elemente ale site-ului.
Acum să conectăm foaia noastră de stil la site:
Conectarea CSS la site Salut Lume!
Aceasta este prima mea parte cu stiluri CSS
În acest fel, ne-am despărțit, ce este CSS, in cele din urma tehnologie dată Vikorist, am învățat să conectăm stilurile la site. Această lecție este despre introducerea unui fel de foaie de stil în cascadă. În alte lecții vorbim mai detaliat despre tehnologia CSS.
Pentru o etichetă de piele, puteți seta o culoare, un fundal, un chenar și alte caracteristici individuale. Formatul de design vizual se numește css (Cascading Style Sheets), ceea ce înseamnă „foi de stil în cascadă”.
Acest articol va analiza 3 moduri de a include stiluri CSS în cod html Schimbați paginile site-ului la noul lor aspect.
1 Metoda. Includeți următorul fișier css în codul html al paginii
U acest fișierînregistrează-te cu puterea etichetelor. Acesta este cel mai convenabil și practic mod de a instala stiluri CSS pentru HTML, mai ales dacă site-ul are mai multe laturi. Schimbând doar un fișier, puteți modifica designul tuturor paginilor, inclusiv conexiunile. Încercați să scrieți autoritățile într-un fișier securizat.
Cum se inserează un fișier de stil CSS în html
Puteți instala stiluri css în codul html al paginii laterale a site-ului cu fișierul folosind eticheta suplimentară , care poate varia între etichete
і. Vă rugăm să acceptați extensia fișierului: .css .Exemplu de conectare a fișierului (pagina code.html)
Text zmіst
Exemplu de cod al fișierului de stil (pagina code.css)
P (culoare:verde;)
În aplicație, fișierul se numește my_style.css și se află în folderul /my_css.
Acest fișier are putere pentru etichetă
Codul p (culoare:verde;) înseamnă: colorează textul în mijlocul etichetei
Zeleny. Aplicația dvs. are conectat un singur fișier, dar puteți conecta cât mai multe dintre ele este necesar.
2 Metoda. Scrieți la începutul paginii în sine
Această metodă este practic identică cu atașarea unui fișier, dar există un dezavantaj - deoarece aveți câteva laturi, atunci pentru a schimba designul vizual, trebuie să schimbați pielea. Această metodă poate fi utilizată numai dacă:
Aveți un site web cu o singură față;
Acest design vizual este destinat numai paginii de flux. De exemplu, pentru designul vizual al elementelor care nu sunt disponibile pe alte pagini.
În alte cazuri, este mai bine să adăugați stiluri CSS în lateral folosind un fișier de lângă metoda descrisă mai sus. Ale navit individual aspect exteriorÎn multe cazuri, este mai ușor să îl puneți într-un fișier separat, astfel încât această metodă poate fi evitată în orice caz.
Cum să adăugați stiluri CSS la codul html al paginii laterale a site-ului
Adăugați stiluri cs la partea html site-ul, puteți face același lucru cu fișierul și între
і. Numai atunci când sunt trimise în fișier sunt scrise etichete, în mijlocul căruia sunt scrise stilurile în sine.Un exemplu de adăugare a puterii etichetelor de pe web (page code.html)
Text zmіst
3 Metoda. Scrieți un stil în atributul style pentru eticheta de piele okremo
Această metodă este combinată pe scară largă dacă există elemente în mijlocul unei laturi care nu diferă foarte mult unele de altele, de exemplu, doar prin culoare (abordare, dimensiune). În acest caz, este mai ușor să conectați un stil CSS special la html pentru un anumit fișier și să adăugați modificări minore la anumite elemente. Atributul stil are cea mai mare prioritate, astfel încât eticheta suprascrie toate puterile atribuite stilului, chiar dacă anterior au fost specificate în alt mod.
În esență, logica este disponibilă: stilurile cele mai obișnuite care sunt utilizate cel mai des sunt scrise în fișier (prima metodă), iar ajustările detaliate sunt făcute în elementele în sine. De exemplu, dacă aveți 5 titluri pe pagina dvs. care variază în culoare, ar fi mai bine să scrieți putere subteranăîn fișier, care este determinat de dimensiunea și indentarea acestor titluri și de culoarea elementelor în sine, în acest fel. la etichetă
Metoda 3 are cea mai mare prioritate, astfel încât eticheta de putere este setată în atributul style="", indicând faptul că au fost indicate anterior pentru o altă metodă.
Știm deja că, pentru ca site-ul web să arate frumos și stilat, trebuie să schimbăm fișierul CSS. Iar pentru ca stilurile noastre să stagneze, este necesar să ne unim fișier HTML acel fișier CSS.
Există o serie de opțiuni pentru această operație: un tabel indirect de stiluri imbricate, un tabel de stiluri externe și un stil imbricat.
Astăzi vom vorbi despre metoda rămasă.
Stilul Vikoristannya în etichetă HTML
Esenta aceasta metoda Pentru cei care trebuie oficializați, le punem în mijlocul etichetei. Pentru cine a fost creat ocremiul? atribut – stil. Acest atribut poate va fi stagnareînainte de orice etichetă, doar în cadrul site-ului, apoi între corp. Valorile acestui atribut sunt operatori ai acestor stiluri, care trebuie să ajungă la un anumit element.
De exemplu, am setat diferite dimensiuni de font pentru două paragrafe diferite de text:
< p style= "font-size:25px;" >Setați înălțimea literelor pentru această secțiune de text la 25 de pixeli. < p style= "dimensiune font:15px; culoare:#2400ff;"> Și acest text va avea litere înalte de 15 pixeli și va fi, de asemenea, evidențiat în albastru pentru a demonstra stagnarea multor stiluri în același timp.
Nedoliky
Exemplul arată cum stilurile de suspendare vor observa codul lateral.
De asemenea, este posibil să rețineți că există încă câteva deficiențe ale acestei tehnici de stilizare. Prima poate fi numită răspândirea stilului în întregul document, astfel încât perspectiva editării să poată simplifica procesul deodată.
Există, de asemenea, dificultăți în formalizarea unor mari obligații față de text. Cred că nimeni nu este mulțumit de perspectiva de a prescrie o dimensiune a fontului pentru fiecare paragraf, deoarece există aproximativ 40 de astfel de paragrafe.
Chiar și cu varietatea de stiluri utilizate, stagnarea pseudo-claselor devine imposibilă, ceea ce leagă în mod semnificativ mâinile designerului web.
Varto înseamnă și plutanie, deoarece este obligatoriu să virina și vikoristan la atributul stil. Acest necinstiți se naște prin selecția diferitelor picioare sub ora de inscripționare a stilurilor.
Pentru a fi precis, să ne uităm la fundul de mai jos:
< div style= „familie de fonturi: „Roboto Condensed”, sans-serif”> Înregistrare corecții. < div style= „familie de fonturi: „Roboto Condensed”, sans-serif”> Deci este și corect. < div style= "font-family: " Roboto Condensed ", sans-serif" >Aceasta nu este o intrare corectă. < div style= "font-family: " Roboto Condensed ", sans-serif" >I tsege nu este corect
Privind filele, mai ales, reiese o concluzie logică că stagnarea stilurilor utilizate este asociată cu costul scăzut al complexității și complexității.
Koli varto vikoristati vbudovany stil
Indiferent de toate neajunsurile, stilul ghicirii nu este degeaba. Maeștrii web le abordează adesea cu un stil de software diferit. De exemplu, minunați-vă de acest cod
< div id= "productRate" > < div style= "width: 40%" >
Înregistrarea lățimii necesare a acestui bloc va fi cea mai simplă operație.
O situație similară poate apărea din cauza necesității de a înlocui imaginea de fundal (de exemplu) a unui utilizator sub rolul de administrator. În acest caz, eticheta img poate să nu funcționeze. Deci, accesați atributul stil:
< div style= "background:url(fon.jpg)" >
De asemenea, programele evoluează adesea până când stilurile sunt introduse în timpul procesului de aspect al îmbinării ferestrelor. Cel mai adesea, acest proces se desfășoară în acest mod: blocul de deasupra designului robotului care merge este scris display:block, iar soluției i se oferă întotdeauna afișajul suplimentar:none, astfel încât să nu interfereze vizual cu roboții programatorului. Cap axă:
< div class = "element" style= "display:block" >Este clar că se eliberează în acest moment
Pungă
Alegerea stilurilor implementate este asociată cu o serie de dificultăți și inconsecvențe; în procesul de proiectare a anumitor elemente, webmasterii recurg adesea la această metodă pentru a-și optimiza munca.
