Practic în html. CSS pentru începători: lecție practică

Capacitatea de a forma corect codul CSS este importantă pentru fiecare web designer. Această lecție este concepută pentru începătorii care abia fac primii pași.

Introducere

Trebuie să fii extrem de atent când lucrezi cu CSS. Când scrieți cod, ar trebui să vă mențineți concentrarea extremă.

Această lecție va arăta un exemplu despre cum să creați o pagină HTML simplă folosind aspectul bloc (fără a utiliza tabele). De asemenea, vom învăța cum să punem stiluri într-o foaie de stil separată.

Pasul #1 - Markup și utilizarea etichetelor

Marcajul HTML este întotdeauna înaintea stilurilor. Nu are rost să sari în CSS fără HTML complet pregătit.

HTML este un limbaj de marcare hipertext, cu alte cuvinte, HTML descrie structura informațiilor text dintr-o pagină. Înainte de a începe aplicarea stilurilor CSS, trebuie să învățăm cum să aplicăm elementele de structură.

Când construim marcaj, folosim „etichete” care sunt înconjurate de paranteze unghiulare. Etichetele sunt folosite pentru a defini ceva pe o pagină. CSS este folosit mai târziu pentru a determina unde (în browser) este afișat conținutul unei anumite etichete.

Cele mai simple etichete de pe o pagină sunt:

Cele mai multe etichete și conținut sunt utilizate în interiorul .

O etichetă foarte importantă pentru separarea și definirea structurii este . Folosind această etichetă, puteți împărți conținutul în celule. În cadrul acestei etichete, puteți utiliza alte etichete pentru a defini conținutul (de exemplu, linkuri, text, imagini), care pot fi apoi frumos stilate folosind CSS.

Utilizați orice editor de imagini pentru a desena următoarea schiță:

Codul pentru acest șablon ar trebui să arate astfel:

După cum puteți vedea, etichetele div au ID-uri. Vom avea nevoie de acest lucru pentru a proiecta fiecare celulă. ID-ul este folosit pentru a eticheta eticheta și pentru a-i conferi un stil unic. În timp ce „clasa” este folosită pentru repetarea elementelor de design.

De asemenea, exemplul folosește un alt „wrapper” div, care „învelește” toate celelalte etichete. Acest lucru ne va fi util mai târziu pentru a ne poziționa pagina.

În foaia de stil definim elementele de design ale paginii. Puteți crea fie o foaie de stil internă, fie una externă. În această lecție o vom folosi pe cea externă.

Dacă vă vedeți pagina într-un browser acum, nu va apărea nimic. Asta pentru că nu am dat etichetelor noastre nicio culoare sau formă. Și deoarece CSS-ul nostru va fi extern, primul lucru pe care trebuie să-l faceți este să vă asigurați că pagina are un link către foaia de stil.

Adăugați următorul cod între:

Pasul #3 - Creați CSS

Sintaxa CSS constă dintr-un selector, o proprietate și o valoare. Un selector este o etichetă care trebuie să fie stilată în design, o proprietate este tipul de atribut pe care doriți să-l adăugați, iar o valoare este o măsurare cantitativă a proprietății.

Selectorul, pe lângă eticheta body, este scris în CSS începând cu „#” sau „.”. „#” specifică ID-ul și „.” (punct) specifică clasa selectorului. Pot exista multe proprietăți în interiorul unui selector și toate trebuie să fie înconjurate de ( ).

#selector (
Valoarea proprietății;
Valoarea proprietății;
Valoarea proprietății;
}
Trebuie să stilăm următoarele etichete folosind
CSS:
* corp
* ambalaj
* antet
* navigație
*meniul
* continut
*subsol

Proprietăți și valori posibile în CSS:

Proprietatea „fundal” poate fi o imagine sau o culoare sau ambele. Pentru a afișa o imagine, valoarea trebuie să conțină calea către imagine. Pentru a determina culoarea este folosit un cod hexazecimal.

Proprietatea „culoare” este folosită pentru a defini culoarea selectorului. Valorile sunt scrise ca cod hexazecimal (exemplu: #FFFFFF pentru alb).

Proprietatea „font-family” vă permite să definiți fontul care va fi utilizat. Norma este să includă cel puțin 3 tipuri de fonturi. Acest lucru se face în cazul în care browserul nu poate afișa primul font, va fi folosit al doilea etc. (exemplu: Trebuchet MS, Arial, Times New Roman)

Proprietatea „font-size” specifică dimensiunea fontului și are o valoare în pixeli.

Proprietatea „margină” este utilizată pentru a determina poziția selectorului. Valorile specifică distanța dintre laturile selectorului până la marginea ferestrei browserului în următoarea ordine: sus, stânga, jos, dreapta. Dacă trebuie să centram pagina, scriem „0px auto 0px”. Specificarea tuturor celor patru laturi este opțională.

Proprietatea „width” specifică lățimea dorită în pixeli a oricărui selector.

Proprietatea „înălțime” este înălțimea în pixeli.

Proprietatea „float” ne permite să poziționăm elemente în cadrul selectoarelor, în majoritatea cazurilor la dreapta sau la stânga.

Pentru a crea un fișier CSS, deschideți editorul de text preferat și salvați noul document ca style.css în folderul paginilor site-ului. Adăugați următorul cod:

Corp (
fundal: #f3f2f3;
culoare: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
dimensiunea fontului: 12px;
}
#wrapper (
fundal: #FFFFFF;
marja: 60px automat;
latime: 900px;
înălțime: 1024px;
}
#antet (
fundal: #838283;
înălțime: 200px;
latime: 900px;
}
#navigație (
fundal: #a2a2a2;
latime: 900px;
înălțime: 20px;
}
#meniul (
fundal: #333333;
plutește la stânga;
latime: 200px;
înălțime: 624px;
}
#conținut (
fundal: #d2d0d2;
latime: 900px;
înălțime: 624px;
}
#subsol (
fundal: #838283;
înălțime: 180px;
latime: 900px;
}

Concluzie

Ați trecut prin școala tocilarului CSS și ați stilat toți selectoarele folosind proprietățile de mai sus.

Sper că v-a plăcut lecția! Aștept cu nerăbdare feedback-ul și sugestiile dvs.

Dezvoltarea metodologică a lucrărilor practice în informatică pe temele „HTML Markup Language” și „Modern Web Technologies” (pentru elevii de gimnaziu).

Când desfășurați cursuri folosind aceste dezvoltări metodologice, pentru a crea fișiere HTML și CSS, se recomandă utilizarea unui editor de text obișnuit care acceptă evidențierea sintaxelor pentru limbajele HTML și CSS și, de asemenea, de preferință, include posibilitatea de a lucra cu mai multe fișiere în modul cu mai multe pagini. .

De exemplu, Notepad++ (notepad-plus-plus.org) este potrivit pentru Windows. În editorul de text Notepad++, pentru a încheia linii lungi, trebuie să selectați View -> Line Break din meniu. Notepad2 (flos-freeware.ch/notepad2.html) este, de asemenea, un editor de text foarte bun. Cu toate acestea, nu acceptă operarea cu mai multe pagini. Setarea întreruperilor de linie în el se face folosind comanda View -> Word Wrap.

1. Document HTML. Paragrafe, rupturi de rând, aliniere1 Structura documentului HTML

Codul sursă al unui document HTML este format din etichete și conținut.

Etichetele pot avea diverse atribute cu proprietăți specificate. În versiunile mai vechi de HTML, atributele erau folosite pentru a proiecta conținut: setarea dimensiunii și culorii fontului, alinierea textului, setarea indentărilor și multe altele. În zilele noastre, conținutul unui document HTML este de obicei formatat folosind CSS.

Orice document HTML include întotdeauna containere html, head și body, care sunt imbricate unul în celălalt, după cum urmează:

Sarcina 1. Creați un fișier și dați-i structura prezentată mai sus. Salvați-l.

Containerul principal conține de obicei un container de titlu, al cărui conținut este afișat în titlul ferestrei documentului.

Sarcina 2. Adăugați un container de titlu la document:

CALCULATOR - calculator electronic

Salvați fișierul și deschideți-l în browser. Găsiți conținutul titlului pe care l-ați introdus.

Conținutul corpului este afișat în fereastra browserului.

Eticheta containerului este folosită pentru a marca paragrafele. O singură etichetă b vă permite să mergeți la o nouă linie fără a crea un nou paragraf, de ex. creează o întrerupere de linie.

Sarcina 3. Adăugați următorul conținut în containerul pentru corp:

Apariția computerelor personale la începutul anilor șaptezeci (în paralel cu evoluția treptată a computerelor mari) este acum privită ca o lovitură de stat revoluționară. Amploarea influenței sale asupra societății umane este comparată cu consecințele invenției tiparului.

Există deja milioane și miliarde de computere în lume.
Numărul lor continuă să crească constant!

Salva. Reîmprospătați documentul în browser. Observați câte paragrafe vedeți unde este ruptura de linie.

2 Alinierea paragrafelor. stil vechi

Alinierea paragrafelor este determinată de valorile stânga (stânga), dreapta (dreapta), centru (centru) și justificare (justificat). Aceste valori pot fi atribuite proprietății de aliniere, care este valabilă pentru multe etichete.

Deci, de exemplu, alinierea centrată a paragrafului poate fi setată astfel:

Sarcina 4. Pentru paragrafele create mai devreme, setați alinierea să fie justificată (pentru primul paragraf) și aliniată la dreapta (pentru al doilea).

Acest articol nu este destinat să fie un ghid cuprinzător pentru limbajul de marcare a documentelor HTML. Descrie elementele de bază ale HTML - principiile de bază, conceptele și definițiile acestei tehnologii, stăpânind pe care, puteți trece cu ușurință în studiul codării HTML.

Pentru a studia lecția, descărcați arhiva cu fișierele necesare.

HTML este un limbaj de marcare a documentelor. Pronunția corectă este HTT.

Probabil ați lucrat vreodată în editorul de documente Word sau în aplicații de birou similare? Probabil știți că acest tip de editor are capacități bogate pentru editarea textului, aranjarea elementelor, inserarea imaginilor etc.

De ce, ați putea să vă întrebați, să scrieți despre procesoarele de text într-un articol despre HTML? Dar de ce. Dacă vă dați seama, ce este un editor de birou? Aceasta este o aplicație pentru editarea și afișarea documentelor.

Cuvântul cheie aici este document. Adică creăm, edităm și vedem un document într-un program, în acest caz - într-un editor de birou. Dacă deschidem un astfel de document într-un editor de text simplu, de exemplu, Notepad, vom vedea multe simboluri și semne ciudate. Această mizerie de simboluri este de neînțeles pentru umanitate, dar de înțeles pentru computere. Datorită acestui limbaj intern, documentul Word capătă o anumită structură și aspect în editorul propriu-zis, iar documentul ne apare în toată splendoarea cu text formatat și imagini în locul lor.

HTML este un limbaj de marcare a documentelor pentru browser. Word este browserul, iar documentul este pagina HTML Aceasta este însăși baza tehnologiei HTML, a cărei înțelegere este necesară pentru a nu confunda limbajul de marcare al documentelor web cu limbajele de programare. folosind HTML noi marcare, unde pe pagină va fi afișat elementul, imaginea sau textul și în ce ordine vor apărea unul lângă celălalt.

Da, simpla tastare și formatare a textului în aplicațiile de birou nu are nimic de-a face cu programarea. Dar cititorul atent va observa un detaliu important - într-un procesor de text tastăm, edităm și formatăm text și imagini folosind butoane și meniuri vizuale, dar de ce este scris codul HTML de mână? De ce să înveți atât de multe detalii tehnice despre scrierea de markup pentru un document?

De fapt, există o mulțime de editori cu care poți crea și edita pagini HTML, similar cu Word. Adică, codul HTML sursă este ascuns pentru noi și nu intrăm în el.

Un fel de Word pentru HTML. Acești editori vizuali se numesc:

WYSIWYG editori - Ce vezi tu ce ai primit. Adică dacă îl traducem în rusă: ceea ce vedem este ceea ce primim.

Eu le numesc „wuzivoogies”. Deși acest lucru este incorect din punct de vedere fonetic, demonstrează în mod clar lipsa de sens a acestei invenții. Începătorii folosesc foarte des astfel de editori pentru a-și crea primele site-uri web. Desigur, acest lucru este convenabil - nu trebuie să vă aprofundați în studiul etichetelor, stilurilor de design și alte lucruri, la prima vedere, neplăcute și complexe. Editorul însuși convertește automat acțiunile noastre în cod HTML.

Dar, după cum se spune, nu se întâmplă nimic. Mai precis, această abordare are dezavantaje foarte serioase. Ce îi împiedică pe toată lumea să folosească editori vizuali pentru a proiecta pagini HTML? Cert este că paginile astfel formate au de obicei mult cod inutil și multe erori din punct de vedere semantic. Acum, desigur, nu există probleme cu o conexiune la Internet de mare viteză, iar diferența de dimensiune a paginii de 400 kb și 100 kb nu este semnificativă pentru viteză, cu toate acestea, codul HTML optimizat și scris corect elimină multe probleme și oferă multe avantaje, și anume:

Codul HTML competent are un efect pozitiv asupra optimizării motoarelor de căutare și asupra vitezei cu care un robot de căutare accesează cu crawlere un site. Kiloocteții de cod generați de vuzivuga nu sunt acceptabili și chiar dăunători;

Codul HTML generat de editorul WYSIWYG are multe erori semantice. Adică, etichetele generate de un astfel de editor sunt folosite în alte scopuri, unde trebuie folosite, de exemplu, liste

Sunt generate o mulțime de etichete inutile și structura documentului devine umflată. Să presupunem că mutați un element într-un astfel de program, mai întâi la dreapta, apoi la stânga, apoi la centru - fiecare acțiune lasă o urmă în codul HTML sursă. Editorul este un program și nu poate ști exact ce vrei să obții ca rezultat, generează tone de cod, ținând cont de toate opțiunile posibile pentru comportamentul documentului în browser;
De regulă, editorii pentru designul vizual al codului HTML devin rapid depășiți. Și din cauza lipsei de interes din partea profesioniștilor, aceștia sunt în general lipsiți de sprijin și nu se mai dezvoltă. Și HTML evoluează. Totul se dezvoltă, cu excepția wuzivoogi-ului. În consecință, ei nu pot genera cod corect și modern care să folosească funcții și soluții noi.
A susține și a dezvolta astfel de proiecte este o pedeapsă cerească. Nu se poate vorbi deloc despre utilizarea modelelor și reutilizarea codului.

Deci, vom scrie HTML numai cu pixuri. Instrumente adecvate pentru editarea vizuală HTML nu au fost încă inventate și este puțin probabil să apară. Limbajul de marcare HTML este ușor de învățat și de înțeles și există multe instrumente pentru automatizarea scrierii codului HTML, dar mai multe despre asta în alte lecții.

După ce s-au chinuit puțin cu editorul WYSIWYG, tinerii guru HTML părăsesc această sarcină inutilă și merg mai departe.

Structura documentului HTML

Pentru cursuri, recomand să descărcați și să instalați editorul Sublime Text. Vă recomand cu căldură să nu utilizați Blocul de note Windows încorporat pentru aspectul HTML dacă nu doriți să vă rupeți psihicul în primele etape ale învățării HTML.

Am decis că vom scrie manual codul documentului HTML, adică să-l introducem. Aspectul HTML este procesul de creare a unui document HTML. În oamenii obișnuiți și cercurile informate, este doar aspect. Orice document are o structură și anumite reguli de construcție. Din ce elemente constă codul, care este structura HTML?

Să creăm un șablon inițial pe computer - fișierul index.html, să îl deschidem folosind un editor și să lipim următorul cod în el:

Antet Corpul documentului Vă rugăm să rețineți că documentele HTML au extensia .html.

Deci, în ordine din exemplu.

- tipul documentului (doctype)

Această construcție este întotdeauna indicată la începutul documentului, astfel încât browserul să „înțeleagă” corect ce versiune de HTML este folosită la construirea documentului.

Datorită faptului că HTML este în continuă evoluție, are mai multe versiuni, ca orice produs software. Versiunea actuală de HTML este a cincea, iar tipul de document dat în exemplu este actual.

În principiu, nu are rost să ne adâncim în studiul tipurilor de documente, deoarece odată cu lansarea HTML5, acest design a devenit un standard. Doar introduceți-l la începutul documentului de fiecare dată când începeți să creați un aspect al site-ului web.

- începutul documentului

Prima etichetă pe care o vedem după doctype este .

O etichetă HTML este o unitate structurală de marcare a documentelor HTML. Codul HTML este format din blocuri numite etichete. Fiecare etichetă are propria sa funcție, iar învățarea limbajului de marcare HTML înseamnă în cele din urmă învățarea etichetelor și a proprietăților lor într-un document.

Aș dori să remarc că învățarea HTML nu este atât de dificilă pe cât ar părea la prima vedere. Învățarea etichetelor utilizate în marcarea documentelor nu este o povară atât de mare pentru creier.

Deci, marcarea documentului începe cu o etichetă și se termină cu o etichetă de închidere. Fiecare etichetă care conține alte etichete sau elemente trebuie să fie închisă cu o etichetă de închidere. De exemplu, , , etc.

Eticheta este obligatorie deoarece conține întreaga structură a documentului și este un înveliș pentru alte elemente.

Etichetă

În continuare, vedem eticheta, care conține alte elemente care nu ne sunt încă clare. Conține alte elemente - asta înseamnă că elementele sau etichetele se află între etichetele de deschidere și de închidere ale construcției:

conținut sau alte etichete

Scopul etichetei este de a stoca metainformațiile unui document HTML, adică informații care nu sunt afișate în documentul în sine, dar sunt importante și determină în mare măsură modul în care va arăta și se va comporta documentul.
Această etichetă este necesară în document.

Tag - titlu document Titlu

Titlul este o etichetă obligatorie care conține metainformații textuale care apar în browser sau în titlul filei. Eticheta trebuie să fie în . De asemenea, conținutul acestei etichete este folosit de motoarele de căutare pentru a afișa documentul în rezultatele căutării.

Metaetichetă

Metaeticheta este o etichetă specializată concepută pentru a oferi date structurate despre o pagină. Metaetichetele sunt cel mai des folosite în . Metaetichetele nu sunt necesare în structura unui document HTML.

Favicon

Atașează documentului un fișier cu o imagine favicon. Favicon este o pictogramă în miniatură afișată lângă titlul documentului într-o filă de browser. Un favicon este un fișier grafic care măsoară 16 x 16 (sau 32 x 32) pixeli, care poate avea diferite formate, cum ar fi png, jpg, ico, gif. Formatul ico este folosit în mod tradițional. Favicon-urile animate sunt fișiere gif care conțin animație. Puteți vedea o favicon animată, de exemplu, pe VKontakte, când sosește un mesaj nou.

Stiluri de documente CSS

Include un fișier CSS cu stil HTML în document.

CSS- în cascadă Stiluri de document HTML. Fiecare etichetă care se află în etichetă are un set de proprietăți, cum ar fi culoarea, lățimea, înălțimea, poziția față de alte elemente. Toate aceste proprietăți sunt stiluri CSS care pot fi exportate într-un fișier extern. Designul conectează fișierele externe la documentul HTML, inclusiv stilurile CSS.

Notă: proprietatea href a unui construct specifică locația fișierului extern. În exemplul nostru, fișierul stil.cssȘi favicon.ico, se află în același folder cu fișierul index.html. nu are o etichetă de închidere.

Etichetă

Eticheta conține cod sau un link către un fișier javaScript și este folosită cel mai adesea în interiorul unei etichete, deși instrumentul de optimizare a vitezei paginii de la Google recomandă utilizarea acestei etichete la sfârșitul unui document, înainte de eticheta de închidere.

În exemplul nostru, este conectat un fișier extern script.js, care se află în același folder cu fișierul principal index.html.

Deci, prieteni, ne-am uitat la elementele principale care sunt folosite cel mai des în etichetă. Pe lângă aceste elemente, există o serie de altele care sunt mai specifice și mai opționale.

Corp, alias corp

Aici încep toate lucrurile distractive și tangibile vizual în aspectul HTML al unui document.

Să trecem direct la aspectul părții vizibile a paginii. Tot ceea ce scriem și aspectul în interiorul etichetei va fi afișat în browser. Să deschidem dosarul nostru index.htmlîn browser pentru a vedea clar ce facem în editor.

Eticheta poate conține orice etichete HTML necesare pentru proiectarea documentului și pentru a oferi funcționalitatea (formularul). Voi oferi un tabel cu cele mai utilizate etichete și le voi descrie pe scurt pe fiecare. Puteți rula imediat exemplele date în editor.

Etichetă	Descriere
	O etichetă pentru crearea de legături într-un document. Exemplu: text link Atributul href specifică documentul către care va duce linkul.
,	Face text cursive sau îndrăzneț (subliniat). Exemplu: text italic text aldin (subliniat).
, , , , ,	Titlurile documentelor. Există 6 niveluri de titluri în total, dar în practică sunt folosite doar h1 până la h4. Ar trebui să existe un singur titlu în document, evidențiat cu eticheta h1, ca titlu principal al documentului. Exemple: Titlu de nivel primul Titlu de nivel al doilea Titlu de nivel al treilea... etc.
,	Liste de documente. Sunt o listă numerotată sau marcată. Elementul unei astfel de liste este eticheta Exemple: Elementul 1 din lista marcatori Punctul 2 Elementul lista numerotat 1 Elementul 2 din listă numerotat
	Paragraf. Această etichetă definește un paragraf de text separat de alte paragrafe. Este foarte recomandat să închideți această etichetă. Exemplu: Aspectul marcajului HTML este determinat în mare măsură de stilurile CSS. Cu toate acestea, unii webmasteri aleg să nu folosească stiluri în primele etape ale unui proiect.
	Imagine. Folosind această etichetă, puteți insera o imagine în marcajul HTML. Asigurați-vă că includeți text alternativ pentru toate imaginile - atributul „alt”. Această etichetă se închide automat. Exemplu:
+ +	Forme și elemente de intrare. Formularele sunt concepute pentru a introduce informații în sistemul de pe server. Un fel de feedback între utilizator și site. De exemplu, formularele sunt folosite atunci când trebuie să trimiteți un mesaj către server. În plus, formularele pot îndeplini și alte funcții, dar sarcina principală este să trimită date către server. Un exemplu este un formular simplu pentru trimiterea unui mesaj, în care utilizatorul site-ului își indică numele, E-mailul și ceva text: Textul mesajului
	Definește un subșir în cadrul unui șir. Folosit pentru a stila o parte dintr-o linie folosind CSS. Una dintre cele mai des folosite etichete. Fără design, nu se manifestă în niciun fel în browser. Exemplu: Învățarea HTML, în cele mai multe cazuri, nu provoacă dificultăți pentru începători.
,	Etichetele sunt concepute pentru a insera video și audio într-un document. Eticheta de închidere este necesară. Exemple: parametrul de control ne spune că pagina ar trebui să afișeze controale pentru conținutul media, la fel ca un player audio/video obișnuit.
	Cu adevărat o etichetă regală. Cea mai folosită și populară etichetă în marcarea paginilor HTML. Acesta este un element de bloc conceput pentru a gestiona blocurile de pe site. Conceptul de aspect „minunat” este adesea folosit - aceasta înseamnă că toate blocurile de pe site sunt așezate folosind aceste etichete. Poate conține alte etichete. Exemplu: Text într-un bloc imbricat Toate elementele, în cele mai multe cazuri, sunt stilate cu proprietăți de stil CSS. Eticheta de închidere este necesară.
	Această etichetă încarcă o pagină externă în document. Exemplu:

Nu am luat în considerare toate etichetele și acest lucru nu este necesar în această etapă. Principalul lucru este să înțelegeți ideea de bază a HTML, să învățați cum să utilizați etichetele prezentate mai sus și apoi să treceți mai departe.

Vă rugăm să rețineți că toate numele din fișierele incluse trebuie scrise cu caractere latine, fără spații.

De exemplu, nu:

Acest lucru este necesar pentru o mai mare compatibilitate a conținutului paginii. În plus, standardele pentru scrierea codului HTML dictează.

Deci, acum cunoaștem câteva elemente de bază ale HTML: ce structură ar trebui să aibă un document HTML tipic, cunoaștem unele dintre cele mai populare etichete, este timpul să trecem la partea cea mai delicioasă - și anume cookie-urile.

Temă practică pe aspectul HTML

Dacă nu ați descărcat încă arhiva cu exemple, faceți-o. De exemplu, puteți să vă uitați la fișierul example.html, care se afla și în arhivă.

Despachetați arhiva și creați un fișier index.html în folderul cu fișierele despachetate. Deschideți fișierul creat folosind editorul de text Sublime Text;
Creați o structură inițială a documentului cu un doctype, o etichetă care conține și și procedați la editarea conținutului etichetei;
Deschideți fișierul readme.txt și finalizați sarcinile corespunzătoare din fișierul index.html pe care l-ați creat. Pentru a verifica rezultatul, deschideți index.html în browserul dvs. preferat.

Aceasta încheie lecția despre elementele de bază ale HTML, în următoarea lecție „CSS Basics” vom învăța cum să gestionăm stilurile elementelor documentului, să cunoaștem foile de stil în cascadă, să învățăm cum să folosim clasele de stil și să facem aspectul nostru frumos și colorat. .

Ne vedem din nou, prieteni!

1.1. Pe serverul local Xampp, în folderul htdocs, creați un folder de testare numit test , cu css , imagini și foldere de pagini în el, precum și o pagină principală goală index.html a site-ului nostru de testare. Apoi, în folderul pagini, creați o pagină web goală, page_1.html, iar în folderul css, două fișiere css goale: styles_1.css și styles_2.css. Nu ștergeți folderul de testare în viitor, vom efectua toate exercițiile din acesta. În documentele html, nu uitați să specificați codarea utf-8 și titlul paginii „titlu”. Pentru a accesa rapid pagina principală, creați un marcaj în browser. Calea adresei către pagină ar trebui să arate ca http://localhost/test/index.html. Arată soluția.

Rezolvarea problemei nr. 1.1

1.2. Recreează codul pentru pagina web prezentată în figură. Utilizați foaia de stil internă, selectoarele de elemente p și span, proprietățile CSS de culoare și lățime. Setați lățimea paragrafului la 300 px. Folosiți culori roșu și albastru. Arată soluția.

Condiția sarcinii nr. 1.2

Sarcini CSS p( culoare: roșu; lățime: 300px; ) span( culoare: albastru)

Rezolvarea problemei nr. 1.2

1.3. Utilizați condiția celei de-a doua sarcini, dar plasați foaia de stil într-un fișier extern styles_1.css . Pentru a conecta o foaie de stil externă, utilizați elementul de serviciu „link”. Arată soluția.

Sarcini CSS

Textul paragrafului trebuie să fie cu roșu. Dar nu, pentru că... Conținutul elementului „span” ar trebui să fie albastru.

Rezolvarea problemei nr. 1.3

1.4. Utilizați condiția celei de-a treia sarcini, dar conectați foaia de stil externă folosind proprietatea @import, plasând regula în elementul de serviciu „stil”. Arată soluția.

Sarcini CSS /* Puteți utiliza diferite intrări de reguli */ /* @import "http://localhost/test/css/styles_1.css"; */ @import url ("http://localhost/test/css/styles_1.css");

Textul paragrafului trebuie să fie cu roșu. Dar nu, pentru că... Conținutul elementului „span” ar trebui să fie albastru.

Rezolvarea problemei nr. 1.4

1.5. Utilizați condiția celei de-a doua probleme, dar plasați regula paragraf în fișierul extern styles_1.css și regula pentru elementul „span” în fișierul extern styles_2.css . Conectați unul dintre aceste fișiere folosind elementul de serviciu „link”, iar al doilea folosind proprietatea @import, plasând regula în elementul de serviciu „style”. În toate cele patru sarcini, rezultatul ar trebui să fie același! Arată soluția.

Sarcini CSS @import url ("http://localhost/test/css/styles_1.css");

Textul paragrafului trebuie să fie cu roșu. Dar nu, pentru că... Conținutul elementului „span” ar trebui să fie albastru.

Rezolvarea problemei nr. 1.5

1.6. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Folosiți ID, clasa și selectoare de atribute. Arată soluția.

Sarcini CSS

„Spanie” albastră.
„span” verde.

Codul paginii pentru sarcina nr. 1.6

Apariția necesară a paginii în sarcina nr. 1.6

#p_1( culoare: roșu; lățime: 300px; ) .s_1( culoare: albastru; ) span( culoare: verde; )

Rezolvarea problemei nr. 1.6

1.7. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Este permisă utilizarea numai a selectoarelor contextuale, secundare și adiacente în regulile CSS. Arată soluția.

CSS provocări Orange „em”

Prima linie roșie a paragrafului.
„Spanie” albastră.

Codul paginii pentru sarcina nr. 1.7

Apariția necesară a paginii în sarcina nr. 1.7

Rezolvarea problemei nr. 1.7

1.8. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Folosiți selectoare de pseudo-clasă și pseudo-element :hover , :visited , ::first-litera . Pentru un paragraf, utilizați un selector de elemente obișnuite. Arată soluția.

Provocări CSS Când treci peste mine, devin portocaliu.

Prima linie roșie a paragrafului.
Am fost deja vizitat.

Codul paginii pentru sarcina nr. 1.8

Apariția necesară a paginii în sarcina nr. 1.8

P(culoare: roșu; lățime: 300px; ) em:hover(culoare: portocaliu; ) p::prima literă(culoare: albastru; ) a:vizitat(culoare: verde; )

Rezolvarea problemei nr. 1.8

1.9. Care selector are mai multă specificitate: p em(...) sau p.class(...), #m_d(...) sau em.m_cl(...), div p#my_id span(... ) sau div span#s_id(...), div>div.my_class p.red_color span:hover(...) sau div p+div p.green_color span(...). Arată soluția.

Determinăm specificul și comparăm. p em(...) em.m_cl(...), deoarece (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), deoarece (0,4,4)>(0,2,5).

Rezolvarea problemei nr. 1.9

2.1. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Setați lățimea (lățimea) paragrafelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet), distanța dintre cuvinte, respectiv, 3px și respectiv 12px, distanța dintre literele individuale - 1px și 2px, înălțimea liniei - 1.1em și 1.6em , indentarea primului rând - 1% și 3% . În al doilea paragraf, textul ar trebui să fie aliniat la dreapta. Nu uitați să tăiați (subliniați) rândurile corespunzătoare. Comparați rezultatele formatării ambelor paragrafe. Arată soluția.

Sarcini CSS

Prima teză a paragrafului.

Prima teză a paragrafului. A doua teză mai lungă a paragrafului. A treia și ultima teză a paragrafului.

Codul paginii pentru sarcina nr. 2.1

Apariția necesară a paginii în sarcina nr. 2.1

P_1( lățime: 500 px; culoare fundal: galben; spațiere între cuvinte: 3 px; spațiere între litere: 1 px; înălțime linie: 1,1 em; indentare text: 1%; ) #p_2( decorare text: trecere prin linie ) .p_3( lățime: 500 px; culoare fundal: violet; spațiere între cuvinte: 12 px; spațiere între litere: 2 px; înălțime linie: 1,6 em; indentare text: 3 %; aliniere text: dreapta; ) #p_4( text -decor: subliniat)

Soluția problemei nr. 2.1

2.2. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Setați lățimea (lățimea) paragrafelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet). Pentru primul paragraf, utilizați fontul Arial, iar pentru al doilea - Times New Roman. Setați dimensiunea fontului în ambele paragrafe la 1em. Utilizați proprietățile font-variant , font-weight , font-style unde este necesar. Comparați rezultatul formatării textului cu rezultatul formatării din sarcina 2.1. Arată soluția.

Sarcini CSS

Prima teză a paragrafului. A doua teză mai lungă a paragrafului. A treia și ultima teză a paragrafului.

Codul paginii pentru sarcina nr. 2.2

Apariția necesară a paginii în sarcina nr. 2.2

