Share
Bine ați venit la cea de-a cincea lecție a seriei noastre Web Design for Kids, totul despre CSS.
Am lucrat foarte mult pe conținutul nostru HTML, deci acum este momentul să facem să arate destul! Vom adăuga lucruri la pagina noastră HTML, precum și vom începe un nou fișier: a CSS document.
Aruncați o privire la site-ul web pe care îl construim. Fișierele pentru această lecție pot fi descărcate aici și nu uitați să puneți întrebări în secțiunea de comentarii din partea de jos a acestei pagini.
Înainte de a începe codarea, mai întâi trebuie să ne asigurăm că înțelegem ce este CSS. CSS standuri pentru Foi de stil cascadă și este o limbă care ne ajută să modificăm modul în care arată pagina noastră HTML.
În imaginea de mai sus, browserul din stânga arată un site fără CSS, nr Coafura, în timp ce site-ul din dreapta are stil. Stilul a fost scris într-un fișier CSS-mult mai bine!
CSS este scris într-un fișier separat folosind editorul nostru de text. Documentul nostru HTML a fost salvat cu un .html extensie, dar documentul nostru CSS va fi salvat cu un .css extensie.
Va trebui să lansăm un document nou în editorul nostru de text și să îl salvăm ca "tutstown.css" în "tutsfolder"; alături de "index.html" și folderul "imagini".
Pentru ca documentul nostru CSS să aplice stiluri în documentul nostru HTML, trebuie să le conectăm împreună. Acest lucru se face prin a element din interiorul elementului de cap în partea de sus a documentului nostru HTML.
Vom adăuga acest link direct sub titlul nostru:
Tuts Town
Sunt câteva importante atribute pentru a include în acest element de auto-închidere, primul din care este tip. Atributul de tip indică browserului ce înseamnă tip de conținut pe care îl legăm. În acest caz este a text / css fişier.
Cel de-al doilea atribut pe care îl vedem aici este rel, care spune browser-ului ce relația este între HTML și documentul asociat (CSS). Documentul CSS este a stylesheet pentru HTML-ul nostru, așa că vom include aici.
În cele din urmă, avem href pe care le-ați putea aminti de la noi elemente. Ea indică în altă parte. În acest caz, îi spune browserului unde să găsească fișierul CSS la care ne-am conectat.
Dacă totul este conectat corespunzător, pagina va arăta diferit atunci când îl actualizați în browser:
În fișierul nostru CSS putem enumera elementele HTML pe care le-am folosit și le spunem cum vrem să se uite. Există multe modalități de a indica elementele pe care le dorim și Clase HTML sunt una din aceste căi.
Clase HTML sunt atribute pe care le putem adăuga elementelor. Odată ce un element are un nume de clasă, putem folosi acest lucru în CSS.
Numele clasei alese ar trebui să fie un cuvânt sau cuvinte care descriu conținutul elementului respectiv.
Adăugarea unei clase la noi ar putea arata cam asa:
Clasele nu sunt unice, deci mai multe elemente diferite pot avea același nume de clasă. Acest lucru face ca aceleași stiluri să fie adăugate la o mulțime de elemente mult mai simple; vom vedea acest lucru în acțiune atunci când vom ajunge la imaginile magazinului nostru!
Modul în care scrieți cod este numit său sintaxă. La fel ca și în cazul HTML, CSS trebuie să fie scris în mod corect pentru a funcționa.
Să trecem la fișierul CSS și, pentru practică, să schimbăm culoare de fundal din antet la albastru.
.header-header fundal-culoare: albastru;
Există o mulțime de bucăți pentru a avea dreptate!Deci, CSS înțelege că ceea ce vrem este un nume de clasă, trebuie să facem câteva lucruri:
Accentsconagua
. înainte de numele.culoare de fundal) este imediat urmat de un colon : albastru în acest caz). ; Poate fi foarte ușor să le uiți pe acestea!
Salvați acest fișier CSS și actualizați browserul; dacă nu aveți acest lucru deschis, puteți face acest lucru făcând dublu clic pe fișierul "index.html" din "tutsfolder". Cât de curată este asta?!
Important! Acum, să ștergem acest stil, deoarece site-ul nostru nu va avea un antet albastru!
CSS ne permite, de asemenea, să includem în fișierul nostru comentarii pe care browserul le va ignora, dar ele vor părea puțin diferite de comentariile noastre HTML.
Un comentariu CSS este conținut în aceste simboluri: / * * /
/ * Acesta este un comentariu în CSS * /
Documentul CSS din fișierele de exerciții va conține câteva comentarii utile pentru a explica mai multe lucruri.
Primul aspect al stilului real pe care îl putem face pe site-ul nostru este schimbarea culoare de fundal la acel minunat galben deschis. Există câteva valori de culoare care pot fi scrise în CSS, cum ar fi albastru în exemplul de mai sus, iar browserul înțelege. Pentru alte culori mai puțin frecvente, va trebui să includeți culorile hexazecimal, sau hex, numărul în loc.
Toate culorile au un număr hexagonal care să se potrivească. Browserele nu înțeleg multe culori atunci când sunt scrise, dar înțeleg foarte bine numerele hexazecimal. Numărul hexazecimal pentru culoarea noastră galben deschisă este # FAF8DA, și dorim să aplicăm acest lucru , pentru a umple întreaga pagină.
corp fundal-culoare: # FAF8DA;
Important! Nu este nevoie de un punct în fața lui corp aici pentru că nu este un nume de clasă. În schimb, am arătat imediat elementul corpului.
Dacă sunteți curios în legătură cu valoarea hexă a altor culori, acest site hexagonal poate fi foarte util.
De asemenea, putem seta font (stilul de scrisori) pentru utilizarea site-ului nostru corp în CSS.
Tot ce trebuie să știm în acest moment este că trebuie legătură un font de la Google în documentul nostru HTML. Odată ce acestea sunt legate, browserul va înțelege și îl vom putea folosi.
Iată o privire la link-ul pe care trebuie să-l adăugăm în cadrul din HTML (același loc în care am legat documentul CSS!)
Apoi, putem salva acest lucru și să ne îndreptăm spre documentul nostru CSS:
corp font-family: 'Open Sans';
Aceasta va seta fontul pentru întregul text din pagină ca Open Sans.
În cadrul antetului se va schimba culoarea și dimensiunea textului, precum și dimensiunea imaginii orașului.
În primul rând, trebuie să adăugăm clasele HTML corecte la elementele din antet, astfel încât să le putem folosi în CSS.
În deschidere eticheta să adăugăm o clasă de Principalul-titlu și în cadrul oras-preview:
Bine ati venit la Tuts + Town
În documentul nostru CSS putem indica acum aceste elemente prin numele de clasă pe care l-am setat și începem să ne facem stil.
Am stabilit aici o dimensiune destul de mare a fontului 70px. px, sau pixeli, este ca un punct pe ecran. Acest punct este umplut cu culoare și este folosit ca unitate de măsură. Imaginea orașului nostru este, de asemenea, destul de mare, așa că o să stabilim asta la 650 de pixeli larg.
culoare proprietății stabilește culoarea textului, care aici (# 205D76) Este un albastru închis.
.rubrica principală font-size: 70px; culoare: # 205D76; . previzualizare tip lățime: 650 px;
Rețineți că, în principal, avem secțiuni mai mici care conțin o imagine și un text. Va trebui să setăm o dimensiune pe aceste imagini și să stilizăm rubricile și listele cu CSS.
Primul lucru pe care trebuie să-l facem este să setăm mărimea imaginilor clădirii. Pentru a seta toate dimensiunile imaginilor, putem folosi același nume pentru mai multe elemente.
Vom adăuga același nume pentru clasă, clădire, la toate cele trei imagini stocate în HTML-ul nostru, apoi redimensionați-le pe toate în același timp în CSS-ul nostru, după cum urmează:
.clădire width: 200px;
Cele trei titluri mai mici pot avea, de asemenea, același nume de clasă și o vom folosi pentru a le schimba culoare și marimea fontului a textului.
.categoria-titlu (culoare: # 205D76; font-size: 30px;
După rubrica din cadrul fiecărei secțiuni, avem liste de magazine neordonate - amintiți-le? În afară de schimbarea mărimii și culorii legăturilor de aici, va trebui, de asemenea, să schimbăm culoarea listei bullet points.
Să adăugăm o clasă de magazin-list la magazin-link la în documentul nostru HTML și apoi salvați-l.
.lista de stocuri culoare: # FFC122; / * Modificările listei de culoare bullet point * / .store-link culoare: # EA6E2F; font-size: 20px;
S-ar putea să observați, atunci când priviți la site-ul nostru în browser, că nu există distanțe mari între elementele listă, ceea ce face să pară puțin aglomerat. Vom vorbi totul despre spațiere și vom adăuga câteva aici în tutorialul de layout mai târziu în serie.
După ce adăugăm o clasă de primar-footer la și creat de la element în acest subsol putem declara culoare de fundal precum și textul culoare și marimea fontului:
.primar-subsol culoare-fundal: # FFC122; . create-by culoare: #FFFFFF; font-size: 20px;
În această lecție am învățat totul despre cum să conectăm un document HTML și un document CSS împreună și apoi să adăugăm stiluri minunate elementelor noastre prin clase. În acest moment ceea ce vedem în browserul nostru nu se va potrivi cu vizionarea site-ului pe care am făcut-o, dar uită-te la ce diferență poate avea o anumită culoare și dimensiune! Se va face mai bine.
În continuare, vom muta conținutul nostru în loc pe ecran folosind unele CSS extra inteligent schemă tehnici.
Ne vedem în jurul orașului!
