outubro – 2012 – WebCodeFree

PROPRIEDADES CSS – BORDER

Posted on 25 de outubro de 2012 by Paulo R. Marinho

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:

<html>
<head>
<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>

<html>

<head>

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

#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:

bordascss

PROPRIEDADES CSS – MARGIN

Posted on 20 de outubro de 2012 by Paulo R. Marinho

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>

<html>

<head>

p {margin-top: 2cm;}

</style>

</head>

<body>

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

</body>

</html>

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>

<html>

<head>

p {margin-right: 300px;}

</style>

</head>

<body>

<p>Uma margem direita de 300px nesta

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

</body>

</html>

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>

<html>

<head>

p {margin-bottom: 2em;}

</style>

</head>

<body>

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

</body>

</html>

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>

<html>

<head>

p {margin-left: 10%;}

</style>

</head>

<body>

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

</body>

</html>

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>

<html>

<head>

<!--

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>

Propriedades CSS – TEXT

Posted on 15 de outubro de 2012 by Paulo R. Marinho

Propriedades Text

As propriedades para textos, definem as características (os valores na regra CSS) dos textos inseridos dentro dos elementos HTML.

As propriedades para textos são as listadas abaixo:

Propriedade	Efeito
color:	Cor da fonte;
letter-spacing:	Espaçamento entre letras;
word-spacing:	Espaçamento entre palavras;
text-align:	Alinhamento do texto;
text-decoration:	Decoração do texto;
text-indent:	Recuo do texto;
text-transform:	Forma das letras;
direction:	Direção do texto;
white-space:	Como o browser trata os espaços em branco;

Valores válidos para as propriedades de Text.

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

letter-spacing:
- normal: é o espaçamento default
- lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos

word-spacing:
- normal: é o espaçamento default
- lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …) São válidos valores negativos

text-align:
- left: alinha o texto a esquerda
- right: alinha o texto a direita
- center: alinha o texto no centro
- justify: força o texto a ocupar toda a extensão da linha da esquerda a direita

text-decoration:
- none: nenhuma decoração
- underline: coloca sublinhado no texto
- overline: coloca um sobrelinhado no texto
- line-through: coloca uma linha em cima do texto
- blink: faz o texto piscar

text-indent:
- lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, …)
- % : porcentagem da largura do elemento pai

text-transform:
- none: texto normal
- capitalize: todas as primeiras letras do texto em maiúsculas
- uppercase: todas as letras do texto em maiúsculas
- lowercase: todas as letras do texto em minúsculas

direction:
- ltr: texto escrito da esquerda para a direita
- rtl: texto escrito da direita para a esquerda

white-space:
- normal: os espaços em branco serão ignorados pelo browser
- pre: os espaços em branco serão preservados pelo browser
- nowrap: o texto será apresentado todo ele numa linha única na tela. Não há quebra de linha até ser encontrada uma tag

Exemplos:

1- Espaçamento nas Letras letter-spacing

<html>
<head>
<style type="text/css">
h2 {letter-spacing: 1.2em;}
p {letter-spacing: 0.4cm;}
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>

<html>

<head>

h2 {letter-spacing: 1.2em;}

p {letter-spacing: 0.4cm;}

</style>

</head>

<body>

<h2> Este é o cabeçalho</h2>

<p> Este é o parágrafo</p>

</body>

</html>

2- Espaçamento nas Palavras word-spacing

<html>
<head>
<style type="text/css">
h2 {word-spacing: 1.8em;}
p {word-spacing: 80px;}
</style>
</head>
<body>
<h2> Este é o cabeçalho</h2>
<p> Este é o parágrafo</p>
</body>
</html>

<html>

<head>

h2 {word-spacing: 1.8em;}

p {word-spacing: 80px;}

</style>

</head>

<body>

<h2> Este é o cabeçalho</h2>

<p> Este é o parágrafo</p>

</body>

</html>

3- Alinhamento do Texto text-align

<html>
<head>
<style type="text/css">
h1 {text-align: left;}
h2 {text-align: center;}
h3 {text-align: right;}
p {text-align: justify;}
</style>
</head>
<body>
<h1>Este é o cabeçalho 1</h1>
<h2>Este é o cabeçalho 2</h2>
<h3>Este é o cabeçalho 3</h3>
<p>Este é o parágrafo cujo texto ...</p>
</body>
</html>

<html>

<head>

h1 {text-align: left;}

h2 {text-align: center;}

h3 {text-align: right;}

p {text-align: justify;}

</style>

</head>

<body>

<h1>Este é o cabeçalho 1</h1>

<h2>Este é o cabeçalho 2</h2>

<h3>Este é o cabeçalho 3</h3>

<p>Este é o parágrafo cujo texto ...</p>

</body>

</html>

4- Decoração do Texto text-decoration

<html>
<head>
<style type="text/css">
h1 {text-decoration: underline;}
h2 {text-decoration: line-through;}
h3 {text-decoration: overline;}
a {text-decoration: none;}
</style>
</head>
<body>
<h1>Texto com sublinhado</h1>
<h2>Texto com linha em cima</h2>
<h3>Texto com sobrelinhado</h3>
<p>
<a href="#">

Este é um link sem sublinhado</a>
</p>
</body>

<html>

<head>

h1 {text-decoration: underline;}

h2 {text-decoration: line-through;}

h3 {text-decoration: overline;}

a {text-decoration: none;}

</style>

</head>

<body>

<h1>Texto com sublinhado</h1>

<h2>Texto com linha em cima</h2>

<h3>Texto com sobrelinhado</h3>

<p>

Este é um link sem sublinhado</a>

</p>

</body>

5- Recuo do Texto text-indent

<html>
<head>
<style type="text/css">
<!--
h3 {text-indent: 80px;}
p {text-indent: 3em;}
-->
</style>
</head>
<body>
<h3>Texto com recuo de 80 pixel</h3>
<p>Texto com recuo de 3.0em</p>
</body>
</html>

<html>

<head>

<!--

h3 {text-indent: 80px;}

p {text-indent: 3em;}

-->

</style>

</head>

<body>

<h3>Texto com recuo de 80 pixel</h3>

<p>Texto com recuo de 3.0em</p>

</body>

</html>

6- Forma das Letras text-transform

<html>
<head>
<style type="text/css">
<!--
h1 {text-transform: none;}
h2 {text-transform: capitalize;}
h3 {text-transform: uppercase;}
h4 {text-transform: lowercase;}
-->
</style>
</head>
<body>
<h1>Texto com letras como digitadas</h1>
<h2>Texto com primeira letra das palavras, maiúsculas</h2>
<h3>Texto com todas letras, maiúsculas</h3>
<h4>Texto com letras minúsculas</h4>
</body>
</html>

<html>

<head>

<!--

h1 {text-transform: none;}

h2 {text-transform: capitalize;}

h3 {text-transform: uppercase;}

h4 {text-transform: lowercase;}

-->

</style>

</head>

<body>

<h1>Texto com letras como digitadas</h1>

<h2>Texto com primeira letra das palavras, maiúsculas</h2>

<h3>Texto com todas letras, maiúsculas</h3>

<h4>Texto com letras minúsculas</h4>

</body>

</html>