Spania atribute html. Planeta animalelor
Salutare tuturor!
Andrei este din nou cu tine.
Astăzi vi se vor oferi 2 versiuni ale lecției. Unul in forma text– îl vezi sub ochii tăi, iar al doilea VIDEO – va trebui să-l descarci.
În opinia noastră, versiunea video vă va fi mai de înțeles.
Deci, despre suplimentar elemente html…
Să presupunem că trebuie să selectați câteva cuvânt separatîn text (să zicem cu altă culoare și fundal), sau astfel încât imaginea și textul aferent acesteia să fie în partea de sus și în dreapta în celula tabelului, iar conținutul principal al paginii să fie, de exemplu, la partea de jos și mai aproape de marginea stângă. În ceea ce privește primul exemplu, voi spune că puteți face acest lucru cu o etichetă cu un set parametrii necesari, dar aparține etichetelor interzise (noile browsere pot să nu o accepte) și nu are proprietatea de a înlocui fundalul.
Pentru astfel de cazuri, sunt furnizate două etichete specifice, care în esență nu fac nimic pe cont propriu. Dar dacă le aplicați stilurile potrivite, puteți obține orice. În general, puteți utiliza doar aceste două etichete și le puteți aplica stiluri pentru a crea întreaga pagină a site-ului.
Deci acestea sunt etichetele Și .
Care este diferența dintre ele dacă sunt folosite pentru același lucru?
element div- aceasta este o etichetă de bloc și poate conține orice etichete cunoscute de noi (liste, imagini, tabele...).
element span- Acest eticheta de linie, și se aplică exclusiv textului (evidențiați o bucată de text cu o culoare diferită).
Stilurile care se aplică acestor etichete sunt toate stilurile pe care le-am studiat. Nu există restricții privind utilizarea oricăror stiluri.
Să ne uităm la stilurile care sunt cele mai tipice pentru aceste etichete. Ele se aplică tuturor celorlalte etichete și sunt folosite în același mod, doar că sunt mai des folosite cu aceste etichete (în special ) .
Primul loc pe care aș dori să încep este cu poziționarea elementelor.
Această proprietate:
poziţie— stabilește sau definește poziția unui element.
Valori:
static- Mod implicit. Poziția obiectului este determinată de curent Marcaj HTML conform regulilor standard.
absolut— poziția obiectului este determinată în raport cu poziția obiectului părinte sau în raport cu obiectul corp. relativ— Poziția unui obiect este determinată de decalajul față de poziția în care a apărut implicit.
Stânga sus— stabilește sau determină poziția elementului față de marginea din stânga/sus.
Valori:
X– număr în procente sau pixeli.
auto- valoare implicită.
Să ne uităm la un exemplu:
XHTML
Acest exemplu arată că caseta noastră lată de 300 px se va deplasa în jos cu 350 px și la stânga cu 200 px, în raport cu locul în care apare implicit.
Următoarea proprietate importantă:
marginea– cantitatea de indentare de la blocul nostru la obiectele învecinate pe patru laturi.
Valori:
margine-top— setează valoarea liniuță de sus obiect
margine-stânga— setează cantitatea de indentare din stânga a obiectului
margine-dreapta— setează cantitatea de indentare dreaptă a obiectului
margine-fond— setează valoarea indentației de jos a obiectului
XHTML
Am creat un bloc cu margini de 30 px în jurul lui din toate laturile sale.
La ce altceva aș dori să mă opresc:
căptușeală– proprietatea specifică cantitatea de spațiu inserată între obiect și limitele acestuia.
Valori:
umplutură de fund— specifică cantitatea de spațiu inserată între obiect și chenarul său inferior.
padding-stânga— specifică cantitatea de spațiu inserată între obiect și chenarul său din stânga.
umplutura-dreapta- specifică cantitatea de spațiu inserată între obiect și chenarul său din dreapta.
padding-top- specifică cantitatea de spațiu inserată între obiect și chenarul său superior.
XHTML
Am creat un bloc cu umplutură de 30 pixeli din conținut pe toate părțile sale.
Și să ne uităm la un exemplu folosind eticheta:
Să presupunem că avem o construcție ca:
Orice text!
Vrem să facem textul cuvântului pe un fundal galben cu litere albastre. Pentru a face acest lucru, îl vom include într-o etichetă și vom aplica stilurile adecvate.
Titluri
Pentru
etichetele sunt folosite pentru a proiecta anteturi
...
Cred că toată lumea înțelege asta, nu este dificil. În continuare
Font (tip) și culoarea fontului
Cred că toată lumea înțelege asta, nu este dificil. În continuare
Font (tip) și culoarea fontului
Există două moduri aici. Al doilea va fi descris mai târziu. În primul rând - se folosește eticheta
Cu atribute fațăȘi culoare, respectiv:
font Verdana
font Verdana
font roșu
font roșu
Font de culoare MidnightBlue
Font de culoare MidnightBlue
Font de culoare MidnightBlue
Font de culoare MidnightBlue
O culoare are un nume și o valoare numerică, așa cum se vede în acest exemplu
(MidnightBlue=#191970). Puteți scrie multe despre flori, dar eu
Mă voi concentra pe un singur link:
Alegerea culorilor. Culorile web-safe și web-smart sunt potrivite pentru utilizare.
Formatarea textului: Utilizarea unei etichete si atribut stil (1)
Etichetă se referă la o bucată de text selectată (formatată): ȘI Se aplică la Record Culoarea fontului Culoarea fontului poate fi setată folosind o etichetă , după cum sa discutat mai sus. Acum să folosim eticheta si atribut stil: font roșu - font roșu Exact în același mod puteți seta valori digitale flori (pentru mai multe detalii, vezi mai sus. Font (tipul) fontului Despre modul de a seta fontul (tipul) unui font folosind o etichetă S-a discutat și despre asta data trecută. Acum să ne uităm la a doua metodă - folosind construcția font
La loc ***
Font Verdana Font Times Marimea fontului Pentru a specifica dimensiunea fontului, se folosește construcția font
mărimea xx-mare, x-mari, mare, mediu, mic, x-mic, xx-mic. Rezultat: font foarte foarte mare Puteți specifica dimensiunea fontului într-un mod familiar din Word - în puncte (pt). 1 punct este egal cu 1⁄72 inci. Exemple: 12pt 36pt Valorile 12pt, 36pt din aceste exemple sunt înlocuite în locul *** in formula generala font
. Puteți folosi și pixeli: font 12px Dimensiunile de mai sus sunt absolute. Dar dimensiunea fontului poate fi setată și într-un mod relativ - ca procent: dimensiunea fontului 1,5 em față de original Greutatea fontului (saturație) Acesta este ceva care poate fi specificat folosind o etichetă simplă miniatură Prin utilizarea se face astfel: font bold font aldine Avantajul acestei metode este că, împreună cu valoarea ponderii fontului îndrăzneţ valorile pot fi, de asemenea, folosite mai îndrăzneț și mai ușor, obținând un font de „greutăți diferite” (în acest caz vorbim de valori relative). Și valoarea implicită este normal- font obișnuit. Stilul fontului Cursivele pot fi obținute fie folosind eticheta , și în felul următor: cursive Capital Elementele din capitolul anterior sunt afișate secvenţial pe o linie orizontală. Se comportă ca un text obișnuit și pur și simplu apar unul lângă celălalt, chiar dacă au anumite dimensiuni și alte proprietăți care nu sunt legate de text. Acest lucru nu ar trebui să fie surprinzător, deoarece Mai întâi, să vedem cum să afișați un element vertical sub altul. Practic, trebuie să spunem browserului: „Hei, vrem un container care se poate stivui pe verticală”. Din fericire, această etichetă de container este cunoscută ca Pentru a vedea cum funcționează elementele Conform condițiilor de mai sus, HTML-ul va arăta astfel.
În CSS scriem o clasă .container care este asociată cu o etichetă Container ( lățime: 200 px; înălțime: 200 px; culoare de fundal: albastru; ) Să ne uităm la asta în browser. Arată ca un dreptunghi mare. Ce zici de separarea etichetelor? Container ( lățime: 200 px; înălțime: 200 px; culoare de fundal: albastru; margine de jos: 10 px; ) Grozav! Browserul afișează aceste „blocuri” unul sub celălalt, spre deosebire de exemplul nostru de formular anterior, în care elementele erau afișate pe o singură linie. Care este diferența? Când vine vorba de afișarea etichetelor, browserul recunoaște trei grupuri de elemente: Elementele în linie nu provoacă o nouă linie și arată un element lângă altul pe orizontală. Elementele bloc sunt configurate ca blocuri care se stivuiesc unul peste altul și nu apar niciodată unul lângă altul pe orizontală decât dacă folosim trucuri magice CSS (despre care vom afla în capitolul următor). Elementele inline-block acționează ca elemente inline (afișate unul lângă celălalt), dar diferă de ele prin faptul că pot fi dimensionate. De exemplu, câmpul
, În mod implicit, elementele inline au un stil proprietate de afișare setat la inline. Pentru elemente de bloc valoarea sa este bloc și pentru elemente de bloc inline inline-block . Acum puteți explica de ce eticheta nu include textul pe o nouă linie. Deoarece acesta este un element inline, ceea ce înseamnă că proprietatea sa de afișare este setată la inline în CSS. Având în vedere acest lucru, codul este mai jos: Unu, doi, trei Browserul va afișa pe o singură linie: unu, doi, trei Cu toate acestea, puteți schimba acest comportament adăugând o linie de CSS: Span ( afișare: bloc; ) Acum etichetele noastre sunt afișate diferit, fiecare dintre ele începe cu linie nouă deoarece am setat proprietatea de afișare la bloc . Pentru acest exemplu folosim În general, este o idee bună să nu folosiți excesiv eticheta Cu noile noastre cunoștințe despre blocuri, să ne reelaborăm codul formularului, astfel încât câmpurile formularului și descrierile lor să apară frumos unele sub altele.
Pare puțin mai complicat, dar singurul lucru pe care l-am făcut a fost să adăugăm etichete Încă o dată, să-l comparăm pe cel nou (în dreapta) și cod vechi(stânga). Acum să vedem cum cod nou afișat în browser! Prezentarea informațiilor prin ideea modernă de hipertext este în mod inerent absurdă, dar așa este și așa funcționează. Nu te poți certa cu asta și trebuie să ții cont de asta. Din punct de vedere limbaj modern programare, nu contează modul în care sunt reprezentate datele: tipuri stricte și o descriere preliminară obligatorie, sau fără tipuri și descrierea cerută limbajul se va „gândi” pe măsură ce algoritmul se execută. Este important să rețineți că orice nu este „înțeles” de browser, JavaScript sau limbajul serverului nu va fi executat. O etichetă de bloc în circumstanțele actuale se poate „transforma” într-o etichetă inline, dar o etichetă cu litere mici nu se poate transforma într-o etichetă de bloc. Exemplu istoric - etichetă font HTML. A fost „nerecomandat” pentru utilizare de ceva timp. Motivația „nu este recomandată” este o trăsătură caracteristică programare modernă. Lipsa compatibilității codului „în sus” între versiuni și nicio stabilitate în dezvoltarea secvențială a versiunilor componente softwareși concepte, de asemenea. Într-adevăr, eticheta span în HTML este mult mai practică: nu se referă doar la font. Span poate modifica multe atribute ale afișajului și utilizarea unui anumit conținut. Șirurile au fost întotdeauna reprezentarea principală pentru orice date, dar limbajele de programare nu au definit întotdeauna acest lucru în sintaxă, iar programatorii au fost conștienți de faptul că numărul sau valoarea booleană folosită este întotdeauna un șir. Absurditatea și obiectivitatea hipertextului în Implementări HTML: aspectul este utilizarea unui set de etichete (pereche sau unice) pentru a descrie în mod formal conținutul (date). Nici descrierea, nici conținutul nu pot fi descrise în mod rezonabil ca informații. Primul este un anumit cadru în care se încadrează un anumit conținut - date. Cadrul este construit din cărămizi (etichete) fixate rigid, care ocupă strict anumite locuriîn design și elemente relative care sunt aranjate „pe măsură ce cardul cade”. Puteți împărți pagina în secțiuni pentru afișarea datelor folosind tabele sau elemente de bloc și puteți „umple” structura rezultată cu date cu alte etichete. Ele sunt de obicei numite litere mici, adică poziționate într-un mod care determină oportunitatea curentă și conținutul curent. Caseta verde arată un exemplu de cod pe care a fost afișat browserul fundal gri. Blocky element div a ajuns în centrul textului care îl urmează în cod. Primul element a fost o etichetă cu clasa scSpanLine. Apoi a fost plasat textul în care două secțiuni din acest text au fost evidențiate folosind eticheta span cu clasa scSimpleSpan. Al doilea și al treilea elemente inline situat exact așa cum este scris în cod. Acest exemplu arată cum funcționează span în HTML. Este evident că aceasta este doar o secvență de date. Altceva nu este evident: dezvoltatorul poate descrie această etichetă orice îți place, poți chiar să aplici regula: Nu va avea niciun efect. Specificarea coordonatelor și dimensiunilor, de asemenea, nu joacă niciun rol. Centrarea sau alinierea intervalelor în HTML este inutilă. Între timp, eticheta este foarte practică și solicitată în practică. Acesta este un ambalaj foarte convenabil pentru evidențiere moment importantîn fluxul general de date. Principalul lucru este să înțelegi asta span HTML este o modalitate de a schimba afișarea unui șir sau de a clarifica regulile de afișare a unei părți a unui șir. Folosiți un limbaj descriptiv date HTML conform scopului său, adică de a descrie date, este ieri. Folosirea unui limbaj de pe partea serverului pentru a forma corpul unei pagini este modernă și „toți” dezvoltatorii o fac. Sistemele de management al conținutului (CMS) sunt deosebit de pasionate de acest lucru. Practica reală și nevoia de a crea site-uri web live este gestionarea dinamică a cadrului paginii și a conținutului acesteia. În acest sens, eticheta span în HTML (că este pur și simplu dinamică), ca rezultat Funcționează JavaScript, vă permite să creați conținut dinamic din mers. JavaScript funcționează ca un convertor text sursăîn format și înlocuitori etichetele necesare Cu regulile necesare CSS outstream, care este distribuit în cadrul elementului de bloc al paginii. Cu cât profesionalismul dezvoltatorului este mai mare, cu atât este mai mare aspectul blocului (sau tabelul) al paginii și prezența mai puțin reală a etichetelor span statice în HTML. Ce dă asta? Dinamica. JavaScript este un algoritm care poate prelua lucrul asupra unui flux de șiruri de caractere primit și îl poate reda așa cum a intenționat dezvoltatorul. Etichetele span vor apărea la locul potrivit și la momentul potrivit.
(proprietăți) care lucrează cu eticheta , poate fi folosit și cu
Etichete
paragraf, care nu ne convine întotdeauna (deși atunci când formatăm un paragraf
este rațional să-l folosești). Etichetă
precum și - este mai mult o chestiune de gust. Are mai multe
gamă largă de aplicații și are un număr de caracteristici suplimentare.
Dar acest lucru nu se mai aplică formatării textului. Prin urmare pentru
să ne concentrăm pe certitudine .
Textul este lipsit de orice sens în sine.
Etichetă destinate a fi atribuite textului
orice proprietate. Acestea sunt cele pe care acum voi încerca să le enumerez
într-o ordine mai mult sau mai puţin logică.
este necesar să se înlocuiască fontul (tipul) fontului. De regulă, se înlocuiesc
numele nu este un anumit font, ci o întreagă familie de fonturi, de exemplu, Verdana, Times etc. Primim:
fontul poate fi specificat căi diferite. Poate cel mai evident și
simplu - înlocuiți una dintre următoarele șapte valori în loc de ***:
font foarte mare
font mare
font mediu
font mic
font foarte mic
font foarte foarte mic
font 36px
dimensiunea fontului 150% din original
sau în raport cu lățimea literei „m” în fontul original (unitatea de măsură corespunzătoare se numește ei):
dimensiunea fontului 1,5 em față de original
miniatură
cursive
În loc de stil font: cursiv poti sa scrii stil font: oblic, iar rezultatul nu ar trebui să fie italic, ci un font oblic („unghiular”). Dar acest lucru nu funcționează întotdeauna. Logica paginii HTML
Exemplu de span HTML: ce este și cum se descrie
Logica pentru furnizarea de informații de linie