Realización de bloques en html y css. CSS: posicionamiento de elementos de bloque. Ejemplo de diseño de bloque
¡Buenas tardes amigos! De alguna manera en mis varias lecciones sobre html hablé y usé un concepto como diseño div.
Probablemente tengas dudas, sobre todo si eres novato, ¿qué es?
En el artículo de hoy disiparé todas tus dudas y responderé preguntas sobre en qué se encuentran los bloques div.
Empecemos a estudiar.
Diseño y bloques div HTML
Para no saturar y saturar su cerebro, diré brevemente que anteriormente todos los diseñadores y desarrolladores web usaban disposición de la mesa, donde cada celda representada elemento específico. Se parecía a esto:
Así era la creación de un sitio web. Este es un ejemplo muy primitivo, pero puedes imaginar claramente cómo se creaban los sitios web en aquellos tiempos lejanos. Las tecnologías de Internet no se detienen y en algún momento nos llegó el concepto de diseño html div. Y entonces, como dicen, empezó todo.
Su importancia en el desarrollo de sitios web es realmente grande. Ahora crea y administra sitios web bloques html No podría ser más fácil. Los sitios empezaron a volverse hermosos e interesantes. Ahora el mundo entero sigue su camino.
Así es como ahora puedes representar el modelo de forma simplificada. usando divs bloques html.
La conveniencia radica en la independencia de los bloques entre sí, son fáciles de administrar individualmente, muévalos como desee, agregue estilos, puede establecer estilos comunes a través de reglas CSS para varios grupos Div. De acuerdo, esto es conveniente.
Ejemplos de uso de etiquetas div
Veamos algunos ejemplos prácticos de cómo aplicar etiquetas div a pagina html. En ejemplo sencillo Crearemos 4 bloques en la página. Siempre usaré Notepad++ en este y futuros ejemplos.
Entonces déjame explicarte. tenemos un diseño < ! DOCTYPE html > ella es buena para navegadores modernos y apoya marcado html 5 hablaremos de ello en números futuros.
A continuación, se abre un gran contenedor "principal". < html > . ¡Está emparejado y debe cerrarse al final! Luego viene la apertura de la etiqueta de servicio. < head > , que también está emparejado y contiene información de servicio sobre la codificación. < meta charset > , el más importante título de SEO título de la página, descripción (no la incluí aquí, porque no es necesario, estamos analizando puramente aspecto técnico), también se conectan aquí estilos CSS, fuentes ( biblioteca de google Fuentes), javascripts.
Luego viene la etiqueta < body > . Ya almacenará todas nuestras marcas de bloques y todos los contenedores con etiquetas. Sólo recuérdelo como un enorme "barril".
Y finalmente, aquí vienen nuestros contenedores div.
< div class = "header" > < / div > < div class = "sidebar" > < / div > < div class = "content" > < / div > < div class = "footer" > < / div > |
¡Importante! También están emparejados; también deben cerrarse junto con otras etiquetas.
Como puede ver, cada bloque div tiene atributo de clase, después del signo igual, puede configurarlos de forma independiente y arbitraria. Estas clases se crean específicamente para CSS. Es decir, el navegador ingresa a la página, ve el bloque div y mira qué información contiene y va a archivo css y ya allí busca la clase requerida.
No solo puede configurar el atributo de clase, sino que también puede usar el id (identificador). Quizás te preguntes: “¿Qué me importa cuál uso?” Te responderé, puedes usar cualquier método de diseño. Con una sola diferencia: prioridad identificación tiene más privilegios que clase .
Explicaré esto en la hoja de trucos del video a continuación.
Cada uno tiene su propio estilo de creación de sitios web, yo prefiero usar clase, ya que esta entrada en CSS se muestra con un punto. . selector
Sí, por cierto, quiero decir que el encabezado, la barra lateral, el contenido y el pie de página lo son todo. Selectores CSS, y ya tendrán atributos.
Por eso, seguimos limpiando el lío en la cabeza de los usuarios. bloques div Con la clase que hemos creado, pasemos ahora al CSS.
Abrámoslo por dentro etiqueta de cabeza reglas css para nuestra página, es decir, la diseñaremos. Hagámoslo así:
La entrada será la siguiente (simplemente copie y pegue su ejemplo y busque en el navegador)
< ! DOCTYPE HTML > < html > < head > < meta charset = "utf-8" > < title >Ejemplo de uso de etiquetas div< / title >
< / head > |
Del autor: Te doy la bienvenida nuevamente a nuestro blog. En este artículo me gustaría analizar con más detalle la cuestión de cómo centrar un bloque en CSS, así como otras manipulaciones con elementos de bloque.
Centrado
Hay muchos elementos en una página web que se pueden centrar por diseño. Por ejemplo, títulos, un logotipo en el encabezado o información en el pie de página. ¿Pero cómo alinearlo perfectamente en el centro? Por supuesto, debe comprender que no vale la pena calcular sangrías manualmente o aplicar posicionamiento cuando hay un valor notable. propiedades de margen– automático:
Bloquear (margen: 0 automático;)
Bloquear ( margen: 0 automático; |
El primer valor de esta propiedad especifica el relleno superior e inferior. En consecuencia, en lugar de cero, puede escribir su valor si necesita dar dichas sangrías. El segundo valor, auto, determina el relleno izquierdo y derecho. Se definen para que el elemento quede centrado. Pero aquí es muy importante seguir una regla más:
Al elemento se le debe dar un ancho. Necesariamente. Te explicaré por qué. Por ejemplo, está en contenedor común 980 píxeles de ancho. Y si no establece un ancho explícito para el bloque, ¿cómo se alineará con el centro si ya ocupa todo el ancho? En general, simplemente escriba el ancho o el ancho máximo y el centrado funcionará.
De igual forma puedes centrar aquellos bloques que quedarán anidados dentro de este. En general, el nivel de anidamiento no interferirá con la alineación.
Cómo crear un bloque en CSS y su apariencia.
Ya dije en uno de los artículos anteriores que los elementos de bloque se crean mediante la etiqueta div. Está emparejado. Es sólo un contenedor vacío de contenido. Él también necesita preguntar clase de estilo o un identificador para poder acceder vía css. Digamos esto:
< div class = "post-anonce" > < / div > |
vamos a las clases nombres claros para que quede inmediatamente claro qué papel desempeñan. Por ejemplo, en esta línea de código queda inmediatamente claro que nuestro bloque es un anuncio de artículo. A continuación, deberá formalizarlo en consecuencia.
Anuncio posterior (margen: 10 px; relleno: 15 px; fondo: #ccc; radio de borde: 15 px; ancho: 250 px; alto: 220 px;)
Publicar - anuncio ( margen: 10px; relleno: 15px; antecedentes: #ccc; radio del borde: 15px; ancho: 250 px; altura: 220 píxeles; |
Le dimos mucho a nuestro fragmento. reglas diferentes. Por ejemplo, externos y relleno, fondo, redondeo de esquinas, así como las dimensiones principales: ancho y alto.
agreguemos contenido
Título del artículo
Este es el texto del anuncio, generalmente contiene las primeras 40-50 palabras del artículo para que el lector pueda comprender aproximadamente de qué se tratará.
Leer másComo puedes ver, hemos agregado todo lo que necesitamos. Una imagen, un título, un pequeño texto en un párrafo y un enlace para leerlo completo. Por supuesto, esto no lleva a ninguna parte, ya que no tenemos un sitio web real; solo estamos viendo cómo podemos hacer un bloque.
Configuramos la imagen como si estuviera en la misma carpeta que el archivo css en el que se configuran estos estilos. Ahora sólo queda formalizarlo:
Imagen posterior al anuncio (ancho: 64 px; alto: 64 px; relleno: 10 px; flotante: izquierda)
Publicar - anuncio img ( ancho: 64px; altura: 64 píxeles; relleno: 10px; flotador: izquierda |
Démosle dimensiones claras, presionémoslo hacia el borde izquierdo para que el texto fluya hacia la derecha y también le damos algunas pequeñas sangrías. Y esto es lo que acabó pasando:
¿Parece esto un anuncio? Claro que lo parece, me parece que hasta quedó muy bien. Por supuesto, en un sitio real todavía estaría finalizado. El texto y el título recibirían los colores y fuentes determinados por el diseño, y se agregarían otros bloques de anuncios a la izquierda.
Sin embargo, aquí hay un ejemplo simple de cómo crear un bloque que tiene todo lo que necesita para comodidad del usuario.
Cómo hacer que un bloque sea invisible en CSS
Al principio os prometí algunas manipulaciones de bloques más. Veámoslos brevemente; se relacionan con la visibilidad de un elemento en la página. Por ejemplo, agreguemos la siguiente propiedad al bloque recién creado: display: none;
Actualice la página y verá que no hay nada en ella: el bloque ha desaparecido. Otra forma de quitarlo es hacerlo transparente. Responsable de esto propiedad de opacidad. De forma predeterminada, todos los elementos de la página son opacos, es decir, tienen opacidad: 1. Si establece opacidad: 0, el bloque se volverá completamente transparente. También puedes establecer valores entre estos números.
Aplicación en la práctica
Hagamos que nuestro bloque sea transparente y agreguemos palabras delante de él sobre las que tendremos que pasar el cursor para que aparezca.
< div class = "show-anonce" >Pase el cursor aquí para ver el anuncio< / div > |
Así creamos el bloque deseado.
Un elemento de bloque en HTML es un elemento que ocupa todo el ancho de forma predeterminada. elemento padre. El elemento principal puede ser otro elemento de bloque o una ventana del navegador. Puede establecer el ancho y el alto de un elemento de bloque utilizando las propiedades CSS. Posicionamiento elementos de bloque llamado el proceso de colocarlos dentro de la ventana del navegador y entre sí con usando CSS propiedades posición, izquierda, superior, derecha e inferior. Propiedad Posición CSS está destinado a especificar uno de los cuatro tipos disponibles Posicionamiento: estático (predeterminado), absoluto, fijo y relativo. Descansar Propiedades CSS, es decir, left , top , right y bottom están destinados a especificar distancias relativas a izquierda, arriba, derecha y borde inferior elemento padre. Además, los elementos del bloque pueden superponerse entre sí al establecer ciertas propiedades, y esta oportunidad Lo mismo se puede utilizar en sitios web.
Posicionamiento predeterminado (estático)
Si no especificó una posición para un elemento de bloque o especificó static , que es lo mismo, entonces los elementos del bloque se organizan en orden. Además siguiente bloque(por ejemplo: rojo) se encuentra con nueva linea. Además, este posicionamiento no se ve afectado al establecer las distancias izquierda, superior, derecha e inferior.
Posicionamiento absoluto (absoluto)
En posicionamiento absoluto La posición del elemento se establece en relación con los bordes de la ventana del navegador utilizando distancias especificadas por las propiedades izquierda, superior, derecha e inferior. Si especifica las distancias izquierda y derecha al mismo tiempo y entran en conflicto entre sí, entonces se da preferencia a izquierda, lo mismo se aplica a arriba y abajo, en las que mayor prioridad tiene distancia superior. El posicionamiento absoluto se utiliza a menudo junto con el posicionamiento relativo con fines de diseño cuando es necesario colocar varios elementos entre sí, también se pueden utilizar para crear menús desplegables, diseño del sitio, etc.
Posicionamiento fijo
El posicionamiento fijo es diferente de otros tipos de posicionamiento y no se mueve con el contenido a medida que se desplaza por la página. Los elementos de bloque de posición fija se anclan mediante las propiedades left, top, right y bottom a los bordes de la ventana del navegador. El posicionamiento fijo se utiliza para crear interfaces de marco (la ventana del navegador se divide en varias áreas), un menú fijo, un pie de página fijo y bloques "permanentes" (lista de enlaces, botones sociales etc.).
Posicionamiento relativo
El posicionamiento relativo se especifica especificando las distancias izquierda, superior, derecha e inferior en relación con su posición actual.
Sin embargo, esta posición de bloque también se puede crear usando la propiedad de margen.
El posicionamiento relativo no es divertido de usar por sí solo, se usa principalmente junto con el posicionamiento absoluto.
Consideremos las opciones:
En HTML, usamos tablas para posicionar elementos en la página. Las tablas tienen ventajas (facilidad de uso, visualización idéntica en todos los navegadores) y desventajas (código voluminoso, ilegible, diseño ilógico, etc.).
CSS usa bloques (divs) para posicionar elementos. Al mismo tiempo, el código se vuelve compacto, lógico y fácilmente modificable. Las desventajas del diseño basado en bloques incluyen un soporte desigual entre los navegadores, por lo que hay que escribir código para todos los navegadores (es decir, el código que se muestra diferentes navegadores casi lo mismo).
Así que comencemos. Digamos que tenemos esta página HTML estándar:
Ahora veamos cómo puedes diseñar una página de este tipo usando CSS.
Si dividimos visualmente nuestra página en bloques rectangulares, obtendremos cuatro bloques: encabezado del sitio, menú, contenido y parte inferior del sitio. Entonces tenemos cuatro divs. Escribamos el código html de una página con cuatro divs y le demos a cada uno un identificador correspondiente (id):
encabezado del sitio
parte inferior del sitio
Ahora, en la página style.css estableceremos las propiedades que ya conocemos, es decir, el ancho, alto y fondo de cada bloque:
#header( fondo:rojo oscuro; ancho:715px; alto:100px; ) #menu( fondo:oldlace; ancho:190px; alto:300px; ) #content( fondo:oldlace; ancho:525px; alto:300px; ) #footer (fondo:rojo oscuro; ancho:715px; alto:30px;)
Ahora nuestra página en el navegador (en una versión más pequeña) se ve así:
Este posicionamiento de elementos se llama posicionamiento en flujo normal. Esto significa que todos los elementos se muestran en la ventana del navegador de arriba a abajo, verticalmente, en el orden en que se suceden en el código html.
En esencia, el flujo normal no es diferente del posicionamiento de elementos en HTML. Y para diseñar una página así sin CSS, tendríamos que usar una tabla, a falta de otras opciones. CSS también nos proporciona otros esquemas de posicionamiento:
- posicionamiento absoluto
- posicionamiento relativo
- modelo de bloque flotante
- estático- el bloque está colocado en el flujo normal. Este es el valor predeterminado.
- relativo- posicionamiento relativo (relativo al flujo normal).
- absoluto- posicionamiento absoluto
- fijado - posicionamiento fijo(fijo en relación con el área de visualización).
posicionamiento absoluto
Con este esquema de posicionamiento, la ubicación del bloque en la página no depende de en qué parte del código html se encuentre este bloque. La ubicación de cada bloque se especifica indicando en qué parte de la pantalla mostrar este bloque. Hay cuatro propiedades para esto:
- izquierda- indica cuánto se debe desplazar el bloque en relación con el borde izquierdo de la ventana.
- bien- indica cuánto se debe desplazar el bloque en relación con el borde derecho de la ventana.
- arriba- indica cuánto se debe desplazar el bloque en relación con el borde superior de la ventana.
- abajo- indica cuánto se debe desplazar el bloque en relación con el borde inferior de la ventana.
Y aquí está el bloque. contenido necesita estar ubicado en otro lugar, por lo que especificaremos la propiedad para ello posición:absoluta y establezca el desplazamiento: desde el borde izquierdo de la ventana hasta el ancho del bloque menú, es decir. por 190 píxeles, y desde el borde superior de la ventana hasta la altura del bloque encabezamiento, es decir. por 100 píxeles.
#header( fondo:rojo oscuro; ancho:715px; alto:100px; ) #menu( fondo:oldlace; ancho:190px; alto:300px; ) #content( fondo:oldlace; ancho:525px; alto:300px; posición:absoluta ; izquierda: 190 px; arriba: 100 px; ) #pie de página (fondo: rojo oscuro; ancho: 715 px; alto: 30 px;)
Ahora nuestra página en el navegador se ve así:
Nuestro bloque no estaba ubicado exactamente como se esperaba. Esto se debe a que no tuvimos en cuenta un matiz: los navegadores tienen sus propias hojas de estilo integradas. Y, si no configuramos ninguna propiedad, entonces se usa la propiedad predeterminada.
Entonces, por defecto para el elemento cuerpo Los campos están definidos, pero no los tomamos en cuenta al configurar las propiedades de desplazamiento. Para solucionar este problema basta con establecer cuerpo propiedad margen: 0px, es decir. indicar explícitamente el tamaño de los campos (en nuestro ejemplo, su ausencia). Agreguemos esto a la hoja de estilo:
cuerpo (margen: 0px;)
Ahora nuestra página se ve como esperábamos:
En principio, los tamaños de desplazamiento se pueden establecer para cada bloque, aunque a veces esto es necesario. Lo más importante a recordar: al posicionar absolutamente, debe establecer la propiedad para el bloque posición:absoluta y propiedades de desplazamiento relativas al elemento "principal". En nuestro ejemplo, el elemento principal de los divs era la ventana del navegador, pero podría ser diferente.
Digamos que decidimos agregar un bloque de noticias a nuestra página y colocarlo en un bloque de contenido, por ejemplo así:
Luego en nuestra página html, en div id="contenido" agregaremos div id="noticias":
encabezado del sitio
Contenido
bloque de noticias
parte inferior del sitio
Luego en la hoja de estilo indicaremos el desplazamiento relativo al bloque. contenido:
#noticias (fondo:amarillo; ancho:150px; alto:280px; posición:absoluta; izquierda:365px; arriba:10px; )
Ancho de bloque contenido es de 525 píxeles y el ancho del bloque noticias- 150 píxeles. Esto significa que el desplazamiento desde el borde izquierdo es (525-150) 375 píxeles, pero para evitar que el bloque se pegue al borde derecho, reducimos el desplazamiento a 365 píxeles.
De manera similar, calculamos el desplazamiento desde el borde superior: altura del bloque contenido es de 300 píxeles y la altura del bloque noticias- 280 píxeles. Esto significa que el desplazamiento desde el borde superior no puede ser más de (300-280) 20 píxeles, nosotros hicimos 10.
Al posicionar absolutamente, para evitar confusión con los valores de desplazamiento, defina primero el "principal" y recuerde que el desplazamiento es relativo al "principal".
Este es el final de la lección, la próxima vez estudiaremos otros esquemas de posicionamiento.
Hola, queridos amantes de TI. Hoy en día, la forma principal de crear hermosos sitios de varias páginas se basa en diseño de bloque usando una etiqueta div.
En caso de ignorar las complejidades básicas de trabajar con esta herramienta, ay y ah, pero atractivo diseño adaptativo no lo entenderás en absoluto. Por lo tanto, este artículo está dedicado al tema "Cómo crear un bloque en HTML". Describiré en detalle cómo crear objetos de bloque en una página desde cero, cómo diseñar el fondo y el diseño de bloques y, lo más importante, le diré cómo conectar una hoja de estilo. ¡Así que comencemos!
Características de los elementos de bloque.
Bloques son elementos rectangulares que ocupan todo el ancho de página disponible, siempre comienzan en una nueva línea y, de forma predeterminada, calculan automáticamente la altura según el contenido.
Todos los elementos de bloque constan de 4 propiedades que, como marcos, rodean el contenido del objeto.
Lo principal en el bloque es contenido.
A su alrededor hay campos llamados relleno. Los márgenes son responsables de la distancia entre el contenido de un objeto y su borde interior fronteras.
Después vienen los propios límites, que se denominan palabra inglesa borde.
Y finalmente, el último cuadro alrededor de todo lo anterior es margen– sangrías del exterior bordes de la frontera a los límites de la página u otros elementos. Vale la pena señalar que no es necesario configurar estas propiedades.
Como ejemplo, programemos 2 y llenemos los elementos creados con texto.
En en este momento Este código aparecerá como dos oraciones normales. Para diseñar bloques, necesita conectar una hoja de estilo y lenguaje css establecer ciertas propiedades.
Traigamos algunos colores brillantes a la vida cotidiana html
Para que los objetos en bloque se vean interesantes y atractivos, obligatorio vale la pena conectarse mesa en cascada estilos.
Para hacer esto, en el contenedor principal después de la etiqueta.