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

CSS Правоъгълен модел

Този модел е правоъгълник, който обгръща HTML елементи и се състои от margin (полета), border (ограждения), padding (дистанция) и същинското съдържание.


Височина и широчина на даден елемент


Със задаване на свойствата width (широчина) и height (височина) се определят физическите размери за съдържанието. За да се знае точният размер на елемента е необходимо да се добавят и размерите на padding, border margin. Общата широчина на елемента в примера по-долу е 340 px:


    width:260px;
    padding:15px;
    border:10px solid blue;
    margin:15px;

За да бъдат правоъгълните модели с точни размери във всички браузъри задължително се задава DOCTYPE в началото на документа (виж примера в браузъра):


<!DOCTYPE html>
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> Правоъгълен модел в CSS </title>
	<style type="text/css">   
		div.ex {
		  width:260px; 
		  height:50px; 
		  padding:15px; 
		  border:10px solid blue; 
		  margin:15px;
		  }
	</style> 
  </head> 
  <body>  
	<div class="ex">Широчината на модела е 340 px<br />  
	Височината на модела е 130 px.</div>  
	<p>В този пример е добавена декларация DOCTYPE<br />  
	за правилно показване във всички браузъри.</p> 
  </body>
</html>

Стилно огражденията в CSS Свойството border-style определя начина по който да се показват огражденията. Стойностите на свойството border-style са none, dotted, dashed, solid, double, groove, ridge, inset, outset и hidden. В долният пример са показани изброените стойности, като са добавени и свойства width със стойност 320 px и border с определена дебелина и цвят на ограждението. Цвета на ограждението може да се задава както с име, така и с rgb или шестнадесетична стойност. Удебеляването на ограждението може да се задава отделно със свойството border-width, а цвета със свойството border-color. Възможно е да се зададат различни стойности за всяка от страните на ограждението чрез свойствата border-top-style, border-right-style, border-bottom-style и border-left-style. Съществува и възможност за очертаване на елемента с помощтта на свойствата outline-style, outline-width и outline-color(виж примера в браузъра):


<!DOCTYPE html>
  <head>
	<style type="text/css">
		p.none {border:none;}
		p.dotted {width:320px;border:5px DarkBlue;border-style:dotted;} 
		p.dashed {width:320px;border:5px #00FFFF; border-style:dashed;} 
		p.solid {
		  width:320px;         
		  border-style:solid;     
		  border-width:20px 15px 10px 5px; 
		  border-color:blue red green orange;
		  outline-style:dashed;     
		  outline-color:brown;     
		  outline-width:thick
		  }
		p.double {
		  width:320px;
		  border:
		  10px rgb(255,0,0);
		  border-style:double;
		  } 
		p.groove {
		  width:320px;
		  border:20px #98bf21;
		  border-style:groove;
		  }  
		p.ridge {
		  width:320px;
		  border:20px solid blue;
		  border-style:ridge;
		  } 
		p.inset {
		  width:320px;
		  border:20px solid blue;
		  border-style:inset;
		  }
		p.outset {
		  width:320px;
		  border:20px solid blue;
		  border-style:outset;
		  }   
		p.hidden {
		  width:320px;
		  border-style:hidden;
		  }  
		p.mixxed {
		  width:320px;
		  height:80px;
		  border:10px red;
		  border-top-style:dotted;
		  border-right-style:dashed;
		  border-bottom-style:ridge;
		  border-left-style:inset;
		  }   
	</style>
  </head>
  <body>
	<p class="none">Без ограждане - border-style:none</p>
	<p class="dotted">Ограждане с точки - border-style:dotted</p> 
    <p class="dashed">Ограждане с пунктир - border-style:dashed</p>
    <p class="solid">Ограждане с плътна линия - border-style:solid,  
	различна дебелина на линиите на ограждението,    
	различни цветове на линиите на ограждението,    
	очертаване на елемента с пунктир с определен цвят и дебелина</p>
	<p class="double">Ограждане с двойна линия - border-style:double</p> 
    <p class="groove">Фигурно ограждане - border-style:groove</p> 
    <p class="ridge">Фигурно ограждане - border-style:ridge</p>  
	<p class="inset">Фигурно ограждане - border-style:inset</p> 
    <p class="outset">Фигурно ограждане - border-style:outset</p> 
    <p class="hidden">Скрито ограждане - border-style:hidden</p>
	<p class="mixxed">Смесено ограждане –          
	border-style-top:dotted, border-style-right:dashed,   
	border-style-bottom:ridge, border-style-left:inset</p> 
  </body>
</html>

CSS полета (margin) Както споменах по-горе, свойството margin определя пространството около даден елемент. Полето няма цвят и е напълно прозрачно. Полетата top (горно), right (дясно), bottom (долно) и left (ляво) могат да се задават независимо едно от друго с използване на отделни свойства. Може да се използва и съкратено записване за промяна на всички полета едновременно. Могат да се използват и отрицателни стойности за препокриване на елементи. Стойностите на свойството margin могат да бъдат от едно до четири:


	margin:25px 50px 75px 100px; 
	  горно поле - 25px
	  дясно поле - 50px
	  долно поле - 75px
	  ляво поле - 100px
	margin:25px 50px 75px; 
	  горно поле - 25px
	  дясно и ляво поле - 50px
	  долно поле - 75px
	margin:25px 50px; 
	  горно и долно поле - 25px
	  дясно и ляво поле - 50px
	margin:25px; 
	  всички четири полета - 25px

Задаване на дистанция (padding) в CSS Това свойство оставя празно пространство около съдържанието на даден елемент, което е с цвета на фона, зададен за този елемент. Дистанцииите top, right, bottom и left могат да се задават независимо една от друга с използването на отделни свойства. Може да се прилага и съкратено записване за промяната на всички дистанции едновременно.


	padding:25px 50px 75px 100px;  
	  горна дистанция - 25px 
	  дясна дистанция - 50px 
	  долна дистанция - 75px 
	  лява дистанция - 100px
	padding:25px 50px 75px; 
	  горна дистанция - 25px  
	  дясна и лява дистанция - 50px
	  долна дистанция - 75px
	padding:25px 50px; 
	  горна и долна дистанция - 25px  
	  дясна и лява дистанция - 50px
	padding:25px; 
	  всички четири дистанции - 25px