Fórum iBlue
Lição 11: Bordas Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Fórum iBlue
Lição 11: Bordas Buddy_Group

Bem Vindos ao iBlue GAMES!

Registre-se para obter acesso especial em todo conteúdo presente no Fórum!
Tenha um bom uso do nosso fórum, e seja ativo!





Somos ÚNICOS, somos o SEU fórum


Você não está conectado. Conecte-se ou registre-se

Ver o tópico anterior Ver o tópico seguinte Ir para baixo  Mensagem [Página 1 de 1]

Gustavo

1Lição 11: Bordas Empty Lição 11: Bordas Qui 5 Dez 2013 - 18:56

Gustavo
Membro

Lição 11: Bordas


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.



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:


Exemplo de espessuras de bordas


As cores das bordas [border-color]


Cores


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.


Diferentes tipos de bordas


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:




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:




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:




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



Pode ser abreviada assim:




p {
border: 1px solid blue;
}



Sumário


Nesta lição aprendemos que são infinitas as possibilidades de estilização de bordas com CSS.


Na próxima lição veremos como definir as dimensões do box model - height e width.




http://www.zonetoony.net

Ver o tópico anterior Ver o tópico seguinte Ir para o topo  Mensagem [Página 1 de 1]

Permissões neste sub-fórum
Não podes responder a tópicos