5.1 O atributo de estilo de uma tag
E mais algumas coisas úteis sobre HTML. À medida que a Web começou a ganhar popularidade, houve uma demanda crescente por páginas da Web com design bonito ou muito bonito. Este problema foi resolvido usando o style
.
A forma geral deste atributo tem o seguinte formato:
<tag style="name=value;name2=value2;nameN=valueN">
O valor do atributo, separado style
por ponto e vírgula, lista todos os "estilos" que precisam ser aplicados à tag.
Digamos que você queira exibir uma imagem como um quadrado 100*100
e também torná-la meio transparente. Para fazer isso, você precisa adicionar estilos especiais a ele:
- largura=100px;
- altura=100px;
- opacidade=0,5;
Então o código HTML com esta imagem ficará assim:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Existem centenas, senão milhares, de estilos. E os desenvolvedores de navegadores estão constantemente criando novos. Que bom que você está estudando para ser um desenvolvedor Java, não um web designer :)
5.2 Estilos populares de CSS
É improvável que você escreva muito código HTML ou edite seus estilos em sua vida, mas tudo pode acontecer. Por exemplo, você está escrevendo algumas pequenas páginas HTML para testar o API
. Portanto, conhecer os estilos básicos HTML
pode ser útil.
Abaixo estão os 10 mais comuns para desenvolvedores de back-end:
# | Nome | Exemplo | Descrição |
---|---|---|---|
1 | largura | largura: 100 px | largura do elemento em pixels |
2 | altura | altura: 50% | altura do elemento como uma porcentagem (da largura do pai) |
3 | mostrar | Mostrar nenhum | elemento de exibição (não exibir elemento) |
4 | visibilidade | visibilidade: oculto | visibilidade do elemento (o elemento está oculto, mas o espaço é reservado para ele) |
5 | cor | cor vermelha; | cor do texto |
6 | cor de fundo | cor de fundo: fumaça | cor de fundo |
7 | fronteira | borda: 1px preto sólido; | borda (largura 1px, cor preta, linha sólida) |
8 | Fonte | fonte: verdana 10pt | fonte: verdana, tamanho 10pt |
9 | alinhamento de texto | alinhamento de texto: centro; | alinhamento de texto horizontalmente |
10 | margem | margem: 2px | preenchimento fora do elemento |
Você não precisa se lembrar dessas tags, tudo está na Internet. Além disso, cada "estilo" possui seu próprio conjunto de valores válidos e seu próprio formato para descrever o valor. Olhe pelo menos para border
ou font
.