проф. д.н. ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/8.pdf · Елемент със свойството position: sticky се позиционира спрямо текущата

проф. д.н. ДАНИЕЛА БОРИСОВА

1. Въведение в уеб-програмирането – езици за уеб програмиране, синтаксис на езика HTML

2. BOX модел. CSS – синтаксис и деклариране на стилове. Деклариране и използване на класове и селектори

3. Форматиране на текст и списъци4. Използване на цветове и изображения5. Таблици – тагове и атрибути6. Формуляри – елементи, методи за изпращане7. Използване на рамки и мултимедия, семантични елементи в HTML5,

различия между HTML и XHTML8. Създаване на темплейти чрез CSS и HTML9. Въведение в JavaScript. Синтаксис, типове променливи и оператори10. JavaScript – условия, функции, Regular Expressions, обекти за дата, час,

годинаД. Борисова

Схеми за позициониране

Плаващи елементи – float

z-index

overflow

display и visibility

темплейти

CSS предлага изобилие от контроли за позициониране наелементите в даден HTML документ. Може да поставим всекиHTML елемент на точно определено място, което ни харесва.

Могат да се зададат 5 вида позициониране:position: static, relative, fixed, absolute, sticky

Тези схеми за позициониране могат да използват 4 различнисвойства за описване на отместване на позициониранияелемент. Тези свойства са основните механизми заосъществяване на позиционирането, а именно:

top, right, bottom, left

Д. Борисова

Пример за относително позициониране<style>

h2.pos_left {position:relative; left:-20px;}h2.pos_right {position:relative; left:20px;}

</style><h2>Това е заглавие без позициониране </h2><h2 class="pos_left">Това е заглавие е преместено наляво, спрямо нормалната си позиция</h2><h2 class="pos_right">Това е заглавие е преместено надясно, спрямо нормалната си позиция</h2><p> Относително позициониране премества даден елемент спрямо първоначалната му позиция.</p>

Пример за абсолютно позициониране<style>

h2 {position:absolute; left:100px; top:150px;}</style><h2> Това е заглавие с абсолютна позиция </h2><p> С абсолютно позициониране, даден елемент може да бъде позициониран навсякъде в страницата. </p>


Пример за фиксирано позициониране

<style>.fixed {position: fixed; bottom: 0; right: 0;

width: 300px; border: 3px solid #73AD21; </style><h2 class="fixed"> Това е заглавие с абсолютна позиция </h2><p> С фиксираното позициониране, даден елемент може да бъде позициониран на точно определено място в страницата. </p>


Елемент със свойството position: sticky се позиционираспрямо текущата позиция на скролващата линия напотребителя.

<style>.sticky{position: -webkit-sticky; position: sticky; top: 0; padding: 5px;

background-color: #cae8ca; border: 2px solid #4CAF50;}</style><h2> Това е заглавие </h2><p class="sticky"> I am sticky! </p><p> С фиксираното позициониране, даден елемент може да бъде позициониран на точно определено място в страницата. </p>


Когато елементите са разположени извън нормалния поток, темогат да се застъпват с други елементи.

Свойството z-index определя последователността на елементите(кой елемент трябва да бъде поставен в отгоре или отдолу надругите елементи).

Използвайки подходящи стойности за position, може да сенаслагват един върху друг елементите. В такъв случай колкотопо-късно в HTML кода е описан даден елемент, на толкова по-предна позиция ще се намира.


Пример за използване на z-index

<style>img {position: absolute; left:0px; top:0px; z-index:-1;}

</style>

<h1>Това е заглавие</h1><img src="image.gif" width="200" height="200" /><p>Тъй като z-index на изображението имастойност -1, то ще бъде поставено зад текста.</p>


За постигане на центрирано хоризонтално подравняване наблоков елемент се използва margin: auto;<style>.center {margin: auto; width: 60%;

border: 3px solid #73AD21; padding: 10px;}</style><h2>Center Align Elements</h2><p>To horizontally center a block element (like div), use margin: auto;</p><div class="center"><p><b>Note: </b>Using margin:auto will not work in

IE8, unless a !DOCTYPE is declared.</p></div>

Даниела Борисова

За центриране на текст в HTML елемент се използва свойствотоtext-align: center;

<style>.center {text-align: center; border: 3px solid green;}</style><h2>Center Text</h2>

<div class="center"><p>This text is centered.</p>

</div>


За да се центрира изображение се задават стойности auto на leftи right margin в блоковия елемент:

<style>img {display: block; margin-left: auto; margin-right: auto;}</style><h2>Center an Image</h2><p>To center an image, set left and right margin to auto, and make it into a block element.</p><img src="paris.jpg" alt="Paris" style="width:40%">


Подравняване на елементи

Свойството float се използва за подравняване елементите в уебстраниците.

Елементите могат да се подрявняват в ляво или дясно спрямоосновния поток на документите (т.е. тези елементи серазглеждат като плаващи).

Допустимите стойности са на свойството са:

float: left, right, none, inherit.


Свойството clear определя кои елементи могат да се плаващидо изчистения елемент и от коя страна.

Една от следните стойности може да бъде използвана:

none – по подразбиране

left – не се допускат плаващи елементи от лявата страна

right – не се допускат плаващи елементи от дясната страна

both – не се допускат плаващи елементи нито от лявата, нито от дясната страна

inherit – елементът наследява стойността на родителя

clear: none, left, right, both, inherit


<style>.div1 {float: left; width: 100px;height: 50px;

margin: 10px; border: 3px solid #73AD21;}.div2 {border: 1px solid red;}.div3 {float: left; width: 100px; height: 50px;

margin: 10px; border: 3px solid #73AD21;}.div4 {border: 1px solid red; clear: left;}</style><h2>Without clear</h2><div class="div1">div1</div><div class="div2">div2 - Notice that div2 is after div1 in the HTML code. However, since div1 floats to the left, the text in div2 flows around div1.</div><br><br><h2>With clear</h2><div class="div3">div3</div><div class="div4">div4 - Here, clear: left; moves div4 down below the floating div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>


Свойството overflow определя дали да се покаже съдържание илида се добавят превъртащи ленти, когато съдържанието наелемента е твърде голямо, за да се побере в определена област.

Свойството overflow може да има следните стойности:

visible - по подразбиране. Преливането не е изрязано. Това сеправи извън кутията на елемента

hidden - препълването е отрязано и останалата част отсъдържанието ще бъде невидима

scroll - преливането е отрязано, но е добавена лента за превъртане,за се види останалото съдържание

auto - ако преливането е отрязано, трябва да се добави лента запревъртане, за да се види останалото съдържание


Ако елементът е по-висок от елемента, който го съдържа, и тойе плаващ, то той ще препълни неговия контейнер:

Това може да се избегне, ако се добави overflow: auto; къмсъдържащия елемент:

.clearfix { overflow: auto;}


<style>div { border: 3px solid #4CAF50; padding: 5px;}.img1 {float: right;}.clearfix { overflow: auto;}.img2 {float: right;}

</style><div><img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">Lorem ipsum .............</div><p style="clear:right">Add a clearfix class with overflow: auto; to the containing element, to fix this problem:</p><div class="clearfix"><img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">Lorem ipsum dolor..</div>


<style>.ovr { background-color: #eee; width: 200px; height: 50px;

border: 1px dotted black; overflow: visible;}</style><h2>CSS Overflow</h2><p>By default, the overflow is visible, meaning that it is not clipped and it renders outside the element's box:</p><p class="ovr"> You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</div>

Даниела БорисоваД. Борисова


Свойствата overflow-x и overflow-y определят преливането насъдържание само хоризонтално или вертикално (или и двете)<style>.ovrfl{background-color: #eee; width: 200px; height: 50px;

border: 1px dotted black; overflow-x: hidden; verflow-y: scroll;}</style><h2>CSS Overflow</h2><p>You can also change the overflow of content horizontally or vertically.</p><p>overflow-x specifies what to do with the left/right edges of the content.<br>overflow-y specifies what to do with the top/bottom edges of the content.</p><p class="ovrfl">You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.</p>

Свойството display определя как да се показва един елемент, асвойството visibility уточнява дали един елемент трябва да бъдевидим или скрит.

Чрез visibility:hidden може да скрием елемента, но въпрекитова, той ще заема едно и също място, както и преди. Елементътще бъде скрит, но все пак влияе на оформлението.

<style>h1.hidden {visibility:hidden;}

</style><h1>Това е видимо заглавие</h1><h1 class="hidden">Това е скрито заглавие</h1><p> Забележете, че скритото заглавие ще заема пространство.</p>


Свойството display:none може да скрие елемента, но тойняма да отнеме пространството. Елементът ще бъде скрит, астраницата ще се показва като ли че елементът не е там:

<style>h1.hidden {display:none;}

</style>

<h1>Това е видимо заглавие</h1><h1 class="hidden">Това е скрито заглавие</h1><p>Забележете, че скритото заглавие не заема пространство.</p>


Според начина, по който се показват на страницата,елементите могат най-общо да се поделят на блокови и редови.

Свойството display се използва, за да промени начина напоказване на даден елемент, а възможните стойности са:

block – за представяне на елемента като блоков.

inline – елементът получава свойствата на редови елемент.

list-item – елементът ще бъде показан като елемент от списък.

none – елементът няма да бъде показан.

display: block, inline, list-item, none


Пример за визуализиране на елементите в ред (inline)<style>

li { display: inline;}</style><p>Display a list of links as a horizontal menu:</p><ul>

<li><a href="/html/default.asp" target="_blank">HTML</a></li><li><a href="/css/default.asp" target="_blank">CSS</a></li><li><a href="/js/default.asp" target="_blank">JavaScript</a></li>

</ul>

Пример за визуализиране на елементите в блок (block)<style>

a {display: block;}</style><p>Display links as block elements:</p>

<a href="/html/default.asp" target="_blank">HTML</a><a href="/css/default.asp" target="_blank">CSS</a><a href="/js/default.asp" target="_blank">JavaScript</a>


ID селекторите имат по-висок приоритет от селекторите наатрибути:


<style>div#a {background-color: green;}#a {background-color: yellow;}div[id=a] {background-color: blue; color:red;}

</style>

<div id="a">This is a div</div>



съдържание

margin

paddingborder

outline

съдържание (content) – това е съдържанието на самия елемент:може да е текста между началния и крайния таг или да е другелемент.

вътрешен отстъп (padding) – това е разстоянието между ръбана съдържанието и вътрешната страна на рамката.

рамка (border) – вътрешния ръб на рамката съвпада с ръба навътрешния отстъп, а от външния й ръб – започва външния отстъп.

контурна линия (outline) – линията, която се изчертава околоелементите (извън рамките), за да се откроят елементите.

външен отстъп (margin) – това е разстоянието от външния ръбна рамката до заобикалящите елементи.


Първа стъпка при създаването на CSS оформление е да се определятосновните структурни елементи на дизайна.

Като основни структурни HTML елементи се използват елементите,формирани от <div> таговете. Тези елементи формират правоъгълниконтейнери, които могат да бъдат позиционирани и форматирани поподходящ начин със средствата на CSS.


В тялото на документа (между таговете <body> </body>) трябва дасъздадем три области (div), всяка от които с индивидуален уникаленидентификатор id. Тези области ще съответстват на основните частина оформлението, които вече идентифицирахме. В HTML документадефинираме следните 4 области:


<body><div id="wrapper">

<div id="header">Заглавна част </div><div id="content"> Основна част - съдържание </div><div id="footer"> Долна част </div>

</div></body>

В CSS файла дефинираме правила за стиловете, които искаме даприсвоим на определените области от оформлението:


* { padding: 0; margin: 0; }

body { font-family: Arial, Helvetica, sans-serif;font-size: 13px; text-align: center;}

#wrapper { margin: 0 auto; width: 722px; }

#header { width: 700px; height: 100px; padding: 10px; margin: 10px 0px 5px 0px; border: 1px double #006699; color: #FFFFCC; font-size: 18px; background: #78A7C6; }

#content { width: 700px; height: 250px; padding: 10px; margin: 0px 0px 5px 0px; border: 1px dotted #006666;color: #000000; background: #F2F2E6; text-align: justify; }

#footer { width: 700px; height: 66px; padding: 5px;margin: 0px 0px 10px 0px; color: #000000; background: #99CCFF;border: 1px solid #CCCCCC; }


В HTML файла:

В CSS файла:



<div id="header">Заглавна част</div><div id="leftcolumn">Лява колона</div><div id="rightcolumn">Основна част - съдържание </div><div id="footer">Долна част </div>

</div></body>

#leftcolumn { float: left; width: 195px; height: 250px; margin: 0px 0px 5px 0px; padding: 10px;color: #000000; border: 1px dashed #006699; background: #E7DBD5; }

#rightcolumn { float: right; width: 495px; height: 250px; text-align: justify; margin: 0px 0px 5px 0px; padding: 10px; color: #000000; border: 1px dotted #006699; background: #F2F2E6; display: inline; }


В HTML файла:

В CSS файла:



<div id="header"> Заглавна част </div><div id="leftcolumn"> Лява колона </div><div id="content">Основна част – съдържание </div><div id="rightcolumn"> Дясна колона </div><div id="footer"> Долна част </div>

</div></body>

#leftcolumn {float: left; width: 125px; height: 250px;margin: 0px 5px 5px 0px; padding: 10px;border: 1px solid #CCCCCC; background: #E7DBD5;color: #333; }

#content {float: left; width: 456px; height: 250px; display: inline; margin: 0px 5px 5px 0px; padding: 10px;border: 1px solid #CCCCCC; background: #F2F2E6;color: black;}#rightcolumn { float: left; width: 125px; height: 250px;margin: 0px 0px 5px 0px; padding: 10px; border: 1px solid #CCCCCC; background: #E7DBD5; color: black;}

Нека да създадем оформление, което да изпълва целия прозорец набраузъра, както е показано :



<div id="container"><div id="header">

<h1>Име на сайта/лого</h1></div><div id="navigation">

<ul><li><a href="#">Начало</a></li><li><a href="#">За нас</a></li><li><a href="#">Услуги</a></li><li><a href="#">Контакти</a></li>

</ul></div><div id="content-container">

<div id="content"><h2>Заглавие</h2>

<p>Първо трябва да се определят основните структурни елементи на дизайна на HTML документа. Определяме ID на основните контейнери, които ще асоциираме със съответни свойства в CSS файла. </p>

</div></div><div id="footer">Copyright © Site name, 20XX</div>

</div>


#container {margin: 0 auto;width: 100%;background: #F1F1F1;}

#header {background: #D4E3FF; padding: 20px; text-align: center;}

#header h1 {margin: 0;}

#navigation {float: left; width: 100%; background: #0B4353;}

#navigation ul {margin: 0; padding: 0;}

#navigation ul li {list-style-type: none;display: inline;}

#navigation li a {display: block; float: left; padding: 5px 10px; color: #FFFF33; text-decoration: none; border-right: 1px solid #fff;}

#navigation li a:hover {background: #383;}

#content-container {float: left; width: 100%;background: #FFFFCC url(image.gif) repeat-y 68% 0;}

#content {clear: left; float: left; width: 92%; padding: 20px 0; margin: 0 0 0 4%; display: inline; text-align:justify;}

#content h2 {margin: 0;}

#footer {clear: left; height: 1%; padding: 10px;background: #D4E3FF; text-align: center;}


<p> Използване на резлични курсори.</p><span style="cursor:auto">auto</span><br><span style="cursor:crosshair">crosshair</span><br><span style="cursor:default">default</span><br><span style="cursor:e-resize">e-resize</span><br><span style="cursor:grab">grab</span><br><span style="cursor:help">help</span><br><span style="cursor:move">move</span><br><span style="cursor:n-resize">n-resize</span><br><span style="cursor:ne-resize">ne-resize</span><br><span style="cursor:nw-resize">nw-resize</span><br><span style="cursor:pointer">pointer</span><br><span style="cursor:progress">progress</span><br><span style="cursor:s-resize">s-resize</span><br><span style="cursor:se-resize">se-resize</span><br><span style="cursor:sw-resize">sw-resize</span><br><span style="cursor:text">text</span><br><span style="cursor:w-resize">w-resize</span><br><span style="cursor:wait">wait</span><br><span style="cursor:not-allowed">not-allowed</span><br><span style="cursor:no-drop">no-drop</span><br>

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor

Documents

проф. д.н. ДАНИЕЛА БОРИСОВАiit.bas.bg/oup/8.pdf · Елемент със свойството position: sticky се позиционира спрямо текущата