Bazele html si css pentru un incepator, este simplu și clar
Conectarea unui foi de stil CSS
Acum, să ne uităm la modul în care puteți face o conexiune la documentul stylesheet HTML.
După cum știm din lecția anterioară. pentru aceasta este eticheta specială:
care este introdus în secțiunea
html-fișier și indică locația fișierului foaie de stil.Deoarece există mai multe moduri de a conecta două stiluri.
- foaie de stil încorporat
- stiluri inline pentru elementele
foaie de stil încorporat
Acesta poate fi încorporat direct în documentul HTML în secțiunea
În acest caz, stilurile ar trebui să fie înfășurat etichetă
Acest lucru este de a se asigura că browser-ul se înțelege că foaia de stil.
exemplu:
Această abordare este rar folosit, deoarece este înțelept să facă stiluri într-un fișier separat, dar poate, de asemenea, uneori, să fie util.
stiluri interne pentru elemente HTML
Această conexiune ne-am atins deja într-una din lecțiile pe HTML.
Acest lucru este atunci când eticheta pentru un stil specificat imediat.
exemplu:
O astfel de metodă este folosită mai des decât cel precedent, în principal, pentru a evidenția părți ale textului, etc.
Fiecare metodă de conectare se aplică individual pentru fiecare document HTML.
Practic foi de stil sunt realizate într-un fișier separat.
Tabelul încorporat poate fi utilizat în cazul în care stilul un pic și să le facă într-un singur fișier nu are nici un sens.
stiluri inline pentru elementele utilizate atunci când este necesar să se aloce o anumită parte a textului, sau pentru a seta proprietăți pentru un singur element. În acest caz, este mai ușor să specificați stilul inline pentru un element, mai degrabă decât să-l specificați într-un fișier separat.
Acesta poate fi, atâta timp cât nu este foarte clar, dar eu sunt sigur că, după un timp vei înțelege.
Principalul lucru face mai multe exemple practice.
aspect modular în DIV CSS
Acum, ia în considerare acest concept important ca un DIV aspect modular, prin care site-urile sunt create aspecte.
În același timp, să consolideze cunoștințele unităților CSS.
După cum știți, în documentul HTML, textul și alte elemente de conținut plasa pe pagina dvs. în două moduri diferite.
2. Utilizați blocuri de etichete
aspect tabular este folosit în principal pentru afișarea datelor tabelare și încă mai puțin pentru aspectul site-ului. Deoarece are un HTML-cod voluminoase.
Proprietatea indexului z CSS. Pagina tridimensională
Ne sunt folosite pentru a stabili coordonatele două axe X și Y, sunt dar cu CSS puteți seta și o a treia coordonate pe axa Z. De aceea, eu numesc aceste pagina tridimensională. Această proprietate a indexului z.
Folosind această proprietate, și setați straturile (coordonate) de pe pagina.
Așa cum poți face cu indexului z:
Aici va arăta ca fișierul CSS:
.Poziția dama: absolută;
top: 150px;
stânga: 150px;
z-index. 1;>
Poziția rege: absolută;
top: 200px;
stânga: 210px;
z-index. 2;>
o poziție: absolută;
top: 250px;
stânga: 270px;
z-index. 3;>
Și adăugați în HTML:
Nimic complicat. Cu text pe imagini pot fi aplicate cu ajutorul z-index, sau vice-versa. Puteți face textul cu efect de umbră, în general, în măsura în care imaginația vor fi suficiente.
Probabil suficient. Tren, face propriile lor pagini, utilizarea cunoștințelor CSS.
Sfaturi utile cu privire la CSS
În viața noastră, aproape toți oamenii doresc să facă unele lucruri mai repede, sau cel puțin doriți. Tu ar dori, probabil, să aibă site-urile preferate de încărcare la momentul respectiv.
Așa că te sfătuiesc să reducă intrarea în CSS. Din aceasta, de asemenea, depinde de viteza de descărcare. Desigur, dacă nu una la două pagini este.
Iată câteva sfaturi:
Culoarea în valoare hexazecimală poate fi redus astfel:
# 000000 # 000
#FFFFFF #fff
# 333333 # 333
Coordonate zerouri c:
În cazul în care o clasă sau două proprietăți mai mici:
În această lecție considerăm un alt punct important legat
cu blocuri. „Pluteste.“
Folosit pentru a plasa blocuri într-o singură linie. Acesta este adesea folosit în dezvoltarea de site-ul web design modern. Vă sfătuiesc să citiți această proprietate importantă.
Materie:
stânga - bloc este apăsat spre stânga, iar textul și orice altceva va curge în jurul ei spre dreapta.
dreapta - blocul va fi apăsat spre dreapta, acesta va curge în jurul valorii de pe partea stanga.
nici unul - plutească pe proprietate.
În primul rând, să ne imaginăm o locație simplă implicită în cazul în care blocurile sunt plasate sub unul pe altul.
Ia patru blocuri și să facă fiecare stil poate fi la fel.
.Înălțimea Box1: 100px;
lățime: 100px;
frontieră: albastru solid 2px;>
Și așa mai departe pentru .box2. box3 și .box4
STÂNGA
STÂNGA
DREAPTA
DREAPTA
În blocuri care scrie valorile FLOAT cere mai târziu.
Pentru claritate, vom scrie pentru primele două pe stânga și dreapta pentru ultimele două.
Săgețile indică locul în care sunt mutate blocuri, atunci când este setat să plutească.
În final, se pare ca acest lucru:
În cazul în care documentul HTML după blocuri pentru a adăuga un paragraf la text, se va lua o poziție între blocuri. exemplu:
Ce putem face dacă vrem mai mult și a pus blocuri în partea de jos?
Pentru a face acest lucru, există mai mult de o proprietate.
Aceasta este o caracteristică complicat permite de a pune blocuri de sub blocuri.
Materie:
stânga - Revocă înfășurați de la marginea din stânga a elementului
dreapta - Revocă curgă în jurul marginii din dreapta a elementului
ambele - plasarea blocului de mai jos toate blocurile plutitoare și anulează complet folie dat proprietatea float.
Mai multe Davyte crea două blocuri de 200x200 pixeli. În stiluri CSS pentru a adăuga:
.Înălțimea bigbox1: 200px;
lățime: 200px;
frontieră: 2px solid albastru;
float: right;
clare. dreapta;>
.Înălțimea bigbox2: 200px;
lățime: 200px;
frontieră: 2px solid albastru;
float: left;
clare. la stânga;>
Obținem acest lucru:
Structura a devenit deja ceva similar, nu-i așa?
Blocurile pot fi orice: text, liste, imagini, link-uri, etc.
Tren, încercați, și tot ce primești.