P_1( lățime: 500px; culoarea fundal: galben; font-family: arial; font-size: 1em; ) #p_2( font-variant: small-caps; ) .p_3( lățime: 500px; fundal-culoare: violet; font-family: "time new roman": font-weight: bold ) #p_4( font-style: italic;

Soluția problemei nr. 2.2

2.3. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Setați lățimea (lățimea) listelor la 500px, fundal (culoarea fundalului), respectiv, setați la galben și violet (violet). Utilizați proprietățile list-style-type și list-style-position acolo unde este necesar. Comparați rezultatele formatării ambelor liste. Arată soluția.

Sarcini CSS

Folosim tipul de marcator zecimal.

Punem marcatori în afara listei.
Folosim tipul marker pătrat.

Codul paginii pentru sarcina nr. 2.3

Apariția necesară a paginii în sarcina nr. 2.3

List_1 ( lățime: 500 px; culoarea fundal: galben; tip list-style: zecimal; list-style-position: exterior; ) .list_2( width: 500px; culoare fundal: violet; list-style-type: pătrat; list-style-position: interior;

Soluția problemei nr. 2.3

2.4. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Utilizați proprietățile caption-side , border-collapse border-spacing , empty-cells . Comparați rezultatul formatării ambelor tabele. Arată soluția.

Sarcini CSS

Celula 1.1	Celula 1.2
Celula 2.1	Celula 2.2

Celula 1.1	Celula 1.2
	Celula 2.2

Codul paginii pentru sarcina nr. 2.4

Apariția necesară a paginii în sarcina nr. 2.4

Table_1( caption-side: top; border-collapse: collapse; ) .table_2( caption-side: jos; border-collapse: separat; margine-spacing: 5px; celule goale: ascunde; )

Rezolvarea problemei nr. 2.4

3.1. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Setați lățimea primului paragraf la 400 px, al doilea la 300 px. Setați înălțimea primului paragraf la 10vh, al doilea la 200px. În al doilea paragraf, setați limita minimă de lățime la 400 px și limita maximă de înălțime la 100 px. Utilizați proprietățile lățime, înălțime, lățime min, înălțime max. Observați rezultatele finale ale lățimii și mărimii celui de-al doilea paragraf datorită constrângerilor aplicate. Arată soluția.

Sarcini CSS

Lățimea paragrafului este de 400 px, înălțimea este de 10% din înălțimea zonei de vizualizare a ferestrei browserului.

Lățimea paragrafului va fi de 400 px, deoarece... lățimea este mai mică decât lățimea minimă, iar înălțimea este de 100 px, deoarece înălțimea depășește înălțimea maximă.

Codul paginii pentru sarcina nr. 3.1

Apariția necesară a paginii în sarcina nr. 3.1

P_1(culoare fundal: galben; lățime: 400px; înălțime: 10vh; ) .p_2(culoare fundal: violet; lățime minimă: 400px; înălțime maximă: 100px; lățime: 300px; înălțime: 200px; )

Soluția problemei nr. 3.1

3.2. În condiția sarcinii 3.1, este prezentat codul paginii HTML, iar mai jos este aspectul paginii când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Profitați de rezultatul Problemei 3.1 adăugând proprietăți suplimentare la foaia de stil care stabilesc limitele de paragraf adecvate: chenar , border-top , border-bottom . Setați lățimea tuturor chenarelor la 4px. Arată soluția.

Apariția necesară a paginii în sarcina nr. 3.2

P_1( culoarea fundalului: galben; lățime: 400 px; înălțime: 10vh; chenar: roșu solid 4px; marginea de sus: albastru punctat; marginea de jos: albastru punctat; ) .p_2( culoarea fundalului: violet; lățime minimă: 400px; înălțime maximă: 100px;

Soluția problemei nr. 3.2

3.3. În condiția sarcinii 3.1, este prezentat codul paginii HTML, iar mai jos este aspectul paginii când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Profitați de rezultatele problemelor 3.1 și 3.2 adăugând proprietăți suplimentare la foaia de stil care stabilesc rotunjirea colțurilor corespunzătoare din primul paragraf și marginile exterioare ale celui de-al doilea paragraf: border-radius , border-bottom-right-radius , chenar-jos-stânga-rază , contur , contur-offset. Setați rotunjirea chenarului la 1em și colțurile de jos la 2em. Setați distanța dintre marginile interioare și exterioare la 2px. Setați lățimea marginii exterioare la 4px. Arată soluția.

Apariția necesară a paginii în sarcina nr. 3.3

P_1( culoarea fundalului: galben; lățime: 400 px; înălțime: 10vh; chenar: roșu solid 4px; chenar-sus: albastru punctat; chenar-jos: albastru punctat; chenar-rază: 1em; chenar-jos-dreapta-rază: 2em; chenar-jos-stânga-rază: 2em ) .p_2( culoarea fundalului: violet; lățime minimă: 400px; înălțime maximă: 100px; lățime: 300px; înălțime: 4px; chenar: albastru solid 4px contur-offset: 2px;

Soluția problemei nr. 3.3

3.4. În condiția sarcinii 3.1, este prezentat codul paginii HTML, iar mai jos este aspectul paginii când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Profitați de rezultatele sarcinilor 3.1, 3.2 și 3.3 adăugând proprietăți suplimentare la foaia de stil care stabilesc indentările interne și externe ale paragrafelor: padding, padding-left, margin, margin-top. Setați umplutura în ambele paragrafe la 0.5em, apoi redefiniți-le la 0.8em. Setați marja la 30 px, dar în al doilea paragraf, redefiniți marja de sus la 50 px. Comparați rezultatele tuturor celor patru probleme. Arată soluția.

Apariția necesară a paginii în sarcina nr. 3.4

P_1( culoarea fundalului: galben; lățime: 400 px; înălțime: 10vh; chenar: roșu solid 4px; chenar-sus: albastru punctat; chenar-jos: albastru punctat; chenar-rază: 1em; chenar-jos-dreapta-rază: 2em; chenar-jos-stânga-rază: 2em; padding-left: 0.8px; outline-offset: 2px; padding-stânga: 0,8px;

Soluția problemei nr. 3.4

4.1. Mai jos este codul paginii html, precum și aspectul paginii când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Copiați imaginea servietei în folderul cu imagini, care se află în folderul de testare pe care l-am creat mai devreme pe serverul local (dacă ați șters-o, atunci uitați-vă la starea sarcinii nr. 1.1 la începutul cărții cu probleme și creați totul din nou). Textul primului paragraf trebuie să fie roșu, fundalul trebuie să fie galben și lățimea paragrafului trebuie să fie de 300 px. Lățimea celui de-al doilea paragraf ar trebui să fie de 300 px, setați fundalul la violet. De asemenea, adăugați o imagine de fundal, care nu trebuie repetată, dimensiunile ar trebui să fie de 20% din lățimea și 40% din înălțimea paragrafului, poziția de pornire ar trebui determinată de coordonatele x =15px și y =15px . Selectați doar zona de conținut a paragrafului pentru fundal. Arată soluția.

Sarcini CSS

Textul acestui paragraf ar trebui să fie roșu, iar fundalul galben. Lățimea paragrafului trebuie să fie de 300 px.

Lățimea paragrafului trebuie să fie de 300 px, fundalul trebuie să fie violet. Imaginea nu trebuie repetată, dimensiunile trebuie să fie de 20% din lățimea și 40% din înălțimea paragrafului. Poziția de pornire ar trebui să fie determinată de coordonatele x=15px și y=15px. Selectați doar zona de conținut a paragrafului pentru fundal.

Codul paginii pentru sarcina nr. 4.1

Apariția necesară a paginii în sarcina nr. 4.1

Background_1(culoare: roșu; culoare de fundal: galben; ) .background_2( culoare de fundal: violet; imagine de fundal: url("http://localhost/test/images/cabinet.png"); background-repeat: nu -repeat; fundal-poziție: 15px 15px; fundal-clip: .border_1 (padding: 15px; width: 2px green; )

Rezolvarea problemei nr. 4.1

4.2. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Textul primului paragraf ar trebui să fie negru, iar fundalul trebuie să fie un gradient liniar de la roșu la alb. Lățimea paragrafului trebuie să fie de 300 px și înălțimea sa de 150 px. Lățimea celui de-al doilea paragraf ar trebui să fie de 300 px și înălțimea sa de 150 px. Fundalul trebuie să fie un gradient radial de la verde la alb. Elipsa gradientului ar trebui să aibă raze de 250px și 280px, iar centrul ar trebui să fie situat în punctul cu coordonatele x =100px și y =180px. Arată soluția.

Sarcini CSS

Textul acestui paragraf ar trebui să fie negru, iar fundalul trebuie să fie un gradient liniar de la roșu la alb. Lățimea paragrafului trebuie să fie de 300 px și înălțimea sa de 150 px.

Lățimea paragrafului trebuie să fie de 300 px și înălțimea sa de 150 px. Fundalul ar trebui să fie un gradient radial de la verde la alb. Elipsa gradientului ar trebui să aibă raze de 250px și 280px, iar centrul ar trebui să fie situat în punctul cu coordonatele x=100px și y=180px.

Codul paginii pentru sarcina nr. 4.2

Apariția necesară a paginii în sarcina nr. 4.2

Background_1( culoare: negru; imagine de fundal: gradient liniar(90deg, #ff0000, #ffffff); ) .background_2( fundal: gradient radial(250px 280px la 100px 180px, #00ff00, #ffffff); ) .border_1( umplutură: 15px lățime: 300px chenar: solid 3px;

Rezolvarea problemei nr. 4.2

4.3. Mai jos este codul pentru pagina html, precum și codul pentru foaia de stil externă styles_1.css. Introduceți-le în Notepad++ și experimentați prin modificarea valorilor proprietăților animației.

Sarcini CSS

Codul paginii HTML pentru sarcina nr. 4.3

Background_1( padding: 0px; lățime: 450px; înălțime: 100px; chenar: solid 3px red; animation-name: example_1; animation-delay: 1s; animation-duration: 4s; animation-iteration-count: infinit; animation-direction: inversă; animație-funcție: ease-in; ) )

Cod extern pentru foaia de stil pentru sarcina nr. 4.3

4.4. Mai jos este codul pentru pagina html, precum și codul pentru foaia de stil externă styles_2.css. Introduceți-le în Notepad++ și experimentați prin modificarea valorilor proprietăților de tranzit.

Crearea efectelor de tranziție

Codul paginii HTML pentru sarcina nr. 4.4

Background_1( umplutură: 10px; lățime: 100px; înălțime: 100px; chenar: albastru solid 3px; culoarea fundalului: #ff0000; proprietatea tranziției: lățime, culoarea fundalului; întârzierea tranziției: 0,2s; durata tranziției: 2s; funcția de sincronizare a tranziției: ease-in ) p:hover (cursor: indicator; culoare de fundal: #0000ff; lățime: 450px; )

Cod extern pentru foaia de stil pentru sarcina nr. 4.4

5.1. Mai jos este codul pentru pagina html, precum și codul pentru foaia de stil externă styles_2.css. Tastați-le în Notepad++. Observați cum se comportă paragrafele în timp ce derulați pagina și cum se modifică aspectul elementului „span” atunci când treceți cu mouse-ul peste el și, în consecință, valoarea proprietății de afișare aplicată acestuia se modifică.

Sarcini CSS

Schimbarea afișajului

poziție: fixă;

poziție: absolută;

Codul paginii HTML pentru sarcina nr. 5.1

Div_0( padding: 10px; lățime: 200px; înălțime: 200px; chenar: solid 3px portocaliu; ) span:hover( cursor: pointer; display: block; ) .div_1( padding: 10px; lățime: 200px; înălțime: 600px; chenar : solid 3px portocaliu: liniar-gradient(180deg, #ffffff, poziție: fix: 250px ) .div_2( padding: 10px; width: 200px; margin: solid 3px red; fundal: liniar-gradient); (90deg, #0000ff, #ffffff poziție: absolută: 1100px;

Cod extern pentru foaia de stil pentru sarcina nr. 5.1

5.2. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Caracteristicile necesare ale elementelor sunt indicate în desenele în sine. Arată soluția.

Sarcini CSS Pentru div-ul principal, poziționarea fixă este setată, offset-ul de sus este de 30px, offset-ul din stânga este de 35px, lățimea div este de 300px, înălțimea div este de 400px, umplutura internă este de 15px.

div_2 Pentru al doilea div, lățimea este de 70px, înălțimea este de 50px, gradient (35px 35px la 10px 10px, #00ffff, #ffffff), umplutura este de 5px, lățimea chenarului este de 2px.

div_3 Pentru al treilea div, lățimea este de 70px, înălțimea este de 50px, gradient (45deg, #0000ff, #ffffff), umplutura este de 5px, lățimea chenarului este de 2px Când treceți cursorul, își schimbă transparența 0,3.

Codul paginii pentru sarcina nr. 5.2

Apariția necesară a paginii în sarcina nr. 5.2

Div_1( umplutură: 15px; lățime: 300px; înălțime: 400px; chenar: punctat 5px #00ff00; poziție: fix; sus: 30px; stânga: 35px; ) .div_3:hover( cursor: pointer; opacitate: 0,3; ) .div_2 ( umplutură: 5px; lățime: 70px; înălțime: 50px; chenar: portocaliu solid 2px; fundal: radial-gradient(35px 35px la 10px 10px, #00ffff, #ffffff); float: stânga; ) .div_3( padding: 5px; lățime: 70px; înălțime: 2px cu puncte roșu: liniar-gradient (45deg, #ffffff);

Rezolvarea problemei nr. 5.2

5.3. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Caracteristicile necesare ale elementelor sunt indicate în desenele în sine. Arată soluția.

Sarcini CSS Pentru div-ul principal, poziționarea absolută este setată, offset-ul de sus este de 30px, offset-ul din stânga este de 35px, lățimea div este de 500px, înălțimea div este de 200px, umplutura internă este de 15px.

Pentru al doilea div, lățimea este de 200 px, înălțimea este de 100 px, lățimea chenarului este de 2 px. este 2px. Plutește pe dreapta. preaplin: automat

Codul paginii pentru sarcina nr. 5.3

Apariția necesară a paginii în sarcina nr. 5.3

Div_1( umplutură: 10px; lățime: 500px; înălțime: 200px; chenar: punctat 5px #0000ff; fundal-culoare: galben; poziție: absolut; sus: 30px; stânga: 35px; ) .div_2( padding: 5px; lățime: 200px ; înălțime: 100px: float;

Rezolvarea problemei nr. 5.3

6.1. Mai jos este codul paginii html, precum și aspectul paginii atunci când este afișată de un browser. La pagină este conectată o foaie de stil externă, al cărei cod trebuie restaurat. Pentru a crea contoare pentru corpul documentului și elementul h2, utilizați proprietatea de resetare a contorului și pentru a insera valori de contor folosind proprietățile de conținut și de contor-increment. Arată soluția.

Provocări CSS Introducere în HTML Ce este HTML? Afișarea în browser a unui document web. Conceptul de etichetă HTML și sintaxa acesteia.
Formatarea textului Elemente bloc și inline. Împărțirea textului în paragrafe. Aplicarea antetelor.

Codul paginii pentru sarcina nr. 6.1

Apariția necesară a paginii în sarcina nr. 6.1

Body( counter-reset: parag_1; /* Creați un contor pentru corpul documentului */ ) h2( counter-reset: parag_2; /* Creați un contor pentru antetul „h2” */ ) /* Numărați toate „h2 „ în elementul „corp” */ /* Introduceți conținut înainte de fiecare „h2”: linie+valoare curentă contor+linie */ h2:înainte( counter-increment: parag_1 1; conținut: „§” counter(parag_1) ". "; ) /* Numărați în elementul „h2” toate „h3” */ /* Introduceți conținut înainte de fiecare „h3”: valoarea contorului curent parag_1+line+valoarea contorului curent parag_2+line */ h3:before( counter-increment: parag_2 1; counter( parag_1) "."

Rezolvarea problemei nr. 6.1

7.1.1 Descărcați codul tutorial pentru cadrul adaptiv al paginii, utilizați comentariile pentru a-l studia și apoi proiectați-l singur.

7.1.2 Descărcați codul tutorial pentru cadrul adaptiv al paginii, studiați-l folosind comentariile și apoi proiectați-l singur. Comparați cu prima opțiune.

7.1.3 Descărcați codul tutorial pentru cadrul adaptiv al paginii, studiați-l folosind comentariile și apoi proiectați-l singur. Comparați cu opțiunile anterioare.

7.2.1 Tutorialul descărcabil vă arată cum să creați navigarea laterală a unei pagini pentru a derula în sus sau în jos. Nu există comentarii, dar nu există prea mult cod, așa că înțelegerea nu va fi prea dificilă. Studiază exemplul și apoi creează-l al tău.

7.2.2 Folosind codul din exemplul anterior, creați un buton „Înapoi la început” în partea de jos a paginii. Eliminați navigarea laterală. Dacă nu ați reușit să finalizați sarcina, priviți soluția și apoi introduceți singur codul.

7.2.3 Tutorialul descărcabil arată cum să creați un buton „Înapoi la început” pe partea laterală a site-ului care apare după derularea paginii cu un număr specificat, de exemplu, pixeli. Sunt puține comentarii, dar nu există prea mult cod, așa că înțelegerea nu va fi dificilă. Studiază exemplul și apoi creează-l al tău.

7.3.1 Creați un meniu orizontal prezentat în figură. Utilizați o listă pentru a face acest lucru, plasând legături în elementele listei. Pentru a face elementele să apară ca o linie, convertiți-le în elemente inline. Când treceți cu mouse-ul peste elementele din meniu, acestea ar trebui să își schimbe culoarea în negru. Puteți descărca soluția. Convertiți meniul în vertical. Pentru a elimina numerele de articole, utilizați proprietatea corespunzătoare pentru marcatorii de listă (consultați referința CSS).

Apariția necesară a meniului de sarcini nr. 7.3.1

7.3.2 Studiați următorul cod de meniu vertical și apoi introduceți-l singur.

7.3.3 Studiați următorul cod vertical de meniu cu mai multe niveluri și apoi introduceți-l singur.

7.3.4 Studiați următorul cod pentru un meniu vertical neted orizontal, apoi introduceți-l singur.

Realizarea site-ului educațional nr. 1

7.4.1 În primul rând, căutați prin paginile site-ului educațional, descărcați și studiați cu atenție codul acestuia, apoi proiectați site-ul singur (fără comentarii, doar cod).

Amenajarea site-ului educațional nr. 2

7.5.1 Pentru a obține o practică suplimentară în aspectul site-ului, descărcați un alt exemplu de instruire al unui site și utilizați comentariile pentru a studia codul acestuia, apoi, folosind un aspect gata făcut și șabloane grafice, proiectați singur site-ul.
Încercați să creați singur o foaie de stil pentru rezoluții înalte. Dacă lucrați pe un laptop, atunci pentru a simula rezoluții mai mari, modificați rezoluțiile în interogările media de la 1366px, de exemplu, la 1266px, astfel încât foaia de stil pentru rezoluțiile de ecran mari să funcționeze. Când creați o foaie de stil, utilizați un factor de dimensiune de 1,3. Și apoi uitați-vă la rezultatul afișajului în browser și ajustați.
Dimensiunile imaginilor pot fi modificate fie într-un editor grafic, fie extinse folosind proprietatea CSS corespunzătoare (vezi exemplul și referința).

Doar pentru abonați