Cómo poner un elemento en minúscula. Elementos en bloque y en línea. Etiquetas para la separación lógica del contenido.
Bloquear y elementos en línea Se complementan perfectamente durante el diseño y cada uno ocupa su propio nicho específico. Pero surgen casos en los que las características de estos elementos son claramente insuficientes. Galería de fotos mostrada en la Fig. 3.28 consta de secciones que incluyen una imagen con un título, y las secciones están alineadas horizontalmente ocupando todo el ancho disponible. Cuando la ventana del navegador se hace más pequeña, las secciones pasan a otra línea.
Arroz. 3.28. Galería de fotos
Si usas la etiqueta para formar secciones
No hay ninguna etiqueta en HTML que haga referencia a elementos de bloque en línea; se puede definir una configurando la propiedad de visualización del elemento en bloque en línea.
Div (pantalla: bloque en línea;)
Las características de estos elementos son las siguientes.
- Puede colocar elementos de texto, en línea o de bloque dentro de elementos de bloque en línea.
- El navegador calcula automáticamente la altura del elemento en función del contenido del bloque.
- El ancho es igual al contenido más los valores de relleno, margen y borde.
- Se colocan varios elementos consecutivos en una línea y se transfieren a otra línea si es necesario.
- Se puede alinear verticalmente usando la propiedad de alineación vertical.
- Se permite establecer el ancho y el alto.
- El efecto de colapso del margen no funciona.
Para crear la galería que se muestra en la Fig. 3.28 para etiqueta
(ejemplo 3.18).
Ejemplo 3.18. Usando la pantalla
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Catedral de Santa Sofía
iglesia polaca
Club de comerciantes
Monumento a San Vladimir
Dado que todas las fotografías tienen el mismo tamaño, el ancho del bloque se establece explícitamente y es igual a 150 px, pero la altura no se especifica, por lo que si el título de la imagen es largo, la altura de las secciones variará (Fig. 3.29) .
Arroz. 3.29. Diferentes alturas de sección
Esto no es un problema, ya que las secciones aparecerán en filas ordenadas de todos modos, a pesar de las diferentes alturas. En este caso, puede cambiar el tipo de alineación mediante alineación vertical agregando esta propiedad a la clase de fotografía. Si especifica el valor top , la visualización de las secciones cambiará (Fig. 3.30).
Arroz. 3.30. Alineación superior
El principal problema es el navegador IE hasta la versión 7.0 inclusive. Este navegador solo aplica bloques en línea a elementos en línea y no funciona correctamente con elementos de bloque. Para convencer a este navegador de que muestre nuestro ejemplo correctamente, debemos usar el valor inline en lugar de inline-block y establecer la propiedad hasLayout. Agregar en línea romperá el diseño en otros navegadores, por lo que la decisión correcta aprovechará comentarios condicionales(ejemplo 3.19).
Ejemplo 3.19. Estilo para IE
Construcción significa aplicar el código especificado para la versión 7.0 e inferior del navegador IE. Otros navegadores lo tratan como un comentario y lo ignoran. En cuanto a la propiedad de zoom, no es estándar y está destinada a establecer la propiedad hasLayout, que no se puede configurar directamente.
También es conveniente utilizar elementos de bloque en línea para varios catálogos de productos que se encuentran en las tiendas en línea. Generalmente se muestran con una imagen y un título. Todo esto es similar a la galería hecha arriba, por lo que solo queda modificar su código, teniendo en cuenta la alineación de altura y el comportamiento de IE (ejemplo 3.20).
Ejemplo 3.20. Catálogo de productos
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Vídeo 1856
Foto 315
Dispositivos móviles 2109
Computadoras y equipo de oficina 4296
Electrodomésticos 731
El resultado de este ejemplo se muestra en la Fig. 3.31.
Arroz. 3.31. Catálogo de productos
Para no preguntar cada etiqueta.
Vlad Merzhevich
Un elemento de bloque es un elemento que aparece como un rectángulo en una página web.
,
Un elemento de este tipo ocupa todo el ancho disponible, la altura del elemento está determinada por su contenido y siempre comienza en una nueva línea. Los elementos del bloque incluyen contenedores.
Etc. Se permite anidar un elemento de bloque dentro de otro, así como colocar elementos en línea dentro de ellos (
, Por ejemplo). Está prohibido agregar elementos de bloque dentro de elementos integrados (ejemplo 1).
Elementos de bloque
Lorem ipsum dolor sit amet...
Ut wisi enim ad minim veniam EN en este ejemplo
) se inserta dentro del contenedor
. Por cierto, sería un error hacer lo contrario - añadir en un contenedor
(ut wisi
), desde la etiqueta no se aplica a elementos de bloque.
Anidar etiquetas de bloque dentro de elementos en línea es más común para los principiantes que aún no comprenden la diferencia entre ellos. Además, los navegadores han aprendido a detectar este tipo de errores y a mostrar el código de forma más o menos correcta. Sin embargo, le recomendamos que cumpla con las especificaciones en este asunto para poder mostrar la página web sin errores.
Ancho del elemento de bloque
De forma predeterminada, el ancho del bloque se calcula automáticamente y ocupa todo el espacio disponible. Aquí es necesario aclarar qué se entiende por esto. Por ejemplo, si la etiqueta
Si hay uno en el código del documento, ocupa todo el ancho libre de la ventana del navegador y el ancho del bloque será igual al 100%. Vale la pena poner una etiqueta. dentro de otra, a medida que el ancho de la etiqueta interna comienza a calcularse en relación con su padre, es decir, contenedor externo.
Algunos navegadores interpretan el concepto de ancho de manera bastante vaga, aunque la especificación CSS establece claramente que el ancho es la suma de los siguientes parámetros: el ancho del bloque en sí (ancho), sangrías (margen), campos (relleno) y bordes (borde). .
El ejemplo 2 muestra cómo crear una capa que contenga todos estos componentes.
Ejemplo 2: ancho de capa
Elementos de bloque
Ancho
Como resultado de este ejemplo, obtendremos una capa con un ancho de 342 píxeles. En la figura. 1 muestra de qué se compone el ancho de la capa.
Figura 1. Ancho del elemento de bloqueEn el caso cuando
no se especifica en el código, el navegador Internet Explorer toma el valor de la propiedad de ancho como el ancho de todo el bloque.
Veamos otro ejemplo relacionado con el ancho. De forma predeterminada, el ancho de la capa está configurado en automático, esto permite que la capa encaje en la ventana del navegador sin tener en cuenta los valores de los campos establecidos. Si cambia el ancho al 100%, inevitablemente aparecerá una barra de desplazamiento horizontal cuando agregue valores de relleno, margen o borde.
Existen varios enfoques para obtener un resultado universal. El ejemplo 3 demuestra la creación de tres capas, cuyo ancho se determina como porcentaje.
Ejemplo 2: ancho de capa
Elementos de bloque
Elementos de bloque
Elementos de bloque
Ejemplo 3. Ancho de capa en porcentaje
El resultado del ejemplo se muestra en la Fig. 2.
Arroz. 2. Mostrar anchos de capa en el navegador.
). Debido a esto, el ancho de la capa será el mismo en todos los navegadores. La tercera capa (layer3) no tiene la propiedad de ancho aplicada en absoluto, por lo que está definida de forma predeterminada: auto. En este caso, la capa ocupará todo el ancho de la ventana del navegador sin franjas horizontales.
La forma de establecer el ancho depende del diseño utilizado y de la elección del desarrollador, pero en cualquier caso es necesario tener en cuenta las características de los elementos del bloque y crear un código universal.
Altura
La situación con la altura de los elementos del bloque es similar a la anchura. El navegador toma el valor de la propiedad de altura como la altura de la capa y le agrega valores de margen, relleno y borde.
Si la altura de la capa no se establece explícitamente, se calcula automáticamente en función del volumen del contenido.
Digamos que una capa está configurada con una altura de píxel y el contenido de la capa es claramente mayor que la altura especificada (Ejemplo 4).
Altura
Ejemplo 4: altura de capa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Altura del bloque en diferentes navegadores
Se puede ver que el navegador deja la altura sin cambios, por lo que el texto no cabe en el bloque y se superpone a la capa.
Color de fondo
La forma más sencilla de establecer el color de fondo de un elemento es mediante la propiedad de fondo genérica.
En este caso, el área determinada por los valores de ancho, alto y relleno se rellena con el fondo (Fig. 4).
Arroz. 4. El área de la capa que se rellena con el color de fondo.
Por tanto, el margen no participa en la formación del área coloreada.
Fronteras
Debido a la diferencia en los enfoques de los navegadores a la hora de formar elementos de bloque, también existe una diferencia en la visualización de los bordes. El navegador Internet Explorer 7 dibuja el marco dentro del bloque y Firefox dibuja el marco fuera. Pero si utilizamos un relleno de fondo, veremos una imagen completamente opuesta (Fig. 5). Y todo porque Firefox (Opera) establece el color de fondo a lo largo del borde exterior del borde e Internet Explorer lo establece a lo largo del borde interior. A partir de la versión 8.0, Internet Explorer ha cambiado el estilo de visualización del marco; se dibuja dentro de un bloque, como en Firefox.
A. Internet Explorer 7
b. Firefox, Internet Explorer 8+
Arroz. 5. Mostrar el marco en los navegadores.
El ejemplo 5 muestra cómo crear código para obtener dicho límite.
Elementos de bloque
Las diferencias en la forma en que los navegadores dibujan los bordes sólo se notan en fondos de colores y líneas de puntos. Para un marco sólido, la apariencia de la capa en los navegadores será casi la misma.
Reanudar
Los elementos de bloque actúan como material de construcción principal al diseñar páginas web. Estos elementos se caracterizan por empezar siempre en una nueva línea y ocupar todo el ancho disponible del área en la que se encuentran.
La especificación CSS define que la altura y el ancho de un elemento están determinados no solo por los valores de alto y ancho, sino también por los valores de márgenes, relleno y bordes. Los navegadores a este respecto se dividen en dos partes: algunos apoyan la especificación en este asunto, mientras que otros la ignoran y actúan a su manera. Esto crea dificultades para los desarrolladores que quieren crear páginas web universales. Sólo podemos recomendarle que utilice las propiedades de ancho y alto de forma limitada, ya que de forma predeterminada el navegador utiliza el argumento auto, que fuerza que las dimensiones del elemento se ajusten automáticamente.
En este capítulo:
Sintaxis de elementos
elemento HTML es la unidad estructural básica de una página web, escrita en HTML. La siguiente imagen muestra la sintaxis del elemento. Para la mayoría de las etiquetas, la sintaxis del elemento será la misma, a excepción de las etiquetas individuales.
Todos los elementos en HTML siguen el mismo formato:
- El elemento comienza con una etiqueta de apertura.
- El elemento termina con una etiqueta de cierre.
- El contenido de un elemento es todo lo que se encuentra entre las etiquetas de apertura y cierre.
- Algunos elementos no tienen contenido (elementos vacíos).
- La mayoría de los elementos pueden contener atributos.
Nota: no olvides poner el símbolo " en la etiqueta de cierre /
", le dice al navegador que su elemento ha finalizado y que lo que viene después es otro elemento.
Elementos vacios
Hay varios elementos en HTML que no tienen una etiqueta de cierre, como ![]()
o
. Tales elementos se llaman vacío, porque no contienen ningún contenido y no tienen una etiqueta de cierre.
Elementos anidados
Todos los documentos HTML se componen de elementos anidados. La mayoría de ellos pueden contener otros elementos o pueden anidarse ellos mismos dentro de otros elementos, y la profundidad del anidamiento de elementos no está limitada.
El siguiente ejemplo consta de tres elementos, dos de los cuales están anidados:
mi primer párrafo
Cuando coloca un elemento dentro de otro, debe tener cuidado de asegurarse de que el elemento anidado comience y termine dentro del mismo elemento. Por tanto, el siguiente ejemplo es incorrecto:
Este Muy
Interesante
Un elemento de bloque es un elemento que aparece como un rectángulo en una página web. Un elemento de este tipo ocupa todo el ancho disponible, la altura del elemento está determinada por su contenido y siempre comienza en una nueva línea. Los elementos del bloque incluyen etiquetas.
,
,
,
ut wisi
), desde la etiqueta no se aplica a elementos de bloque.Anidar etiquetas de bloque dentro de elementos en línea es más común para los principiantes que aún no comprenden la diferencia entre ellos. Además, los navegadores han aprendido a detectar este tipo de errores y a mostrar el código de forma más o menos correcta. Sin embargo, le recomendamos que cumpla con las especificaciones en este asunto para poder mostrar la página web sin errores.
Ancho del elemento de bloque
De forma predeterminada, el ancho del bloque se calcula automáticamente y ocupa todo el espacio disponible. Aquí es necesario aclarar qué se entiende por esto. Por ejemplo, si la etiqueta
Algunos navegadores interpretan el concepto de ancho de manera bastante vaga, aunque la especificación CSS establece claramente que el ancho es la suma de los siguientes parámetros: el ancho del bloque en sí (ancho), sangrías (margen), campos (relleno) y bordes (borde). .
El ejemplo 2 muestra cómo crear una capa que contenga todos estos componentes.
Ancho
Como resultado de este ejemplo, obtendremos una capa con un ancho de 342 píxeles. En la figura. 1 muestra de qué se compone el ancho de la capa.
Figura 1. Ancho del elemento de bloqueEn el caso cuando
no se especifica en el código, el navegador Internet Explorer toma el valor de la propiedad de ancho como el ancho de todo el bloque.
Veamos otro ejemplo relacionado con el ancho. De forma predeterminada, el ancho de la capa está configurado en automático, esto permite que la capa encaje en la ventana del navegador sin tener en cuenta los valores de los campos establecidos. Si cambia el ancho al 100%, inevitablemente aparecerá una barra de desplazamiento horizontal cuando agregue valores de relleno, margen o borde.
Existen varios enfoques para obtener un resultado universal. El ejemplo 3 demuestra la creación de tres capas, cuyo ancho se determina como porcentaje.
Elementos de bloque
Ejemplo 3. Ancho de capa en porcentaje
El resultado del ejemplo se muestra en la Fig. 2.
Arroz. 2. Mostrar anchos de capa en el navegador.
). Debido a esto, el ancho de la capa será el mismo en todos los navegadores. La tercera capa (layer3) no tiene la propiedad de ancho aplicada en absoluto, por lo que está definida de forma predeterminada: auto. En este caso, la capa ocupará todo el ancho de la ventana del navegador sin franjas horizontales.
La forma de establecer el ancho depende del diseño utilizado y de la elección del desarrollador, pero en cualquier caso es necesario tener en cuenta las características de los elementos del bloque y crear un código universal.
Altura
La situación con la altura de los elementos del bloque es similar a la anchura. El navegador toma el valor de la propiedad de altura como la altura de la capa y le agrega valores de margen, relleno y borde.
Si la altura de la capa no se establece explícitamente, se calcula automáticamente en función del volumen del contenido.
Digamos que una capa está configurada con una altura de píxel y el contenido de la capa es claramente mayor que la altura especificada (Ejemplo 4).
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis te feugifacilisi.
El resultado de este ejemplo se muestra en la Fig. 3.
Arroz. 3. Altura del bloque en diferentes navegadores
Se puede ver que el navegador deja la altura sin cambios, por lo que el texto no cabe en el bloque y se superpone a la capa.
Color de fondo
La forma más sencilla de establecer el color de fondo de un elemento es mediante la propiedad de fondo genérica.
En este caso, el área determinada por los valores de ancho, alto y relleno se rellena con el fondo (Fig. 4).
Arroz. 4. El área de la capa que se rellena con el color de fondo.
Por tanto, el margen no participa en la formación del área coloreada.
Fronteras
Debido a la diferencia en los enfoques de los navegadores a la hora de formar elementos de bloque, también existe una diferencia en la visualización de los bordes. El navegador Internet Explorer 7 dibuja el marco dentro del bloque y Firefox dibuja el marco fuera. Pero si utilizamos un relleno de fondo, veremos una imagen completamente opuesta (Fig. 5). Y todo porque Firefox (Opera) establece el color de fondo a lo largo del borde exterior del borde e Internet Explorer lo establece a lo largo del borde interior. A partir de la versión 8.0, Internet Explorer ha cambiado el estilo de visualización del marco; se dibuja dentro de un bloque, como en Firefox.
A. Internet Explorer 7
b. Firefox, Internet Explorer 8+
Arroz. 5. Mostrar el marco en los navegadores.
Las diferencias en la forma en que los navegadores dibujan los bordes sólo se notan en fondos de colores y líneas de puntos. Para un marco sólido, la apariencia de la capa en los navegadores será casi la misma.
Reanudar
Los elementos de bloque actúan como material de construcción principal al diseñar páginas web. Estos elementos se caracterizan por empezar siempre en una nueva línea y ocupar todo el ancho disponible del área en la que se encuentran.
La especificación CSS define que la altura y el ancho de un elemento están determinados no solo por los valores de alto y ancho, sino también por los valores de márgenes, relleno y bordes. Los navegadores a este respecto se dividen en dos partes: algunos apoyan la especificación en este asunto, mientras que otros la ignoran y actúan a su manera. Esto crea dificultades para los desarrolladores que quieren crear páginas web universales. Sólo podemos recomendarle que utilice las propiedades de ancho y alto de forma limitada, ya que de forma predeterminada el navegador utiliza el argumento auto, que fuerza que las dimensiones del elemento se ajusten automáticamente.
En este capítulo:
Sintaxis de elementos
elemento HTML es la unidad estructural básica de una página web, escrita en HTML. La siguiente imagen muestra la sintaxis del elemento. Para la mayoría de las etiquetas, la sintaxis del elemento será la misma, a excepción de las etiquetas individuales.
Todos los elementos en HTML siguen el mismo formato:
- El elemento comienza con una etiqueta de apertura.
- El elemento termina con una etiqueta de cierre.
- El contenido de un elemento es todo lo que se encuentra entre las etiquetas de apertura y cierre.
- Algunos elementos no tienen contenido (elementos vacíos).
- La mayoría de los elementos pueden contener atributos.
Nota: no olvides poner el símbolo " en la etiqueta de cierre / ", le dice al navegador que su elemento ha finalizado y que lo que viene después es otro elemento.
Elementos vacios
Hay varios elementos en HTML que no tienen una etiqueta de cierre, como o
. Tales elementos se llaman vacío, porque no contienen ningún contenido y no tienen una etiqueta de cierre.
Elementos anidados
Todos los documentos HTML se componen de elementos anidados. La mayoría de ellos pueden contener otros elementos o pueden anidarse ellos mismos dentro de otros elementos, y la profundidad del anidamiento de elementos no está limitada.
El siguiente ejemplo consta de tres elementos, dos de los cuales están anidados:
mi primer párrafo
Cuando coloca un elemento dentro de otro, debe tener cuidado de asegurarse de que el elemento anidado comience y termine dentro del mismo elemento. Por tanto, el siguiente ejemplo es incorrecto:
Este Muy
InteresanteUn elemento de bloque es un elemento que aparece como un rectángulo en una página web. Un elemento de este tipo ocupa todo el ancho disponible, la altura del elemento está determinada por su contenido y siempre comienza en una nueva línea. Los elementos del bloque incluyen etiquetas.
,,,