Din seria de articole "HTML5 și CSS3 - este timpul să folosim"
Continuarea articolului Ce ne face să fim mulțumiți de CSS3
Acum suntem gata să ne murmurăm mâinile în imprimarea cernelei. Simțiți-vă ca tipograf într-o casă tipografică din secolul al XX-lea. Zgomotul ritmic al preselor de tipărire, mirosul de imprimare proaspătă, clicurile gumei de alamă s-au retras în locul lor. Rulouri mari de ziar de ziar, așteptând să primească o parte din informațiile despre circulație. Și tu, stând în spatele mașinii de tipar, ai pus în locul potrivit un bloc de informații ...
Cât de bine a venit calculatoarele. Vă puteți crea atmosfera potrivită pentru a începe să creați într-un mediu calm. De fapt, aceasta este ceea ce vom face acum.
Pentru a finaliza sarcinile de care aveți nevoie (va fi o ocazie de actualizare):
Software sau resurse
În acest tutorial, noi:
Pentru lucru, va fi suficient să creați un fișier HTML-fileindex.html și un CSS-filestyles.css. Scripturile apar în pagină pe măsură ce se fac sarcinile, așa că fi pregătit ca browserul să vă avertizeze. Va fi necesar să permiteți executarea scripturilor pe pagină.
Pregătirea cadrului paginii
Să începem. Creați-vă un dosar pe desktop, acesta va fi cuplul nostru dulce de fișiere HTML și CSS. Creați un fișier text index.html simplu, codat în utf-8. Această codificare a caracterelor a devenit de mult standard pentru toate textele non-engleză.
Prima linie - scrieți tipul documentului.
Al doilea - deschideți eticheta principală a întregului document html și specificați parametrul lang, scriind acolo limba de bază a paginii - rusă.
Să trecem la titlu.
Primul lucru pe care trebuie să-l notează este codarea caracterelor documentului.
Apoi, titlul, pentru fereastra browserului.
Apoi, fără ezitare, vom conecta fișierul de stil.
Și, la sfârșit, adăugați un recipient gol al corpului documentului.
Tot ce am descris aici este în Lista 1:
Listarea 1. Structura de bază a unui document HTML5
Vă atragem atenția asupra faptului că majoritatea etichetelor nu sunt acum la fel de lungi ca înainte. etichetă nimic altceva nu este necesar decât lang. Pentru o etichetă meta, e suficient să scrieți caracterele. În plus, pentru eticheta de link, nu este necesar să specificați tipul.
Cadrul este gata, dar este prea devreme pentru ca noi să afișăm pagina în browser. Mergem mai departe - elementele semantice ale paginii.
Efectuarea marcajului conținutului
Vom plasa pe blocuri semantice scheletice
Acum, să definim mai precis ce vom fi plasați pe pagină. Să începem din următoarele: trebuie să utilizăm maximul noile elemente semantice ale HTML5.
Pagina noastră va servi pentru afișarea textului integral al știrilor despre compania căreia îi este dedicat site-ul. Pe aceasta va exista o tranziție fie de la pagina principală, unde sunt plasate cele mai recente știri, fie din arhiva știrilor.
Așezați blocurile în recipient
. Aderăm la următoarea secvență a acestor elemente:- antet
- - hgroup
- nav
- articol
- - antet
- - "conținut"
- - secțiune
- - - antet
- - - "conținut"
- subsol
Tot ceea ce am descris aici este prezentat în Lista 2. Nu furnizăm codul integral al paginii, ci doar ce ar trebui să fie între etichete
... .Listing 2. Plasarea blocului HTML5 semantic
Acum, pagina poate fi vizualizată în browser. Cu toate acestea, încă arată urât. Dar, de fapt, am avut deja grijă și am conectat un fișier cu stiluri.
Vopseste fatada
Pagina noastră este încă plictisitoare și nu este atractivă. Să facem un machiaj. Implementați-o în fișierul nostru style.css. Primul lucru pe care îl facem este să definiți fontul pentru întregul document. Dacă cineva nu știe, atunci spunem, au fost efectuate cercetări care să fie mai bine percepute pe ecranul monitorului, sa dovedit - una fără serifi. Astfel de fonturi sunt numite sans-serif - fără serifi. Acestea includ, de exemplu: Arial, Helvetica, Verdana. Mergem mai departe, vom determina regulile pentru proiectarea tuturor elementelor paginii noastre. Pentru a nu merge prea mult în față, vom folosi până acum câteva jetoane - umbre și muchii rotunjite în apropierea blocurilor.
Cele mai multe dintre ceea ce am primit aici au fost disponibile în standardele timpurii ale CSS. Noi caracteristici noi enumerate.
box-shadow
Acest parametru este specificat pentru elementul de bloc al paginii și creează o umbră în jurul acestuia. Primele patru numere sunt parametrii liniari ai umbrei, respectiv, sau sunt specificați în pixeli px. sau alte unități liniare (em. pt), sau fără ele, în cazul dimensiunii zero. Primul numãr înseamnã - orizontalã turnarea umbrei spre dreapta, pe care doriþi sã o faceþi la stânga - puneþi un numãr negativ. Apoi - vertical în jos pentru a face - pune un număr negativ. Apoi - valoarea de estompare a umbrei, apoi - răspândirea umbrei. După dimensiunile liniare, este indicată culoarea umbrei și dacă doriți o umbră interioară care este inserția cuvântului cheie. Dacă nu aveți o umbră, implementați-vă fanteziile umbră printr-o virgulă.
text-shadow
Acest parametru este similar în setările sale față de cel precedent, diferența fiind doar în absența răspândirii umbrei și a umbrei interioare. Și tu, de asemenea, nu interfera cu fantasizing în detrimentul numărului de umbre, separate de o virgulă.
raza de graniță (-moz-border-radius, -webkit-border-radius)
Raza de rotunjire a fileului. Unghiurile blocului pot fi patru, respectiv, iar elementele acestui parametru pot fi aceleași. Menționat în sensul acelor de ceasornic din colțul din stânga sus. Numele parametrilor din paranteză este folosit în browserele familiei Mozilla și pe motorul Webkit (Chrome, Safari). Așadar, duplicați setările de reguli specificate pentru raza de graniță și în acești doi parametri.
Proiectul creat și codat de noi va arăta așa cum este prezentat în Lista 3. Acest cod, trebuie să introduceți fișierul styles.css.
Listarea 3. CSS pentru elementele semantice noi HTML5
Dacă deschideți acum pagina dvs. de index, acesta va arăta deja, nu atât de deprimant, uita-te la Figura 1. Comparativ cu vizualizarea anterioară, va fi doar SUPER
Figura 1. Vederea paginii stilizate
Dacă pagina pare diferită, atunci ați deschis-o într-un browser greșit. Prin "nu în asta" vreau să spun un alt browser decât Mozilla4 +, Chrome11.0 +, Opera11.10 +, arată aceleași pagini - verificate.
În cele din urmă, pot să scriu răspunsul, ceva ce ruterul mi-a greșit de-a lungul drumului spre mine.
1. Pentru a închide sau a nu închide contul: acum totul este legat de cultura aspectului, deși puteți adăuga că prin închiderea strictă a etichetelor pe care le creați XHTML și lăsând unele etichete care nu sunt închise, creați HTML.
2. Am citit "Pregătirea cadrului paginii"
3. articolul> secțiunea Regulă de jupuire se aplică elementelor copil ale secțiunii situate direct în containerul de articole la primul nivel.
Salut, salut!
Spune-mi cum să fac conținutul site-ului în cadru? De exemplu, ca pe acest site, doar că nu ar fi fost alocat, dar a fost ca într-un bloc 🙂 Nu-mi pot rupe capul)
Alexander, sper că browser-ul tău preferat nu este IE 🙂
Dacă vrei ca mine, atunci poți să te uiți la marcaj.
În crom F12
fila Elemente
în el deschideți corpul și div
selectați div și vedeți coloana din dreapta (Stiluri)
divas din clasa wrapperPage, wrapper, content, sidebar
În cap a scris totul, ca și tine. În organism a scris: Buna ziua!
Browsere (rezultatul testului):
- Chrome 26 (468 de puncte),
- Opera 12.15 (404 puncte),
- Yandex Browser 1.5 (434 de puncte),
- Safari 5.1.7 (278 de puncte),
- Firefox 20.0 (394 de puncte),
- Explorer 9.0 (138 de puncte).
În afară de Opera, arată un crocodil. Fișierele sunt stocate în codificarea utf-8. În xmll lang = "en" este specificat și în meta charset = "utf-8" (totul, așa cum ați scris în această lecție).
❓ Cum pot face toate browserele să recunoască alfabetul chirilic?
Trimiteți-le prietenilor: