În primul rând, să ne dăm seama ce este CSS. Toți știu că HTML este limbajul de marcare a hipertextului. Și CSS, la rândul său, este limbajul pentru vizualizarea acestui marcaj foarte bun. CSS este foi de stil în cascadă - foi de stil în cascadă. În HTML, există instrumente sale de design vizual, dar în multe privințe ele sunt capabilități CSS inferioare, și, dacă aveți mai multe pagini, vă imaginați-ai dorit dintr-o dată pentru a schimba culoarea tuturor titlurilor, trebuie să lopata toate fișierele HTML și CSS pentru a face acest lucru într-un singur line. Cred că numai acest argument va fi suficient pentru a începe studiul CSS.
CSS este folosită nu doar pentru designul vizual al paginilor marcate în HTML, ci și pentru paginile scrise folosind limbajul de marcare XHTML, de asemenea excelent pentru procesarea documentelor XML.
Din moment ce suntem doar începători chiar începe cu elementele de bază, în viitor, va trebui să meargă adânc în această tehnologie, cum CSS este chestii destul de puternic și într-un singur articol toate pur și simplu nu se potrivește, așa că împărțim studiul CSS pentru mai multe lecții, cu treptată adâncind în aceste foi de stil cascadă.
Să mergem mai departe la practică și vom începe cu o sintaxă simplă. Se pare ca aceasta:
Elementul de design este numit selector, dar pentru simplitate l-am arătat exact așa.
Pentru a înțelege sintaxa, să dăm un exemplu simplu:
în cazul în care,
p este un tag paragraf;
culoarea este o proprietate. în cazul nostru este culoarea;
roșu este valoarea, în cazul nostru este roșu.
Și ca rezultat, textul din toate paragrafele va deveni roșu.
Cu sintaxa puțin gândită, hai să trecem la punctul în care totul este scris, adică conectați CSS la documentul nostru HTML.
Există mai multe moduri:
1. Direct în elementul document în sine prin intermediul atributului de stil. de exemplu, dacă traduceți exemplul de mai sus în documentul în sine și îl descrieți în elementul în sine, acesta va arăta astfel:
Această metodă nu este convenabilă deoarece, din nou, dacă aveți multe documente, va trebui să modificați toate aceste documente și în fiecare element.
2. Un mod ușor mai convenabil este să utilizați css atunci când foaia de stil este descrisă în documentul în sine. Secțiunea capului utilizează elementul de stil, care descrie foaia de stil în sine. De exemplu, vom folosi din nou exemplul de mai sus, dar cu această metodă:
Se va întîmpla același lucru, care a fost mai mare. Această metodă este uneori utilizată, dar nu este încă perfectă.
3. Cea de-a treia metodă utilizează importul documentului css. Am întâlnit rareori aplicarea acestei metode, poate că nimeni nu o folosește, dar trebuie să știți despre ea. Aici, foaia de stil este deja descrisă într-un document separat.
în cazul în care,
css-file.css este un fișier css unde este descris foaia de stil, dacă este într-un alt folder, atunci trebuie să scrieți calea către acest fișier.
4. Cea mai obișnuită modalitate de a utiliza o foaie de stil cascadă este să atașați un fișier css documentului. Această metodă este folosită de aproape toată lumea, deoarece este cea mai convenabilă. Conectează css-ul prin tag-ul de legătură în elementul cap.
în cazul în care,
css-file.css este fișierul în care este descrisă foaia de stil, din nou dacă fișierul se află într-un folder diferit de locația documentului însuși, atunci trebuie să scrieți calea către el.
Așa că, odată cu conexiunea CSS, ne-am dat seama că vom trece la selectori, adică metode de căutare pentru cele mai multe dintre aceste elemente în document, cu alte cuvinte, dacă nu aveți nevoie ca toate punctele au fost în roșu, în cazul de mai sus, ca de exemplu, în unele paragrafe, el a fost negru, în timp ce celălalt a fost roșu. De fapt, sunt nouă, dar pentru moment vom considera cele mai populare.
Cu selectorii de elemente (etichete), am văzut deja exemplele de mai sus, aplicate tuturor etichetelor:
p este selectorul de elemente, pot exista aproape orice etichete de documente HTML, cum ar fi corp, div, tabel, tr, td, h1 și multe, multe altele.
În opinia mea, cele mai populare tipuri de selectori utilizează clase și identificatori. Cu alte cuvinte, când marcați documentul, marcați elementele documentului cu ajutorul identificatorilor (care sunt unici în întregul document) sau le aduceți în aceeași clasă (poate fi repetată în document). Ceea ce a fost mai clar, vom da un exemplu în care vom avea două paragrafe, dintre care unul va fi roșu, iar celălalt unul negru.
Textul CSS va fi:
Textul documentului va fi următorul:
Pentru practică, conectați oricare dintre stilurile stilului de stil cascadă în documentul dvs. personal.
Probabil ați înțeles deja că identificatorii din css sunt notați cu simbolul # (#idred) și cu clasele care folosesc numele și clasa (.black).
În documentul HTML, ele sunt identificate prin intermediul etichetelor corespunzătoare: id pentru identificator și clasă pentru clase.
Textul documentului HTML:
După cum puteți vedea în link-ul de care aveți nevoie, fontul a devenit de 20 de pixeli.
Acum, ia în considerare și popularul tip de selectori care sunt selectorii descendenților. Cu alte cuvinte, specificați că acest element, identificator sau clasă are acești descendenți, adică. este în unul sau alt element care, de exemplu, are acest sau acel id sau clasă. exemplu:
Text css:
Textul documentului HTML:
Vedeți aici că paragraful care este în elementul div a devenit verde și toate paragrafele care nu sunt în elementul div vor deveni roșii.
Trebuie remarcat faptul că este necesar să selectăm descendenții de la dreapta la stânga, de exemplu, mai întâi avem un descendent (div), atunci vine elementul nostru necesar (p).
După cum puteți vedea, astăzi am folosit doar două proprietăți: font-size și color. De fapt, există o mulțime de ele pentru astăzi Cred că suficient, în lecțiile următoare, vom continua să ia în considerare alte proprietăți și mult mai mult!
Sper că aveți o mică înțelegere a acestor foi de stil CSS cascadă. În viitor, lecțiile vor fi mai dificile! Pentru a vă asigura că CSS este un lucru foarte interesant, aici este un exemplu al unui site culinar în care meniul principal este implementat numai utilizând HTML și CSS, fără scripturi java. Sper că vom învăța cum să facem acest lucru în viitor.
Articole similare
-
Un manual pentru studenții bazei de programare pentru pascal avs - document - page
-
Bazele creării interogărilor în acces 2018, programare pentru începători
Trimiteți-le prietenilor: