Tipare pentru începători

Toate site-urile sunt păstrate timp de cel puțin doi piloni: HTML si CSS. Elementele de bază ale HTML, am discutat deja, este acum rândul CSS. Ce este această „fiară“ și ce mănâncă?

Știi că pentru HTML-tag-uri au atribute diferite, care pot fi folosite pentru a controla afișarea în browser. La începutul internetului, care a fost de ajuns, dar în timp, a devenit clar faptul că codul HTML a devenit prea complicat și confuz, din cauza abundenței de atribute. Dacă ar fi fost doar în textele de proiectare, atunci ar fi fost nu așa de rău. Cu toate acestea, site-ul devine mai complex în design, și este necesar un HTML-cod foarte complicat.

Apoi am venit cu de a folosi numai HTML pentru a descrie structura și modul de a face dintr - face o unitate separată - CSS.

De ce învăța doar stilul?

Aici este valabil: în alte tag-uri HTML manuale a studiat număr foarte mare de ore. Dar eu cred că etichetele pot studia în liniște modul în care, fără a strecurat. Voi spune mai mult: în HTML-codificare, avem nevoie de literalmente zeci de tag-uri, care sunt memorate în curs. -)

Un punct important - nu toate browserele sunt la fel de utile. Ei bine, dacă nu cu exactitate, atunci există doar un singur browser-ul problematic - este Internet Explorer (IE). Astăzi există HTML5 și CSS3 standardul. Dar IE într-adevăr nici un sprijin pentru ei, astfel încât webmasteri trebuie să meargă la diverse trucuri sau să renunțe la noile caracteristici ale IE restricții. Din fericire, IE parts este redus puțin câte puțin, și în cazul în care dintr-o dată pentru o înțelegere greșită a utiliza browser-ul IE, descărcați instantaneu orice browser modern: FireFox, Chrome sau Opera!

atributul style

Prezentarea suficient, du-te direct la stil!

În aproape orice HTML tag-ul are un atribut stil. în care ambele postat css-stiluri.

Vedem o etichetă normală și atribut de stil. Stiluri au sintaxa lor:

„Valoarea de proprietate“, împărțit de două puncte și specifică ce trebuie să se schimbe în acest HTML-tag. Dacă specificați un număr de proprietăți, acestea trebuie să fie separate prin punct și virgulă.

În exemplul nostru, folosind un SPAN tag-ul șir de caractere. Aceasta este o etichetă universală, și un standard nu are nici o influență asupra designului.

Dar, în stilul vom aduce acest text arătând roșu (culoare: roșu) și caractere aldine (font-weight: bold).

Sunt sigur că ați testat deja acest cod în MaxSite CMS.

Încercați să aplice aceste stiluri la deja cunoscute alte tag-uri.

Metode de stiluri de conectare

Am văzut un exemplu de stil intern - un stil pe care le specificați în mod direct în atributul stil. Când efectuați intrările de text în site-ul, astfel de stiluri sunt foarte confortabile. Puteți utiliza orice opțiuni de design, care va veni la un cap.

Cu toate acestea, uneori, aceste stiluri pot fi destul de greoaie. De exemplu, pe pagina pe care dorim să utilizați mai multe H2-antete pentru decorare. Atunci când se utilizează stiluri inline trebuie să le copiați de la un titlu la altul. Nu este foarte convenabil.

Pentru astfel de cazuri, puteți utiliza stiluri predefinite. De exemplu, putem defini un set de reguli myred. și apoi doar punctul în atributele etichetei. Acest atribut este numit clasa:

clasa myred în sine trebuie să fie definit undeva în prealabil, astfel încât browser-ul știa despre asta.

Aceste stiluri sunt stabilite undeva la începutul HTML-document folosind tag-ul STYLE.

În acest exemplu, am cerut clasa myred. care a subliniat în eticheta spanclass.

Notă lucrarea sintaktis STYLE stiluri. Schema generală este după cum urmează:

Toate proprietățile sunt specificate în acolade. sintaxa în sine este exact la fel ca și în stil. Dar dial - aceasta este ceea ce se va aplica proprietățile.

În CSS, există mai multe tipuri de selectoare. Cea mai simplă este tag-ul de selectare:

De exemplu, puteți face acest lucru:

Asta este, ne-am stabilit proprietățile pentru tag-ul SPAN. Și rețineți că punctul clasa nu mai poate - browser-ul aplică stiluri pentru toate etichetele SPAN.

În primul nostru exemplu am indicat selectorul „teg.klass“:

browser-ul IE pentru a aplica stilul numai în etichetele cu clasa specificată.

Luați în considerare un alt exemplu:

Primul text va deveni roșu, al doilea albastru, iar al treilea verde.

Când specificați stilul uneori, este posibil să omită tag-ul:

În acest caz, stilul va fi aplicat la toate etichetele. care a listat clasa necesară.

stiluri În cazul în care ar trebui să fie amplasate

Solicitarea de stiluri așa cum facem noi acum nu este destul de drept în corpul de înregistrare. Browserele nu au nimic împotriva un astfel de proces, dar CSS standard si HTML recomandă să o facă la începutul documentului. Prin structura de pagini HTML vom obține un pic mai târziu, de acum amintesc doar că MaxSite CMS css-stiluri pot fi plasate într-un șablon de configurare - Efectuarea.

Avantajul acestei metode este faptul că stilurile poate fi setat o singură dată și apoi utilizat pe toate paginile site-ului.

Plătiți numai atenția că stilurile sunt necesare pentru a indica, fara ambalaj STYLE - MaxSite CMS face acest lucru în mod automat.

BB-Code - aceste tag-uri HTML

Acum, înapoi la HTML-tag-uri. Nu spun asta doar pentru a învăța HTML este destul de simplu, mai ales dacă chiar în fața ochilor tăi, există indicii. )

Luați în considerare cu atenție acest manual și să acorde o atenție la linia BB-HTML code-reprezentare. De exemplu, codul BB rândul său, pentru a eticheta BOLD B.

Puteți specifica diverși parametri, cum ar fi css-stiluri pentru BB-coduri.

Și apoi să rețineți doar un singur lucru important - dacă utilizați BB-cod, nu va trebui să utilizați încadrare HTML. MaxSite CMS singur se va ocupa de toate BB-codurile și le convertește la codul HTML corect.

BB-cod ​​este folosit pentru a simplifica proiectarea textului. În plus, aceste coduri nu reduc lizibilitatea textului, cum ar fi folosind HTML + CSS.

Acum, înapoi la stiluri. )

stiluri externe

Mai există o modalitate de a conecta css-stiluri - dintr-un fișier extern. De fapt, întregul aspect al șablonului și va fi într-un fișier css-. Între timp, nu avem nevoie să vă faceți griji cu privire la aceasta, deoarece MaxSite CMS are grija de toate de rutina pentru conectarea fișierelor. Rămâne să fie creativi numai. )

helperi Ready (ajutoare)

În MaxSite CMS în default-șablon într-un fișier css-conectat deja prezente mici css-stiluri pe care le puteți utiliza pentru nevoile lor. De exemplu, există clase pentru culoarea textului:

O clasă similară poate fi folosită pentru culoarea de fundal:

Luați în considerare toate stilurile care nu sunt încă parte a sarcinii noastre, dar le puteți examina în fișierul stil all.css (la sfârșitul Ajutătorilor secțiunii), care este în directorul / css / default-șablon.

În cazul în care sunt fișiere MaxSite CMS

Dar acum trebuie să înțelegem unde principalele fișierele și directoarele MaxSite CMS server (disc). Totul este simplu: principalul director de aplicație / maxsite /.

Prin urmare, implicit-șablon este într-un subdirector al șablonului - în mod implicit. calea completă va fi: application / maxsite / template-uri / default /. Este deja în căutarea pentru fișierul.

CSS de referință

Proprietăți de stil și destul de mult în acest moment nu avem nevoie să le memoreze. Treptat, vom stăpâni tot ceea ce avem nevoie, dar trebuie să scrie o trimitere la referința CSS românească. care pot fi utile în viitor.

Culorile în CSS

Acum, un pic de practică. Ca un instrument de predare, ia în considerare unele css-proprietăți care sunt cel mai des folosite pentru decorarea textelor. Unul dintre ei - culoarea culoarea textului.

Putem vedea numele culorii, precum și reprezentarea numerică (începând cu #). Ambele aceste idei sunt identice și care opțiune de a utiliza, vă decideți. Cel mai frecvent pentru principalele culori (cele mai de bază) (roșu, alb, negru, etc.) utilizate de numele culorii. Pentru complexe, cu / nume lung complicat - reprezentarea numerică.

Reprezentarea numerică a culorii

Numărul este o combinație de trei componente de culoare ale R (roșu), G (verde), B (albastru). Ai auzit despre modelul RGB. care este utilizat în televizoare, monitoare, etc. Culoarea obținută prin amestecarea acestor trei componente. Fiecare componentă poate avea o intensitate între 0 și 255. De exemplu, pentru roșu: R = 255, G = 0, B = 0.

HTML-ul adoptat (este inventat programatori;)) pentru a specifica culoarea în 16-ary sistem de calcul, unde 0 = 0 și 255 = FF. Amintiți-vă, în general, nici o semnificație specială, deoarece toate programele moderne afișa valoarea culorii imediat, în toate cazurile.

Valoarea de culoare este format din trei perechi, în cazul în care prima este R, al doilea - G, al treilea - B: #RRGGBB. Acum, se uită la acest post veți înțelege imediat ce înseamnă.

Dar asta nu e tot. Puteți utiliza o înregistrare de culoare scurtă. Acesta este utilizat în cazurile în care sunt asociate numerele. De exemplu, # FF8800 poate fi redus la # F80.

O altă modalitate este de a utiliza un indicator de culoare rgb (). Acesta este utilizat în cazul în care trebuie să specificați valoarea în notația zecimală:

Snack vezi un exemplu în cazul în care aceeași culoare este definită în diferite moduri:

Sau la fel în BB-Codes:

Observați culoarea - una dintre cele mai frecvente probleme webmasteri. Culoarea este utilizat atunci când introducerea textului, și de a crea un design, deci trebuie să învețe doar cum să-l întreb.

Noi schimba stilul textului site-ului

Generalizând întreaga teorie, să încercăm să schimbe întregul font site-ul primar. Schimbați culoarea și dimensiunea setului cu cască.

Pentru culoarea textului, așa cum am înțeles, se întâlnește proprietatea de culoare. Du-te la setările șablonului - Aspect și scrie:

Eticheta BODY este așa-numitul Corpul documentului, adică tot ceea ce este afișat pe pagina este in interiorul corpului. Prin urmare, cerem culoarea textului pentru el, și toate sub-elemente (tag-uri) vor avea automat aceleași proprietăți.

Cu condiția, desigur, că le Asteptand.

Odată salvat, putem vedea că textul principal al unui site a devenit de culoare Midnightblue.

Acum, să se ocupe cu cască text (bold). Șablonul implicit pentru default-fontul este Verdana. În HTML comun pentru a utiliza așa-numitele site-uri fonturi în condiții de siguranță. adică, acele fonturi care sunt instalate în aproape toți utilizatorii. Iată lista:

  • Arial
  • Arial negru
  • Comic Sans MS
  • Courier New
  • Georgia
  • efect
  • Times New Roman
  • Trebuchet MS
  • Verdana

Final atingere - dimensiunea textului principal. Acesta utilizează proprietatea font-size. pot fi utilizate Unitățile valorilor măsurate:

  • pt - elementele tipografice uzuale
  • px - înălțime în pixeli
  • % - procentul de dimensiune de bază
  • em - procentul de numai un interval predeterminat la 0 la 1.

Standard în rezoluția 11pt model de set-default. Schimbarea la 14pt:

Când facem un șablon, apoi una dintre primele acțiuni vor fi un indiciu al acestor css-proprietăți pentru organism. Încercați să căutați în proprietatea css face italic textul. Este, ca să spunem așa, de locuri de muncă la domiciliu. )