Poslední aktualizace: 28.04.2016

CSS poskytuje možnosti umístění prvků, což znamená, že můžeme umístit prvek na konkrétní místo na stránce.

Hlavní vlastností, která ovládá umístění v CSS, je vlastnost position. Tato vlastnost může nabývat jedné z následujících hodnot:

static : standardní umístění prvku, výchozí hodnota

absolutní : prvek je umístěn vzhledem k hranicím prvku kontejneru, pokud jeho vlastnost position není statická

relativní : Prvek je umístěn relativně ke své výchozí poloze. Hlavním účelem relativního umístění obvykle není přesunout prvek, ale vytvořit nový kotevní bod pro absolutní umístění jeho vnořených prvků.

pevné : prvek je umístěn vzhledem k oknu prohlížeče, což vám umožňuje vytvářet pevné prvky, které při rolování nemění polohu

Na prvek byste neměli současně aplikovat vlastnost float a jakýkoli jiný typ umístění než statický (tj. výchozí typ).

Absolutní umístění

Zobrazovací oblast prohlížeče má horní, spodní, pravý a levý okraj. Každá z těchto čtyř hran má odpovídající vlastnost CSS: left, right, top a bottom. Hodnoty těchto vlastností jsou určeny v pixelech, ems nebo procentech. Není nutné nastavovat hodnoty pro všechny čtyři strany. Zpravidla se nastavují pouze dvě hodnoty - odsazení od horního okraje nahoře a odsazení od levého okraje vlevo.

Rozložení bloku v HTML5 .header ( pozice: absolutní; vlevo: 100px; nahoře: 50px; šířka: 430px; výška: 100px; barva pozadí: rgba(128, 0, 0, 0,5); )

AHOJ SVĚTE

Zde je prvek div s absolutní umístění bude 100 pixelů vlevo od okraje výřezu a 50 pixelů ode dna.

Není tak důležité, aby po tomto prvku div byly nějaké další prvky. Tento blok div bude v každém případě umístěn relativně k hranicím výřezu prohlížeče.

Pokud je prvek s absolutním umístěním umístěn v jiném kontejneru, který má naopak hodnotu vlastnosti position nerovnající se static , pak je prvek umístěn relativně k hranicím kontejneru:

Umístění v HTML5 .outer ( pozice: absolutní; vlevo: 80px; nahoře: 40px; šířka: 430px; výška: 100px; okraj: 1px plný #ccc; ) .inner( pozice: absolutní; vlevo: 80px; nahoře: 40px; šířka : 50px; výška: 50px; barva pozadí: rgba(128, 0, 0, 0,5); )

Relativní umístění

Relativní umístění je také specifikováno pomocí relativní hodnoty. Pro určení konkrétní pozice, do které je prvek posunut, se použijí stejné vlastnosti nahoře, vlevo, vpravo, dole:

Umístění v HTML5 .outer ( pozice: relativní; vlevo: 80px; nahoře: 40px; šířka: 300px; výška: 100px; okraj: 1px plný #ccc; ) .inner( pozice: absolutní; vlevo: 80px; nahoře: 40px; šířka : 50px; výška: 50px; barva pozadí: rgba(128, 0, 0, 0,5); )

vlastnost z-index

Ve výchozím nastavení, když mají dva prvky stejné ohraničení, prvek, který je naposledy definován v html značce, se zobrazí nad druhým. Vlastnost z-index vám však umožňuje změnit pořadí prvků, když jsou překryty. Vlastnost bere jako hodnotu číslo. Prvky s vyšší hodnotou z-indexu se zobrazí nad prvky s menší hodnotou z-indexu.

Například:

Umístění v těle HTML5( margin:0; padding:0; ) .content( position: relativní; nahoře: 15px; vlevo: 20px; šířka: 250px; výška: 180px; barva pozadí: #eee; okraj: 1px plný #ccc ; ) .redBlock( pozice: absolutní; nahoře: 20px; vlevo:50px; šířka: 80px; výška: 80px; barva pozadí: červená; ) .blueBlock( pozice: absolutní; nahoře: 80px; vlevo: 80px; šířka: 80px ; výška: 80px; barva pozadí: modrá; )

Nyní přidáme nové pravidlo do stylu bloku redBlock:

RedBlock( z-index: 100; pozice: absolutní; nahoře: 20px; vlevo:50px; šířka: 80px; výška: 80px; barva pozadí: červená; )

Zde je z-index 100. Ale nemusí to být číslo 100. Vzhledem k tomu, že druhý blok má nedefinovaný z-index a je ve skutečnosti nulový, pro redBlock můžeme nastavit vlastnost z-index na libovolnou hodnotu větší než nula.

A nyní bude první blok překrývat druhý, a ne naopak, jak tomu bylo na začátku.

Značka HTML se používá pro vložení objektu do dokumentu HTML. Pomocí této značky můžete do svých webových stránek vložit multimédia.

Atributy obsahu obslužného programu událostí

Atributy obsahu obslužné rutiny události umožnit vám k vyvolání skriptu z vašeho HTML. Skript je vyvolán, když nastane určitá "událost". Každý atribut obsahu obslužné rutiny události se zabývá jinou událostí.

Zde jsou standardní atributy obsahu obslužné rutiny událostí HTML 5.

• onabort
• zrušení
• onblur
• oncanplay
• oncanplaythrough
• při změně
• při kliknutí
• oncontextmenu
• ondblclick
• Ondrag
• ondragend
• ondragenter
• ondragexit
• ondragleave
• Ondragover
• ondragstart
• ondrop
• změna tvrdosti
• vyprázdněný
• skončilo
• onerror
• soustředění
• onformchange
• onforminput
• na vstupu
• oninvalid
• onkeydown
• onkeypress
• onkeyup
• načíst
• načtená data
• načtená metadata
• onloadstart
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onmousewheel
• onpause
• onplay
• onplaying
• onprogress
• onratechange
• onreadystatechange
• onscroll
• hledaný
• pátrání
• onselect
• na představení
• nainstalováno
• onsubmit
• onsuspend
• ontimeupdate
• onvolumechange
• čekání

Úplné vysvětlení těchto atributů viz.

Řekněme si ještě pár slov o registraci komponent ActiveX. BASIC obvykle nezávisle registruje všechny komponenty ActiveX v době jejich vytvoření. Registrace spočívá v přiřazení speciálního jedinečného identifikátoru CLSID komponentě ActiveX a jeho zadání do registru databáze Windows Registr několika záznamů charakterizujících vlastnosti komponenty a její umístění. O registraci programů jsme si již něco málo řekli v sekcích COM a DCOM. Pokud jde o distribuci a šíření vyvinutých komponent ActiveX napříč lokální síť nebo internetu, pak je to samostatné téma a bude probráno níže.

Rýže. 1.11. Použití předem vytvořeného ovládacího prvku ActiveX v prohlížeči

Umístění ovládacích prvků ActiveX na webové stránky
Ovládací prvky ActiveX jsou propojeny s HTML dokumenty pomocí tagu, který je navržen v jednom z pracovních standardů konsorcia W3. Účelem tohoto tagu (v Netscape Navigatoru) je integrovat cizí prvky do HTML. Zde je úplná syntaxe značky:

Některé z uvedených atributů jsou podobné atributům známé značky , takže je zde nebudeme uvažovat.

Zde je popis atributů specifických pro značku:
CIASSID=URL
Tento atribut určuje identifikátor třídy volaného ovládacího prvku. Každý modul OCX, a tedy každý ovládací prvek ActiveX, musí mít svůj vlastní jedinečný identifikátor třídy. Obvykle se používá zkratka CLSID a je to poměrně dlouhý řetězec hexadecimálních číslic – například „017C99A0-8637-llCF-A3A9-00A0C9034 920“.

Ale proč je v syntaxi tohoto atributu "URL"? Faktem je, že tag lze použít k připojení nejen ovládacích prvků ActiveX, ale také dalších programových objektů, včetně těch, které nejsou rozpoznávány „identifikátory třídy“, ale nějakým jiným způsobem.
Aby bylo zajištěno, že prohlížeč pracuje pouze s jednou syntaxí, je CLSID nastaveno podle pravidel URL: levá strana obsahuje slovo „clsid“ a pravá strana obsahuje skutečný identifikátor třídy.
Příklad: CLASSID="clsid:017C99A0-8637-llCF-A3A9-00A0C9034 920"

CODEBASE=URL
Tento atribut určuje adresu URL (tentokrát skutečnou, s předponou "http:" nebo "ftp:"). V tomto atributu můžete uvést více adres URL pro případ, že jeden ze serverů je z nějakého důvodu nedostupný.
Stejný atribut umožňuje zadat požadované číslo verze pro ovládací prvky ActiveX.
Pokud například napíšete CODEBASE="http://activex.microsoft.com/controls/iexplorer/iestock.ocx# Version=4.72,0.1171"
pak pokus získat tento modul ActiveX z internetu se pokouší nejen, když není na počítači uživatele, ale také když je ovládací prvek nainstalován, ale má více staré číslo verze než ta, která je uvedena v atributu CODEBASE (V našem příkladu je vyžadována verze ne starší než 4.72.0.1171).

CODETURE=MIME-typ
TYPE=MIME-typ
Tyto dva volitelné atributy vám umožňují určit typy (ve smyslu standardu MIME) těch souborů, na které odkazují atributy CLASSID (atribut CODETYPE) a DATA (atribut TYPE). U ovládacích prvků ActiveX musí být atribut CODETYPE, pokud existuje, nastaven na "application/x-oleobject".

DATA=URL
Tento atribut určuje umístění datového souboru, který může být potřebný pro fungování tohoto ovládacího prvku. U některých ovládacích prvků ActiveX je tento atribut vyžadován. Kromě toho můžete pomocí atributu DATA zahrnout soubor obsahující ovládací prvek přímo do souboru HTML v zakódované podobě.

PROHLÁSIT
Toto prohlášení je obvykle prázdné. Lze jej použít k deklaraci objektu, když není implementován, ale je pouze parametrem jiného objektu. Zároveň je celá sada atributů objektů zapsána do paměti prohlížeče pro případ, že by je někdo vyžadoval.

ID=id
Potřebné pro organizaci interakce s jinými objekty, které mají identifikátor. Může být také použit ve schématu adresování URL (to znamená, že se může objevit za znakem "#" v URL).
Můžete vytvořit libovolný počet značek se stejnou hodnotou CLASSID, ale jejich hodnoty ID se musí lišit.

NÁZEV=id
Nepovinný atribut, který lze použít při přípravě formuláře HTML (k tomu musí být značka uvnitř páru značek ... ). Odeslaná data budou obsahovat informace přijaté prohlížečem z objektu.

TVARY
Tento prázdný atribut umožňuje v rámci okna obsazeného objektem v prostoru prohlížeče vybrat další podoblasti a označit je jako další URL odkazy (druh aktivních bodů). Souřadnice těchto oblastí a adresy URL odkazů na ně jsou specifikovány pomocí značek se speciálními doplňkovými atributy, které musí být umístěny mezi odpovídajícím AND.

V této lekci se seznámíme s tagem. Jeho hlavním účelem je vložit do HTML stránky nějaké objekty, které prohlížeč není schopen rozpoznat. Může to být například flashová hra, obrázky, audio, video, java applety, prvky ActiveX, PDF.

Syntaxe HTML tagu

... [] ...

V sekci atributy jsou velmi důležité parametry pro provoz objektu (na jejich význam se podíváme s příklady níže). Navíc jsou povinné pouze dva: typ a data . Mezi zavíracími a otevíracími tagy objektu můžete nastavit parametry pro připojený objekt (pokud jsou samozřejmě potřeba) pomocí .

Atributy značek 1. Zarovnat

Zarovnat – zodpovídá za zarovnání objektu vzhledem k ostatním prvkům stránky.

Například

VALUE může nabývat následujících hodnot:

• absmiddle - zarovnat na střed aktuálního řádku
• účaří , střed - zarovnání k účaří aktuální čáry
• bottom (výchozí) – zarovná spodní okraj objektu s okolním textem
• vlevo - umístění objektu vlevo
• vpravo - umístění objektu vpravo
• top - zarovnat k nejvyššímu prvku aktuálního řádku

2.Klasický

Classid – říká prohlížeči, který program, plugin nebo applet má načíst. Tento program bude dále pracovat s objektem

Například

Místo adresy URL můžete napsat buď absolutní nebo relativní adresu.

3. Údaje

Data jsou nejdůležitějším argumentem, protože specifikují adresu objektu.

Například

Adresa objektu je určena v závislosti na tom, zda jsme zadali kódovou základnu. Pokud není uvedena kódová báze, pak je adresa objektu uvedena relativně k části adresáře, ve které se nacházíme. Doporučil bych uvést úplnou adresu objektu.

4. Výška a šířka

Výška a Šířka - nastavte výšku a šířku objektu. Lze zadat v pixelech i procentech. Pokud to nastavíme v procentech, pak se hodnoty vypočítají na základě povolené plochy.

Například

5. Napište

Typ – definuje typ MIME dat specifikovaných v atributu data. Je potřeba, aby si prohlížeč připravil potřebné prostředky. Nejčastěji je jeho hodnota přesně "application/x-shockwave-flash".

Pokud prohlížeč nepodporuje objekty (to se často stává, pokud není nainstalován Adobe flash player), můžete uvnitř značky zadat text, který bude uživatele informovat, že objekt nelze načíst.

Například

Litujeme, objekt nelze zobrazit Poznámka 1

Prohlížeč IE nemusí správně porozumět hodnotě dat, takže byste měli adresu souboru zadat znovu ve značkách param:

Příklad: hodiny používající objekt

Pomocí objektu můžete snadno zobrazit multimediální objekty a prvky. Nejjednodušším a nejzřetelnějším příkladem jsou hodinky.

Demo ukazuje most mezi 2D grafikou v HTML5 a skutečnou 3D (pomocí WebGL). Účelem tohoto článku je ukázat, jak kreslit 3D objekty pomocí polygonální sítě. Polygonální síť je sbírka vrcholů, hran a ploch, které definují tvar mnohostěnných objektů ve 3D. počítačová grafika a pevné modelování.

Jednoduché 3D objekty

Fasáda se skládá z trojúhelníků, čtyřúhelníků nebo jiných jednoduchých mnohoúhelníků. Abychom to demonstrovali, připravili jsme jednoduché 3D objekty – krychli a mnohostěnné koule (s proměnným počtem ploch).

Kreslení 3D objektů Krok 1: HTML

Jako obvykle (pro všechna dema založená na plátně) máme velmi jednoduchý HTML značení(s jedním objektem uvnitř, plátno):

Drátové 3D objekty v HTML5 K ovládání průhlednosti objektů použijte tlačítka nahoru/dolů

Načtení inicializace objektu, viz:

//var obj = new cube(); //var obj = new sphere(6); var obj = nová koule(16);

To znamená, že pokud potřebujeme zobrazit krychli, musíte odkomentovat první řádek, pokud chcete zobrazit kouli se 6 plochami, musíte vybrat druhou možnost.

Krok 2. JS

JavaScriptové soubory jsou tři (main.js, meshes.js a transform.js), dva z nich zveřejňujeme, třetí (transform.js) obsahuje pouze výpočtové funkce související s rotací, škálováním a projektovými objekty. Podívejme se tedy na první kód JavaScript:

js/meshes.js // Získání funkce náhodné barvy getRandomColor() ( písmena var = "0123456789ABCDEF".split(""); var color = "#"; pro (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 samém začátku musíme připravit všechny body a fasádu našich objektů. Existují 2 funkce: krychle (která generuje počáteční pole pro jednoduchý objekt krychle) a koule (pro generování koule). Je mnohem obtížnější vypočítat všechny body a plochy pro mnohostěnnou kouli. Jakmile máme všechny tyto body a plochy, musíme vypočítat další parametry (jako je vzdálenost, absolutní střed a tři osy).

// Interní proměnné var canvas, ctx; var vAlpha = 0,5; var vShiftX = vShiftY = 0; vzdálenost var = -700; var vMouseSens = 0,05; var iHalfX, iHalfY; // Inicializační funkce sceneInit() ( // Pří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čáteční měřítko a převod měřítkoObj(, obj); translateObj([-obj.center, -obj.center, -obj.center],obj); translateObj(, obj); // Připojení k události handler document. onkeydown = handleKeydown; canvas.onmousemove = handleMousemove; // Hlavní smyčka setInterval(drawScene, 25); ) // Obsluha události Funkce OnKeyDown handleKeydown(e) ( kCode = ((e.který) || (e.keyCode )); přepínač (kCode) ( případ 38: vAlpha = (vAlpha = 0,2) ? (vAlpha - 0,1) : vAlpha; break; // klávesa dolů ) ) // funkce obsluhy události 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.vzdálenosti[f]]; ) aFaceTriangles = (faceVertex:obj.faces[i], faceColor:obj.colors[i], distance:max); ) aFaceTriangles.sort(sortByDistance); // Připravte pole s předpokládanými body var aPrjPoints = new Array(); for (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; } }

Jakmile se stránka načte, provedeme hlavní inicializaci (funkce sceneInit). Vytváříme plátno a objektový kontext, což znamená, že provedeme počáteční měřítko a přeložíme naše objekty, které jsme vytvořili na samém začátku (krychle nebo koule). Potom k OnKeyDown a OnMouseMove připojíme obslužné rutiny událostí a nastavíme časovač pro vykreslení naší hlavní scény (funkce DrawScene). Nezapomeňte, že parametry globalAlpha můžeme změnit stisknutím kláves Nahoru/Dolů.