In acest tutorial, vom emite pagina noastra web, pentru a face mai colorat (a se vedea figura 1).

Înainte de a trece la proiectarea de pagini, vor învăța cum să setați culoarea în web

1. Identificarea culorilor

La stabilirea culorilor pentru documentul HTML, puteți utiliza fie nume de culori sau coduri hexazecimale. Sistemul de codificare hexazecimal se bazează pe trei componente - rosu (Red), verde (verde) și albastru (albastru), prin urmare, numele său RGB, primele litere ale numelor acestor culori. Fiecare dintre componentele corespunde numărului hexazecimal de la 00 la FF (0 și 255 în zecimala). Aceste trei valori sunt apoi combinate într-o singură valoare, care este precedat de semnul #, cum ar fi # 800080, care corespunde o culoare purpurie.

culori sigure tabel pentru a proiecta site-ul dvs.

paleta de culori în condiții de siguranță asigură afișarea cea mai exactă potrivire pe diferite monitoare.

Paleta sigură este format din 216 de culori. Culorile sigure sunt întotdeauna constante la trecerea de la un browser la altul sau de la o platformă la alta, de la un ecran la altul, cu diferite posibilități de tsvetootobrazheniya și permisiuni.

Dacă oricare dintre cele trei hex diferite valori de 00, 33, 66, 99, SS sau FF, culoarea nu este sigur.

2. Definiția CSS

Pagina noastra web nu are încă de înregistrare, care se poate face în două moduri:

• în primul rând - înseamnă tabele stileyCSS (mai metoda progresivă și corectă)
• în al doilea rând - înseamnă atribute în tegovHTML.

Să începem imediat cu o metodă mai progresivă.

CSS - Cascading Style Sheets (caietul de sarcini stil ierarhic sau foi de stil în cascadă) nu înlocuiesc limbajul de marcare este ea însăși o tehnologie care este aplicată pe eticheta HTML.

Scop: vă permite să schimbați automat stilul elementului HTML pe toate paginile. De exemplu, folosim în zece pagini web titlu H1, care ar trebui să fie de culoare verde. Atunci când se utilizează foi de stil, vom fi spus odată culoarea verde și se aplică direct pe zece pagini.

Situația opusă: folosim atributul HTML este setat la zece pagini web din toate antetele H1 verzi, și anume prescris el de zece ori. Apoi ne-am decis să schimbe culoarea din titlu la roșu, atunci vom avea de zece ori mai verde corect la roșu.

Când se utilizează aceleași foi de stil, vom avea o data aceasta se face prin schimbarea verde antet la roșu în cele mai foaia de stil, și se va schimba în mod automat la toate cele zece pagini web.

O foaie de stil conține un set de elemente CSS, a cărui structură este diferită de cea a HTML element.

Inițial scris numele selectorului, de exemplu, H1, ceea ce înseamnă că toate proprietățile de stil sunt aplicate tag-ul

, urmată de bretele, care este scris de proprietate stil și valoarea sa este indicată după colon. valorile de proprietate Style sunt separate prin punct și virgulă, la sfârșitul acestui simbol poate fi omisă.

proprietate stil cu o valoare poate fi orice număr de loturi, ordinea lor nu contează.

CSS nu este sensibil, linii de transfer, spații sau tab-uri, astfel încât forma de înregistrare depinde de dorința de dezvoltator.

sau același lucru poate fi scris ca:

• H1 - selector, în acest caz, HTML element,
• font-family și font-size - proprietăți de stil,
• Arial - valoarea font-family,
• 14pt - valoarea font-size.

Modalități de a încorpora foi de stil în document HTML

1. O foaie de stil extern (stil asociat).
2. Pus în aplicare foaia de stil (stilul global).
3. Stiluri interne.

3. O foaie de stil extern (stil asociat)

Specifică stilul site-ului.

Acesta este un fișier text cu extensia css.

HTML-document ar trebui să aibă o legătură într-o foaie de stil extern folosind elementul , care este dispus în elementul :

În acest exemplu, foaia de stil este scris într-un fișier text style.css.

Studiu de caz 1

1. Deschideți un document gol în Notepad ++ și salvați-l în folderul public_html style.css numit. Vă rugăm să rețineți că, în caseta Tip a fost setat toate tipurile (Figura 2).

2. Deoarece CSS - este o altă tehnologie, etichetele HTML din fișierul .css nu sunt scrise deloc. Organizăm rubrica noastră „Catalogul de proiecte arhitecturale“ în fișierul main.html aliniat la centru, în font albastru Verdana, 20 pt înălțime font. Pentru a face acest lucru în fișierul css pentru a face următoarea înregistrare (Figura 3):

Să ne uităm la ceea ce este scris în conformitate cu sintaxa CSS-element pe care am discutat mai devreme în această lecție.

• h1 - selector, adică element HTML, la care se aplică;
• text-align: center; - stil de proprietate text-align (aliniere text) cu valoarea centru (la centru);
• Culoare: # 0000FF; - proprietăți de culoare stilistică (culoarea textului) cu valoarea de culoare albastru # 0000FF (valoarea este preluată din graficul de culoare);
• font-family: Verdana; - font stil de proprietate font-family, cu o valoare de Verdana;
• valorile de proprietate în stil sunt separate prin punct și virgulă;
• și așa mai departe, toate în conformitate cu sintaxa.

Pentru pagina web a „văzut“ foaie de stilul nostru și de a aplica proprietățile la-elementele HTML necesare pentru a stabili o legătură între fișier main.html și style.css. Pentru a face acest lucru, deschideți fișierul și main.html între tag-uri și se introduce un design ,așa cum se arată în figura 4.

De unde pot obține numele proprietăților de stil și valorile lor? Pentru a face acest lucru, există, de asemenea, ghiduri speciale și caietul de sarcini (dosar CSS de referință). Pentru a începe să utilizați ca un ghid de referință Sprav_CSS.doc mici.

4. Definirea unui h2 «proiect antet stil pentru casa ta viitoare“, cu culoare aliniate la dreapta, visiniu, font Verdana, font 16 pt ridicat. Pentru a face acest lucru, fișierul style.css face următoarea intrare pentru un selector h2 (Figura 6).

5. Verificați rezultatul în browser-ul, acesta ar trebui să coincidă cu cifra 7.

6. Punctele aranjați cu justificare, de culoare albastru inchis, font Arial, 12 pt ridicat. Pentru a face acest lucru, fișierul style.css face următoarea intrare pentru p selectorul (Figura 8).

7. De asemenea, face lumina de fundal albastru întreaga pagină web. Pentru aceasta se adaugă un corp selector pentru înregistrare (vezi Figura 9)

Cred că principiul folosind o foaie de stil extern este clar. În scopul de a executa cu ușurință și frumos svoiweb pagini, este necesar să se studieze pe proprietățile de stil director și valorile lor, și să încerce să practice. Cu cât vă amintiți aceste proprietăți și valori fără să acceseze directorul, mai mare profesionalismul tau.

1. Utilizarea Sprav_CSS.doc de referință, aranja antet stiluri

   în fișierul main.html. Proprietăți stil de a alege.

2. Pentru o listă de „Proiecte de case“ folosind stilul, schimba cifrele arabe la Roman. Parametrii rămași sunt opționale.
3. Pentru „case pătrat“ listă ca marker aplică spisok_1.gif imagine dosar html_css_2. Parametrii rămași sunt opționale.
4. Fundalul de pagini web, se aplică prin stiluri de imagine fon9.jpg dosar html_css_2.
5. Utilizarea stiluri de a face punctele de fonturi aldine.

Rezultate aproximative în Figura 11.

4. Clase în caietul de sarcini de stil

Clase în caietul de sarcini de stil sunt folosite dacă este necesar, pentru a determina numărul de soiuri de stil de un singur element. La determinarea clasei la tag-ul corect este adăugat un nume de clasă unică arbitrar, separate printr-un punct.

