Notice: Undefined variable: this in /home/dimarini/public_html/libraries/src/Application/CMSApplication.php on line 441

CSS Елементи и позициониране

Показване на елементи в CSS

Свойството display определя дали и как да се показва даден елемент, а свойството visability определя дали елемента да е видим или не. За да се скрие даден елемент на свойството display се задава стойност none или на свойството visability се задава стойност hidden


    <head>
      <style type="text/css">
    	  h1.hidden {visibility:hidden;}
    	  h2.none {display:none;} 
      </style>
    </head>

Блокови и редови елементи Блоковият елемент заема цялата налична ширина и вкарва нов ред преди и след него. Такива блокови елементи са например <h1>, <p> и <div>. Редовите елементи заемат само толкова место, колкото им е необходимо и не вкарват нов ред - <span> и <a>. Редовите елементи могат да се променят на блокови и обратно като на определен селектор се зададе свойство display със стойности съответно block или inline.


    <head>
      <style type="text/css">
    	  span{display:block;} 
    	  li{display:inline;} 
      </style> 
    </head>

Позициониране в CSS

Свойството position позволява разполагането на елементите по определен начин. Елементите могат да се позиционират с използването на свойствата top, bottom, left, и right, които работят по-различен начин в зависимост от стойността на свойството position. Съществуват три основни метода на позициониране – fixed (фиксирано), relative (относително) и absolute (абсолютно). Свойството z-index позволява да се позиционира даден елемент по оста Z, т.е. да се поставя над или под другите елементи. На това свойство могат да се присвояват положителни и отрицателни стойности. Със свойството clip може да се изреже една част от дадено изображение, като се определя отстоянието на рамката последователно от горе, от дясно, от долу и от ляво. Когато текста на съдържанието е много дълъг с помощта на свойството overflow може да бъде вкаран в правоъгълник с определени размери и възможност за скролиране (виж примера в браузъра): 


<!DOCTYPE html>
  <head>
    <style type="text/css">
	  p.fixed {
		position:fixed;  
		top:30px;   
		right:5px;} 
		h2.right{position:relative;  
		left:20px;
	  }
	  h2.absolute {
		position:absolute; 
		left:100px;   
		top:150px;}
		img{position:absolute;  
		left:50px;      
		top:-70px;      
		z-index:-1;
	  }
	  img.clip {
		position:absolute; 
		top:200px;       
		left:50px;      
		clip:rect(0px,80px,100px,0px);
	  }
	  p.overflow {
		position:fixed;  
		top:350px;      
		left:350px;  
		background-color:Wheat;  
		width:300px;    
		height:100px;   
		overflow:scroll;
	  }
	</style>
  </head>
  <body> 
	<p class="fixed">Това е фиксиран текст!</p>
	<h2>Това заглавие е без позициониране</h2>
	<h2 class="right">Това заглавие е изместено в дясно с 20 px от нормалната лява позиция<h2>
	<h2 class="absolute">Това заглавие е с абсолютно позициониране,  
			     а изображението е под надписите.<h2> 
	<img src="/rose.png" width="400" height="475" /> 
	<img class="clip" src="/love.png" width="100" height="180" /> 
	<div class="overflow" style="font-size:12px">Следва ълъг текст</div>
  </body>
</html>