Bazele css si html
Acest tutorial este recomandat pentru cei care abia încep să învețe înțelepciunea de a crea site-uri web. Acesta oferă conceptele de bază ale HTML si CSS. Pas cu pas urmând instrucțiunile din acest tutorial, aveți câteva minute pentru a impune un șablon pentru site-ul tau.
șablon de site-ul va vom face cu ajutorul unui aspect bloc. Eu folosesc tag-ul - «DIV».
Pasul 1 - Marcarea paginii web folosind tag-uri HTML
În primul rând, trebuie să marcați pagina noastră de web folosind tag-uri HTML. Numai atunci puteți trece la proiectarea site-ul folosind CSS foi de stil în cascadă.
HTML - hypertext markup language este. Cu aceasta sozdaetsyastruktura pagina de web. În acest scop, etichetele HTML. Acestea sunt închise în paranteze "<" и ">“.
Tag-uri sunt de obicei urmate într-o pereche - deschidere și închidere. Acesta din urmă diferă prin faptul că are între paranteze, după primul „/“ semn. (De exemplu:
). Cu ajutorul tag-uri vă defini ce va fi amplasat pe pagina web.tabel Cascading stileyCSS folosit mai târziu. Acestea sunt necesare pentru a se adapta conținutul etichetei în locația specificată, precum și pentru a da conținutul aspectul dorit.
Cele mai simple tag-uri de pagini web este:
Ulterior, este între etichetele
vă va plasa celelalte etichete pentru marcarea elemente ale paginii web.
tag-ul important pentru structurarea paginii este tag-ul
In cadrul acestei etichete puteți plasa alte etichete HTML care aveți nevoie pentru a crea conținutul site-ului (link-uri, text, imagini, etc.). Toate aceste elemente mai târziu vor găsi propriul stil folosind CSS foi de stil în cascadă.
Codul HTML al paginii va apărea așa cum se arată mai jos. Acesta este un exemplu de utilizare a div tag-ul:
După cum puteți vedea, fiecare div tag-am dat un anumit ID selector. Adică, fiecare separat bloca paginile noastre le-am dat numele său. Acest lucru este necesar pentru a mai târziu de unități de stil de setare în fișierul CSS, am putea distinge una de cealaltă unitate.
Există două tipuri de selectoare. ID - folosit pentru blocuri unice, cum ar fi cele găsite oriunde altundeva pe pagina nu se repetă. În timp ce selectorul CLASS - aplicat pentru a desemna unități repetitive.
De asemenea, am ajuns la concluzia toate blocurile din interiorul cutiei „container“. Acest lucru se face pentru a fi ulterior posibilitatea de a plasa întreaga noastră pagină așa cum ne-o dorim.
Pasul 2 - atașați un foi de stil CSS
După cum sa menționat deja, foaie de stil CSS specifică elementele de design ale unei pagini web. O puteți plasa în interiorul documentului HTML și atașați un fișier extern. In acest tutorial vom folosi ultima opțiune.
Dacă ați deschis deja pagina Web în browser-ul dvs., atunci nu este nimic nu a fost găsit. Acest lucru se datorează faptului că nu ați umplut unitățile lor sau orice conținut, și nici nu le-a dat nici o formă și culoare. Conținut pentru blocuri, puteți adăuga între etichetele corespunzătoare. Dar forma, locație, culoare, și alte simptome, vă rugăm prin blocuri de fișiere CSS.
Dar mai întâi, trebuie să-l creați. Sunați-l style.css și se află în același folder ca document HTML. După aceea, fișierul HTML, între etichetele, trebuie să adăugați următoarea linie:
Astfel, noi asociem cele două fișiere împreună. Acum, când se afișează o pagină Web browser-ul va utiliza foaia de stil corespunzător.
Pasul 3 - Se specifică stilului
Sintaxa CSS este format dintr-un selector, proprietate și valoare. Selector - o etichetă pentru care doriți să definiți aspectul dându-i o varietate de proprietăți. Proprietatea este definită printr-o varietate de atribute, care, la rândul lor, pot avea valori diferite.
Pentru a înregistra selectorii cu excepția corpul etichetei. utilizați „#“ sau „“. ei urmează înainte de numele selectorului. Primul este utilizat pentru a indica selektorID. în al doilea rând, respectiv selktorCLASS. Selectorul poate avea orice număr de proprietăți. Care sunt închise în paranteze "<> “.
proprietățile CSS și valori posibile:
Context (fundal) poate fi setat sau imagine color, sau ambele simultan. Pentru a afișa o imagine, trebuie să setați calea către acesta. Dacă este specificat culoarea de fundal, folosește sistemul hexazecimal (#FFFFFF pentru culoarea alb și așa mai departe.).
Proprietatea de culoare este utilizat pentru a determina culoarea textului.
font-family
- Această proprietate determină familia de fonturi în care va fi afișat textul. De obicei, sunt definite de doar trei tipuri de fonturi. Prin urmare, în cazul în care browser-ul nu poate afișa primul, el are o multime de a alege de la (Trebuchet MS, Arial, Times New Roman).
font-size - dimensiunea textului este dată în diferite măsuri, aici vom folosi pixeli.
marjă - specifică locația blocului. Ca punct de plecare în acest caz, poate acționa ca o fereastră de browser, iar granițele altor elemente ale paginii web. Din moment ce ne dorim să amplasați pagina în mijlocul ferestrei browserului, apoi scrie următoarele valori pentru proprietățile: 0px auto 0px auto. Înregistrarea poate arata mai ușor 0px auto. Numar de date atunci când valoarea țintă este în sensul acelor de ceasornic: sus - jos-dreapta - stânga. Având în vedere că în sus - jos, dreapta - stânga, suntem la fel, atunci nu este nevoie să le duplicat.
Lățimea - lățimea blocului.
float - o proprietate care ne permite să se poziționeze selectorul, în principal, pe partea stângă sau pe partea dreaptă.
Acum, adăugați un cod la fișierul nostru style.css de stiluri (deoarece ați setat deja, nu-i așa?):
fundal organism: # f3f2f3;
culoare: # 000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
>
fundal #container: #FFFFFF;
margin: 30px auto;
lățime: 900px;
înălțime: 1000px;
>
fundal #header: # 838283;
height: 200px;
lățime: 900px;
>
#navigation fundal: # a2a2a2;
lățime: 900px;
înălțime: 20px;
>
fundal #menu: # 333333;
float: left;
lățime: 200px;
height: 600px;
>
fundal #content: # d2d0d2;
float: right;
lățime: 700 de pixeli;
height: 600px;
>
fundal #footer: # 838283;
height: 180px;
lățime: 900px;
>
La momentul scrierii acestui articol, nu toate browserele afișează corect pagina web artizanale. Pentru a elimina acest inconvenient poate folosi puterea suplimentară, care trebuie plasat imediat în spatele unității de conținut.