esta dentro de la capa

- etiqueta de apertura, y

Este es el texto dentro de la capa.

Especificar en atributo estilo de etiqueta div y reglas para las barras de desplazamiento de capas también:

Aquí overflow:auto significa que las barras de desplazamiento aparecerán automáticamente, es decir, cuando el contenido de la capa no se ajuste a las dimensiones especificadas. Si auto se reemplaza por scroll, estas franjas siempre estarán presentes, independientemente de si son necesarias o no. Y el valor oculto tendrá el efecto contrario: no aparecerá, incluso si el contenido de este contenedor no es visible más allá de sus bordes.

Utilice el mismo método para agregar barras de desplazamiento en general. De forma predeterminada, aparecen según sea necesario, pero si por alguna razón es necesario que estén presentes constantemente, entonces se debe agregar la regla de estilo correspondiente al código HTML fuente. Busque la etiqueta de cierre del encabezado del documento en el código de la página y antes escribe estas instrucciones de estilo:

Hoy en día tener tu propia página web no es un lujo, sino una necesidad. Su creación requiere ciertas habilidades y conocimiento html. Crear un sitio web sencillo es bastante fácil. Sin embargo, su decoración y creación elementos interactivos siempre que funcionalidad adicional El sitio causará dificultades a un principiante. Uno de estos elementos interactivos que aumenta la comodidad de los visitantes del sitio es la barra. desplazamiento. Es especialmente útil en los campos del sitio que aseguran su conexión con scripts (interacción del sitio con los usuarios).

necesitarás

• Internet o cualquier tutorial html.

Instrucciones

Lo más importante en cualquier caso es la comodidad. La idea misma de usar la tira. desplazamiento en su sitio será apropiado sólo si lo dicta no su deseo, sino su necesidad. Haz un diseño donde quieras colocar banda desplazamiento. Elija un lugar para desplazarse (esto también se llama rayas desplazamiento).

Elige una ubicación para la franja. desplazamiento en la página que te interesa. Debe estar conectado rígidamente a algún elemento (por ejemplo, campo de texto o lista desplegable). Debes calcular este espacio en píxeles o porcentajes. Esto no es difícil de hacer, especialmente si el diseño del sitio tiene una estructura clara.

Entre las etiquetas BODY debes agregar código estándar para desplazarse. Puede encontrarlo en cualquier libro de texto html. Hay dos opciones: agregar este fragmento directamente a código html página o adjuntarla en una hoja de estilo CSS. El segundo método es más conveniente si va a cambiar no solo uno, sino todo el sitio. Luego debes ingresar los parámetros de color de la raya. desplazamiento, de lo contrario será gris y poco interesante. La figura muestra y etiqueta los elementos de desplazamiento. Los parámetros se deben ingresar de la misma forma que se muestra en la figura, con punto y coma.

Ahora definitivamente necesitas hacer mejoras. desnudarse desplazamiento parecía igual en todos los navegadores, compruébalo en los principales - Explorador de Internet, Mozilla Firefox y Ópera. Si está en uno de ellos, vuelve al primer paso y corrige los errores.

Consejos útiles

Existe una manera sencilla de crear una barra de desplazamiento para una página web. Establezca el parámetro de altura de su sitio en 75%, luego el desplazamiento aparecerá por sí solo. Es cierto, su esquemas de color todavía vale la pena configurarlo.

Fuentes:

• Sitio web para desarrolladores web principiantes en 2019

Instrucciones

Aceptar la decisión correcta. Raya desplazamiento debe aparecer en su sitio web sólo si esto es dictado por la necesidad de crear comodidad adicional para el usuario, y no únicamente por sus deseos. Crea un diseño de la página en la que vas a colocar banda desplazamiento. Elige un lugar adecuado para ello.

Haga una encuadernación rígida en rollo (esto también se puede llamar banda desplazamiento) a algunos elemento específico páginas. Podría ser un campo de texto que represente un archivo . Calcule la ubicación de "estacionamiento" del carril en píxeles y porcentaje. Esto no será nada difícil si la página está claramente estructurada.

Agregar un código de banda estándar desplazamiento entre etiquetas corporales. Si no sabes que estamos hablando de, descargue cualquier libro de texto en diseño html. El código se describirá claramente allí. Lo mejor es tenerlo a mano para estos casos. plantillas listas para usar, para que puedas tomar algunos elementos individuales código de programa, lo que hace la vida mucho más fácil. Entonces, has encontrado el código. Colóquelo directamente en el código de la página o adjúntelo a tabla css, que es mucho más sencillo, pero sólo si cambia no una, sino todas las páginas del sitio.

