Molduras colocadas em torno de imagens ou texto decoram o site e acrescentam variedade ao seu design. Se você usar tabelas para criar bordas, o código de cada borda ocupará muito espaço. Além disso, neste caso, você terá que reescrever o código HTML para cada quadro. Com CSS, você pode criar facilmente uma borda de qualquer espessura e cor que desejar, escrevendo um código simples uma vez para todos os elementos que serão circundados por essa borda. Esta tecnologia permitirá, se necessário, alterar o tipo de frames do site em alguns minutos.
É necessário
- - ter seu próprio site;
- - saiba o que é CSS e onde esses estilos são escritos no site.
Instruções
Passo 1
Para criar uma borda, primeiro escreva o seguinte código em CSS:
ramka {}
Passo 2
Para deixar a borda do tamanho desejado, use o parâmetro de largura da borda, que define a largura da linha em pixels. Por exemplo, se a linha do quadro deve ter 3 pixels de largura, a entrada terá a seguinte aparência:
ramka {largura da borda: 3px;}
etapa 3
Agora defina o estilo da borda usando o parâmetro border-style. Se você quiser criar uma borda cujos lados sejam linhas sólidas regulares, coloque a seguinte entrada no código entre as chaves - estilo borda: sólida.
Passo 4
Uma borda pontilhada pode ser obtida escrevendo-a assim: estilo da borda: pontilhada. Verificar o estilo da borda: tracejada apresentará uma borda tracejada.
Etapa 5
Você pode transformar a borda em uma linha sólida dupla como esta: border-style: double. Use border-style: groove ou border-style: cume para enquadrar texto ou imagens em quadros com efeitos colaterais 3D. A diferença entre essas duas opções é que, no primeiro caso, o quadro é composto por linhas recuadas e, no segundo, por linhas convexas.
Etapa 6
Use este código: border-style: inset para criar o efeito de um inset com a borda de um elemento do site. Para tornar o conteúdo da borda, junto com a borda, pelo contrário, convexo, escreva o estilo borda: início.
Etapa 7
Você pode adicionar a cor desejada ao quadro usando o parâmetro border-color, também colocado entre as chaves. Se você quiser tornar a borda vermelha, escreva cor da borda: vermelho, azul - cor da borda: azul, laranja - cor da borda: laranja.
Etapa 8
O código de borda CSS, incluindo todas as opções, tem a seguinte aparência:
ramka {largura da borda: 3px; estilo de borda: sólido; cor da borda: azul;}
Etapa 9
Agora, em HTML, escreva isto:
Conteúdo do quadro Em vez da frase "Conteúdo do quadro", insira o texto ou código da imagem desejada.
Etapa 10
Assim, você pode criar um número ilimitado de elementos no site. Para alterar a aparência da moldura, você só precisa alterar o código CSS.
