CSS este singurele pagini web cele mai importante pe care le-ați văzut în ultimul deceniu și a pregătit calea separării stilului și conținutului. În mod modern, XHTML definește semnul semantic Semnificația semanticului este și cum va schimba Internetul pentru totdeauna [Tehnologie explicată] Ce semne Markup este și cum va schimba Internetul pentru totdeauna [Tehnologie explicată] Citește mai mult structura - semnificația și conținutul pagina web, în ​​timp ce CSS se preocupă de prezentare. În timp ce majoritatea dintre noi suntem confortabili scriind un mic cod HTML, credem că CSS este un fel de magie neagră. Sper să schimb acest lucru cu acești 5 pași pentru a deveni vrăjitor CSS.

Acest articol este destinat utilizatorilor care au foarte puțină experiență cu CSS încă, deși sperăm că există ceva aici pentru toată lumea.

(1) Gramatica

Ca orice limbă, CSS are o anumită gramatică și poate părea puțin “program de calculator” la început, dar este într-adevăr doar o listă de lucruri. Tot CSS este scris astfel:

SELECTOR PROPRIETATE: VALOARE; VALOAREA PROPRIETĂȚII; VALOAREA PROPRIETĂȚII;

După cum probabil știți deja, CSS funcționează aplicând un stil unui element selectat în pagina web. De exemplu, pentru a schimba modul în care sunt afișate toate link-urile, le-ați folosi “A” ca selector. Diferitele proprietăți și valori pe care le veți învăța cu experiență, dar unele sunt ușor - lucrurile precum CULOARE, FRONTIERE, FONT-DIMENSIUNE, HEIGHT sunt toate proprietățile posibile, ale căror valori ar putea fi roșii, 14pt, 150%, 1000px. uşor. Să vedem cum vom face stilul de a lega toate legăturile roșii:

a culoare: roșu;

De asemenea, puteți utiliza același bloc de CSS pentru a face mai mult de un tip de element în același timp cu virgule:

a, h2, h3 culoare: roșu;

Acest lucru face nu numai toate legăturile, dar și toate rubricile h2 și h3, în aceeași culoare roșie. Observați că toate acestea pot avea dimensiuni diferite, deoarece acest bloc special de cod schimba NUMAI culoarea.

(2) Selectori de clasă și ID

Uneori nu doriți să modelați TOATE elementele în același mod - și, în aceste cazuri, puteți folosi CLASĂ sau ID-ul. Ca regulă generală, ID-ul este folosit pentru elemente unice și este utilizat cel mai frecvent pentru a defini blocuri mari de conținut sau butoane speciale speciale și astfel.

De exemplu, este posibil să aveți un DIV mare pentru blocurile HEADER, CONTENT și FOOTER ale paginii dvs. - definirea acestora ca ID-uri ar fi o mișcare inteligentă. Clasele, pe de altă parte, sunt folosite atunci când este posibil ca elementele de stil să fie repetate pe toată pagina. Poate că doriți ca o grămadă de elemente să aibă colțuri rotunjite cu o graniță roșie solidă de 2px - în loc să scrie același stil inline de un milion de ori, ați defini o clasă pentru ea și să atașați clasa la elementele respective. Deci, cum definiți aceste ID-uri și clase?

 
SIDEBAR
 

Pentru a viza aceste elemente în CSS, veți folosi:

 .roșu-rotunjit // aceasta este o rază de clasă a graniței: 5px; margine: 2 pixeli roșii solide;  #sidebar ... // acesta este un ID 

(3) descendenți

Nu este nevoie să atașați clase și ID-uri la tot ce se află în documentul dvs. - puteți utiliza, de asemenea, ceea ce numim DESCENDANTS pentru a selecta elemente. Uită-te la această declarație CSS și vezi dacă îți dai seama ce face:

#sidebar h1 font-size: 20px;

Aceasta va găsi FIRST elementul cu un ID de “bara laterală” Apoi va restrânge selecția la toate

s conținute în acest domeniu și aplică stilul numai acelora.

Deci, dacă puteți grupa toate articolele dvs. împreună cumva, cel mai bine este să folosiți selectorii descendenți deoarece este chiar mai puțin decât adăugând o grămadă de class =”” definiții la tot.

(4) Unde să puneți acest CSS?

CSS este cel mai bun mod de a vă despărți complet de HTML. Faceți un fișier numit ce doriți. Css și pur și simplu adăugați această linie în antetul HTML:

De asemenea, puteți adăuga blocuri de CSS în secțiune între etichete, dar nu vă sugerăm această metodă deoarece rezultă în fișiere HTML greoi și greu de citit.

Al treilea loc pentru a adăuga CSS este inline, dar ar trebui să fiți atenți și la asta. Orice adăugat în linie așa cum este:

va suprascrie automat orice lucru definit în stilul tău separat. Deci, puteți sta acolo încercând să depanați de-a lungul vremurilor de ce miniaturile dvs. nu se redimensionează, iar CSS-ul dvs. poate fi perfect - dar dacă elementul IMG include stiluri inline, atunci acestea vor avea prioritate. De unde știi dacă altceva o afectează?

(5) Obțineți FireBug sau folosiți Chrome

FireBug Amateur Ghidul de personalizare a site-ului cu FireBug Amateur ghidul de a personaliza Design site-ul cu FireBug Read More este un instrument de dezvoltare uimitor, care este deosebit de util pentru imaginind cum funcționează CSS. Ia-ți puțin timp să o descarci și să te uiți rapid la ea. FireBug este disponibil pentru Firefox ca plugin sau dacă utilizați Chrome, este deja încorporat un set identic de caracteristici. Odată ce ați activat plugin-ul în Firefox sau utilizați Chrome, faceți clic dreapta oriunde în pagină și selectați “Inspectează elementul“.

Aceasta va deschide un nou panou în partea de jos a browserului. În partea stângă este afișarea XHTML, frumos formatată și pliabilă. Dacă plasați cursorul peste orice element, acesta va evidenția acel element din pagină și vă va arăta modelul casetei CSS în jurul acestuia (vom vorbi mai multe despre modelul cutiei într-o lecție viitoare). Punctul cheie aici este că puteți selecta orice element și puteți vedea exact ce CSS acționează asupra acestuia pe partea dreaptă și că îi va sparge pe aceia în care selectorii l-au cauzat. Orice adăugat în linie va fi afișat în “element.style” poziția. Încearcă acum pe această pagină. Observați că foarte des multe dintre CSS afișate în partea dreaptă sunt străbătute cu o linie centrală - aceasta înseamnă că un alt selector care lucrează pe acel element are prioritate și depășește cel traversat.

Asta e pentru ziua de azi, dar nu ezitați să lăsați comentarii dacă credeți că am pierdut câteva puncte cheie fundamentale cheie sau dacă aveți întrebări sau probleme specifice cu CSS apoi întrebați-vă în secțiunea de asistență tehnică a site-ului nostru. Data viitoare aș vrea să vă dezvoltați cunoștințele despre CSS dincolo de schimbările de culoare și dimensiunea de bază.

Explorați mai multe despre: HTML, Programare, Web Design, Dezvoltare Web.