Establezca los parámetros de color para la barra; de lo contrario, será un color gris estándar, que probablemente no encajará en el diseño del sitio. Estos parámetros se configuran en el mismo orden que para cualquier otro elemento grafico páginas. Pruebe en varios navegadores, por ejemplo Mozilla, Opera y Explorer. Si está en alguno de ellos corregir los errores del código del programa.

Establezca el parámetro de altura del sitio en 75%, luego código de programa para desplazarse se ingresará automáticamente. Pero aún necesitas cambiar banda desplazamiento, y específicamente - ella opciones graficas. Esto se describe en los párrafos anteriores.

En este artículo examinaremos en detalle la propiedad de desbordamiento con todos sus valores, que también le permite agregar o eliminar una barra de desplazamiento horizontal/vertical. En otras palabras, cómo hacer barras de desplazamiento.

El desbordamiento en CSS es responsable de cómo se verá la visualización de la información en un bloque si el contenido excede la altura o el ancho de este bloque. Esta propiedad solo se aplica a elementos de bloque (display: block; o aquellos que inicialmente son elementos de bloque - divs, etc.).

Posibles valores que toma esta propiedad (visibles por defecto):

• Visible: se muestra todo el contenido del elemento, incluso más allá de la altura y el ancho especificados.
• Oculto: solo se muestra el área dentro del elemento, el resto estará oculto.
• Desplazamiento: siempre se agregan barras de desplazamiento.
• Automático: las barras de desplazamiento se agregan solo cuando es necesario.
• Heredar: hereda el valor del padre.

Muy a menudo, esta propiedad se utiliza para eliminar o agregar barras de desplazamiento a un elemento. Así, por ejemplo, tratan los marcos para no abarrotarlos en tamaño completo. O para insertar algunos texto grande, para que no ocupe media página, sino que se coloque cómodamente en un bloque especial, desde donde se puede desplazar y leer. En su mayor parte, la propiedad resuelve el problema de una visualización cómoda de la información.

En la demostración puedes ver cómo funciona cada valor de propiedad en la práctica:

código HTML

cuerpo (margen:0 0 0 0; relleno:0 0 60px 0; tamaño de fuente:16px;) h2 (color:#CC0033;) div ( ancho:200px; /* ancho fijo */ alto:300px; /* fijo altura */ borde:1px sólido #555; relleno:4px; flotante:izquierda) .VisibleDiv (desbordamiento:visible;).HiddenDiv (desbordamiento:oculto;).ScrollDiv (desbordamiento:desbordamiento;).

Vale la pena prestar atención al hecho de que en este caso particular los bloques tienen una altura y un ancho fijos determinados. Esto es importante, por ejemplo, considere la opción cuando la altura del bloque está configurada en automático:

Vemos que el texto se muestra correctamente dentro del bloque en todos los casos, salvo un pequeño inconveniente en el caso del scroll, donde aparecen barras de desplazamiento inactivas.

Pero en este caso existe un pequeño peligro que muchos no entienden por qué surgió y cómo corregirlo. El caso es que si un bloque con desbordamiento: visible;

es decir, el valor predeterminado y su contenido tiene elementos con cualquier valor flotante excepto none, entonces todo esto se mostrará incorrectamente. Para entender cuál es esta situación, considere un ejemplo: Bajo Bloque visibleDiv

Viene inmediatamente después del div con desbordamiento: visible (valor predeterminado)

No hay nada debajo del bloque VisibleDiv

cuerpo (margen:0 0 0 0; relleno:0 0 60px 0; tamaño de fuente:16px;) h2 (color:#CC0033;) p (flotante:izquierda;) div (ancho:500px; alto:automático; borde: 1px sólido #555; relleno: 4px; margen: 4px; FFFFFF; peso de fuente: negrita;)

En el primer caso, está claro que el contenido con la propiedad flotante se mueve fuera del bloque y no se tiene en cuenta al determinar la altura del bloque, en el segundo caso, debajo del bloque con desbordamiento: visible ;

Otro bloque está especialmente colocado y pintado de un color diferente. Estos no son los únicos ejemplos de cómo se pueden comportar dichos bloques en una página (con desbordamiento: visible; y altura: auto;). Esto se puede corregir reemplazando el valor visible por oculto. Recuerde que esta propiedad solo debe especificarse para bloques con altura: auto; , si hay una altura fija, existe una alta probabilidad de que el contenido simplemente se oculte si es mayor que la altura especificada. Así se verá la versión corregida: Además, no tendrás ese problema si el bloque tiene overflow: visible ;

y altura: automático; También se especifica algún valor. propiedades flotantes

. En general, en muchos casos, la visualización de elementos depende de un conjunto de propiedades, más que de propiedades individuales. Veamos cómo usar la regla. Desbordamiento de CSS

Por supuesto, en muchos casos es imposible prescindir de especificar las dimensiones específicas del área utilizando el ancho y el alto (el ancho y el alto del bloque), que pueden tomar . En general, consideraremos a continuación ejemplos de la acción de la propiedad de desbordamiento en todas las variantes posibles.

Desbordamiento (visible, oculto): contenido visible u oculto de un bloque que se extiende más allá de sus límites

Primero, siguiendo la tradición, veamos qué valores son válidos en la tabla de la especificación W3C (los datos se presentan según CSS2.1, aunque son válidos y soportados en más nueva versión CSS3):

Como puede ver, el desbordamiento tiene 4 parámetros principales (visible, oculto, automático, desplazamiento) y heredar valor, que se puede especificar si se desea, pero de forma predeterminada esta regla no se hereda ( heredado: no en la captura de pantalla). El valor predeterminado es visible (inicial: visible).

Antes de iniciar la investigación con ejemplos prácticos, aclaremos algunos detalles por nosotros mismos. Como se mencionó anteriormente, la regla de desbordamiento le permite controlar el contenido elemento de bloque en los casos en que no se ajuste a sus límites. Esto se desprende directamente del título de este reglas CSS(overflow en inglés significa desbordamiento, exceso).

De antemano, puedes familiarizarte con en qué consiste siguiendo el enlace proporcionado. Además, sería útil echar un vistazo al material sobre las características de los elementos del bloque de página.

Tomemos el contenedor DIV como ejemplo (más sobre divs como base diseño de bloque), vamos a teñirlo con usando fondo, a través del atributo de estilo, y colóquelo dentro texto libre:

El resultado final será algo como esto:

No hemos definido el ancho del contenedor. En este caso, si recuerdas, el elemento de bloque ocupa todo el espacio disponible en ancho. Pero la altura del bloque, si no se especifica, está determinada precisamente por el contenido (en nuestro ejemplo, el texto presente allí).

Regla de desbordamiento para bloques que contienen contenido que no se puede distribuir en altura

Arriba ofrecí un ejemplo en el que un elemento de bloque contiene texto que, cuando tiene un ancho limitado, se puede redistribuir (cambiando el ajuste de palabras). Esto es especialmente cierto ahora cuando se usa diseño adaptativo para ver en teléfonos móviles. Sin embargo, sucede que el contenido, por una razón u otra, no tiene tanta flexibilidad.

Comencemos con las mismas condiciones que en el ejemplo que comentamos anteriormente. Como recordará, al especificar un ancho de bloque fijo, el contenido se redistribuyó de tal manera que no excediera el borde horizontal, pero al mismo tiempo aumentó la altura del contenedor (junto con el contenido) verticalmente. Ahora cambiemos el contenido y reemplacemos el texto estándar con palabras largas sin espacios que indiquen ancho:

Tenga en cuenta que el contenido ahora excede inmediatamente los límites horizontales cuando el ancho es limitado. Y si escribimos desbordamiento oculto, cortaremos el contenido:

Agregar desplazamiento usando los parámetros de desplazamiento y automático de la regla de desbordamiento

Ahora veamos el caso en el que el ancho y el alto del contenedor son fijos, pero es recomendable dejar accesible el contenido que no cabe en él. Tomemos el mismo ejemplo c ancho fijo y altura, solo el valor de altura se establecerá en 60 px para mayor claridad, agregando desbordamiento:desplazamiento A estilos CSS:

Como resultado, aparecieron barras de desplazamiento vertical y horizontalmente:

De este modo, el contenido se vuelve accesible, aunque sea mediante desplazamiento. Sin embargo, tenga en cuenta que no solo se ha formado el desplazamiento vertical, que es necesario para una visualización completa, sino también el desplazamiento horizontal, que no está activo. Esta es una característica del valor de desplazamiento.

Me gustaría señalar que la regla de estilo básica tiene variaciones en la forma de desbordamiento-x y desbordamiento-y, que toman los mismos valores (visible, oculto, desplazamiento, automático) que el desbordamiento básico, solo parámetros especificados se aplican al contenido de los bloques horizontalmente (x) y verticalmente (y).

Regla de desbordamiento de texto CSS (clip, puntos suspensivos)

Ahora familiaricémonos con la modificación de la propiedad de desbordamiento descrita anteriormente, que apareció solo en CSS3. Información al respecto se puede encontrar en la página oficial correspondiente (borrador editorial del W3C):

Propiedad desbordamiento de texto tiene 2 significados principales (clip y elipsis). Solo tiene efecto si se especifica desbordamiento, un valor que no sea visible. Y este, como recordarás, es el parámetro predeterminado, por lo que los estilos para el elemento correspondiente deben tener un desbordamiento con oculto, desplazamiento o automático.

Clip es el valor predeterminado y simplemente recorta el texto. Por lo tanto, usaremos texto desbordado para nuestro DIV con el correspondiente Propiedades CSS, agregando espacios en blanco:nowrap (para deshabilitar el ajuste de palabras):

Como se puede ver, puntos suspensivos le permite agregar puntos suspensivos en lugar de texto recortado, insinuando su continuación. Para darle a este ejemplo una conclusión lógica, puedes agregar una pseudoclase:hover para el div, que cambia el estilo del elemento cuando pasas el cursor sobre él:

Clase 1: flotar (desbordamiento: visible; espacio en blanco: normal;)

Ahora el texto se recortará, pero si pasas el mouse sobre él, aparecerá completo. Puede verificar esto siguiendo el enlace proporcionado.

La propiedad de desbordamiento controla la visualización del contenido de un elemento de bloque si todo el contenido no cabe y se extiende más allá del área de las dimensiones especificadas.

Breve información

Designaciones

	Descripción	Ejemplo
<тип>	Indica el tipo de valor.	<размер>
A && B	Los valores deben generarse en el orden especificado.	<размер> && <цвет>
Un | B	Indica que es necesario seleccionar solo un valor de los propuestos (A o B).	normales | pequeñas capitalizaciones
Un || B	Cada valor se puede utilizar de forma independiente o junto con otros en cualquier orden.	ancho || contar
	Valores de los grupos.	[ cultivo || cruz ]
*	Repita cero o más veces.	[,<время>]*
+	Repita una o más veces.	<число>+
?	El tipo, palabra o grupo especificado es opcional.	¿recuadro?
(A,B)	Repita al menos A, pero no más de B veces.	<радиус>{1,4}
#	Repita una o más veces separadas por comas.	<время>#

×

Valores

visible Muestra todo el contenido del elemento, incluso más allá de la altura y el ancho especificados. oculto Sólo se muestra el área dentro del elemento, el resto quedará oculto. desplazamiento Las barras de desplazamiento siempre se agregan. Las barras de desplazamiento automático se agregan solo cuando es necesario.

Salvadera

Winnie the Pooh siempre no era reacio a tomar un refrigerio, especialmente a las once de la mañana, porque a esa hora el desayuno ya había terminado y el almuerzo aún no había comenzado. Y, por supuesto, se alegró terriblemente de ver que el Conejo sacaba tazas y platos.

div (altura: 80px; desbordamiento: automático;)

Ejemplo

Resultado este ejemplo mostrado en la Fig. 1.

Arroz. 1. Aplicar la propiedad de desbordamiento

Modelo de objetos

Objeto.estilo.desbordamiento

Nota

Internet Explorer hasta la versión 7.0 inclusive:

• relativamente posicionado elementos secundarios, cuyos valores de desbordamiento están configurados en automático o desplazamiento se comportan como si tuvieran la posición: fija.

Internet Explorer 8:

• La combinación de desbordamiento con el valor de desplazamiento con las propiedades de altura máxima y flotante puede provocar que falten elementos de la página web y que se muestre una pantalla en blanco en el navegador.
• Para un bloque que tiene propiedades flotantes y de desbordamiento configuradas en desplazamiento, se ignora el ancho especificado mediante la propiedad max-width.
• Altura del bloque desde raya horizontal el desplazamiento aumenta según la altura de la barra de desplazamiento, aunque según la especificación CSS especificado las dimensiones deben incluir barras de desplazamiento.

Firefox 3.6 no aplica correctamente el desbordamiento a grupos de celdas de tabla ( , , ).

Especificación

Cada especificación pasa por varias etapas de aprobación.

• Recomendación: la especificación ha sido aprobada por el W3C y se recomienda como estándar.
• Recomendación del candidato ( Posible recomendación ) - el grupo responsable del estándar está satisfecho de que cumple sus objetivos, pero requiere ayuda de la comunidad de desarrollo para implementar el estándar.
• Recomendación propuesta Recomendación sugerida) - en esta etapa el documento se envía al Consejo Asesor del W3C para su aprobación final.
• Borrador de trabajo: una versión más madura de un borrador que ha sido discutido y modificado para revisión de la comunidad.
• Borrador del editor ( Borrador editorial) - una versión borrador del estándar después de que los editores del proyecto realizaron cambios.
• Borrador ( Borrador de especificación) - el primer borrador de la norma.

×