Crearea unui site web este o modalitate excelentă de a vă exprima. Deși există multe instrumente de construire a site-urilor web, scrierea dvs. personală este un mod distractiv de a afla mai multe despre cum funcționează site-urile din spatele scenei. Un proiect bun pentru începători este crearea unui site web și adăugarea unei imagini de fundal cu CSS. Acest proiect vă va pune în funcțiune atât cu HTML, cât și cu CSS.
Ce este CSS?
CSS înseamnă Cascading Style Sheet. Este un limbaj de programare care vă permite să stilizați limbajele de marcare. Un astfel de limbaj de markup este HTML sau Hyper-Text Markup Language. HTML este utilizat pentru a crea site-uri web. Deși puteți controla o parte din stilul site-ului web folosind HTML, CSS oferă mult mai multe opțiuni de control și design.
Crearea unui site web de bază cu HTML
Deoarece CSS este doar un limbaj de stil, pentru al folosi, mai întâi avem nevoie de ceva de stilat. Un site foarte simplu ne va fi suficient pentru a începe să jucăm cu CSS. Pagina noastră va afișa „Hello World”.
Salut Lume
În cazul în care nu sunteți familiarizați cu HTML, haideți să trecem repede peste ceea ce fac toate elementele. După cum am menționat, HTML este un limbaj de markup, ceea ce înseamnă că folosește etichete pentru a marca textul. Ori de câte ori vezi un cuvânt înconjurat de <> este o etichetă. Există două tipuri de etichete, o etichetă care marchează începutul unei secțiuni folosind <> și una care marchează sfârșitul unei secțiuni folosind
În exemplul nostru, avem patru etichete. html eticheta indică ce elemente fac parte din site. cap eticheta conține informații despre antet care nu sunt afișate pe pagină, dar sunt necesare pentru a crea pagina. Toate elementele afișate se află între corp Etichete. Avem un singur element afișat, p etichetă. Acesta spune browserului web că textul este un paragraf.
Legate de: 10 exemple de cod CSS simple pe care le puteți învăța în 10 minute
Doriți să aflați mai multe despre utilizarea CSS? Încercați aceste exemple de cod CSS de bază pentru a începe, apoi aplicați-le propriilor pagini web.
Adăugarea CSS la HTML
Acum că avem o pagină simplă, putem personaliza stilul cu CSS. Pagina noastră este destul de simplă în acest moment și nu putem face prea multe, dar să începem prin a face paragraful nostru să iasă în evidență, astfel încât să îl putem distinge de fundal adăugând un chenar.
Salut Lume
Acum, paragraful nostru va fi înconjurat de o margine neagră. Adăugarea unei descrieri de stil în CSS la eticheta noastră de paragraf i-a spus site-ului web cum să stilizeze paragraful. Putem adăuga mai multe descrieri. Să creștem spațiul alb, sau umplutura, în jurul paragrafului nostru și să ne centrăm textul.
Salut Lume
Site-ul nostru arată mai bine, dar HTML-ul nostru începe să pară dezordonat cu toate aceste descrieri din eticheta de paragraf. Putem muta aceste informații în antetul nostru. Antetul nostru este pentru informații despre care trebuie să afișăm corect site-ul web.
Salut Lume
Acum HTML-ul nostru este mai ușor de citit. Veți observa că trebuie să schimbăm unele lucruri în jur. Eticheta de stil indică informații despre stilul browserului web, dar și ce să stileze. În exemplul nostru, am folosit două moduri diferite de a-i spune ce să stilăm. p în eticheta de stil îi spune browserului web să aplice acel stil tuturor etichetelor de paragraf. #paragraful nostru secțiunea îi spune numai elemente de stil cu id Paragraful nostru. Observa asta id informațiile au fost adăugate la eticheta p din corpul nostru.
Importul unui fișier CSS pe site-ul dvs. web
Adăugarea informațiilor despre stil în antet face codul nostru mult mai ușor de citit. Cu toate acestea, dacă dorim să stilăm multe pagini diferite în același mod, trebuie să adăugăm textul respectiv în partea de sus a fiecărei pagini. S-ar putea să nu pară prea multă muncă, poți să o copiezi și să o treci la urma urmei, dar creează multă muncă dacă vrei să schimbi un element mai târziu.
În schimb, vom păstra informațiile CSS într-un fișier separat și vom importa fișierul pentru a stiliza pagina. Copiați și lipiți informațiile între etichetele de stil într-un nou fișier CSS ourCSSfile.css.
p {
text-align: centru
}
#ourParagraph {
stil de bordură: solid;
umplutură: 30 px;
}Apoi, importați fișierul în fișierul HTML.
Salut Lume
Adăugarea unei imagini de fundal cu CSS
Acum, că aveți o bază solidă în HTML și CSS, adăugarea unei imagini de fundal va fi o bucată de tort. Mai întâi, identificați la ce element doriți să dați o imagine de fundal. În exemplul nostru, vom adăuga un fundal pe întreaga pagină. Aceasta înseamnă că vrem să schimbăm stilul corp. Amintiți-vă, etichetele corpului conțin toate elementele vizibile.
corp{
imagine de fundal: url ("sky.jpg");
}
p {
text-align: centru
}
#ourParagraph {
stil de bordură: solid;
umplutură: 30 px;
}Pentru a schimba stilul corpului în CSS, utilizați mai întâi corp cuvânt cheie. Apoi adăugați paranteze cretate așa cum am făcut înainte {}. Toate informațiile despre stil pentru corp trebuie să se afle între parantezele cretate. Atributul de stil pe care vrem să îl schimbăm este imagine de fundal. Există multe atribute de stil. Nu vă așteptați să le memorați pe toate. Semn de carte a Proprietăți CSS cheat-sheet cu atribute pe care doriți să le amintiți.
Legate de: 8 efecte HTML minunate pe care oricine le poate adăuga pe site-ul lor web
După atribut, utilizați două puncte pentru a indica modul în care veți schimba atributul. Pentru a importa o imagine, utilizați url (). indică faptul că utilizați un link pentru a indica imaginea. Așezați locația fișierului între paranteze între ghilimele. În cele din urmă, încheiați linia cu un punct și virgulă. Deși spațiul alb nu are sens în CSS, utilizați indentarea pentru a face CSS mai ușor de citit.
Exemplul nostru arată astfel:
Dacă imaginea dvs. nu se afișează corect din cauza dimensiunii imaginii, puteți modifica imaginea direct. Cu toate acestea, există atribute de stil de fundal în CSS pe care le puteți utiliza pentru a modifica fundalul. Imaginile care sunt mai mici decât fundalul se vor repeta automat în fundal. Pentru a dezactiva acest lucru, adăugați fundal-repetare: fără repetare; la elementul tău.
Există, de asemenea, două modalități de a face o imagine să acopere întregul fundal. Mai întâi, puteți seta dimensiunea fundalului la dimensiunea ecranului cu dimensiunea fundalului: 100% 100%;, dar aceasta va întinde imaginea și poate distorsiona imaginea prea mult. Dacă nu doriți modificarea proporțiilor imaginii, puteți seta și dimensiunea fundalului la acoperi. Coperta va face ca imaginea de fundal să acopere fundalul, dar să nu distorsioneze imaginea.
Schimbarea culorii de fundal
Să schimbăm un ultim lucru. Acum că avem un fundal, paragraful nostru este greu de citit. Să-i facem fundalul alb. Procesul este similar. Elementul pe care dorim să îl modificăm este #paragraful nostru. # Indică faptul că „ourParagraph” este un nume de identificare. Apoi, vrem să setăm culoare de fundal atribut albului.
corp{
imagine de fundal: url ("sky.jpg");
}
p {
text-align: centru
}
#ourParagraph {
culoare de fundal: alb;
stil de bordură: solid;
umplutură: 30 px;
}Mult mai bine.
Continuarea proiectării site-ului dvs. web cu CSS
Acum, că știi cum să schimbi stilul diferitelor elemente HTML, cerul este limita! Metoda de bază pentru schimbarea atributelor de stil este aceeași. Identificați elementul pe care doriți să îl modificați și descrieți cum să schimbați atributul. Cel mai bun mod de a afla mai multe este să te joci cu diferite atribute. Provocați-vă să schimbați culoarea textului în continuare.
Doriți să învățați HTML pentru a vă codifica propriile site-uri web și aplicații? Utilizați aceste exemple de pagini web și codul sursă pentru a vă învăța HTML și CSS.
- Programare
- HTML
- Web design
- CSS
J. Seaton este un scriitor științific specializat în descompunerea subiectelor complexe. Are un doctorat de la Universitatea din Saskatchewan; cercetările sale s-au concentrat pe utilizarea învățării bazate pe jocuri pentru a spori implicarea elevilor online. Când nu lucrează, o veți găsi cu ea citind, jucând jocuri video sau grădinărit.
Aboneaza-te la newsletter-ul nostru
Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!
Încă un pas…!
Vă rugăm să confirmați adresa de e-mail în e-mailul pe care tocmai vi l-am trimis.