De exemplu, în textul nostru, există câteva titluri H1 și trebuie să le facă în culori diferite. Apoi, împărțiți stilurile ar trebui să fie după cum urmează:

După punctul este numele clasei, care trebuie să fie unic și nu poate consta numai din numere.

Acum, atunci când se utilizează tag-ul

în document, trebuie să instalați clasa atribut. pentru a indica ce fel de stil pe care doriți să se aplice:

Practica 2

1. fișier shablon.html Deschideți. Salvați-l sub un nume nou ploshady.html în folderul public_html.

2. Scrieți etichetele noua poziție „zona de case.“

3. Conținutul Copierea textului dintr-un fișier pătrat domov.txt de dosar html_ccs_2.

4. Stilurile va scrie la același fișier style.css. pe care am creat în lecția anterioară. Prin urmare, în fișierul ploshady.html, a stabilit un buchet cu această foaie, inserarea tag-uri și (Figura 12)

5. Formatul etichetei rubrici

și să alocați fiecare clasă la poziția sa (figura 13).

Ploshady.html Fișierul ar trebui să arate astfel (Figura 14).

6. Stilurile tabel style.css crea înregistrarea următoare (figura 15)

7. Verificați pagina web într-un browser. Rezultatele din Figura 16.

8. Este posibil să fi observat că noile noastre stiluri de înregistrare rubrica au un design repetitiv font-family: Verdana; text-align: left; font-size: 14pt. Astfel de construcții pot fi înregistrate o dată prin gruparea selectorii la care acestea sunt aplicate. În acest scop, este necesar să se precizeze selectorii separate prin virgulă, și apoi să prescrie bretele proprietăți generale. Apoi, stilurile noastre de masă pentru titluri vor fi după cum urmează (Figura 17):

Practica 3

Sub fiecare titlu în fișier ploshady.html este un text. Format paragrafe cu diferite clase. Utilizați diferite culori, aliniere și font. Numele de clasă trebuie să fie unice. Este de dorit să se utilizeze același nume pentru diferite selectoare. Una dintre opțiunile din Figura 18:

5. stil ID pentru un anumit element

Orice element poate fi atribuit un identificator ID. și apoi pus în conformitate cu acest element de orice stil, folosind id-ul.

Scrierea în fișier foaie de stil va fi după cum urmează

Acum puteți pune stilul în conformitate cu orice element din document HTML:

În acest exemplu, cuvântul de test - numele stilului. Numele poate fi oricare dintre litere, dar trebuie să fie unic, și anume nici unul dintre elementele din foaia de stil ar trebui să nu mai aibă un nume.

Studiu de caz 4

Facem un șablon pentru viitorul meniului site-ului nostru.

1. Deschideți fișierul shablon.html și salvați-l sub un nume nou menu.html în folderul public_html.

2. Conținutul paginii menu.html fișier, completați textul unui fișier din dosarul html_css_2 menu.txt.

3. Mijloace HTML-tag-uri de fișier în format după cum urmează:

4. În partea superioară a paginii web se introduce un logo (logo_myhouse.gif fișier). Rezultatul ar trebui să coincidă cu modelul de 19.

5. Pentru acest meniu pentru a face un stylesheet separat numit style_menu.css. Instalați un pachet între un fișier și un tabel de stiluri menu.html style_menu.css. Inserați o înregistrare între etichetele și în fișierul menu.html.

6. Crearea unui document gol și salvați-l ca style_menu.css în dosarul.

8. style_menu.css stil de fișier pentru aceste elemente de culoare albastru inchis, font Tahoma (Figura 21):

9. Pentru case pătrat grupului“, care include un titlu și o listă cu marcatori, se va utiliza numele maro id-stil. Ie codul va fi după cum urmează (Figura 22):

10. Stilul style_menu.css fișier pentru aceste elemente fac maro, font Times (Figura 23):

11. Și adăugați niște culoare de fundal fișier menu.html (Figura 24)

12. Ca rezultat, vom obține următoarea pagină web (Figura 25)

Ca urmare a acestui subiect, ați ar trebui să fie create următoarele fișiere: