Каскадные таблицы стилей в html
Листы стилей CSS (Cascading Style Sheets – каскадные листы стилей) используются для задания способов отображения HTML-элементов. Листы стилей используются также для задания способов отображения любых XML-элементов.
Далее будут рассмотрены примеры с таблицами в HTML- документах.
Пример1. Файл prel.html. . Вид электронного документа показан на рисунке 1.21
<html> <head> <style>
h1.example1
{position:relative;left:40;}
h1.example2
{position:relative;left:-20;}
</style> </head>
<body>
<h1>Заголовок первого уровня</h1>
<h1 class="example1">Заголовок первого уровня со сдвигом +40</h1>
<h1 class="example2">Заголовок первого уровня со сдвигом -20</h1>
<p> Относительное позиционирование задает сдвиг относительно исходного неизмененного положения элемента.
<p> "left:40" прибавить 40 пикселей к положению левой границы.
<p> "left:-20" отнять 20 пикселей от положения левой границы.
</body> </html>
Рисунок 1.21 - prel.html
Пример 2. Файл pabs.html. Вид электронного документа показан на рисунке 1.22
<html> <head> <style>
h1.x
{position:absolute;left:120;top:150;}
</style> </head>
<body>
<h1 class="x">Заголовок первого уровня</h1>
<p>Абсолютное позиционирование позволяет разместить элемент в любом месте странички.
<p>
Заголовок смещен на 120 пикселей вправо и на 150 пикселей вниз.
</p> </body> </html>
Рисунок 1.22 - pabs.html
Пример 3. Видимость объектов. Вид электронного документа показан на рисунке 1.23
<html> <head> <style>
h1.1
{visibility:visible;}
h1.2
{visibility:hidden;}
</style> </head>
<body>
<h1 class="1">Первый заголовок</h1>
<h1 class="2">Второй заголовок</h1>
<p>Второй заголовок невидим.</p>
</body> </html>
Рисунок 1.23 - Видимость объектов.html
Пример 4. Свойство Z-index. Вид электронного документа показан на рисунке 1.24
<html> <head> <style>
img.x
{position:absolute;left:0;top:0;z-index:-1;}
</style> </head>
<body>
<h1>Заголовок</h1>
<img class="x" src="1.jpg">
<p>По умолчанию задается значение свойства z-index равное 0.
Свойство Z-index равное -1 имеет меньший приоритет, чем то, что задано по умолчанию.</p>
</body> </html>
Рисунок 1.24 - Свойство Z-index.html
Пример 5. Фильтры. Вид электронного документа показан на рисунке 1.25
<html> <head> <style>
h1
{width:100%;}
</style> </head>
<body>
<h1 style="filter:glow()">Сияние</h2>
<h1 style="filter:blur()">Растушевка</h2>
<h1 style="filter:fliph()">Горизонтальное отражение</h2>
<h1 style="filter:flipv()">Вертикальное отклонение</h2>
<h1 style="filter:shadow()">Простая тень</h2>
<h1 style="filter:dropshadow()">Отброшенная тень</h2>
<h1 style="filter:wave(Strength=2)">Волна</h2>
<p>Фильтры не работают, если не задано значение свойства элемента width.</p>
</body> </html>
Рисунок 1.25 - Фильтры.html
Пример 6. alpha.html. Вид электронного документа показан на рисунке 1.26
<html> <head> <style>
img
{filter:alpha(opacity=10)}
</style>
<script language="javascript">
function c()
{interval=setInterval("mc(myImage)",10)}
function f()
{clearInterval(interval) myImage.filters.alpha.opacity=10}
function mc()
{if (myImage.filters.alpha.opacity<100)
{myImage.filters.alpha.opacity+=5}
else if (window.interval)
{clearInterval(interval)}}
</script></head>
<body>
<img id="myImage" src="2.jpg" onmouseover="c()" onmouseout="f()" width="160" height="120">
<b>Поместите курсор на рисунок</b>
</body> </html>
Рисунок 1.26 - alpha.html
Пример 7. fimage.html. Вид электронного документа показан на рисунке 1.27
<html> <head> <style>
div
{width:160;height:120;}
</style> </head>
<body>
Alpha:
<div style="filter:alpha(Opacity=20)">
<img src="2.jpg" width="160" height="120"> </div>
Gray:
<div style="filter:gray()">
<img src="2.jpg" width="160" height="120"> </div>
Invert:
<div style="filter:invert()">
<img src="2.jpg" width="160" height="120"> </div>
Xray:
<div style="filter:xray()">
<img src="2.jpg" width="160" height="120"> </div>
Mask:
<div style="position:absolute;left:10;top:610;">
<img src="2.jpg" width="160" height="120"> </div>
<div style="position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120">
<h1>Это маска. Рисунок в буквах.</h1> </div>
</body> </html>
Рисунок 1.27 - fimage.html
Пример 8. filtermask. Вид электронного документа показан на рисунке 1.28
<html>
<head>
<style>
left:0;
top:0;}
</style>
<script type="text/javascript">
mouseover=true
function coordinates()
{if (!moveMe)
{return}
if (event.srcElement.id=="moveMe")
{mouseover=true
pleft=moveMe.style.pixelLeft
ptop=moveMe.style.pixelTop
xcoor=event.clientX
ycoor=event.clientY
document.onmousemove=moveImage}}
function moveImage()
{if (mouseover&&event.button==1)
{moveMe.style.pixelLeft=pleft+event.clientX-xcoor
moveMe.style.pixelTop=ptop+event.clientY-ycoor
return false}}
function mouseup()
{mouseover=false}
document.onmousedown=coordinates
document.onmouseup=mouseup
</script>
</head>
<body>
<span>Передвигайте круг</span>
<br>
<div style="position:absolute;left:0;top:20;">
<img src="2.jpg" width="240" height="180"></div>
<div style="position: absolute; left: 0; top: 20; filter: mask(color=#ffffff); width: 240; height: 180">
<img id="moveMe" src="1.jpg" width="48" height="48"></div>
</body>
</html>
Рисунок 1.28 - filtermask.html
Пример 9. filtermasktext.html. Вид электронного документа показан на рисунке 1.29
<html> <head> <style>
div
{width:160;height:120;}
img
{position:relative;}
span
{width:100%;position:absolute;top:0;left:0;}
</style>
<script type="text/javascript">
mouseover=true
function coordinates()
{if (!moveMe)
{return}
if (event.srcElement.id=="moveMe")
{mouseover=true
pleft=moveMe.style.pixelLeft
ptop=moveMe.style.pixelTop
xcoor=event.clientX
ycoor=event.clientY
document.onmousemove=moveImage}}
function moveImage()
{if (mouseover&&event.button==1)
{moveMe.style.pixelLeft=pleft+event.clientX-xcoor
moveMe.style.pixelTop=ptop+event.clientY-ycoor
return false}}
function mouseup()
{mouseover=false}
document.onmousedown=coordinates
document.onmouseup=mouseup
</script> </head>
<body>
<span>Передвигайте кружок.</span><br>
<h1>Текст для фильтрования</h1>
<p> Этот текст можно видеть<br>
только тогда,<br>
когда на него наведен рисунок<br>
в виде окружности.<br> </p>
<div style="position: absolute; left: 0; top: 20; filter: mask(color=#000000); width: 300; height: 200">
<img id="moveMe" src="1.jpg" width="50" height="50">
</div> </body> </html>
Рисунок 1.29 - filtermasktext.html
Пример 10. filterlight.html. Вид электронного документа показан на рисунке 1.30
<html> <head>
<script language=JavaScript>
function setlight()
{light_div.filters[0].addcone(50,50,20,60,160,195,490,310,300,100); }
</script>
<style>
div
{ width:100;}
</style> </head>
<body onload="setlight()">
Исходное изображение:<br>
<img src="2.jpg" width="240" height="180">
<br> Тот же рисунок с эффектом освещения:<br>
<div id="light_div" style="filter:light(enabled=1);">
<img src="2.jpg" width="240" height="180">
</div> </body> </html>
Рисунок 1.30 - filterlight.html
Пример 11. filtermovelight.html. Вид электронного документа показан на рисунке 1.31
<html> <head>
<script language=JavaScript>
var timer
i=0
j=0
k=0
l=160
m=120
function setlight()
{light_div.filters[0].clear()
if (i<100)
{light_div.filters[0].addcone(0,0,0,50,50,100,120,200,i,100)}
else
{if (j<160)
{light_div.filters[0].addcone(j,0,0,50,50,100,120,200,i,200)
j++}
else
{if (k<120)
{light_div.filters[0].addcone(j,k,0,50,50,100,120,200,i,200)k++}
else
{if (l>0)
{l--
light_div.filters[0].addcone(l,k,0,50,50,100,120,200,i,200)}
else
{if (m>0)
{m--
light_div.filters[0].addcone(l,m,0,50,50,100,120,200,i,200)}
else
{stoptimer()}} } }}
i++
timer=setTimeout("setlight()",1)}
function stoptimer()
{clearTimeout(timer)}
</script>
<style>
div
{width:100;}
body
{background:#000000;}
</style> </head>
<body onload="setlight()" onunload="stoptimer()">
<div id="light_div" style="filter:light(enabled=1);"><img src="1.jpg" width="160" height="120"></div>
</body> </html>
Рисунок 1.31 - filtermovelight.html
Пример 12. fon.html. Вид электронного документа показан на рисунке 1.32
<html> <head> <style>
<body>
{background-attachment: fixed;background-image: url("1.jpg");background-repeat: no-repeat;}
</style> </head>
<body>
<p>Прокручивайте страничку</p>
<br><br><br><br><br><br><br>
<p>Прокручивайте страничку</p>
<br><br><br><br><br><br><br>
. . .
</body>
</html>
Рисунок 1.32 - fon.html
Пример 13. bgcolor.html. Вид электронного документа показан на рисунке 1.33
<html> <head>
<script type="text/javascript">
function bgChange(bg)
{document.body.style.background=bg}
</script> </head>
<body>
<b>При движении мышки изменяется цвет фона.</b>
<table width="300" height="100">
<tr> <td onmouseover="bgChange('red')"
onmouseout="bgChange('transparent')"
bgcolor="red"> </td>
<td onmouseover="bgChange('blue')"
onmouseout="bgChange('transparent')"
bgcolor="blue"> </td>
<td onmouseover="bgChange('green')"
onmouseout="bgChange('transparent')"
bgcolor="green"> </td>
</tr> </html>
Рисунок 1.33 - bgcolor.html
Описание творческого задания
Электронный учебник на тему «Компьютерные сети».
На рисунке 1.34 показан содержимое папки
На рисунке 1.35 показан электронный учебник
Рисунок 1.34 – содержимое папки.html
Рисунок 1.35 – электронный учебник.html
Математический пакет Maple
Основные сведения о математическом пакете
Maple — программный пакет, система компьютерной алгебры. Является продуктом компании Waterloo Maple Inc., которая с 1984 года выпускает программные продукты, ориентированные на сложные математические вычисления, визуализацию данных и моделирование.
Система Maple предназначена для символьных вычислений, хотя имеет ряд средств и для численного решения дифференциальных уравнений и нахожденияинтегралов. Обладает развитыми графическими средствами. Имеет собственныйязык программирования, напоминающий Паскаль.