Bună ziua, dragi cititori ai proiectului Anatomy of Business. Webmasterul Alexander este cu tine! În ultimul articol, ne-am uitat la ce sunt stilurile CSS și cât de importante sunt acestea în programarea WEB.

Este destul de evident că dacă stilurile CSS au un impact semnificativ asupra afișajului unui fișier HTML, atunci acestea trebuie conectate cumva. Astăzi ne vom uita la patru modalități principale de a conecta stilul CSS la HTML.

Să nu amânăm chestiunea cutie lungăși să începem!

Inclusiv un fișier CSS separat!

Una dintre cele mai convenabile și moduri simple conectarea stilurilor înseamnă conectarea unui fișier separat cu stiluri. Pentru a face acest lucru, trebuie să utilizați editor de text notepad++ (sau orice altul) creați un fișier cu extensia .css și plasați-l în același folder cu fișierul în care vrem să-l plasăm.

Apoi, în fișierul HTML între etichete posteaza urmatorul cod:

Acum să vedem ce înseamnă toate acestea:

Link # tradus din engleză înseamnă „link”. În acest fel, arătăm browserului că ceea ce vom vorbi în continuare este un link. rel= # cu acest atribut arătăm cum se leagă fișierul CSS cu fișierul HTML. "stylesheet" # și anume că fișierul CSS este o foaie de stil în cascadă. type="text/css" # totul este simplu aici: acesta este o indicație că fișierul este scris format textși are extensia .css href="style.css" # acesta este un link către un fișier cu stiluri CSS.

În opinia mea, acesta este cel mai preferat mod de a include stiluri CSS.

Scriem stiluri direct în fișierul HTML (prima metodă)

Următorul mod de a specifica stilurile CSS este să le scrieți direct în documentul HTML. Arata cam asa:

Dacă ne uităm la modul în care acest document HTML va fi afișat în browser, vom vedea că textul dintre etichete s-a înroșit. Și folosind atributul style, spunem că în continuare avem parametrii de stil de afișare. Culoare este un selector responsabil pentru culoare. roșu este valoarea acestui selector. În acest fel putem evidenția un anumit tip afișarea unor părți individuale ale textului.

Plasarea foilor de stil în cascadă în interiorul HTML (a doua metodă)

O altă modalitate de a include stiluri CSS este plasarea tabelelor în cascadă în interiorul fișierului HTML în sine. În opinia mea, aceasta metoda nu este cel mai convenabil, deoarece folosindu-l, analiza codului site-ului devine nu foarte convenabilă. Pentru a începe să scrieți stiluri CSS, trebuie doar să inserați etichete în fișierul HTML . În practică arată astfel:

Iată un exemplu: afișarea stilurilor CSS într-un document HTML

Vă rugăm să rețineți că în interiorul etichetei scriem și codul conform reguli CSS folosind bretele. În articolele următoare voi vorbi mai detaliat despre regulile de sintaxă în CSS.

Conectarea mai multor fișiere CSS la un document HTML.

Regulile HTML permit ca mai multe fișiere CSS să fie incluse simultan. Mulți webmasteri folosesc acest lucru: creează fișiere CSS separate pentru text și imagini. Sau fișiere separate pentru antet, subsol și corpul principal al paginii. Să ne dăm seama cum să implementăm acest lucru.

Creăm mai multe fișiere în stil CSS. Numele lor să fie style-1.css și style-2.css. O plasăm, ca în metoda numărul unu, în același folder cu fișierul HTML.

Iată un exemplu: afișarea stilurilor CSS într-un document HTML

Totul este similar cu prima metodă, doar că în acest caz indicăm link-uri către două fișiere deodată.

Link la fișierul CSS din interior la un fișier de același tip.

Cu excepția tuturor celor de mai sus metodele enumerate, există o modalitate care vă permite să vă conectați la multe altele într-un singur fișier CSS!

Aceasta este implementată după cum urmează:
În primul rând, trebuie să conectăm cel puțin un fișier CSS la codul tău în același mod.

În al doilea rând, introduceți următorul cod în fișierul deja conectat:

@import url("style-2.css");

Această linie se conectează la fișierul nostru fișier suplimentar CSS. Dacă aveți dificultăți cu conectarea CSS, îi puteți întreba în comentarii.
După cum am învățat din cele două lecții anterioare, tehnologia CSS este cel mai puternic instrument, pe care orice webmaster ar trebui să-l stăpânească! Pentru a îmbunătăți asimilarea materialului, am decis să adaug un videoclip de instruire + test la finalul fiecărei lecții pentru a consolida informațiile primite.

Test de fixare a materialului:

Trebuie să includem fișierul CSS prin plasarea unui link către acesta în fișierul HTML. Care dintre următoarele metode este corectă?

Opțiunea 1:

Opțiunea 2:

Opțiunea 3:

Opțiune 4:

Putem plasa cascade CSS direct în fișier HTML?

CSS (Foi de stil în cascadă) sunt foi de stil în cascadă. Sau, pentru a explica mai mult într-un limbaj clar, CSS este o tehnologie de descriere a aspectului paginilor scrise în HTML.

Sarcina principală a foilor de stil este separarea codului paginii și a acestuia aspect. S-ar putea să întrebi: „ De ce trebuie să faci asta?". Răspunsul este evident: " Pentru o mai mare mobilitate„. Într-adevăr, să presupunem că aveți un site web cu 100 de pagini (acest lucru este destul de puțin). Să presupunem că fontul textului obișnuit de pe site-ul dvs. este de 15 pt. Și imaginați-vă că ați vrut să îl faceți nu 15 pt, ci 17 pt, ceea ce va tu faci?

Daca nu folosesti CSS, atunci va trebui să corectați fiecare dintre cele 100 de pagini, în fiecare loc unde este introdus text, de la 15pt la 17pt. Desigur, acest lucru va dura câteva ore.

Dacă utilizați CSS, atunci trebuie doar să deschideți un fișier special cu stiluri, să găsiți dimensiunea fontului în acest fișier și să îl schimbați o singură dată de la 15pt la 17pt. Și site-ul tău va fi complet și imediat transformat. Tac deja cu privire la masa de posibilități de a crea soluții de design neobișnuite folosind CSS, care nu se poate realiza doar cu ajutorul HTML.

Sunt sigur că ați realizat deja avantajul CSSînainte de „amestecul” obișnuit de structură și stil.

Și acum apare întrebarea principală: cum să vă familiarizați cu această tehnologie miraculoasă și unde puteți afla despre aceasta, fără îndoială parte importantă crearea site-ului tău web astfel încât să ai mai mult mai multe informatii Despre: " ".

De fapt, ați găsit deja ceea ce căutați: în aceasta sectiune site-ul conține informații despre unde puteți afla despre toate selectoare şi Atributele CSS , de care veți avea nevoie cu siguranță atunci când creați un design de site web.

Curs complet pe HTML, CSS și aspectul site-ului web:

Există foi de stil în cascadă trei tipuriși, în consecință, sunt incluse în codul html în trei moduri.

1. Foi de stil interne. Setați elementele din interior folosind un atribut stile, De exemplu:

   Antet albastru

   Rezultatul tuturor acestor lucruri va fi:

   Antet albastru

   În acest fel, o foaie de stil poate fi atribuită fiecărui titlu și paragraf. Dezavantajul acestei metode este că tabelul este stabilit pentru un singur element, de exemplu antetul. Pentru toate celelalte titluri trebuie să vă creați propriile foi de stil, iar acest lucru este deja Timp pierdut. De asemenea, dacă doriți să setați noi foi de stil pentru întregul site folosind această metodă, va trebui să munciți din greu.

2. Foi de stil încorporate. În acest fel, foaia de stil este setată pentru întregul document HTML între etichete ... . De exemplu, dacă vrem să facem toate anteturile unei pagini web de culoare albastră, vom avea nevoie între etichete ... scrie urmatoarele:

   Dacă scrieți acest cod între etichete ... , atunci toate titlurile de primul nivel vor fi albastre. Cu această metodă, stilurile sunt specificate folosind etichete . De asemenea, etichetați , dar nu și site-ul în ansamblu.

3. Foi de stil externe. S-a instalat dosar separatși conectați-vă la documentul html folosind eticheta , care este plasat între etichete ... . Să luăm în considerare acest caz mai detaliat. Introducem următorul cod în notepad și îl salvăm ca fișier html.

   
   
   
   
   
   
   

   Antet de primul nivel

   
   

   Titlu de nivel al treilea situat în centrul documentului html

   
   

   Titlu de nivel șase, aliniat la marginea dreaptă a paginii web

   
   
   
   
   

   După aceasta creăm fișier nou cu urmatorul continut:

   H1 (culoare:albastru;)
   H3 (culoare: roșu;)
   H6 (culoare:verde;)

   Și salvează-l ca stil cu extensie *css. Vezi rezultatul. Acesta este fișierul nostru html cu anteturi. Să vedem acum cum funcționează acest design. Într-un document html cu titluri ne aflăm între etichete ... a scris acest rând:

   Aici folosind eticheta conectăm foile de stil la documentul html. Atribut href se referă la locația în care se află fișierul de stil; acesta este un atribut obligatoriu. Atribut tipștim deja că specifică tipul foii de stil. Atribut rel indică relația dintre fișierul inclus și acest document HTML. În cazul nostru, valoarea atributului rel="foaia de stil" indică faptul că am adăugat principal foaia de stil. Avantajul acestei metode de specificare a foilor de stil este că, dacă doriți să schimbați designul site-ului în ansamblu, trebuie să schimbați doar un fișier cu foi de stil.

Această secțiune a site-ului este dedicată în întregime două limbi pentru crearea unui site, și anume HTML și CSS. Aici puteți învăța limbi străine pas cu pas, puteți învăța totul, de la elementele de bază până la cele mai dificile momente.

Această secțiune este construită pe principiul studiu pas cu pas material, prin urmare, înainte de fiecare titlu al unei lecții despre HTML și CSS, există un număr corespunzător număr de serie lecţie. Acest lucru este firesc dacă vrei să înveți totul de la elementele de bază și să nu faci mizerie în capul tău. Dacă știți deja ceva despre limbajele HTML și CSS, atunci puteți găsi și aici cunoștințele care vă lipsesc sau să aprofundați ceea ce ați învățat deja.

Această secțiune conține lecții despre standardele de limbaj HTML5 și, respectiv, CSS3, dacă există versiuni mai noi ale acestor limbi, acestea se vor reflecta și în noile lecții din această secțiune și veți afla cu siguranță.

Probabil că fiecare persoană care s-a confruntat cu crearea unui site web cel puțin o dată în viață a auzit cu siguranță despre o astfel de combinație precum html și css, pot spune cu încredere că dacă vrei să faci singur site-uri, atunci nu te poți lipsi de cunoștințele acestora. două lucruri.

După ce ai primit concepte generale Există în mod clar o imagine ambiguă în capul tău despre ce este html și cred că acest lucru nu este surprinzător. Este timpul să treceți direct la exersare și să creați primul dvs. document HTML.

Ca în limbaj html, iar CSS are propriile caracteristici, reguli și structură. În această lecție vă voi spune despre conceptele de bază Limbajul CSS, despre structura sa, dispozitiv, iar pe primul îl vom face cu tine Tabel CSS stiluri și învățați cum să conectați o foaie de stil la un document html.

Selectorii din CSS sunt baza limbajului în sine, iar învățarea și înțelegerea lor este foarte importantă, așa că în această lecție vă voi spune despre mai multe tipuri de selectoare și vă voi descrie capacitățile acestora.

Foarte punct importantîn crearea unui site web, trebuie să lucrați cu text și, după cum înțelegeți, trebuie să puteți lucra și cu text în html și să știți ce etichete există și cum pot fi utilizate.

După ce ai aflat totul etichete html pentru a lucra cu text, acum este timpul să treceți direct la CSS care lucrează cu text, ceea ce vă va extinde semnificativ cunoștințele și capacitățile.

În CSS o cantitate mare tot felul de proprietăți de aspect convenabile și schimbătoare calitativ și continuăm să studiem Lucru CSS cu text și în această lecție, vom aprofunda subiectul lucrului cu text și vom analiza noile proprietăți ale textului.

Lucrul cu imagini atunci când creați de pe un site web este unul dintre punctele cheie, atât atunci când creați un design, cât și atunci când pur și simplu așezați sau scrieți orice materiale pentru site-ul dvs.

CSS extinde foarte mult capacitatea de a lucra cu oricare obiecte html, în această lecție aș vrea să vă povestesc în detaliu despre parametrii care pot fi aplicați imaginilor.

Astăzi vreau să vorbesc despre ce sunt stilurile, cum să creez un fișier de stil și cum să-l folosești.

CSS – Foi de stil în cascadă. Dosar special(sau mai multe fișiere), care este responsabil pentru designul paginii. Are o extensie *.css. Acest fișier conține parametri care vor fi aplicați anumitor elemente din pagină.

Să creăm un fișier de stil pas cu pas și să îi adăugăm mai mulți parametri pentru pagina web.

1. Să creăm o pagină HTML.

Am pus acest cod in el:

Cam asa arata pagina:

2. Al doilea pas este crearea unui fișier style.css

(acest lucru se face printr-un bloc de note: creați un fișier, faceți clic pe „salvare ca”, puneți toate fișierele în parametrul tip fișier, puneți style.css în nume). Nu vom scrie nimic în fișier deocamdată. Să-l salvăm.
3. Acum, pentru ca foaia de stil să funcționeze, trebuie să o atașăm la pagina HTML.

Acest lucru se face astfel:

ÎN eticheta HEAD trebuie să scrieți un rând:

Fișierul meu de stiluri se află în același folder cu fișierul Pagini HTML, așa că ofer doar numele. Dacă stilurile dvs. sunt, de exemplu, în folderul css, atunci ar trebui să scrieți href="css/style.css" .

Nimic nu s-a schimbat încă pe pagina noastră:

4. Acum puteți începe să scrieți stiluri.

Să deschidem fișierul style.css folosind Notepad și să scriem regula pentru antet în el:

H1 (dimensiune font: 18px; familie font: Arial;)

Reîmprospătăm pagina și vedem că nimic nu s-a schimbat.

Pentru ca modificările să aibă efect, trebuie să adăugați fișierul HTML la eticheta dorită attribute class="nume stil".

Să adăugăm atributul class="h1" la eticheta h1. Rezultatul ar trebui să se schimbe acum:

De fapt, stilul pe care îl specificăm printr-un punct, cum ar fi .h1, este universal. Putem aplica acest stil nu numai pentru h1, ci și pentru un paragraf, o listă, un element de listă și așa mai departe. Poți să încerci.

5. Acum să setăm un stil pentru un paragraf simplu. Să facem asta într-un mod diferit.

Să adăugăm următoarele în foaia de stil:

P (familie de font:Verdana; culoare:#cc0000;)

Să reîmprospătăm pagina. După cum ați observat, nu am adăugat un atribut de clasă aici, iar paragrafele s-au schimbat, ambele. Cert este că am introdus „p” în stilurile fără punct. Aceasta înseamnă că pentru întreaga pagină la care este legată această foaie de stil, am reatribuiți parametrii etichetei de paragraf. Indiferent dacă are Opțiuni suplimentare sau nu.

6. Acum să ne uităm la o altă modalitate de a atribui stiluri.

Să adăugăm următoarea linie la foaia de stil:

p#abc (familie font:Arial; dimensiune font:14px; culoare:#c0c0c0;)

După cum puteți vedea, al doilea paragraf s-a schimbat. Dacă vă amintiți, am atribuit id=”abc” acestui paragraf. Linia noastră din foaia de stil înseamnă doar asta această regulă va fi valabil doar pentru acele paragrafe care au id=”abc”.

7. Să începem cu lista.

Să adăugăm următoarele reguli la foaia de stil:

ul (chenar:1px solid #000000; culoarea fundal:#CCCCCC;)

li (dimensiune font: 16px; culoare:#FF0000; text-decor: subliniat;)

După cum puteți vedea, în jurul listei noastre a apărut un cadru, fundalul a devenit gri, iar elementele din listă sunt roșii și subliniate.

Indiferent dacă stilizați textul cu CSS sau cu elemente de formular, se procedează în același mod. Principalul lucru este să înțelegeți structura reguli CSS, iar restul sunt fleacuri.

Acesta este rezultatul final al muncii noastre.

Nu a fost niciun scop să facă din asta o capodopera, așa că te rog nu mă certa. Principalul lucru este că înțelegeți cum funcționează CSS.
__
Cu sprijinul Everalp.ru - lucrări de acoperiș.