¡Hola, queridos lectores del sitio del blog! Hoy continuaremos nuestro estudio de las hojas de estilo en cascada o CSS. En artículos anteriores, ya hemos considerado en términos generales el diseño de bloques del sitio. Como resultado, comenzamos a tener páginas web bastante profesionales, pero les falta algo. Y lo más probable es que carezcan de sangrías y marcos. Hoy echaremos un vistazo a las reglas de estilo de margen, relleno y borde que le permiten establecer relleno y bordes para elementos html.
Con las hojas de estilo en cascada, hay dos tipos de sangría.
1.Sangrar es la distancia desde el borde imaginario del elemento hasta su contenido. El valor de la distancia se establece mediante el parámetro relleno. Tal sangría pertenece al elemento mismo y se encuentra dentro de él.
2. acolchado exterior- la distancia entre el borde del elemento actual de la página web y los bordes de los elementos vecinos, o el elemento principal. El tamaño de la distancia está controlado por la propiedad. margen. Este relleno está fuera del elemento.
Imagen para mayor claridad:
Por ejemplo, considere una celda llena de texto. Entonces el relleno es la distancia entre el borde imaginario de la celda y el texto que contiene. Y la sangría exterior es la distancia entre los bordes de las celdas vecinas. Comencemos con las sangrías.
Las propiedades de estilo padding-left, padding-top, padding-right y padding-bottom le permiten establecer valores de relleno para la parte izquierda, superior, derecha e inferior de un elemento de página web, respectivamente:
parte superior acolchada | acolchado derecho | parte inferior acolchada | relleno izquierdo: valor | interés | heredar
La cantidad de relleno se puede especificar en píxeles (px), porcentajes (%) u otras unidades CSS aceptables. Al especificar porcentajes, el valor se calcula a partir del ancho del elemento. El valor de herencia indica que se hereda del padre.
Por ejemplo, para el párrafo actual, apliqué una regla de estilo que especifica una sangría izquierda de 20 px, una sangría superior de 5 px, una sangría derecha de 35 px y una sangría inferior de 10 px. La entrada de la regla se verá así:
p.prueba(
relleno-izquierda:20px;
acolchado superior: 5px;
relleno-derecha:35px;
relleno inferior: 10px
}
Regla de relleno prefabricada le permite especificar sangrías en todos los lados de un elemento de página web a la vez:
relleno:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Se permite utilizar uno, dos, tres o cuatro valores en una regla prefabricada, separándolos con un espacio. En este caso, el efecto depende del número de valores:
Por lo tanto, la regla CSS anterior se puede acortar tanto como sea posible y escribirse de la siguiente manera:
p.prueba( relleno:5px 35px 10px 20px)
Los atributos de estilo margin-left , margin-top , margin-right y margin-bottom le permiten establecer la cantidad de margen izquierdo, superior, derecho e inferior, respectivamente:
margen superior | margen derecho | margen inferior | margen izquierdo:<значение>|auto|heredar
Como se mencionó anteriormente, el margen es la distancia desde el borde del elemento actual hasta el borde del elemento vecino o, si no hay elementos vecinos, hasta el borde interior del contenedor principal.
La cantidad de relleno se puede especificar en píxeles (px), porcentajes (%) u otras unidades CSS aceptables:
pag(
margen izquierdo: 20px;
}
h1(
margen derecho: 15%;
}
El valor automático significa que el navegador calculará automáticamente el relleno. En el caso de utilizar una notación porcentual, las sangrías se calculan en función de ancho del contenedor principal. Y esto se aplica no solo a margin-left y margin-right, sino también a margin-top y margin-bottom, el porcentaje de relleno se calculará según el ancho, no la altura del contenedor.
Está permitido usar como valores de sangrías externas valores negativos:
pag(
margen izquierdo: -20px;
}
Si, con valores positivos de sangría, los elementos vecinos se alejan, entonces con un valor negativo, el bloque vecino pasará por encima del elemento para el que establecemos una sangría negativa.
También podemos especificar márgenes usando el atributo de estilo. margen. Establece los valores de sangría simultáneamente en todos los lados del elemento de la página web:
margen:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]
Esta propiedad, en el caso de establecer uno, dos, tres o cuatro valores de relleno, obedece a las mismas leyes que la regla del relleno.
Hay tres tipos de opciones al establecer marcos:
Comencemos con el parámetro de grosor del borde:
ancho del borde: [valor | delgado | medio | grueso] (1,4) | heredar
grosor del marco se puede configurar en píxeles o en otras unidades disponibles en css. Las variables fino, medio y grueso establecen el grosor del borde en 2, 4 y 6 píxeles, respectivamente:
ancho de borde: medio;
Al igual que con las propiedades de relleno y margen, se permiten uno, dos, tres o cuatro valores para el parámetro de ancho de borde, configurando así el ancho del borde para todos los lados a la vez o para cada uno por separado:
ancho del borde: 5px 3px 5px 3px
Para el párrafo actual, haremos que el grosor del borde superior sea de 1 px, el derecho de 2 px, el inferior de 3 px y el izquierdo de 4 px usando la regla (border-width: 1px 2px 3px 4px;)
Los atributos de estilo border-left-width , border-top-width , border-right-width y border-bottom-width se pueden usar para establecer el grosor de los lados izquierdo, superior, derecho e inferior del borde, respectivamente :
borde-izquierdo-ancho|borde-superior-ancho|borde-derecho-ancho|borde-inferior-ancho: delgado|medio|grueso|<толщина>|heredar
El siguiente parámetro es border-color con el que puedes controlar Color del marco:
borde-color: [color | transparente](1,4) | heredar
La propiedad le permite establecer el color del marco para todos los lados del elemento a la vez o solo para los especificados. Como valor, puede utilizar los métodos de configuración aceptados en html para colores: código hexadecimal, palabras clave, etc.:
p(borde-ancho: 2px; borde-color: rojo)
El valor transparente establece el color del borde transparente y hereda el valor del padre. De forma predeterminada, si el color del borde no está establecido, se utilizará el utilizado para la fuente dentro del elemento dado.
Los atributos de estilo border-left-color, border-top-color, border-right-color y border-bottom-color establecen el color de los lados izquierdo, superior, derecho e inferior del borde, respectivamente:
border-left-color|border-top-color|border-right-color|border-bottom-color: transparente|<цвет>|heredar
Y los últimos conjuntos de estilo de borde de parámetro tipo de marco:
estilo de borde: (1,4) | heredar
El tipo de marco se puede especificar para todos los lados del elemento a la vez o solo para los especificados. Se pueden usar múltiples valores palabras clave. La vista dependerá del navegador que esté utilizando y del grosor del marco. Significado ninguno se utiliza de forma predeterminada y no muestra un marco y su grosor se establece en cero. El valor oculto tiene el mismo efecto. El cuadro resultante para el resto de valores, en función del espesor, se muestra en la siguiente tabla:
Los atributos de estilo border-left-style , border-top-style , border-right-style y border-bottom-style establecen el estilo de las líneas que se usarán para dibujar los lados izquierdo, superior, derecho e inferior del marco , respectivamente:
border-left-style|border-top-style|border-right-style|border-bottom-style: ninguno|oculto|punteado|discontinuo|sólido|doble|ranura|cresta|inserción|salida|heredar
Al igual que con las opciones de margen y relleno, el borde tiene borde de propiedad genérica. Le permite establecer simultáneamente el grosor, el estilo y el color del borde alrededor de un elemento:
borde: | heredar
Los valores pueden estar en cualquier orden, separados por espacios:
td (borde: 1px amarillo sólido)
Para establecer un borde solo en ciertos lados de un elemento, existen propiedades border-top, border-bottom, border-left, border-right, que le permiten establecer parámetros para los lados superior, inferior, izquierdo y derecho del elemento. fronteras, respectivamente.
Solo queda resumir:
Observo que todas estas propiedades css aumentan el tamaño del elemento de la página web. Por lo tanto, si cambiamos el grosor del borde o el tamaño del relleno de los contenedores de bloque que forman el diseño de la página web, tendremos que cambiar el tamaño de estos contenedores en consecuencia, de lo contrario, pueden moverse y el diseño se romperá.
Eso es todo, ¡nos vemos pronto!
El diseño CSS siempre ha sido rectangular. Cualquier línea suave es competencia del desarrollador. Las reglas de estilo brindan suficientes opciones para dar a la página formas suaves dentro de la resolución de la pantalla. Pero cualquier elemento de diseño es siempre un rectángulo en el que la ubicación de la información está regulada por las reglas de CSS.
El relleno completo es importante para cada elemento de una página cuando está absolutamente posicionado, y el relleno superior se define específicamente en CSS porque es importante para una variedad de elementos, especialmente elementos en línea.
Un elemento de bloque tiene una regla de relleno desde los lados del elemento en el que se encuentra (margen), una regla de relleno para los elementos dentro de él (relleno) y un ancho de borde (borde) que también se puede usar.
De particular importancia es la muesca en la parte superior. CSS dentro de un bloque relaciona las reglas de relleno con las reglas para elementos posicionados absoluta y relativamente dentro de ese bloque.
La práctica habitual de las reglas CSS: puede especificar el relleno en todos los lados por igual, en pares superior/inferior y derecha/izquierda, o para cada lado por separado. Por ejemplo,
En el primer caso, se establece la sangría del elemento desde los lados del contenedor exterior en el que se encuentra. En el segundo caso, las sangrías superior e inferior son 10px, izquierda y derecha - 20px. En el tercer caso, se indican las dimensiones de las sangrías en todos los lados: superior, derecha, inferior e izquierda.
En todos estos casos, el guion el CSS superior es de 10 px.
Si el elemento de diseño no está posicionado de forma absoluta, se ubica en el orden general de la página.
si definimos sangría desde la parte superior del CSS en el elemento scCurrInfo, se cumplirá el objetivo y, si se encuentra en el nivel li, no se cumplirá.
EN este ejemplo usando regla de relleno: 40px; requiere una reducción adecuada de las reglas de ancho y alto en 80px. De lo contrario, el tamaño del bloque scCurrInfo se extenderá más allá de los límites del bloque exterior.
Si eliminamos la regla de relleno de la descripción de scCurrInfo, pero la agregamos con un valor de 20 px a la descripción del estilo del elemento de la lista, solo obtenemos guion superior CSS no aplicará este valor a otros lados.
Naturalmente, este uso de la regla de sangría se aplica a cada elemento li.
Algunos desarrolladores logran la excelencia diseñando páginas elementos de bloque. Aparentemente, esta es una práctica clásica: comenzar con tablas y terminar su propio proceso educativo en bloques.
La libertad inherente al diseño de bloques es fascinante, y la imaginación del desarrollador puede no estar limitada por las reglas estrictas de la tabla: solo filas, solo celdas, fusionando solo horizontal y verticalmente. Nada peculiar a las ideas relacionales.
Mientras tanto, las tablas, además de las deficiencias obvias, tienen muchas ventajas cualitativas. Al crear sangrías desde arriba, CSS tiene en cuenta las sangrías a la izquierda, a la derecha (la parte inferior es un momento especial). Las reglas de las celdas de la tabla le permiten controlar la alineación tanto vertical como horizontalmente. Usando estilos de fila, combinados con estilos de celda, puede crear vistas complejas de contenido.
La habitual representación de la página en forma de rectángulos no impide en absoluto que se presente en forma de tabla. Estos también son rectángulos, pero también son celdas de tabla, es decir, tienen sus propias reglas que complementan las reglas de bloque.
Bloque con regla POSICIÓN: absoluta ; se ubicará en el lugar que le señalen sus coordenadas relativas a la manzana en la que se encuentra.
Un rasgo característico de las reglas CSS es que "la práctica es el mejor criterio de verdad" en la mayoría de los casos, especialmente cuando se requiere compatibilidad entre navegadores y el diseño se realiza manualmente, es preferible estudiar manuales completos en hojas de estilo en cascada.
El uso de tablas a menudo conduce a problemas de cambio de celda. Un desplazamiento similar dentro de un bloque no siempre afecta a todos los elementos. Al experimentar, puede lograr el resultado deseado. Una tarea trivial: cómo elimine el relleno superior, CSS no siempre lo resuelve de una manera trivial.
En algunos casos, cuando tiene que escribir elementos de página en las profundidades de algún sistema de administración de contenido de sitio popular, aún debe prestar atención no solo a la práctica experimental, sino también a observar la experiencia de los colegas.
Sucede que al crear un elemento o diseño, necesitamos crear una sangría horizontal para que sea relativo entre sí. Esto puede ser como bloques o elementos varios, o mejor dicho, es para hacer la distancia que originalmente estaba establecida entre bloques ubicados horizontalmente. Existir diferentes caminos para crear sangrías en elementos de diseño. Sin embargo, por compatibilidad con varios navegadores modernos aquí tocaremos el tema actual de la sangría como texto o un bloque en la página.La propiedad especifica cuánto espacio de texto horizontal debe ajustarse antes del comienzo de la primera línea del elemento de texto. El espaciado se calcula desde el principio desde el borde del elemento y el contenedor para el nivel de bloque.
Dado que la mayor parte del contenido de una página web tiene forma de texto, la capacidad de diseñar ese texto de manera atractiva y efectiva es una habilidad importante para convertirse en diseñador web. Para sangrar la descripción y el párrafo, el método más utilizado y recomendado sería utilizar CSS. Aquí se le darán varios ejemplos de cómo se puede usar CSS para texto y elementos de relleno.
Establecer relleno superior con CSS
Para crear el relleno superior se usa, entonces, por supuesto, no podemos prescindir de las propiedades CSS, porque necesitamos margin-top, este es un valor que se puede establecer de diferentes maneras, tanto en px como estándar en píxeles, em, %, etc. on, que todo sucede en estilo CSS en unidades de medida.
Ejemplo de uso:
bloque de margen (
margen superior: 50px;
}
Lo que se puede ver en la imagen:
También puede usarlo para soltar bloques, aquí puede usar una propiedad llamada margen izquierdo También margen derecho Y margen inferior. Donde simplemente especificamos la propiedad de margen, donde es posible establecer inicialmente 4 parámetros debajo de ella, aquí consideraremos el sentido de las agujas del reloj para el concepto, donde comenzaremos desde el lado superior y continuaremos debajo de cada uno de los lados.
margen: 20px 50px 30px 50px;
También hay una sangría desde arriba en CSS
Sucede que necesita alinear el elemento de contenido verticalmente, esto es relativo al bloque principal, aquí es posible usar otras propiedades, como padding-top , que lo hace, o más bien, por defecto establece la sangría hacia arriba. Si hablamos de propiedades similares, que también se pueden escribir y configurar de manera similar, aquí viene el margen en px, em, % y otras unidades.
Ejemplo:
bloque de relleno (
acolchado superior: 47px;
}
Ahora podemos considerar un análogo de la propiedad margen Y relleno, que se usa para establecer sangrías en otros lados del elemento de bloque, pero ya va por separado: relleno-izquierda, relleno derecho, fondo acolchado. Donde puede establecer inmediatamente la distancia que necesita, solo para todos los lados, y todo será al mismo tiempo.
relleno: 10px 20px 40px 50px;
Aquí puede establecer inicialmente el valor como para margen empezando como entiendes por arriba, pero luego todo va en el sentido de las agujas del reloj, esto es a la derecha, abajo, a la izquierda, y así sucesivamente.
Ahora, dependiendo de la situación diferente, tiene la oportunidad de sangrar desde arriba para estilos css, donde usamos las propiedades margen Y relleno que es posible configurar los elementos necesarios en la página de su recurso de Internet, como lo ha planeado y debe hacerlo.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui oficia deserunt mollit anim id est laborum. Párrafo 1.10.32 "de Finibus Bonorum et Malorum", escrito por Cicerón en el 45 d.C. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odi t aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem Ut enim ad minima veniam quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo volupta s nulla pariatur?" 1914 traducción al inglés, H. Rackham "Pero debo explicarles cómo nació toda esta idea equivocada de denunciar el placer y elogiar el dolor y les daré una cuenta completa del sistema, y expondré las enseñanzas reales del gran explorador de nadie rechaza, desagrada o evita el placer mismo, porque es placer, sino porque quien no sabe perseguir racionalmente el placer encuentra consecuencias extremadamente dolorosas, quien ama o persigue o desea obtener el dolor por sí mismo, porque es dolor, sino porque ocasionalmente ocurren circunstancias en las que el trabajo y el dolor pueden procurarle un gran placer, excepto para obtener alguna ventaja de ello? consecuencias, o alguien que evita un dolor que no produce ningún placer resultante? Párrafo 1.10.33 "de Finibus Bonorum et Malorum", escrito por Cicerón en el 45 d.C. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui oficia deserunt mollitia animi, id est laborum et do lorum fuga Et harum quidem rerum facilis est et expedita distintio Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus Temporibus autem quibusdam et aut officiis debitis autrerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. 1914 traducción al inglés, H. Rackham "Por otro lado, denunciamos con justa indignación y aversión a los hombres que están tan seducidos y desmoralizados por los encantos del placer del momento, tan cegados por el deseo, que no pueden prever el dolor y el problema que y la misma culpa corresponde a los que faltan a su deber por debilidad de la voluntad, que es lo mismo que decir por rehuir el trabajo y el dolor. Estos casos son perfectamente simples y fáciles de distinguir. En una hora libre, cuando nuestro poder de elección es ilimitado y cuando nada impide que podamos hacer lo que más nos gusta, todo placer debe ser bienvenido y todo dolor evitado. Ocurre con frecuencia que los placeres deben ser repudiados y las molestias aceptadas. El hombre sabio, por lo tanto, siempre tiene en cuenta estas cuestiones a este principio de selección: rechaza los placeres para conseguir otros placeres mayores, o soporta dolores para evitar dolores peores".
propiedad CSS margin-top establece el margen en la parte superior del elemento. El relleno es la distancia desde el borde exterior del borde superior del elemento actual hasta el borde interior de su elemento principal, o hasta el borde del elemento que se encuentra encima. Tenga en cuenta que los elementos en línea (display: inline;) solo pueden tener márgenes en los lados izquierdo y derecho.
El relleno superior del margen se puede especificar en píxeles (px), porcentajes (%) u otras unidades de CSS. El valor puede ser positivo o negativo.
Nota: El relleno inferior o superior de un elemento secundario puede afectar la altura total del elemento principal si no tiene un tamaño de altura fijo.
