Posledná aktualizácia: 28.04.2016

CSS poskytuje možnosti umiestnenia prvkov, čo znamená, že môžeme umiestniť prvok na konkrétne miesto na stránke.

Hlavnou vlastnosťou, ktorá riadi umiestnenie v CSS, je vlastnosť position. Táto vlastnosť môže nadobúdať jednu z nasledujúcich hodnôt:

static : štandardné umiestnenie prvku, predvolená hodnota

absolútna : prvok je umiestnený vzhľadom na hranice prvku kontajnera, ak jeho vlastnosť polohy nie je statická

relatívne : Prvok je umiestnený vzhľadom na jeho predvolenú pozíciu. Hlavným účelom relatívneho umiestňovania zvyčajne nie je presunúť prvok, ale vytvoriť nový kotviaci bod pre absolútne umiestnenie jeho vnorených prvkov.

pevné : prvok je umiestnený vzhľadom na okno prehliadača, čo vám umožňuje vytvárať pevné prvky, ktoré pri posúvaní nemenia polohu

Na prvok by ste nemali súčasne aplikovať vlastnosť float a akýkoľvek iný typ umiestnenia ako statický (to znamená predvolený typ).

Absolútna poloha

Zobrazovacia oblasť prehliadača má horný, spodný, pravý a ľavý okraj. Každá z týchto štyroch hrán má zodpovedajúcu vlastnosť CSS: left, right, top a bottom. Hodnoty týchto vlastností sú špecifikované v pixeloch, ems alebo percentách. Nie je potrebné nastavovať hodnoty pre všetky štyri strany. Spravidla sú nastavené iba dve hodnoty - odsadenie od horného okraja hore a odsadenie od ľavého okraja doľava.

Rozloženie bloku v hlavičke HTML5 (pozícia: absolútna; vľavo: 100px; hore: 50px; šírka: 430px; výška: 100px; farba pozadia: rgba(128, 0, 0, 0,5); )

AHOJ SVET

Tu je prvok div s absolútne umiestnenie bude 100 pixelov naľavo od okraja výrezu a 50 od spodku.

Nie je až také dôležité, aby po tomto prvku div boli nejaké ďalšie prvky. Tento blok div bude v každom prípade umiestnený relatívne k hraniciam výrezu prehliadača.

Ak sa prvok s absolútnym umiestnením nachádza v inom kontajneri, ktorý má naopak hodnotu vlastnosti position nerovnajúcu sa static , prvok sa umiestni vzhľadom na hranice kontajnera:

Umiestnenie v HTML5 .vonkajšia ( pozícia: absolútna; vľavo: 80px; hore: 40px; šírka: 430px; výška: 100px; orámovanie: 1px plná #ccc; ) .inner( pozícia: absolútna; vľavo: 80px; hore: 40px; šírka : 50px výška: 50px; farba pozadia: rgba(128, 0, 0, 0,5);

Relatívne umiestnenie

Relatívne umiestnenie je tiež špecifikované pomocou relatívnej hodnoty. Na určenie konkrétnej pozície, do ktorej sa prvok posunie, sa použijú rovnaké vlastnosti hore, doľava, doprava, dole:

Umiestnenie v HTML5 .vonkajšia ( pozícia: relatívna; vľavo: 80px; hore: 40px; šírka: 300px; výška: 100px; orámovanie: 1px plná #ccc; ) .inner( pozícia: absolútna; vľavo: 80px; hore: 40px; šírka : 50px výška: 50px; farba pozadia: rgba(128, 0, 0, 0,5);

vlastnosť z-index

Ak majú dva prvky rovnaké orámovanie, prvok, ktorý je naposledy definovaný v značke html, sa štandardne zobrazuje nad druhým. Vlastnosť z-index vám však umožňuje zmeniť poradie prvkov, keď sú prekryté. Vlastnosť berie ako hodnotu číslo. Prvky s vyššou hodnotou z-indexu sa zobrazia nad prvkami s menšou hodnotou z-indexu.

Napríklad:

Umiestnenie v tele HTML5( margin:0; padding:0; ) .content( position: relatívne; hore: 15px; vľavo: 20px; šírka: 250px; výška: 180px; farba pozadia: #eee; orámovanie: 1px plné #ccc ; ) .redBlock( position: absolute; top: 20px; left:50px; width: 80px; height: 80px; background-color: red; ) .blueBlock( position: absolute; top: 80px; left: 80px; width: 80px výška: 80px; farba pozadia: modrá;

Teraz pridajte nové pravidlo do štýlu bloku redBlock:

RedBlock( z-index: 100; pozícia: absolútna; hore: 20px; vľavo:50px; šírka: 80px; výška: 80px; farba pozadia: červená; )

Tu je z-index 100. Ale nemusí to byť číslo 100. Keďže druhý blok má nedefinovaný z-index a je vlastne nula, pre redBlock môžeme nastaviť vlastnosť z-index na ľubovoľnú hodnotu väčšiu ako nula.

A teraz bude prvý blok prekrývať druhý a nie naopak, ako to bolo na začiatku.

Značka HTML sa používa na vloženie objektu do dokumentu HTML. Túto značku použite na vloženie multimédií na vaše webové stránky.

Atribúty obsahu obslužného programu udalostí

Atribúty obsahu obslužného programu udalosti umožniť vám na vyvolanie skriptu z vášho HTML. Skript sa vyvolá, keď nastane určitá „udalosť“. Každý atribút obsahu obsluhy udalosti sa zaoberá inou udalosťou.

Tu sú štandardné atribúty obsahu obsluhy udalostí HTML 5.

• onabort
• Zrušiť
• onblur
• oncanplay
• oncanplaythrough
• pri zmene
• po kliknutí
• oncontextmenu
• ondblclick
• Ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• Ondragover
• ondragstart
• ondrop
• zmena tvrdosti
• vyprázdnený
• ukončený
• onerror
• zameranie
• onformchange
• onforminput
• na vstupe
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• načítať
• načítané údaje
• onloaded metadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpauza
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• hľadaný
• pátranie
• onselect
• na výstave
• nainštalovaný
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• na počkanie

Úplné vysvetlenie týchto atribútov nájdete v časti.

Povedzme si ešte pár slov o registrácii komponentov ActiveX. BASIC zvyčajne nezávisle registruje všetky komponenty ActiveX v čase ich vytvorenia. Registrácia pozostáva z pridelenia špeciálneho jedinečného identifikátora CLSID komponentu ActiveX a jeho zadania do registra databáza Windows Register viacerých záznamov charakterizujúcich vlastnosti komponentu a jeho umiestnenie. O registrácii programov sme si už niečo povedali v sekciách COM a DCOM. Čo sa týka distribúcie a šírenia vyvinutých komponentov ActiveX naprieč lokálna sieť alebo internet, potom je to samostatná téma a bude sa o nej diskutovať nižšie.

Ryža. 1.11. Použitie vopred vytvoreného ovládacieho prvku ActiveX v prehliadači

Umiestnenie ovládacích prvkov ActiveX na webové stránky
Ovládacie prvky ActiveX sú pripojené k dokumentom HTML pomocou značky, ktorá je navrhnutá v jednom z pracovných štandardov konzorcia W3. Účelom tohto tagu (v Netscape Navigator) je integrovať cudzie prvky do HTML. Tu je úplná syntax značky:

Niektoré z uvedených atribútov sú podobné atribútom známej značky , preto ich tu nebudeme brať do úvahy.

Tu je popis atribútov špecifických pre značku:
CIASSID=URL
Tento atribút určuje identifikátor triedy volaného ovládacieho prvku. Každý modul OCX, a teda každý ovládací prvok ActiveX, musí mať svoj vlastný jedinečný identifikátor triedy. Zvyčajne sa označuje skratkou CLSID a je to pomerne dlhý reťazec hexadecimálnych číslic – napríklad „017C99A0-8637-llCF-A3A9-00A0C9034 920“.

Prečo je však v syntaxi tohto atribútu „URL“? Faktom je, že značku možno použiť na pripojenie nielen ovládacích prvkov ActiveX, ale aj iných programových objektov vrátane tých, ktoré nie sú rozpoznané „identifikátormi triedy“, ale iným spôsobom.
Aby sa zabezpečilo, že prehliadač bude pracovať iba s jednou syntaxou, CLSID sa nastaví podľa pravidiel URL: ľavá strana obsahuje slovo „clsid“ a pravá strana obsahuje skutočný identifikátor triedy.
Príklad: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Tento atribút určuje adresu URL (tentokrát skutočnú adresu s predponou „http:“ alebo „ftp:“). V tomto atribúte môžete uviesť viacero adries URL v prípade, že jeden zo serverov je z nejakého dôvodu nedostupný.
Rovnaký atribút vám umožňuje zadať požadované číslo verzie pre ovládacie prvky ActiveX.
Ak napríklad napíšete CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
potom skúste získať tento modul ActiveX z internetu sa pokúša nielen vtedy, keď nie je na počítači používateľa, ale aj vtedy, keď je ovládací prvok nainštalovaný, ale má viac staré číslo verzia, ako je špecifikovaná v atribúte CODEBASE (V našom príklade sa vyžaduje verzia nie staršia ako 4.72.0.1171).

CODETURE=MIME-typ
TYPE=MIME-typ
Tieto dva voliteľné atribúty vám umožňujú špecifikovať typy (v zmysle štandardu MIME) tých súborov, na ktoré odkazujú atribúty CLASSID (atribút CODETYPE) a DATA (atribút TYPE). Pre ovládacie prvky ActiveX musí byť atribút CODETYPE, ak je prítomný, nastavený na "application/x-oleobject".

DATA=URL
Tento atribút určuje umiestnenie dátového súboru, ktorý môže byť potrebný na fungovanie tohto ovládacieho prvku. Pre niektoré ovládacie prvky ActiveX je tento atribút povinný. Okrem toho pomocou atribútu DATA môžete súbor obsahujúci ovládací prvok zahrnúť priamo do súboru HTML v zakódovanej forme.

VYHLÁSIŤ
Toto vyhlásenie je zvyčajne prázdne. Môže sa použiť na deklarovanie objektu, keď nie je implementovaný, ale je len parametrom iného objektu. Zároveň sa celá sada atribútov objektu zapíše do pamäte prehliadača pre prípad, že by ich niekto vyžadoval.

ID=id
Potrebné na organizáciu interakcie s inými objektmi, ktoré majú identifikátor. Môže sa použiť aj v schéme adresovania URL (to znamená, že sa môže objaviť za znakom „#“ v adrese URL).
Môžete vytvoriť toľko značiek, koľko chcete, s rovnakou hodnotou CLASSID, ale ich hodnoty ID sa musia líšiť.

NÁZOV=id
Voliteľný atribút, ktorý možno použiť pri príprave HTML formulára (na tento účel musí byť značka v páre značiek ... ). Odoslané údaje budú obsahovať informácie prijaté prehliadačom z objektu.

TVARY
Tento prázdny atribút umožňuje v rámci okna obsadeného objektom v priestore prehliadača vybrať ďalšie podoblasti a označiť ich ako dodatočné URL odkazy (druh hotspotov). Súradnice týchto oblastí a adresy URL odkazov na ne sú špecifikované pomocou značiek so špeciálnymi doplnkovými atribútmi, ktoré sa musia nachádzať medzi príslušným AND.

V tejto lekcii sa dozvieme o značke. Jeho hlavným účelom je vložiť do HTML stránky nejaké objekty, ktoré prehliadač nedokáže rozpoznať. Môže to byť napríklad flash hra, obrázky, zvuk, video, aplety java, prvky ActiveX, PDF.

Syntax značky HTML

... [] ...

V sekcii atribúty sú veľmi dôležité parametre pre fungovanie objektu (na ich význam sa pozrieme s príkladmi nižšie). Okrem toho sú povinné iba dva: typ a údaje. Medzi uzavieracími a otváracími tagmi objektu môžete nastaviť parametre pre pripojený objekt (ak sú samozrejme potrebné) cez .

Atribúty značky 1. Zarovnať

Zarovnať – zodpovedá za zarovnanie objektu vzhľadom na ostatné prvky stránky.

Napríklad

VALUE môže nadobúdať nasledujúce hodnoty:

• absmiddle – zarovnať do stredu aktuálneho riadku
• základná čiara , stred - zarovnanie k základnej čiare aktuálnej čiary
• bottom (predvolené) – zarovná spodný okraj objektu s okolitým textom
• vľavo - umiestnenie objektu vľavo
• vpravo - umiestnenie objektu vpravo
• top - zarovnať na najvyšší prvok aktuálneho riadku

2.Klasický

Classid – informuje prehliadač, ktorý program, plugin alebo applet má načítať. Tento program bude ďalej pracovať s objektom

Napríklad

Namiesto adresy URL môžete napísať absolútnu alebo relatívnu adresu.

3. Údaje

Údaje sú najdôležitejším argumentom, pretože špecifikujú adresu objektu.

Napríklad

Adresa objektu je špecifikovaná v závislosti od toho, či sme zadali kódovú základňu. Ak nie je špecifikovaná kódová základňa, potom je adresa objektu špecifikovaná relatívne k časti adresára, v ktorej sa nachádzame. Odporúčam uviesť úplnú adresu objektu.

4. Výška a šírka

Výška a Šírka – nastavte výšku a šírku objektu, resp. Dá sa zadať v pixeloch aj percentách. Ak to nastavíme v percentách, potom sa hodnoty vypočítajú na základe povolenej oblasti.

Napríklad

5. Napíšte

Typ – definuje typ MIME údajov uvedených v atribúte údajov. Je potrebné, aby si prehliadač pripravil potrebné zdroje. Najčastejšie je jeho hodnota presne „application/x-shockwave-flash“.

Ak prehliadač nepodporuje objekty (často sa to stáva, ak nie je nainštalovaný prehrávač Adobe Flash Player), vo vnútri značky môžete zadať text, ktorý používateľa informuje, že objekt nie je možné načítať.

Napríklad

Ľutujeme, objekt nie je možné zobraziť Poznámka 1

Prehliadač IE nemusí správne pochopiť hodnotu údajov, preto by ste mali adresu súboru zadať znova v značkách param:

Príklad: hodiny využívajúce objekt

Pomocou objektu môžete jednoducho zobraziť multimediálne objekty a prvky. Najjednoduchším a najzrejmejším príkladom sú hodinky.

Demo ukazuje most medzi 2D grafikou v HTML5 a skutočnou 3D (pomocou WebGL). Účelom tohto článku je ukázať, ako kresliť 3D objekty pomocou polygonálnej siete. Polygonálna sieť je súbor vrcholov, hrán a plôch, ktoré definujú tvar polyedrických objektov v 3D počítačová grafika a pevné modelovanie.

Jednoduché 3D objekty

Fasáda pozostáva z trojuholníkov, štvoruholníkov alebo iných jednoduchých polygónov. Aby sme to demonštrovali, pripravili sme jednoduché 3D objekty - kocku a polyedrické gule (s premenlivým počtom plôch).

Kreslenie 3D objektov Krok 1: HTML

Ako obvykle (pre všetky ukážky založené na plátne) máme veľmi jednoduchý HTML značenie(s jedným objektom vo vnútri, plátno):

Drôtové 3D objekty v HTML5 Pomocou tlačidiel hore/dole ovládajte priehľadnosť objektov

Načítanie inicializácie objektu, pozri:

//var obj = new cube(); //var obj = new sphere(6); var obj = nová guľa(16);

To znamená, že ak potrebujeme zobraziť kocku, musíte odkomentovať prvý riadok, ak chcete zobraziť guľu so 6 stenami, musíte vybrať druhú možnosť.

Krok 2. JS

JavaScriptové súbory sú tri (main.js, meshes.js a transform.js), dva z nich publikujeme, tretí (transform.js) obsahuje iba výpočtové funkcie súvisiace s rotáciou, škálovaním a projektovými objektmi. Pozrime sa teda na prvý kód JavaScript:

js/meshes.js // Získanie funkcie náhodnej farby getRandomColor() ( písmená var = "0123456789ABCDEF".split(""); var color = "#"; pre (var i = 0; i< 6; i++) { color += letters; } return color; } // Подготовка объекта function prepareObject(o) { o.colors = new Array(); // Составим норм o.normals = new Array(); for (var i = 0; i < o.faces.length; i++) { o.normals[i] = ; o.colors[i] = getRandomColor(); } // Составим центр: рассчитать максимальные позиции o.center = ; for (var i = 0; i < o.points.length; i++) { o.center += o.points[i]; o.center += o.points[i]; o.center += o.points[i]; } // Составим расстояния o.distances = new Array(); for (var i = 1; i < o.points.length; i++) { o.distances[i] = 0; } // Вычисляем среднее положение центра o.points_number = o.points.length; o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.center = o.center / (o.points_number - 1); o.faces_number = o.faces.length; o.axis_x = ; o.axis_y = ; o.axis_z = ; } // Объект куб function cube() { // Подготовим точки и граней куба this.points=[ , , , , , , , , , , ]; this.faces=[ , , , , , , , , , , , , , , , , ]; prepareObject(this); } // Объект сфера function sphere(n) { var delta_angle = 2 * Math.PI / n; // Составим вершины (точек) сферы var vertices = ; for (var j = 0; j < n / 2 - 1; j++) { for (var i = 0; i < n; i++) { vertices = ; vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.cos(i * delta_angle); vertices = 100 * Math.cos((j + 1) * delta_angle); vertices = 100 * Math.sin((j + 1) * delta_angle) * Math.sin(i * delta_angle); } } vertices[(n / 2 - 1) * n] = ; vertices[(n / 2 - 1) * n + 1] = ; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n] = 100; vertices[(n / 2 - 1) * n] = 0; vertices[(n / 2 - 1) * n + 1] = 0; vertices[(n / 2 - 1) * n + 1] = -100; vertices[(n / 2 - 1) * n + 1] = 0; this.points = vertices; // Составим первый слой var faces = ; for (var j = 0; j < n / 2 - 2; j++) { for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = j * n + i; faces = j * n + i + 1; faces = (j + 1) * n + i + 1; faces = j * n + i; faces = (j + 1) * n + i + 1; faces = (j + 1) * n + i; } faces = ; faces = ; faces = (j + 1) * n - 1; faces = (j + 1) * n; faces = j * n; faces = (j + 1) * n - 1; faces = j * n + n; faces = (j + 2) * n - 1; } for (var i = 0; i < n - 1; i++) { faces = ; faces = ; faces = (n / 2 - 1) * n; faces = i; faces = i + 1; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n + i + 1; faces = (n / 2 - 2) * n + i; } faces = ; faces = ; faces = (n / 2 - 1) * n; faces = n - 1; faces = 0; faces = (n / 2 - 1) * n + 1; faces = (n / 2 - 2) * n; faces = (n / 2 - 2) * n + n - 1; this.faces=faces; prepareObject(this); }

Na samom začiatku musíme pripraviť všetky body a fasádu našich objektov. Existujú 2 funkcie: kocka (ktorá generuje počiatočné polia pre jednoduchý objekt kocky) a gule (na generovanie gule). Je oveľa ťažšie vypočítať všetky body a plochy pre polyedrickú guľu. Keď máme všetky tieto body a povrchy, musíme vypočítať ďalšie parametre (napríklad vzdialenosť, absolútny stred a tri osi).

// Interné premenné var canvas, ctx; var vAlpha = 0,5; var vShiftX = vShiftY = 0; vzdialenosť var = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Inicializačná funkcia sceneInit() ( // Príprava kontextu plátna a objektu canvas = document.getElementById("scene"); ctx = canvas.getContext("2d"); iHalfX = canvas.width / 2; iHalfY = plátno. výška / 2 // Počiatočná mierka a preklad mierkaObj(, obj); ; canvas.onmousemove = handleMousemove // ​​Hlavná slučka setInterval(drawScene, 25) // Obsluha udalosti OnKeyDown handleKeydown(e) ( kCode = ((e.ktory) || (e.keyCode)); ( prípad 38: vAlpha = (vAlpha = 0,2) ? (vAlpha - 0,1) : vAlpha; break; // Tlačidlo nadol ) ) // Funkcia obsluhy udalosti OnMouseMove handleMousemove(e) ( var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; if ((x > 0) && (x< canvas.width) && (y >0) && (y< canvas.height)) { vShiftY = vMouseSens * (x - iHalfX) / iHalfX; vShiftX = vMouseSens * (y - iHalfY) / iHalfY; } } // Рисуем основную функцию function drawScene() { // Очистить холст ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // Установить цвет заливки, цвет обводки, толщину линии и глобальной альфа- ctx.strokeStyle = "rgb(0,0,0)"; ctx.lineWidth = 0.5; ctx.globalAlpha= vAlpha; // Вертикальный и горизонтальный поворот var vP1x = getRotationPar(, , vShiftX); var vP2x = getRotationPar(, , vShiftX); var vP1y = getRotationPar(, , vShiftY); var vP2y = getRotationPar(, , vShiftY); rotateObj(vP1x, vP2x, obj); rotateObj(vP1y, vP2y, obj); // Пересчитываем расстояния for (var i = 0; i < obj.points_number; i++) { obj.distances[i] = Math.pow(obj.points[i],2) + Math.pow(obj.points[i],2) + Math.pow(obj.points[i], 2); } // Подготовить массив с фасадом треугольников (с расчетом максимальное расстояние для каждой грани) var iCnt = 0; var aFaceTriangles = new Array(); for (var i = 0; i < obj.faces_number; i++) { var max = obj.distances]; for (var f = 1; f < obj.faces[i].length; f++) { if (obj.distances[f]] >max) max = obj.vzdialenosti[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max); ) aFaceTriangles.sort(sortByDistance); // Príprava poľa s predpokladanými bodmi var aPrjPoints = new Array(); pre (var i = 0; i< obj.points.length; i++) { aPrjPoints[i] = project(distance, obj.points[i], iHalfX, iHalfY); } // Нарисовать объект (поверхность) for (var i = 0; i < iCnt; i++) { ctx.fillStyle = aFaceTriangles[i].faceColor; // Начало пути ctx.beginPath(); // Фасад индекс вершины var iFaceVertex = aFaceTriangles[i].faceVertex; // Переместить в исходное положение ctx.moveTo(aPrjPoints, aPrjPoints); // И нарисовать три линии (построить треугольник) for (var z = 1; z < aFaceTriangles[i].faceVertex.length; z++) { ctx.lineTo(aPrjPoints], aPrjPoints]); } // Закрыть путь, и заполнить треугольник ctx.closePath(); ctx.stroke(); ctx.fill(); } } // Функция сортировки function sortByDistance(x, y) { return (y.distance - x.distance); } // Инициализация if (window.attachEvent) { window.attachEvent("onload", sceneInit); } else { if (window.onload) { var curronload = window.onload; var newonload = function() { curronload(); sceneInit(); }; window.onload = newonload; } else { window.onload = sceneInit; } }

Po načítaní stránky vykonáme hlavnú inicializáciu (funkcia sceneInit). Vytvárame kontext plátna a objektu, čo znamená, že vykonáme počiatočnú mierku a preložíme naše objekty, ktoré sme vytvorili na samom začiatku (kocka alebo guľa). Potom pripojíme obslužné programy udalostí k OnKeyDown a OnMouseMove a nastavíme časovač na vykreslenie našej hlavnej scény (funkcia DrawScene). Nezabudnite, že parametre globalAlpha môžeme zmeniť stlačením kláves Hore/Dole.