»ASP pentru incepatori
»Acasa
»ASP pentru incepatori
Designul elegant al paginilor Web
Una dintre condițiile importante pentru crearea unui site foarte bun este designul tuturor paginilor Web care alcătuiesc structura sa într-un singur stil. La prima vedere, o astfel de sarcină este banală. Într-adevăr, ceea ce poate fi mai simplu este să setați aceleași valori pentru toate proprietățile vizuale ale obiectelor. Cu toate acestea, cu un volum mare de pagini web incluse în proiect, stabilirea tuturor valorilor poate dura destul de mult timp. Aș dori să automatizez aceste activități. Și aici tehnologia cascadelor de stil - CSS (Cascading Style Sheets) vine la salvare.
În cadrul acestei tehnologii, este creat un fișier extern separat, care conține reguli pentru afișarea unei anumite etichete în browser. Apoi, fișierul CSS a fost conectat la fiecare pagină Web. Astfel, putem obține cu ușurință un stil uniform pentru fiecare pagină web care face parte din site.
Prima versiune a standardului CSS conținea reguli pentru afișarea textului paginilor Web, plasarea conținutului text pe pagină și câteva detalii despre afișarea paginilor și celulelor de tabelă. A doua versiune a adăugat câteva caracteristici noi, cum ar fi efectele vizuale sau numerotarea automată a elementelor.
Fișa de stil este un fișier text simplu format dintr-un format specializat. În caietul de sarcini acest format are textul de desemnare. Fișierul CSS înregistrează regulile de afișare pentru anumite etichete. Un exemplu de scriere a unei astfel de reguli poate arăta astfel: a
Această regulă indică conținutul textului pentru toate etichetele <а>, care în HTML sunt desemnate hyperlink-uri, vor fi afișate folosind orice font disponibil din familia Arial, albastru marin (navy).
După numele etichetei în paranteze curbate, se scrie regula pentru procesarea conținutului textual. Să ne uităm din nou la exemplul nostru.
a (culoare
După cum puteți vedea, mai multe reguli pot fi scrise în paranteze curbate, separate de un caracter punct și virgulă. Regula în sine este alcătuită din două părți. Mai întâi, numele parametrului de afișare este scris, de exemplu, tipul fontului aplicat și apoi, după colon, scrieți valoarea acestui parametru. În exemplu, toate acestea sunt destul de vizibile.
Așa cum am văzut, în bretele putem scrie mai multe reguli pentru afișarea simultană a conținutului. Dar uneori se întâmplă ca aceleași reguli de cartografiere să fie stabilite pentru mai multe etichete simultan. Nu putem specifica aceleași reguli pentru fiecare etichetă separat, dar combinăm etichetele într-un singur grup și setăm simultan regulile de afișare pentru toate etichetele. Numele combinate ale etichetelor sunt separate de virgulă. Acest lucru poate fi văzut din exemplul următoarei construcții:
Această regulă specifică faptul că conținutul text al hiperlegăturilor și titlurilor primului nivel va fi afișat în albastru închis.
Știm că numele complet al CSS este o foaie de stil cascadă. De ce se numesc foi de stil, am înțeles deja. Există o întrebare bine întemeiată, ce are legătură cu cascada și ce înseamnă chiar asta?
Industria de calculatoare este un ritm foarte rapid de dezvoltare. O consecință a acestui fapt este o multitudine de tendințe și tendințe foarte diferite. Unele dintre ele vor muri în curând, iar altele vor trece de la categoria tendințelor la rang de ideologie. O astfel de tendință este reutilizarea codului și moștenirea soluțiilor create anterior. Pentru CSS aceasta are cea mai directă relație.
Nu este necesar să folosim o singură foaie de stil pentru fiecare document. Putem să le conectăm mai multe simultan. De exemplu, atunci când adăugați noi documente pe site, va trebui să adăugați noi reguli de afișare, să creați noi stiluri. Uneori, acest lucru se face prin corectarea unei foi de stil existente, însă nimeni nu ne interzice să creăm un fișier suplimentar și să îl conectăm la document. Așa cum am spus, putem conecta mai multe mese deodată.
În fișierul suplimentar style2.css se declară regulile de cartografiere pentru elementul și elementele parțiale după cum urmează:
Acum, dacă conectăm aceste două fișiere de stil la documentul HTML, se dovedește că elementul element are două reguli diferite de afișare. În primul stil Mai puține file specifică faptul că elementul de text „va apărea în albastru, iar a doua regulă specifică un fișier care a folosit pentru a afișa conținutul aceluiași element este deja verde. Ce culoare va fi efectiv utilizată depinde de ordinea în care fișierele cu foi de stil vor fi atașate documentului XML.
Ultima regulă este folosită întotdeauna. Anume, dacă conectăm mai întâi fișierul Style Less și apoi fișierul style2.css, atunci conținutul text al elementului va fi afișat în verde.
Dar putem seta un modifier special pentru regulile de afișare, ceea ce va determina browserul să ignore ordinea conectării tabelelor de stil. Deci, dacă ne atribuim orice reguli de inregistrare prin modificator de important, apoi pentru a afișa conținutul text al elementului este de a folosi această regulă, indiferent dacă acestea au fost conectate în continuare reguli pentru afișarea aceluiași element. Cu alte cuvinte, utilizarea de cuvinte cheie importante vă permite să setați reguli pentru nivelul privilegiat și scoateți-l din ierarhia foii de stil în cascadă. Să luăm în considerare un exemplu. Să luăm un fișier familial numit Stil Less și să-l modificăm puțin. Obținem următorul set de reguli de cartografiere:
Acum, în ordinea conectării fișierelor de stil și stil2.css, pe care le-am considerat anterior, conținutul textului articolului va fi afișat în albastru.
Din exemplu, vedeți ordinea utilizării modificatorului important. Dacă trebuie să facem o regulă privilegiată, vom posta un semn de exclamare după ea și vom scrie cuvântul cheie important separat de un spațiu.
Cu toate acestea, este foarte posibil ca în mai multe fișiere CSS să existe reguli de cartografiere pentru același element, iar mai multe dintre ele au un modificator important. În acest caz, se formează o ierarhie suplimentară din aceste reguli privilegiate și se utilizează pentru a afișa cea mai recentă regulă conectată.
Firește, pentru a aplica cu succes tabele de stil, trebuie să cunoașteți numele parametrilor de imagine. Nu vom descrie în detaliu toți acești parametri, descrierea completă a CSS va ocupa prea mult spațiu, astfel încât cei care nu sunt familiarizați cu foile de stil vor trebui să vă sfătuiască să găsiți literatură în care foile de stil sunt examinate în detaliu. Cu toate acestea, apendicele listează cele mai utilizate opțiuni de afișare.
De fapt, un dezvoltator de aplicații ASP.NET poate seta parametrii pentru afișarea conținutului paginii web fără fișiere de stil, utilizând în mod direct proprietățile acestor sau alte elemente. Dar atunci trebuie să scrieți prea multe coduri. O astfel de decizie nu poate fi numită elegantă. Să încercăm să folosim foile de stil.
Există două posibilități de utilizare a tehnologiei CSS. Putem seta valoarea atributului de stil pentru acele etichete de pagini HTML care vor fi șterse sau să atașăm un fișier extern care conține definiția foii de stil. Din păcate, ASP.NET nu vă permite să specificați o foaie de stil care se conectează la o pagină Web ca proprietate a paginii. Prin urmare, vom crea o foaie de stil, în care regulile „display-ul va fi asociat nu cu numele tag-uri, și un nume de selectoare de clasă. Pentru fiecare componentă vizuală a Web-ului; Formează proprietatea CssClass, în care este specificat numele selectorului de clasă.
Deci, în primul rând, vom crea un fișier CSS. Pentru a include un fișier de stil extern în proiect, ar trebui să executați comanda de meniu Project | Adăugați un element nou. După executarea acestei comenzi, se afișează caseta de dialog Adăugare element nou. În grupul Șabloane, selectați elementul Sheet Style. După aceasta, un proiect suplimentar va fi inclus în proiect.
În mod implicit, foaia de stil generată include piesele pentru definirea stilului destinat etichetei
, adică, în această regulă putem specifica reguli de cartografiere care vor afecta întregul document.Pentru a adăuga o nouă regulă de proiectare la foaia de stil, dați clic pe butonul Adăugați stilul de stil din bara de instrumente Stil foaie. Aceasta va activa caseta de dialog Add Style Rule, a cărei aspect este prezentat în Fig. 3.21.
Deoarece intenționăm să creăm reguli pentru procesarea conținutului unei pagini Web, folosind clasele de selector, merită să alegeți butonul Nume de clasă. În câmpul de introducere a textului asociat cu acesta, introduceți numele clasei selector pentru care vom crea regula de afișare. După introducerea numelui clasei, făcând clic pe butonul OK va transfera piesa de prelucrat în codul foii de stil pentru a crea regulile pentru crearea clasei cerute.
După ce creăm toate semnele pentru clasele noastre, putem crea reguli pentru ele. Pentru aceasta, plasați cursorul pe selectorul pe care vom impune condițiile de proiectare și faceți clic pe butonul Build Style. Activează caseta de dialog a constructorului de stil interactiv Style Builder (Manager stiluri)
Utilizând caseta de dialog Stylesheet, puteți seta reguli de afișare pentru fiecare clasă de selector în modul vizual. Cu toate acestea, nimeni nu interzice dezvoltatorului să scrie manual codul de reguli CSS. Totul depinde de preferințele personale. Dar trebuie remarcat faptul că, atunci când utilizarea Builder stiluri caseta de dialog puteți vedea întotdeauna modul în care textul va arăta în vedere normele stabilite de mapările ca în caseta de dialog există un panou care prezintă un exemplu de text în forma în care va arăta în versiunea finală pe Pagină web.
font-family: 'Arial Negru;
După crearea fișierului CSS, trebuie să îl conectați la pagina noastră Web. Pentru a face acest lucru, mergeți la pagina Web dezvoltată, la care vom conecta foaia de stil și vom executa comanda de meniu Format | Stiluri de documente (Format | Stiluri de documente). Această comandă activează caseta de dialog Styles Document. În această fereastră, trebuie să faceți clic pe butonul Add Style Link, care vă permite să conectați un fișier de stil existent la pagina Web. Pentru aceasta, va fi utilizată caseta de dialog Select Style Sheet, a cărei aspect este prezentat în Fig. 3.23.
Totul, acum fișierul de stil este atașat la această pagină Web. În același timp, în codul său HTML, în secțiunea antet a documentului a apărut o linie de tipul următor:
Acum este suficient doar să conectăm tabelul CSS creat la toate paginile Web ale proiectului, să setăm valorile proprietăților cssciass pentru componentele necesare și să rezolvăm sarcina de a modela site-ul.