Bem vindo ao PROJECT-HTML
Aprenda mais sobre:
HTML, CSS, JavaScript, webmaster, Imagens, banners, wallpapers, videos aula, windows, utilitários para site/blogs, Jogos, animes e muito mais.
Basta se registrar!



 
InícioProject HTMLGaleriaFAQRegistrar-seConectar-se
Buscar
 
 

Resultados por:
 
Rechercher Busca avançada
Conectar-se
Nome de usuário:
Senha:
Conexão automática: 
:: Esqueci minha senha
Votação
Qual seu navegador favorito?
 FireFox
 Chrome
 Internet Explorer
 safari
 Netscape
 Opera
 Avant
Exibir resultados
Quem está conectado
1 usuário online :: Nenhum usuário registrado, Nenhum Invisível e 1 Visitante

Nenhum

O recorde de usuários online foi de 36 em 3/4/2016, 3:36 am
Últimos assuntos
» TAG´s (comandos)
4/8/2014, 10:15 am por robson

» Comandos básico de HTML - body (corpo da home page)
16/7/2014, 10:10 am por robson

» Apresentações aqui
15/7/2014, 4:14 pm por robson

» Como colocar "posts recomendados" no sou blog sou site.
24/3/2014, 8:05 pm por Otome

» Arquivo de ajuda sobre PHP, help para iniciantes e experientes
24/3/2014, 8:03 pm por Otome

» Imagens Exercício-6
22/3/2014, 5:19 pm por SY64

» Alinhamento de imagens
22/3/2014, 4:43 pm por SY64

» Link´s Exercicios-5
22/3/2014, 12:43 pm por SY64

» Criar um site passo a passo
1/8/2013, 4:41 pm por marlonsouzajs


Compartilhe | 
 

 Bordas

Ver o tópico anterior Ver o tópico seguinte Ir em baixo 
AutorMensagem
Diego
Admin
Admin
avatar

Masculino
Número de Mensagens : 321
Idade : 25
Localização : Aqui no PROJECT-HTML
Pontos : 5438
Reputação : 24
Data de inscrição : 04/07/2008

MensagemAssunto: Bordas   12/9/2010, 1:21 am

Bordas podem ser usadas para muitas coisas, por exemplo, como elemento decorativo ou para servir de linha de separação entre duas coisas. CSS proporciona infinitas possibilidades de uso de bordas na página.

  • border-width
  • border-color
  • border-style
  • Exemplos de definição de bordas
  • border


A espessura das bordas [border-width]
A espessura das bordas é definida pela propriedade border-width, que pode assumir os valores thin, medium, e thick (fina, média e grossa), ou um valor numérico em pixels. A figura a seguir ilustra algumas espessuras de bordas:

[Você precisa estar registrado e conectado para ver esta imagem.]

As cores das bordas [border-color]

[Você precisa estar registrado e conectado para ver esta imagem.]

A propriedade border-color define as cores para as bordas. Os valores são expressos em código ou nome de cores, por exemplo, "#123456", "rgb(123,123,123)" ou"yellow"

Tipos de bordas[border-style]

Existem vários tipos de bordas disponíveis para escolha. A seguir apresentamos 8 tipos diferentes de bordas e como elas são renderizadas Internet Explorer 5.5. Todos os exemplos são mostrados na cor "gold" e com espessura "thick", mas você pode usar qualquer cor e espessura ao seu gosto.

Os valores none ou hidden podem ser usados quando não se deseja a existência de bordas.

[Você precisa estar registrado e conectado para ver esta imagem.]

Exemplos de definição de bordas
As três propriedades explicadas acima podem ser definidas juntas para cada elemento e resultam em diferentes bordas. Para exemplificar, foram estilizadas diferentes bordas para os elementos <h1>, <h2>, <ul> e <p>. O resultado pode não ser uma obra prima, mas, ilustra bem algumas das inúmeras possibilidades de estilização de bordas:

Código:

h1 {
   border-width: thick;
   border-style: dotted;
   border-color: gold;
}

h2 {
   border-width: 20px;
   border-style: outset;
   border-color: red;
}

p {
   border-width: 1px;
   border-style: dashed;
   border-color: blue;
}

ul {
   border-width: thin;
   border-style: solid;
   border-color: orange;
}

É possível ainda definir propriedades especialmente para as bordas top, bottom, right ou left (superior, inferior, direita e esquerda). Veja o exemplo a seguir:

Código:

h1 {
   border-top-width: thick;
   border-top-style: solid;
   border-top-color: red;

   border-bottom-width: thick;
   border-bottom-style: solid;
   border-bottom-color: blue;

   border-right-width: thick;
   border-right-style: solid;
   border-right-color: green;

   border-left-width: thick;
   border-left-style: solid;
   border-left-color: orange;
}

Compilando [border]
Assim como para muitas outras propriedades, você pode usar uma declaração abreviada para bordas. Vamos a um exemplo:

Código:
p {
   border-width: 1px;
   border-style: solid;
   border-color: blue;
}

Pode ser abreviada assim:

Código:
p {
   border: 1px solid blue;
}

_________________
Quem pode faz, não copia!
[Você precisa estar registrado e conectado para ver esta imagem.]
s2 Diego e Barbara s2
Informações do meu PC:
Processador:Intel Core i5 760 @ 2.80GHz 8Mb cache
Placa mãe: ASUSTeK Computer INC. P7P55D-Deluxe
Memoria Ram: 4.0GB Único -Channel DDR3 @ 668MHz * 2 = 1333Mhz (9-9-9-24)
Placa de video: 512 MB GeForce 8400 GS (XFX Pine Group)
HD: 160GB SAMSUNG SAMSUNG HD161HJ (SATA)
Audio: SoundMAX Integrated Digital Audio
Sistema operativo: MS Windows 7 Ultimate 64-bit
Voltar ao Topo Ir em baixo
Ver perfil do usuário http://www.projecthtml.tk
 
Bordas
Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo 
Página 1 de 1
 Tópicos similares
-
» [Video Tutorial] Bordas Modeladas - By Binho
» Como adicionar bordas as categorias.
» Bordas arredondadas
» Largura das bordas do fórum
» Arredondar Bordas

Permissão deste fórum:Você não pode responder aos tópicos neste fórum
 :: CSS - (Cascading Style Sheets) :: CSS - avançado-
Ir para: