5.1 El atributo de estilo de una etiqueta
Y algunas cosas más útiles sobre HTML. A medida que la web comenzó a ganar popularidad, hubo una creciente demanda de páginas web con un diseño hermoso o muy hermoso. Este problema se resolvió utilizando el style
.
La forma general de este atributo tiene el siguiente formato:
<tag style="name=value;name2=value2;nameN=valueN">
El valor del atributo, separado style
por un punto y coma, enumera todos los "estilos" que deben aplicarse a la etiqueta.
Digamos que desea mostrar una imagen como un cuadrado 100*100
y también hacerla semitransparente. Para hacer esto, necesita agregarle estilos especiales:
- ancho = 100px;
- altura=100px;
- opacidad=0,5;
Luego, el código HTML con esta imagen se verá así:
<img src="logo.png" style="width=100px;height=100px;opacity=0.5">
Hay cientos, si no miles, de estilos. Y los desarrolladores de navegadores crean constantemente otros nuevos. Es bueno que estés estudiando para ser un desarrollador de Java, no un diseñador web :)
5.2 Estilos CSS populares
Es poco probable que escriba mucho código HTML o edite sus estilos en su vida, pero cualquier cosa puede pasar. Por ejemplo, está escribiendo un par de pequeñas páginas HTML para probar el API
. Por lo tanto, conocer los estilos básicos HTML
puede ser útil.
A continuación se muestran los 10 más comunes para los desarrolladores de back-end:
# | Nombre | Ejemplo | Descripción |
---|---|---|---|
1 | ancho | ancho: 100px | ancho del elemento en píxeles |
2 | altura | altura: 50% | altura del elemento como porcentaje (del ancho del padre) |
3 | mostrar | pantalla: ninguno | mostrar elemento (no mostrar elemento) |
4 | visibilidad | visibilidad: oculto | visibilidad del elemento (el elemento está oculto, pero el espacio está reservado para él) |
5 | color | color rojo; | color de texto |
6 | color de fondo | color de fondo: humo | color de fondo |
7 | borde | borde: 1px negro sólido; | borde (ancho 1px, color negro, línea continua) |
8 | fuente | fuente: verdana 10pt | fuente: verdana, tamaño 10pt |
9 | texto alineado | alineación de texto: centro; | alineación de texto horizontalmente |
10 | margen | margen: 2px | relleno fuera del elemento |
No necesita recordar estas etiquetas, todo está en Internet. Además, cada "estilo" tiene su propio conjunto de valores válidos y su propio formato para describir el valor. Mire al menos en border
o font
.