Fronteiras
Bordas podem ser usadas para muitas coisas, por exemplo, como um elemento decorativo ou para sublinhar a separação destas duas coisas . CSS proporciona infinitas possibilidades de uso de bordas em suas páginas.A largura das fronteiras [] border-width
A largura das bordas é definida pela propriedadeborder-width, Que pode assumir os valores thin , médio e grosso, ou um valor numérico em pixels. A figura abaixo ilustra o sistema:
A cor das fronteiras [] border-color
A propriedade border-color define a cor da borda que tem. Os valores são os valores normais de cor , por exemplo,
"# 123456 " ,
" rgb ( 123123123 ) ou amarelo " .
Tipos de fronteiras [] border-style
Existem diferentes tipos de fronteiras por onde escolher. A seguir são mostrados 8 tipos diferentes de fronteiras como o Internet Explorer 5.5 interpreta-los. Todos os exemplos são mostrados com a cor " gold " e com espessura" thick ", mas podem , naturalmente, ser indicado em outras cores e espessuras.
Os valores none ou oculto pode ser usado se você não quer nenhuma fronteira.
Exemplos de definição de fronteiras
As três propriedades descritas acima podem ser colocados juntos por cada elemento e resultam em diferentes bordas . Para ilustrar isso, vamos dar uma olhada em um documento onde se definem as fronteiras de diferentes<h1>, <h2>, <ul> e <p>. O resultado pode não ser bonito, mas que ilustra algumas das muitas possibilidades :
h1 {
border- width: espessura;
border-style : dotted;
border-color : ouro;
}
h2 {
border-width : 20px;
border-style: início;
border-color : red;
}
p {
border-width : 1px;
border-style: tracejada ;
border-color : blue;
}
ul {
border-width : thin ;
border-style : solid;
border-color : orange ;
}
h1 {
border-top -width: espessura;
border-top -style : solid;
border- top -color : red;
border-bottom- width: espessura;
border- bottom-style : solid;
border- bottom-color : blue;
border-right -width: espessura;
border-right -style : solid;
border-right -color: green ;
border-left- width: espessura;
border-left -style : solid;
border-left -color: laranja;
}
Compilation ] fronteira [
Como é também o caso de muitas outras propriedades , você pode compilar muitas propriedades em um usando fronteira. Vamos dar uma olhada em um exemplo:
p {
border-width : 1px;
border-style : solid;
border-color : blue;
}Podem ser compilados em :
p {
border: 1px blue sólidos;
}
você está em:
.ico "EDIHITT"){kind=small}
{if(document.pnctLoadStarted)return;var%20d=document.createElement('div');d.setAttribute('id','pnctPreloader');d.setAttribute('style','position:fixed;top:0;bottom:0;left:0;right:0;z-index:100501;background-color:rgba(255,255,255,.9);padding:20px;text-align:center;font-family:helvetica;font-size:20px;font-weight:bold;');d.innerHTML='%D0%97%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D0%B0...<a%20id="pnctCancelBtn"%20href="#"%20style="float:right;width:24px;height:24px;text-decoration:none;border:1px%20solid%20#ccc;border-radius:5px"><img%20src="//postila.ru/images/window_close.png"%20alt="x"/></a>';document.body.appendChild(d);document.pnctLoadStarted=(new%20Date()).getTime();document.pnctCnclLoad=function(){document.pnctLoadStarted=0;pl=document.getElementById('pnctPreloader');if(pl)pl.parentNode.removeChild(pl)};document.getElementById('pnctCancelBtn').addEventListener('click',function(e){e.preventDefault();document.pnctCnclLoad()});setTimeout(function(){var%20st=document.pnctLoadStarted;if(st>0&&((new%20Date()).getTime()-st>=14000)){document.pnctCnclLoad();alert('%D0%9A+%D1%81%D0%BE%D0%B6%D0%B0%D0%BB%D0%B5%D0%BD%D0%B8%D1%8E%2C+%D0%BF%D0%BE%D0%B8%D1%81%D0%BA+%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA+%D0%BD%D0%B5%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%B5%D0%BD.')}},15000);var%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','//postila.ru/post.js?ver=1&m=b&rnd='+Math.random()*99999999);document.body.appendChild(e)})());)
Nenhum comentário:
Postar um comentário
Mensagem do formulário de comentário: