Las hojas de estilo en cascada, tal es su traducción del inglés Cascading Style Sheets (CSS), tienen como función establecer reglas de representación de un documento en un medio o dispositivo. Mediante estas reglas podremos establecer medidas, colores o cualquier otra característica de representación de una página web, para que se vea reflejada en una pantalla de monitor, de un dispositivo móvil, una tablet, una impresora, un dispositivo braille o un televisor.
La función principal de CSS es, por lo tanto, la de permitir separar el contenido y la estructura que se define en un documento HTML, de la representación, que queda a cargo de las hojas de estilos.
Esta separación es importante para un proyecto web ya que, además de permitir la definición de criterios que se deben respetar en el sitio, ofrece la posibilidad de que se definan clases para evitar la necesidad de rescribir código y, además, se pueden crear reglas para que el sitio se represente de una manera correcta en diferentes dispositivos.
Tres de los principales beneficios para el uso de CSS son:
● Resuelve un gran problema. Antes de CSS, las etiquetas como fuente, color, estilo de fondo, alineación de elementos, borde y tamaño tenían que repetirse en cada página web. Este era un proceso muy largo. Por ejemplo: si estabas desarrollando un sitio web grande donde se agregaban fuentes e información de color en cada página, estoy se convertía en un proceso largo y costoso. CSS fue creado para resolver este problema.
● Ahorra mucho tiempo. Las definiciones de estilo CSS se guardan en archivos CSS externos, por lo que es posible cambiar todo el sitio web cambiando solo un archivo.
● Proporcionar más atributos. CSS proporciona atributos más detallados que usar simplemente HTML para definir la apariencia del sitio web.
Antes de comenzar a trabajar con CSS hay que conocer las diferentes formas para incluir estilos en nuestros documentos HTML, ya que hay varias, cada una con sus particularidades y diferencias.
En principio, tenemos tres formas diferentes de hacerlo, siendo la primera la más común y la última la menos habitual:
Veamos cada una de ellas detalladamente:
Enlace a CSS externo (link). En la cabecera de nuestro documento HTML, más concretamente en el bloque , podemos incluir una etiqueta con la
que establecemos una relación entre el documento actual y el archivo CSS que indicamos en el atributo href:
De esta forma, los navegadores sabrán que deben aplicar los estilos que se encuentren en el archivo index.css. Se aconseja escribir esta línea lo antes posible (sobre todo, antes de los scripts), obligando así al navegador a aplicar los estilos cuanto antes y eliminar la falsa percepción visual de que la página está en blanco y no ha sido cargada por completo.
El atributo type="text/css" no es necesario en HTML5. Muchas veces se indica para mantener retrocompatibilidad con navegadores muy antiguos, pero en la actualidad se puede omitir.
Nótese que, además de acceder a indicar la ruta en el href, también se procede a indicar el tipo de medio para el cual ha sido preparada la hoja de estilo; en este caso se trata de screen. Tengamos en cuenta que esto quiere decir que podemos contar con diferentes hojas de estilo para trabajar en el sitio y también para adaptar nuestro proyecto a la representación en distintas clases de dispositivos.
Incluir CSS en el HTML (style). Otra de las formas habituales que existen para incluir estilos CSS en nuestra página es la de añadirlos directamente en el documento HTML, a través de una etiqueta <style> que contendrá el código CSS:
Este sistema puede servirnos en ciertos casos particulares, pero hay que darle prioridad al método anterior (CSS externo), ya que incluyendo el código CSS en el interior del archivo HTML arruinamos la posibilidad de tener el código CSS en un documento a parte, pudiendo reutilizarlo y enlazarlo desde otros documentos HTML mediante la etiqueta link.
Nota: Aunque no es obligatorio, es muy común que las etiquetas <style> se encuentren en la cabecera del documento HTML, ya que antiguamente era la única forma de hacerlo.
Estilos en línea (atributo style). Por último, la tercera forma de aplicar estilos en un documento HTML es hacerlo directamente, a través del atributo style de la propia etiqueta donde queramos aplicar el estilo, colocando ahí las propiedades CSS:
De la misma forma que en el método anterior, con la etiqueta <style>, se recomienda no utilizar este método salvo en casos muy específicos y justificados, ya que los estilos se asocian a la etiqueta HTML en cuestión y no pueden reutilizarse.
Es una opción que puede venir bien en ciertos casos, pero se considera una mala práctica por muchos diseñadores cuando la sobre utilizas (sin una razón de peso) pudiendo utilizar el primer método.
Al igual que los documentos HTML, los documentos CSS son archivos de texto donde se escribe una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML asociados.
Sintaxis básica. La estructura CSS se basa en reglas que tienen el siguiente formato: Debemos escribir el selector, abrir llaves, indicar la propiedad y posteriormente asignarle el valor correspondiente. Cerramos la línea con punto y coma, y seguimos agregando pares de propiedad/valor hasta que completemos la declaración (cada una debe estar finalizada con punto y coma). Cuando terminamos, cerramos la llave. La declaración sería entonces:
● Selector: El selector es el elemento HTML que vamos a seleccionar del documento para aplicarle un estilo concreto, este podría ser el nombre un elemento, su clase o su identificador. Por ejemplo, con p seleccionaríamos todas las etiquetas p del HTML.
● Propiedad: La propiedad es una de las diferentes características que brinda el lenguaje CSS y que aplicaremos al selector para darle estilo.
● Valor: Cada propiedad CSS tiene una serie de valores concretos a que se le pueden asignar, con los que tendrá uno u otro comportamiento.
Con todo esto le iremos indicando al navegador que, para cada etiqueta (selector especificado) debe aplicar las reglas (propiedad y valor) indicadas.
Un ejemplo muy sencillo de lo anterior es el siguiente:
Éste es el código en HTML. Lo siguiente es el código en CSS:
Si la primer parte del código se escribe y guarda en el editor de texto agregando al final la extensión .html, y la segunda parte del código para CSS se escribe y guarda en el editor de texto como index.css, lo que se obtiene al final al ejecutar simplemente el archivo con extensión .html es algo parecido a lo siguente:
En este caso, estamos seleccionando todas las etiquetas p del documento HTML (en este ejemplo es una sola, pero si existieran más se aplicaría a todas), y les aplicaremos el estilo indicado: color de texto rojo.
Nota: Se pueden incluir comentarios entre los caracteres /* y */, los cuales serán ignorados por el navegador. Estos suelen servir para añadir notas o aclaraciones dirigidas a humanos.
Sin embargo, esto es sólo un ejemplo muy sencillo. Se pueden aplicar muchas más reglas (no sólo una, como el color del ejemplo), consiguiendo así un conjunto de estilos para la etiqueta indicada en el selector.
Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido de la siguiente regla. El último punto y coma es opcional y se puede omitir si se desea:
Para poder seleccionar elementos que se encuentran dentro de otros, se emplea lo que se conoce como selector descendiente. Ejemplo.
Tendremos el texto del párrafo en color negro y lo que se envuelva dentro del párrafo con la etiqueta strong de color rojo.
Si deseamos aplicar una misma regla a diversos elementos, podemos declararlos antes de abrir la llave, y separarlos con comas; por ejemplo, vamos a aplicarles color gris a todos los títulos de una página.
Ejemplo.
Nos encargaremos ahora muy brevemente de analizar aquellas propiedades que se relacionan con las características de texto. Color de texto. La propiedad de color se utiliza para establecer el color del texto. El color se especifica por:
● Un nombre de color - como "red",
● un valor HEX - como "#ff0000",
● un valor RGB - como "rgb(255,0,0)".
Ejemplo.
body {
color: blue;
}
h1 {
color: green;
}
Color de texto y color de fondo. En este ejemplo, definimos tanto la propiedad background-color como la propiedad color:
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
h6 {
background-color: blue;
color: white;
}
Espaciado entre palabras. La propiedad word-spacing se utiliza para especificar el espacio entre las palabras de un texto. Puede recibir el valor normal (por defecto), una unidad de longitud o inherit. El siguiente ejemplo demuestra cómo aumentar o disminuir el espacio entre palabras: h2 { word-spacing: 10px; } h2 { word-spacing: -2px; }
Espaciado de letras. La propiedad letter-spacing se utiliza para especificar el espacio entre los caracteres de un texto. Puede recibir el valor normal (por defecto), una unidad de longitud o inherit.
h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
Línea de Decoración de texto CSS . La propiedad text-decoration-line se usa para agregar una línea de decoración al texto. Se puede combinar más de un valor, como tachado y subrayado, para mostrar líneas tanto encima como debajo de un texto.
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
p {
text-decoration: overline underline;
}
Especifique un color para la línea de decoración. La propiedad text-decoration-color se utiliza para establecer el color de la línea de decoración.
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
Transformación de texto. La propiedad text-transform se utiliza para especificar letras mayúsculas y minúsculas en un texto. Se puede usar para convertir todo en letras mayúsculas o minúsculas, o poner en mayúscula la primera letra de cada palabra:
p {
text-transform: uppercase;
}
p {
text-transform: lowercase;
}
p {
text-transform: capitalize;
}
Alineación del texto. La propiedad text-align se utiliza para establecer la alineación horizontal de un texto. Un texto puede estar alineado a la izquierda o a la derecha, centrado o justificado.
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
p {
text-align: justify;
}
Sangría de texto en CSS. La text-indent propiedad en CSS establece la sangría de la primera línea en un bloque de texto. Especifica la cantidad de espacio horizontal que se pone antes de las líneas de texto. Permite los valores negativos, y si se define algún valor negativo, entonces la sangría de la primera línea será hacia la izquierda.
p {
text-indent: 50px;
}
Tamaño de texto. El font-size propiedad en CSS establece el tamaño de la fuente, podemos establecerlo en pixeles, en em, en puntos y en porcentaje.
p {
font-size: 50px;
}
Tipo de fuente. Para establecer el tipo de fuente nos apoyamos de google fonts. font-family
Fuente en negrita. font-weigth: bold
Los selectores de CSS se utilizan para seleccionar el contenido que se desea diseñar. Los selectores son parte del conjunto de reglas CSS. Hay varios tipos diferentes de selectores en CSS.
● Selector de elementos CSS
● Selector de ID de CSS
● Selector de clase CSS
● Selector universal CSS
● Selector de grupo CSS
El selector de elementos selecciona el elemento HTML por su nombre.
El selector id selecciona el atributo id de un elemento HTML para seleccionar un elemento específico. Un id siempre es único dentro de la página, por lo que se elige para seleccionar un único elemento. Se escribe con el carácter hash (#), seguido del id del elemento. Ejemplo.
<p id="para1">Hola a PILARES</p>
<p>Este párrafo no se afectará.</p>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
En la práctica, los id no suelen utilizarse para dar estilo, ya que en la mayoría de los casos utilizar una clase es perfectamente válido y mucho más mantenible a la larga. La situación más recomendable para usar id es cuando queremos designar una zona del documento como una zona única que sabemos que no se va a repetir.
El selector class selecciona elementos HTML con un atributo de class específico. Se utiliza con un carácter de punto . (símbolo de punto) seguido del nombre de la clase. La diferencia principal respecto a los IDs es que las clases no se requiere que sean únicas, sino que pueden repetirse a lo largo del documento HTML. Nota que el nombre de una clase no debe comenzar con un número. Ejemplo.
<h1 class="center">Este encabezado es azul y está alineado al centro.</h1>
<p class="center">Este párrafo es azul y está alineado al centro.</p>
<style>
.center {
text-align: center;
color: blue;
}
</style>
En CSS se hace referencia a las clases con un punto: .center, mientras que en el HTML se escribiría el atributo class="center"
Anteriormente en otro capítulo, vimos que es posible utilizar varias clases en un mismo elemento HTML, simplemente separando por espacios dentro del atributo class. Ejemplo.
De esta forma, a dicho elemento se le aplicarán los estilos de cada una de las clases indicadas, las cuales suelen tener un grupo de características relacionadas con su nombre, lo cuál puede ser muy interesante y práctico en algunos casos, dándonos mucha soltura a la hora de crear clases y reutilizarlas.
El selector de agrupación se utiliza para seleccionar todos los elementos con las mismas definiciones de estilo. El selector de agrupación se utiliza para reducir el código. Las comas se utilizan para separar cada selector en la agrupación. Veamos el código CSS sin selector de grupo.
Como puedes ver, debes definir las propiedades CSS para todos los elementos. Si agrupamos quedaría de la siguiente manera:
Selector universal CSS. El selector universal (*) se utiliza como carácter comodín. Selecciona todos los elementos de las páginas.
Cuando hablamos del modelo de cajas en CSS, estamos haciendo referencia a un sistema que tiene el navegador de interpretar las diferentes partes de lo que solemos denominar «caja»: un elemento HTML con unas ciertas dimensiones. La representación básica del modelo de cajas se basa en varios conceptos importantes, como veremos a continuación:
● El borde (border), en negro, es el límite que separa el interior del exterior del elemento.
● El márgen (margin), en naranja, es la parte exterior del elemento, por fuera del borde.
● El relleno (padding), en verde, es la parte interior del elemento, entre el contenido y el borde.
● El contenido, en azul, es la parte interior del elemento, excluyendo el relleno.
El modelo de caja nos permite agregar un borde alrededor de los elementos y definir el espacio entre los elementos.
<h2>Demostración del modelo de caja</h2>
<p>El modelo de caja CSS es esencialmente una caja que envuelve cada elemento en
HTML. Consiste en: bordes, relleno, márgenes y el contenido real.</p>
<div>Este texto es el contenido de la caja. Hemos agregado un relleno de 50 px, un
margen de 20 px y un borde verde de 15 px. 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.</div>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
Ancho y alto de un elemento. Para establecer correctamente el ancho y el alto de un elemento en todos los navegadores, debes saber cómo funciona el modelo de caja.
Es importante que cuando se establecen las propiedades de ancho y alto de un elemento con CSS, se establecen de igual manera el ancho y el alto del área de contenido. Para calcular el tamaño completo de un elemento, también debes agregar el tamaño del relleno, bordes y márgenes. Ejemplo. Este elemento
<h2>Calcular el ancho total:</h2>
<img src="https://2.bp.blogspot.com/-JX7WSu7Rva0/T9DRNBcV8XI/AAAAAAAAe1Q/GPJ4OZS6Mos/s1600/Montanas-y-Lagos-Paisajes-Naturales-de-Italia.jpg" width="350" height="263" alt="Agencia
Digital de Innovación Pública">
<div>La imagen de arriba tiene 350px de ancho. El ancho total
de este elemento también es 350px.</div>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
Aquí está el cálculo:
El ancho total de un elemento debe calcularse así: Ancho total del elemento = ancho + relleno izquierdo + relleno derecho + borde izquierdo
- borde derecho + margen izquierdo + margen derecho
La altura total de un elemento debe calcularse así: Altura total del elemento = altura + relleno superior + relleno inferior + borde superior + borde inferior + margen superior + margen inferior
width higth overflow
Para crear contenedores lo hacemos con div, adaptamos el tamaño con width 100%
El Módulo de Caja Flexible, comúnmente llamado flexbox, fue diseñado como un modelo unidimensional de layout, y como un método que pueda ayudar a distribuir el espacio entre los ítems de una interfaz y mejorar las capacidades de alineación.
Para comenzar, vamos a seleccionar qué elementos se van a presentar como cajas flexibles. Para ello, establecemos un valor especial de display en el elemento padre de los elementos que deseas editar. Esto hace que el elemento padre se convierta en contenedor flex, y sus hijos en elementos flexibles.
Los elementos flexbox proporcionan una propiedad llamada flex-direction que especifica en qué dirección corre el eje principal (en qué dirección están dispuestos los elementos hijo de un elemento flexbox)
ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox wrap 0 — children overflowing</title>
<style>
html {
font-family: sans-serif;
}
body {
margin: 0;
}
header {
background: purple;
height: 100px;
}
h1 {
text-align: center;
color: white;
line-height: 100px;
margin: 0;
}
article {
padding: 10px;
margin: 10px;
background: aqua;
}
/* Add your flexbox CSS below here */
section {
display: flex;
flex-direction: row;
}
article {
}
</style>
</head>
<body>
<header>
<h1>Sample flexbox example</h1>
</header>
<section>
<article>
<h2>First article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Second article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Third article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Fourth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Fifth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Sixth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Seventh article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Eighth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Ninth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
<article>
<h2>Tenth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Eleventh article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
</article>
<article>
<h2>Twelfth article</h2>
<p>Tacos actually microdosing, pour-over semiotics banjo chicharrones retro fanny pack portland everyday carry vinyl typewriter. Tacos PBR&B pork belly, everyday carry ennui pickled sriracha normcore hashtag polaroid single-origin coffee cold-pressed. PBR&B tattooed trust fund twee, leggings salvia iPhone photo booth health goth gastropub hammock.</p>
<p>Cray food truck brunch, XOXO +1 keffiyeh pickled chambray waistcoat ennui. Organic small batch paleo 8-bit. Intelligentsia umami wayfarers pickled, asymmetrical kombucha letterpress kitsch leggings cold-pressed squid chartreuse put a bird on it. Listicle pickled man bun cornhole heirloom art party.</p>
</article>
</section>
</body>
</html>
En este ejemplo vemos que al aplicar el display flex va a acoodar todos los elementos hijos del contenedor padre uno a un lado del otro, sin considerar el tamaño, si aplicamos un flex-direction: row, pero si cambiamos a column veremos como cambia esto a columnas.
Veremos que sale de la pantalla, ya que solo se le dio una horientación, para darle mejor estilo a section le decimos un flex-wrap: wrap; y a article un flex: 200px; veremos como obtiene mejor orden.
También puedes usar las funciones de los elementos flexbox para alinear elementos flexibles sobre el eje principal o transversal.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexbox align 0 — starting code</title>
<style>
html {
font-family: sans-serif;
}
body {
width: 70%;
max-width: 960px;
margin: 20px auto;
}
a {
font-size: 18px;
line-height: 1.5;
width: 15%;
border: 1px solid black;
text-decoration: none;
color: aliceblue;
background-color: blue;
}
div {
height: 100px;
border: 1px solid black;
}
/* Add your flexbox CSS below here */
</style>
</head>
<body>
<div>
<a href="">Smile</a>
<a href="">Laugh</a>
<a href="">Wink</a>
<a href="">Shrug</a>
<a href="">Blush</a>
</div>
</body>
</html>
Si añadimos
div {
display: flex;
align-items: center;
justify-content: space-around;
}
Veremos como se acomoda
align-items controla dónde se ubican los elementos flexibles en el eje transversal.
Por defecto, el valor es stretch, que ensancha todos los elementos flexibles para rellenar el elemento primario en la dirección del eje transversal. Si el elemento padre no tiene un ancho fijo en la dirección del eje transversal, todos los elementos flexibles son tan largos como los elementos flexibles más largos. Así es como nuestro primer ejemplo obtuvo columnas de igual altura por defecto. El valor center que utilizamos en nuestro código anterior mantiene las dimensiones intrínsecas de los elementos pero los centra sobre el eje transversal. Es por eso que los botones de nuestro ejemplo ahora están centrados verticalmente. También puedes tener valores como flex-start y flex-end, que alinean todos los elementos al inicio y al final del eje transversal, respectivamente.
justify-content controla dónde se ubican los elementos flexibles sobre el eje principal.
El valor por defecto es flex-start, que asienta todos los elementos al comienzo del eje principal. Puedes usar flex-end para que se asienten al final. center también es un valor de justify-content (para alinear contenido), que asienta los elementos flexibles sobre el centro del eje principal. El valor space-around que hemos usado antes es útil porque distribuye todos los elementos de manera uniforme sobre el eje principal y deja un poco de espacio en cada extremo. Hay otro valor, space-between, que es muy similar a space-around, pero no deja espacio en los extremos.
Podemos aplicar estilo en tablas HTML para una mejor apariencia. Hay algunas propiedades de CSS que se usan ampliamente en el diseño de tablas usando CSS:
● border
● border-collapse
● padding
● width
● height
● text-align
● color
● background-color
Bordes de la tabla. Para especificar los bordes de la tabla en CSS, use la propiedad border. El siguiente ejemplo especifica un borde sólido para los elementos table, th y td:
Contraer bordes de tabla. La propiedad border-collapse establece si los bordes de la tabla deben contraerse en un solo borde:
<h2>Agregar un borde a la tabla:</h2>
<h2>Let the table borders collapse</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
<style>
table, th, td {
border: 1px solid;
}
</style>
Hay varias propiedades CSS que se pueden usar para controlar las listas. Las listas se pueden clasificar en listas ordenadas y listas desordenadas. En las listas ordenadas, el marcado de los elementos de la lista se realiza con letras y números, mientras que en las listas desordenadas, los elementos de la lista se marcan con viñetas. Las propiedades CSS para dar estilo a las listas son las siguientes:
● list-style-type: Esta propiedad se encarga de controlar la apariencia y la forma del marcador.
● list-style-image: Establece una imagen para el marcador en lugar del número o una viñeta.
● list-style-position: Especifica la posición del marcador.
● list-style: Es la propiedad abreviada de las propiedades anteriores.
La propiedad de list-style-type. Nos permite cambiar el tipo de marcador de lista predeterminado a cualquier otro tipo, como cuadrado, círculo, números romanos, letras latinas y muchos más. De forma predeterminada, los elementos de la lista ordenada se numeran con números arábigos (1, 2, 3, etc.) y los elementos de una lista desordenada se marcan con viñetas redondas (•). Si establecemos su valor en none, eliminará los marcadores/viñetas. La lista también incluye el relleno (padding) y el margen (margin) predeterminados. Para eliminar esto, necesitamos agregar padding:0 y margin:0 a ol y ul.
<h1>La propiedad de tipo de estilo de lista</h1>
<p>Ejemplo de listas desordenadas:</p>
<ul clase="a">
<li>Miguel Hidalgo</li>
<li>Tláhuac</li>
<li>Coyoacan</li>
</ul>
<ul clase="b">
<li>Miguel Hidalgo</li>
<li>Tláhuac</li>
<li>Coyoacan</li>
</ul>
<p>Ejemplo de listas ordenadas:</p>
<ol clase="c">
<li>Miguel Hidalgo</li>
<li>Tláhuac</li>
<li>Coyoacan</li>
</ol>
<ol clase="d">
<li>Miguel Hidalgo</li>
<li>Tláhuac</li>
<li>Coyoacan</li>
</ol>
<style>
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}
</style>
La propiedad list-style-image. Especifica una imagen como marcador. Usando esta propiedad, podemos configurar viñetas de imágenes. Su sintaxis es similar a la propiedad background-image. Si no encuentra la imagen correspondiente, se utilizarán las viñetas predeterminadas.
La propiedad list-style-image. Especifica una imagen como marcador. Usando esta propiedad, podemos configurar viñetas de imágenes. Su sintaxis es similar a la propiedad background-image. Si no encuentra la imagen correspondiente, se utilizarán las viñetas predeterminadas.
La propiedad list-style-position. Representa si la aparición del marcador está dentro o fuera del cuadro que contiene las viñetas. Incluye dos valores. ● inside: significa que las viñetas estarán en el elemento de la lista. En esto, si el texto va en la segunda línea, el texto se ajustará debajo del marcador.
● outside: Representa que las viñetas estarán fuera del elemento de la lista. Es el valor predeterminado. El siguiente ejemplo lo explica más claramente.
<h1>
Bienvenido a PILARES
</h1>
<h2>
Listas ordenadas
</h2>
<ol class="num">
<li>INSIDE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>DOS Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>TRES Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
</ol>
<ol class="roman">
<li>OUTSIDE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>DOS Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>Tres Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
</ol>
<h2>
Listas desordenada
</h2>
<ul class="disc">
<li>INSIDE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>DOS Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>TRES Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<ul class="circle">
<li>INSIDE Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>DOS Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>TRES Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<ul class="square">
<li>DEFAULT Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua.</li>
<li>DOS Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
<li>TRES Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</li>
</ul>
<style>
.num{
list-style-type:decimal;
list-style-position:inside;
}
.roman{
list-style-type:lower-roman;
list-style-position:outside;
}
.circle{
list-style-type:circle;
list-style-position:inside;
}
.square{
list-style-type:square;
}
.disc{
list-style-type:disc;
list-style-position:inside;
}
</style>
La propiedad float de CSS es una propiedad de posicionamiento. Se utiliza para empujar un elemento hacia la izquierda o hacia la derecha, permitiendo que otro elemento lo rodee. Generalmente se usa con imágenes y diseños. La propiedad float puede tener uno de los siguientes valores:
● left - El elemento flota a la izquierda de su contenedor
● right - El elemento flota a la derecha de su contenedor
● none: el elemento no flota (se mostrará justo donde aparece en el texto). esto es por defecto
● inherit: el elemento hereda el valor flotante de su padre
El siguiente ejemplo especifica que una imagen debe flotar hacia la derecha en un texto:
<h2>Flotar a la derecha</h2>
<p>En este ejemplo, la imagen flotará a la derecha del párrafo y el texto del párrafo
envolverá la imagen.</p>
<p><img src="ADIP_.png" alt="ADIP" style="width:270px;height:170px;margin-left:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et
dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac
leo purus. Mauris quis diam velit.</p>
<style>
img {
float: right;
}
</style>
El siguiente ejemplo especifica que una imagen debe flotar a la izquierda en un texto:
<h2>Flotar a la izquierda</h2>
<p>En este ejemplo, la imagen flotará a la izquierda del párrafo y el texto del párrafo
envolverá la imagen.</p>
<p><img src="ADIP_.png" alt="ADIP"
style="width:270px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et
dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio.
Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis
dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis
imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac
leo purus. Mauris quis diam velit.</p>
<style>
img {
float: left;
}
</style>
podemos aplicar un fondo con una imagen, con el atributo background, de la siguiente manera.
body {
background: url(fondo-degradado.png)
}
Generalmente las imágenes que apliquemos como fondo se compondrán con un mosaico. Es decir, si la imagen no es lo suficientemente grande como para ocupar toda la página (o todo el elemento al que se haya aplicado un fondo), se repetirá esa misma imagen, una y otra vez, para rellenar todo el espacio disponible. Esto nos puede ayudar bastante cuando tenemos un patrón que queremos que se repita, formando un diseño homogéneo para todo el elemento. Independientemente del tamaño de la página, el fondo se repetirá y cubrirá todo el espacio disponible.
Este atributo es el que tiene la responsabilidad de decidir si realmente queremos que una imagen se muestre como un mosaico, o si queremos que aparezca una única vez.
body {
background: url(patron.png);
background-repeat: no-repeat;
}
Esto haría que el patrón solo se viera una única vez y por lo tanto no cubrirá toda la página si la imagen no es suficientemente grande.
Pero podemos definir que esa imagen se muestre haciendo un mosaico en la vertical o en la horizontal.
body {
background: url(patron.png);
background-repeat: repeat-y;
}
Así se repetirá en la vertical. Si usamos repeat-x el mosaico se producirá en la horizontal. Además, el valor predeterminado es repeat, que corresponde al comportamiento normal del mosaico.
Este atributo te sirve para definir dónde se va a colocar el fondo, sobre el elemento o sobre la página. Inicialmente la posición será "0 0", lo que quiere decir que la esquina superior izquierda de la imagen se colocará en la esquina superior izquierda del elemento al que se haya aplicado el fondo.
body {
background: url(fondo.png);
background-position: center;
}
Este ejemplo producirá que la imagen se sitúe en el centro. Luego se repetirá como mosaico, porque a veces será difícil identificarlo, depende del tamaño y la forma de la imagen.
El estilo del height: 100% es necesario para que la página ocupe toda la vertical, pues si no lo colocamos ocurriría que el fondo no puede colocarse en el centro en la vertical, a no ser que la página tenga suficiente contenido para cubrir toda la vertical de la ventana del navegador.
Este atributo resulta muy potente para definir no solo el tamaño del fondo sino también cómo va a cubrir todo el elemento donde lo pongamos.
Por ejemplo, una configuración muy útil es "cover" que permite que el fondo cubra todo el espacio disponible.
Si quieres colocar fondos ligeramente transparentes en los elementos de tu página, para conseguir efectos diversos, puedes hacerlo de dos modos principalmente.
Si son fondos de color plano, usa los valores de colores RGBA
h1 {
background: rgba(30, 200, 150, 0.4);
}
body {
background: url("https://th.bing.com/th/id/R.3f6495b3ba6be43f1fcb5a4aba3e831a?rik=tln4SPu8DAXvKA&riu=http%3a%2f%2fproyectosbeta.net%2fwp- content%2fuploads%2f2013%2f03%2fWallpaper_Paisaje04.jpg&ehk=5J%2fXokbrqCeeX6XyC7zSYmGONeAQ2uyaUCHgjLKyVGQ%3d&risl=&pid=ImgRaw&r=0");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
Últimamente se estilan fondos con degradados. Los podemos encontrar en multitud de de páginas web. Estos fondos los puedes realizar con imágenes, pero también te recomendamos explorar los degradados de CSS, que permiten realizar efectos muy vistosos y tienen la ventaja de adaptarse a todas las pantallas y no consumir la transferencia de las imágenes.
body {
background: linear-gradient(rgba(218,67,210),rgba(252,207,250))
}
Una pseudoclase se puede definir como una palabra clave que se combina con un selector que define el estado especial de los elementos seleccionados. Se agrega al selector para agregar un efecto a los elementos existentes en función de sus estados. Los nombres de la pseudoclase no distinguen entre mayúsculas y minúsculas.
Las pseudoclases se definen añadiendo dos puntos (:) antes de la pseudoclase concreta. En el caso de existir selectores de etiqueta, id o clases, estas se escribirían a su izquierda.
Pseudoclases de enlaces. Existen algunas pseudoclases orientadas a los enlaces o hipervínculos. En este caso, permiten cambiar los estilos dependiendo del comportamiento del enlace:
A continuación veremos un ejemplo donde seleccionamos mediante un simple selector a los enlaces que aún no han sido visitados usando la pseudoclase :link, cambiando el color de los mismos o su formato, lo que mostrará dichos enlaces de color verde y en negrita:
<h1>Hola Mundo</h1>
<h2>La pseudoclase :active </h2>
<h3>Da Click en el enlace para ver el efecto</h3>
<a href="#">Click aquí</a>
<style>
a:link {
color: green;
font-weight: bold
}
a:visited {
color: orange;
font-weight: bold
}
</style>
En este mismo ejemplo, podemoms ver la pseudoclase :visited puede utilizarse para dar estilo a los enlaces que hayan sido visitados previamente en el navegador del usuario.
Originalmente, las siguientes pseudoclases se utilizaban solamente en enlaces (Internet Explorer no los soportaba en otros elementos). Sin embargo, actualmente pueden ser utilizadas con seguridad en cualquier otro elemento, sin necesidad de ser a.
La primera de ellas, :hover, es muy útil e interesante, ya que permite aplicar estilos a un elemento justo cuando el usuario está pasando el ratón sobre él. Es una de las pseudoclases más utilizadas:
<h1>Hola Mundo</h1>
<h2>La pseudoclase :hover </h2>
<h3>Pasa el ratón encima de los enlaces</h3>
<a href="#5">Enlace1</a>
<div>Aquí va texto <a href="#1">Enlace2</a> y sigue
acá.</div>
<style>
/* Usuario mueve el ratón sobre un enlace */
a:hover {
background-color: cyan;
padding: 2px
}
/* Usuario mueve el ratón sobre un div y resalta todos los
enlaces que contiene */
div:hover a{
background-color: steelblue;
color: white;
}
</style>
Observese que podemos realizar acciones un poco más específicas, como el segundo ejemplo anterior, donde al movernos sobre un elemento div (div:hover), aplicaremos los estilos a los enlaces (a) que están dentro del mencionado div. Por otro lado, la segunda pseudoclase, :active, permite resaltar los elementos que se encuentran activos, donde el usuario está pulsando de forma activa con el ratón:
<h1>Pseudoclases</h1>
<h2>La pseudoclase :active </h2>
<h3>Da click en el enlace y manten presionado</h3>
<a href="#5">Enlace1</a>
<style>
a:active {
border: 2px solid #FF0000;
padding: 2px
}
</style>
Aunque las pseudoclases anteriores se inventaron para interactuar con un ratón en un sistema de escritorio, pueden funcionar en dispositivos táctiles. Aún así, ten en cuenta que, por ejemplo, el :hover no tiene mucho sentido en dispositivos móviles, ya que, aunque podría hacerlo, un usuario no navega por móvil arrastrando el dedo por la pantalla.
Existen pseudoclases orientadas principalmente a los campos de formulario de páginas webs y la interacción del usuario con ellos, veamos otro par interesante:
Cuando estamos escribiendo en un campo de texto de un formulario de una página web, generalmente pulsamos TAB para cambiar al siguiente campo y SHIFT+TAB para volver al anterior. Cuando estamos posicionados en un campo se dice que ese campo tiene el foco, mientras que al pulsar TAB y saltar al siguiente, decimos que pierde el foco. El comportamiento de «ganar el foco» puede gestionarse mediante la pseudoclase :focus:
<form>
<h1>Nombre: <input type="text" value="Introduce tu
nombre"></h1>
</form>
<style>
form{
text-align:center;
}
input:focus{
border:5px solid lightblue;
box-shadow:10px 10px 10px black;
color: blue;
width:300px;
}
</style>
Aunque estas pseudoclases suelen utilizarse con elementos de formularios como , también pueden utilizarse con otros elementos, como por ejemplo los enlaces . Esta es una excelente oportunidad para personalizar el estilo de los campos de texto de un formulario ( y <textarea>) mientras el usuario escribe y se mueve por ellos.
Por otro lado, la pseudoclase :checked permite aplicar el estilo especificado a los elementos (casillas de verificación o botones de radio) u option (la opción seleccionada de un select).
<form>
<br><label>Género</label><br>
<input type="radio" id="gender" name="gender"
value="male"/><span>Masculino</span> <br>
<input type="radio" id="gender" name="gender"
value="female"/>Femenino<br/>
<input type="radio" id="gender" name="gender"
value="others"/>Otro <br/>
</form>
<style>
input:checked + span {
color: green;
}
input[type="radio"]:checked {
box-shadow: 0 0 0 3px orange;
}
</style>
Por norma general, los elementos de un formulario HTML están siempre activados, aunque se pueden desactivar añadiendo el atributo disabled (es un atributo booleano, no lleva valor) al elemento HTML en cuestión. Esto es una práctica muy utilizada para impedir al usuario escribir en cierta parte de un formulario porque, por ejemplo, no es aplicable.
Existen varias pseudoclases para detectar si un campo de un formulario está activado o desactivado:
Utilizando las dos primeras pseudoclases, bastante autoexplicativas por si solas, podemos seleccionar elementos que se encuentren activados (comportamiento por defecto) o desactivados:
<form action="url_of_form">
<label for="FirstField">Campo 1 (abilitado):</label>
<input type="text" id="FirstField" value="Escribe aquí"><br>
<label for="SecondField">Campo 2 (desabilitado):</label>
<input type="text" id="SecondField" value="No está
abilitado" disabled="disabled"><br>
<input type="button" value="Enviar">
</form>
<style>
input:enabled {
color: cyan;
background-color: orange;
}
input:disabled {
color: #aaa;
background-color: blue;
}
</style>
Por otro lado, las pseudoclases read-only y read-write nos permiten seleccionar y diferenciar elementos que se encuentran en modo de solo lectura (tienen especificado el atributo readonly en el HTML) o no:
<h1>Demostración de la pseudoclase :read-only</h1>
<p>La pseudoclase :read-only elije elementos de formulario
con un atributo "readonly":</p>
<p>Un elemento de entrada de solo lectura:<br><input
readonly value="Hola"></p>
<style>
input:read-only {
background-color: yellow;
}
</style>
En el ejemplo anterior, la pseudoclase :read-only le da estilo a aquellos campos de un formulario que están marcados con el atributo de sólo lectura readonly. La diferencia entre un campo con atributo disabled y un campo con atributo readonly es que la información del campo con readonly se enviará a través del formulario, mientras que la del campo con disabled no se enviará. Aún así, ambas no permiten modificar el valor. Ten en cuenta que :read-only aplicará los estilos a todos los elementos HTML que no puedan ser modificados por el usuario.
Por otro lado, la pseudoclase :read-write es muy útil para dar estilos a todos aquellos elementos que son editables por el usuario, sean campos de texto input o textarea.
<h1>Demostración de la pseudoclase :read-write</h1>
<p>La pseudoclase :read-write elije elementos de formulario
sin el atributo "readonly":</p>
<p>Un elemento normal de entrada:<br><input value="Aquí
puedes escribir"></p>
<style>
input:read-only {
background-color: yellow;
}
</style>
En HTML5 es posible dotar de capacidades de validación a los campos de un formulario, pudiendo interactuar desde Javascript o incluso desde CSS. Con estas validaciones podemos asegurarnos de que el usuario escribe en un campo de un formulario el valor esperado que debería. Existen algunas pseudoclases útiles para las validaciones, como por ejemplo las siguientes:
Existe una pseudoclase muy útil, denominada pseudoclase de negación. Permite seleccionar todos los elementos que no cumplan los selectores indicados entre paréntesis. Veamos un ejemplo:
Este pequeño fragmento de código nos indica que todos los párrafos (elementos
) que no pertenezcan a la clase general, se les aplique el estilo especificado. Las reglas de negación pueden ser complejas, ineficientes y poco escalables. Intenta utilizarlas sólo en los casos que sea absolutamente necesario.
##Pseudoelementos en CSS. Una pseudoclase se puede definir como una palabra clave que se combina con un selector que define el estado especial de los elementos seleccionados. A diferencia de las pseudoclases, los pseudoelementos se utilizan para diseñar la parte específica de un elemento, mientras que las pseudoclases se utilizan para diseñar el elemento.
Al igual que las pseudoclases, los pseudoelementos son otra de las características de CSS que permiten hacer referencias a «comportamientos virtuales no tangibles», o lo que es lo mismo, se le puede dar estilo a elementos que no existen realmente en el HTML, y que se pueden generar desde CSS.
Recordemos la sintaxis de los pseudoelementos, que está precedida de dos puntos dobles (::) para diferenciarlos de las pseudoclases, las cuales sólo tienen dos puntos (:). No obstante, este cambio surgió posteriormente, por lo que aún hoy en día es frecuente ver fragmentos de código con pseudoelementos con la sintaxis de pseudoclase con un solo par de puntos.
Dentro de la categoría de los pseudoelementos CSS, como punto central, se encuentra la propiedad content. Esta propiedad se utiliza en selectores que incluyen los pseudoelementos ::before o ::after, para indicar que vamos a crear contenido antes o después del elemento en cuestión:
La propiedad content admite parámetros de diverso tipo, incluso concatenando información mediante espacios. Podemos utilizar tres tipos de contenido:
Por otro lado, los pseudoelementos ::before y ::after permiten hacer referencia a «justo antes del elemento» y «justo después del elemento», respectivamente. Así, se podría generar información (usualmente con fines decorativos) que no existe en el HTML, pero que por circunstancias de diseño sería apropiado colocar:
<p>El objetivo de WWF es:
<q>Construir un futuro donde las personas vivan en armonía
con la naturaleza.</q>
Esperamos que tengan éxito.</p>
<style>
q::before {
content: "«";
color: #888;
}
q::after {
content: "»";
color: #888;
}
</style>
Los ejemplos anteriores insertan el carácter « antes de las citas indicadas con el
elemento HTML y el carácter » al finalizar la misma, ambas de color gris.
Es interesante recalcar la utilidad de la expresión attr(), que en lugar de generar el contenido textual que le indiquemos, permite recuperar esa información del valor del atributo HTML especificado. Veamos un ejemplo para clarificarlo,
<a href="https://adip.cdmx.gob.mx/">Visita ADIP!</a>
<style>
a::after {
content: " ( " attr(href) " )";
}
</style>
Este pequeño ejemplo muestra a continuación de todos los enlaces la URL literalmente, dentro de dos paréntesis. Esto puede ser realmente útil en una página de estilos que se aplica a una página en el momento de imprimir, en los cuales se pierde la información del enlace al no ser un medio interactivo.
También existen pseudoelementos con los que podemos hacer referencia a la primera letra de un texto. Para ello utilizamos el pseudoelemento ::first-letter, así como el pseudoelemento ::first-line si queremos hacer referencia a la primera línea de un texto. De esta forma, podemos dar estilo a esas secciones concretas del texto:
concatenándolo con texto:
Veamos un ejemplo en acción sobre un párrafo de texto:
<p> CSS está diseñado principalmente para marcar la
separación del contenido del documento y la forma de
presentación de este, características tales como las capas o
layouts, los colores y las fuentes.</p>
<style>
p {
color: green;
font-family: Verdana, sans-serif;
font-size: 16px;
}
p::first-letter {
color: red;
font-family: 'Times New Roman', serif;
font-size: 42px;
}
p::first-line {
color: orange;
}
</style>
Propiedad position y formas de posicionamiento La propiedad position nos permite establecer la forma en la que será posicionado un determinado elemento y para que consideres quiero enfatizar esto, de tal manera que me entiendas:
La propiedad position solo determina la forma en que será posicionado un elemento más no posiciona por si solo a un elemento.
Valores para la propiedad position
estatic.- la forma por defecto, obedece al flujo normal de la página.
relative.- establece que la posición de un elemento depende de otro.
absolute.- indica que la posición de un elemento no depende de otro.
fixed.- permite fijar un elemento en una posición determinada.
inherit.- hereda el estilo de posición del elemento padre.
Posicionamiento estático (static)
El valor static de la propiedad position indica que el elemento debe ser posicionado de acuerdo al flujo normal de la página, de hecho es el valor por defecto; esto quiere decir que todos los elementos de la página están posicionados como elementos estáticos, de tal forma que van apareciendo en el mismo orden en el que se encuentra en el documento HTML original.
Cuando se establece position: static; definir las propiedades de posicionamiento: top, left, right o bottom, no tiene sentido, ya que no serán tomados en cuenta. Pues se supone que static indica que sea por defecto.
Posicionamiento relativo (relative)
El valor relative para la propiedad position de CSS, establece que el elemento será posicionado relativo a su posición normal o inicial y sus características más destacadas son:
Los elementos con posición relativa se encuentran el espacio original que ocupaban. El valor relativesaca al elemento del flujo normal para que quede posicionado con propiedades de posicionamiento. Ahora tiene sentido establecer las propiedades: arriba, derecha, abajo o izquierda para indicar cuánto y dónde se desplazan los elementos. El elemento será desplazado tomando en cuenta a su posición original como punto de partida. Los elementos posicionados con relative pueden superponerse a otros. Para concretar la idea, observa la imagen, tenemos un elemento en color amarillo, la posición 1 es su posición original dentro de la estructura de la página, alrededor de ella están los demás elementos.
Posición 2.- el elemento ha sido movido 80px de derecha a izquierda mediante right:80px y verticalmente se movió 50px de abajo hacia arriba mediante bottom:50px;
Posición 3.- el elemento ha sido posicionado a 60px de izquierda a derecha (left:60px;) y 80px de arriba hacia abajo (top:80px;) a partir de su posición original.
En palabras sencillas, un elemento posicionado como relativo puede ser movido donde quieras, pero las medidas que indiques serán medidos desde su posición inicial, además sin importar donde las muevas, el espacio original que ocupaba se mantiene.
Posicionamiento absoluto (absolute) El posicionamiento absoluto de elementos con CSS posee características que lo diferencian de las otras formas de posicionamiento y eso es lo que vamos a conocer y practicar en esta sección.
El valor absolute para la propiedad position establece que un elemento debe ser posicionado de forma absoluta y básicamente se comporta de la siguiente manera:
El elemento es removido del flujo normal de contenido para ser posicionado mediante las propiedades de posicionamiento. Una vez removido no conserva el espacio que ocupaba originalmente, es decir los demás elementos se comportan como si el elemento posicionado como absoluto no existiera. Elementos posicionados como absoluto pueden superponerse sobre los demás elementos. En el posicionamiento absoluto, los elementos se posicionan respecto al elemento padre más cercano que tenga establecido una forma de posicionamiento (position) distinto al por defecto o static.
En este caso, el elemento a posicionar es el amarillo que está contenido dentro del contenedor azul, es decir: contenedor azul es el padre del elemento amarillo; asumamos que azul está posicionado como relativo, ya que es necesario que el padre este posicionado para que elementos hijos puedan posicionarse como absolutos respecto a dichos padres.
Posición 2.- indica que desde la parte superior sean 0px (top:0px;) y por la izquierda 0px (left:0px;), ya que es posición absoluta entonces está respecto al padre, por lo tanto amarillo se posiciona justo en la esquina superior izquierda de padre. Posición 3.- indica que desde la parte inferior sean 50px (bottom:50px;) y desde la derecha sean 80px (right:80px;), ya que es posición absoluta toma como referencia al elemento padre (azul).
<div class="padre">
<div> HIJO 1 </div>
<div class="hijo2"> HIJO 2 </div>
<div> HIJO 3 </div>
<div class="hijo4"> HIJO 4 </div>
<div> HIJO 5 </div>
</div>
div.padre {
position:relative;
width: 300px;
height: 200px;
background-color: #c2edcd;}
div {
width: 70px;
height: 35px;
background-color: #2a88f5;}
div.hijo2 {
position: absolute;
top: 0px;
left: 150px;}
div.hijo4 {
position: absolute;
bottom: 70px;
right: 100px;}
Lo primero que observamos es que ahora, el valor absolute de la propiedad position hace que el elemento se posicione respecto al elemento padre que lo contiene.
hora bien, notarás que los elemento posicionados como absoluto, además de salir del flujo normal, ¡Ya no conservan su espacio original! Mira como los elementos 3 y 5 se comportan como si 2 y 4 no existieran.
Posicionamiento fijo (fixed)
Características de un elemento con position: fixed;
Los elementos posicionados con valor fixed salen del flujo normal para ser posicionados con las propiedades de posicionamiento.
El espacio original que ocupaba un elemento desaparece una vez establecida la posición fija, por ende los demás elementos se comportan como si no existiera.
El elemento se posiciona respecto a los límites de la pantalla, es decir el punto de partida es el borde de pantalla.
Quedan fijas en una posición determinada y no pueden moverse aunque el usuario se desplace por la pantalla.
Elementos fijados pueden superponerse sobre otros.
El posicionamiento fijo de elementos en CSS consiste en establecer una posición determinada para un elemento, de tal manera que queda fija y no se mueva de dicha posición, aun cuando se hace scroll en la pantalla.
Para establecer una posición fija, se emplea el valor fixed para la propiedad position.
¿Qué es el efecto parallax?
El efecto de paralaje o parallax es una ilusión óptica que hace que las cosas en primer plano parezcan moverse más rápido que los objetos del fondo. Se puede utilizar para crear una experiencia de inmersión en un sitio web, haciendo que parezca que está en 3D.
Para lograrlo agregamos a la propiedad del div donde esta de background la imagen y agregamos background-attachment:fixed
Ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.contenedor1{
background: url("https://th.bing.com/th/id/R.e1001e86903d5fccba2a7e83a0547bd4?rik=6oIfzTynXOXh9w&pid=ImgRaw&r=0");
width: 100%;
height: 40vh;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
opacity: 0.50;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quis vitae accusantium autem error officia cumque quo iusto labore. Nostrum officia quasi incidunt inventore. Quia dolor officiis, porro necessitatibus voluptates beatae voluptatem, id odit, natus asperiores placeat hic consequatur delectus praesentium fugit? Quia quibusdam error nobis maiores molestias quaerat. Nam ipsum ratione quas minus ab dolorem adipisci ex excepturi quae, cumque ad, sequi doloribus molestias quod? Magnam qui minima officiis praesentium quasi? Blanditiis voluptates dolorem, nemo architecto, sit fugit, ducimus natus exercitationem vitae accusantium enim id beatae saepe sed ratione aut excepturi. Error ad expedita, assumenda consequatur amet recusandae dolor enim sint. Laudantium sequi ipsam hic omnis exercitationem eum fuga eaque, doloribus necessitatibus? Voluptatibus deleniti, nemo officia sapiente provident ad eum odit modi unde voluptates illo aspernatur itaque molestias amet delectus placeat cupiditate exercitationem doloribus consectetur magni tempore nesciunt autem velit. Suscipit nemo, impedit eos porro consequatur incidunt deleniti tempore quaerat in labore voluptas asperiores fuga a ex magni pariatur dolorum similique eum odio tempora doloribus! Aliquam cupiditate fuga soluta a suscipit, nesciunt odio. Asperiores aliquid, commodi accusamus enim itaque tempora perferendis corporis ea excepturi, rerum beatae. Illo ratione officiis minima impedit corrupti ut ab at quis quam suscipit velit harum reprehenderit laboriosam ea quas doloremque commodi aperiam perspiciatis quod, ipsam repudiandae accusantium blanditiis expedita? Similique atque ullam sapiente soluta asperiores corporis, praesentium alias perspiciatis tempora autem maiores explicabo quidem voluptatum et dolorum, sit in vitae optio. Voluptatibus expedita omnis, recusandae odit asperiores soluta ex animi! Perferendis, aliquid! Similique excepturi tempora eaque ad! Labore aspernatur accusamus architecto deserunt corrupti quaerat obcaecati laborum, perspiciatis blanditiis incidunt aliquid omnis expedita ipsum modi suscipit magni tempore asperiores voluptate, mollitia ipsa soluta doloribus voluptatum id. Nostrum rem ducimus architecto maiores placeat quaerat ut iusto, mollitia accusantium, quam veniam consequuntur, facere similique. Nesciunt, adipisci eaque? Quis eveniet nostrum quisquam quasi cum libero, ratione eos neque esse, nisi nulla odio? Sunt, explicabo molestias in ducimus pariatur laboriosam saepe architecto quos corporis dicta ipsam sit, nostrum sapiente a omnis aperiam consequuntur qui, eum veritatis provident sed et. Maxime tempore pariatur soluta voluptates, placeat repudiandae tenetur ex iusto cum odit expedita quasi doloremque quia perspiciatis omnis quas ducimus eveniet officia labore distinctio? Blanditiis placeat et earum velit, reiciendis fugiat dolor quibusdam, veritatis cumque voluptatem voluptatibus? Incidunt qui saepe ullam non aperiam, dolore repellendus tempore voluptatibus pariatur, molestiae soluta minus! Quia modi a ducimus nulla nisi! Debitis, nesciunt! Fugit rerum voluptates soluta minima expedita illum ad sunt hic quae. Voluptates vero corrupti repudiandae eligendi sunt? Velit error aliquam dolorum, facilis harum libero ab architecto. Sapiente magni iure pariatur fuga temporibus fugiat placeat commodi est quidem eos dolor dignissimos perspiciatis, assumenda saepe ex quod itaque, nisi, laborum enim qui! Vel quis culpa voluptate architecto est voluptas ratione, sint maxime assumenda dolore magni. Autem, repellat ipsum ipsam repellendus numquam eos exercitationem magnam beatae enim ad reiciendis dolores? Nesciunt, assumenda repellendus velit dolores minus vitae temporibus eveniet quis accusantium et quidem cupiditate eius iusto beatae aliquid, sunt earum perspiciatis facilis ab, perferendis iste!</p>
<div class="contenedor1">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In ad quod, quo ullam asperiores ex possimus explicabo nostrum inventore molestiae dicta autem quisquam quaerat sunt soluta, magni error, facere itaque libero ea? Earum repudiandae beatae voluptates voluptatem vero illo omnis, laudantium officiis commodi, saepe molestiae inventore delectus soluta animi aperiam, minus repellat natus facilis suscipit eum quo officia. Hic autem provident similique. Ipsa mollitia deserunt incidunt quis labore tempora in, laboriosam et deleniti dolores! Minus temporibus odio voluptate optio ipsam veritatis ullam vitae iure facere facilis placeat, nemo autem ipsum at earum nihil officiis, nobis sequi. Corrupti distinctio non vero ratione rerum consequatur sapiente tempora iste odio expedita, fugiat odit ducimus beatae, officia quidem omnis, sed animi itaque libero ab quibusdam! Perspiciatis quaerat obcaecati ipsam, aperiam quos doloribus! Sint obcaecati doloribus deserunt totam animi, quisquam perferendis illo facilis et officiis aperiam quae illum exercitationem, excepturi cumque neque. Et, iusto, illum veniam, facere animi voluptatum eius ipsam ratione debitis aliquam natus corrupti explicabo sit rerum. Quisquam, error eligendi fugiat eaque magnam vel, fugit voluptates rem dolorem quam aliquid dignissimos possimus quaerat voluptatem laboriosam tenetur eius eos nisi accusantium natus perferendis. A saepe nobis nesciunt atque quaerat enim id esse provident? Hic cumque sit voluptates magnam quam accusantium nihil ipsam esse unde, delectus, quia voluptatum doloribus, ducimus nostrum. Est, optio rem quae sint perferendis praesentium eligendi fuga, voluptate consequatur dicta ab, enim aspernatur saepe labore. Quia placeat provident esse asperiores sunt fugit sit dolorum illo beatae ipsum blanditiis, debitis cum unde modi magni eaque reiciendis consectetur libero saepe deserunt quam non! Voluptate, quis. Rem atque fugiat laboriosam quidem quisquam minus possimus vero? Culpa dolor, autem esse ad doloribus sunt numquam, facilis dolore aspernatur iure modi? Nostrum ullam necessitatibus accusamus ipsum, sed maiores possimus, aut quos ab placeat, praesentium amet! Asperiores maxime sapiente deleniti cupiditate? Ipsam commodi nam incidunt fugit iste, molestias voluptate doloribus provident ullam nemo fuga ex assumenda consequuntur excepturi ratione quisquam in debitis est aperiam voluptatum nostrum. Aut sapiente suscipit veritatis. Esse, iste nobis laboriosam mollitia ut doloremque hic facere laudantium architecto natus officiis accusantium, dignissimos nulla id commodi et illo in maiores. Sint saepe voluptatem eaque facere odit ratione possimus beatae mollitia cum vel illo deleniti, quaerat quidem non, fuga modi dolor iste omnis ad atque enim eius molestiae aperiam ut? Reprehenderit quibusdam deserunt, natus eius veritatis voluptatum facilis dolore voluptate quidem itaque odit incidunt, cumque eos amet dolor earum at dolorem sequi nobis est, quae sunt! Quidem blanditiis doloribus earum neque nostrum voluptates qui cumque corporis, eveniet, obcaecati ducimus voluptatibus nesciunt. Corporis illum soluta possimus rerum aperiam quas explicabo, nemo sed voluptates tenetur dolorum saepe ea officia beatae magnam veniam recusandae distinctio! Quos sit, quae culpa natus a assumenda. Eaque hic inventore quidem repellat nisi est quaerat, error animi ab a autem possimus culpa pariatur, voluptatum dicta modi. Ipsa deserunt necessitatibus dolorem! Reiciendis quibusdam reprehenderit beatae magni veritatis esse? Quo quam voluptatem dolor a adipisci eaque in mollitia facilis harum fugiat delectus officia, optio porro ratione odit repellendus. Minima vero illo, iusto tenetur doloremque, dicta facilis inventore voluptatem nihil dolores dolorum molestias praesentium aliquid eius, labore ab! Natus excepturi esse sint quam inventore expedita, sequi impedit rem tempore </p>
</div>
</body>
</html>
También podemos darle opacidad a las imágenes con la propiedad opacity:0.70
margenes negativos subir pagina carrusel formulario recibiro por correo responsive