Web<code>Free: CSS

Mostrando postagens com marcador CSS. Mostrar todas as postagens

quinta-feira, 3 de janeiro de 2013

PROPRIEDADES CSS - BORDER

Propriedades Border

A propriedade Border define os tipos de bordas que podem ser associados a uma página, bloco de texto ou a um elemento.

As propriedades para as bordas são as listadas abaixo:

Propriedade	Efeito
border-width:	espessura da borda.
border-style:	cor da borda
border-top-width:	espessura da borda superior
border-top-style:	estilo da borda superior
border-top-color:	cor da borda superior;
border-right-width	espessura da borda direita
border-right-style	estilo da borda direita
border-right-color	cor da borda direita
border-bottom-width	espessura da borda inferior
border-bottom-style	estilo da borda inferior
border-bottom-color	cor da borda inferior
border-left-width	espessura da borda esquerda
border-left-style	estilo da borda esquerda
border-left-color	cor da borda esquerda
border-top	maneira abreviada para todas as propriedades da borda superior
border-right	maneira abreviada para todas as propriedades da borda direita
border-bottom	abreviada para todas as propriedades da borda inferior
border-left	maneira abreviada para todas as propriedades da borda esquerda
border	maneira abreviada para todas as quatro bordas

Valores válidos para as propriedades das bordas

color:

código hexadecimal: #FFFFFF
código rgb: rgb(255,235,0)
nome da cor: red, blue, green...etc

style:

none: nenhuma borda
hidden: equivalente a none
dotted: borda pontilhada
dashed: borda tracejada
solid: borda contínua
double: borda dupla
groove: borda entalhada
ridge: borda em ressalto
inset: borda em baixo relevo
outset: borda em alto relevo

width:

thin: borda fina
medium: borda média
thick: borda grossa
length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)

Existem vários estilos de bordas, definidos pela marcação border-style.

Visualize no exemplo abaixo:

<title>Efeitos de Borda com CSS</title>

<style type="text/css">

#borda1{

         border-color:#06F;

         border-width:thin;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         margin-bottom:10px;

#borda2{

         border-color:#06F;

         border-width:thin;

         border-style:dashed;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda3{

         border-color:#06F;

         border-width:thin;

         border-style:dotted;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

#borda4{

         border-color:#06F;

         border-style:double;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda5{

         border-color:#06F;

         border-width:thin;

         border-style:groove;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

#borda6{

         border-color:#06F;

         border-width:thin;

         border-style:inset;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda7{

         border-color:#06F;

         border-width:thin;

         border-style:ridge;

         width:250px;

         height:50px;

         float:left;

         clear:left

         margin-bottom:10px;

#borda8{

         border-color:#06F;

         border-style:outset;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

</style>

</head>

<body>

<div id="borda1">Borda Solid</div>

<div id="borda2">Borda Dashed</div>

<div id="borda3">Borda Dotted</div>

<div id="borda4">Borda Double</div>

<div id="borda5">Borda Groove</div>

<div id="borda6">Borda Inset</div>

<div id="borda7">Borda Ridge</div>

<div id="borda8">Borda OutSet</div>

</body>

</html>

Resultado:

Podemos também redimensionar a espessura de nossas bordas, usando a marcação border-width.

Podemos mudar de um modo geral o individual segue o exemplo baixo.

<title>Efeitos de Borda com CSS</title>

<style type="text/css">

#borda1{

         border-color:#F00;

         border-width:3px;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         margin-bottom:10px;

#borda2{

         border-color:#06F;

         border-left-width::5px;

         border-left-color:#F00;

         border-style:solid;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda3{

         border-color:#06F;

         border-right-width:5px;

         border-right-color:#F00;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

#borda4{

         border-color:#06F;

         border-style:solid;

         border-bottom-width:5px;

         border-bottom-color:#F00;

         width:250px;

         height:50px;

         float:right;

         clear:right;

         margin-bottom:10px;

#borda5{

         border-color:#06F;

         border-width:thin;

         border-top-width:5px;

         border-top-color:#F00;

         border-style:solid;

         width:250px;

         height:50px;

         float:left;

         clear:left;

         margin-bottom:10px;

</style>

</head>

<body>

<div id="borda1">Todas as Bordas</div>

<div id="borda2">Borda Esquerda</div>

<div id="borda3">Borda Direita</div>

<div id="borda4">Borda Inferior</div>

<div id="borda5">Borda Superior</div>

</body>

</html>

Resultado:

PROPRIEDADES CSS - MARGIN

Propriedades Margin

As margens nos elementos HTML

A propriedade para margens, define um valor para espessura das margens dos elementos HTML. As propriedades para margens são as listadas abaixo:

Propriedade	Efeito
margin-top:	Define a margem superior.
margin-right:	define a margem direita;
margin-bottom:	define a margem inferior;
margin-left:	define a margem esquerda;
margin:	maneira abreviada para todas as margens;

Valores válidos para a propriedade Margin

auto: valor default da margem
length: uma medida reconhecida pelas CSS (px, pt, em, cm, ...)
%: porcentagem da largura do elemento pai

Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos.

Margem Superior – margin-top

<html>

<head>

<style type="text/css">

p {margin-top: 2cm;}

</style>

</head>

<body>

<p>Uma margem superior de 2cm</p>

</body>

</html>

Este é o efeito da folha de estilo acima:

Uma margem superior de 2cm

Margem Direita – margin-right

<html>

<head>

<style type="text/css">

p {margin-right: 300px;}

</style>

</head>

<body>

<p>Uma margem direita de 300px nesta

 frase mais longa dentro do parágrafo</p>

</body>

</html>

Este é o efeito da folha de estilo acima:

Uma margem direita de 300px nesta frase mais longa dentro do parágrafo

Margem Inferior – margin-bottom

<html>

<head>

<style type="text/css">

p {margin-bottom: 2em;}

</style>

</head>

<body>

<p>Uma margem inferior de 2.0em</p>

</body>

</html>

Este é o efeito da folha de estilo acima:

Uma margem inferior de 2.0em

Margem Esquerda – margin-left

<html>

<head>

<style type="text/css">

p {margin-left: 10%;}

</style>

</head>

<body>

<p>Uma margem esquerda de 10%</p>

</body>

</html>

Este é o efeito da folha de estilo acima:

Uma margem esquerda de 10%

Todas as quatro margens em uma declaração única

A propriedade da margin permitem que você controle o espaçamento em volta dos elementos HTML. São válidos valores negativos para margem, com o objetivo de sobrepor elementos.

<html>

<head>

<style type="text/css">

<!--

p {margin: 20px 40px 80px 5px;}

-->

</style>

</head>

<body>

<p>Uma margem superior de 20px, uma margem direita de 40px,

uma margem inferior de 80px e uma margem esquerda de 5px</p>

</body>

</html>

Este é o efeito da folha de estilo acima:

Uma margem superior de 20px, uma margem direita de 40px, uma margem inferior de 80px e uma margem esquerda de 5px