DISEÑO DE INTERFACES WEB
INSERTAR CSS, SELECTORES, CASCADA, ESPECIFICIDAD, HERENCIA, DISPLAY, POSITION
- 1. Introducción
- 2. Formas de insertar CSS
- 3. Selectores
- 4. Cascada, especificidad y herencia
- 5. Position
- 6. Alineación horizontal y vertical
- 7. Recursos
Este documento es un resumen realizado a partir de la documentación disponible en W3Schools.
Por favor, para un tratamiento en mayor profundidad y demos on-line, no dudes en consultar la documentación anterior.
CSS en línea
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color: blue; text-align: center;">Título</h1>
</body>
</html>CSS interno
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: blue; text-align: center; }
</style>
</head>
<body>
<h1>Título</h1>
</body>
</html>CSS externo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilo.css">
</head>
<body>
<h1>Título</h1>
</body>
</html>/* estilo.css */
h1 {
color: blue;
text-align: center;
}- Selectores simples (selecciona elementos según la etiqueta html, identificación, clase)
- Selectores combinadores (selecciona elementos en función de una relación específica entre ellos)
- Selectores de pseudoclase (selecciona elementos según un determinado estado)
- Selectores de pseudoelementos (selecciona y aplica estilo a una parte de un elemento)
- Selectores de atributos (selecciona elementos según un atributo o valor de atributo)
A continuación se muestran ejemplos de cada uno de ellos.
Etiqueta HTML
*bodyh1,h2,h3, ...div,pimg,a,spanform,input, ...
Note
* se conoce como selector universal. Hace referencia a todos los elementos HTML.
IDs #
#identificador
Elemento cuyo atributo HTML es id="identificador". Debe ser único dentro del documento.
Clases .
.nombre-clase
Elementos cuyo atributo HTML es class="nombre-clase".
Varios elementos ,
div, p
Cualquier elemento que sea div o p.
Cualquier descendiente espacio en blanco
div p
Cualquier elemento p dentro de un elemento div sin importar el nivel de anidamiento.
Cualquier hijo >
div > p
Cualquier elemento p dentro de un elemento div en el primer nivel de anidamiento.
Hermano adjacente +
div + p
Primer elemento p adjacente de un div.
Note
Sólo se tienen en cuenta los hermanos siguientes, no los anteriores.
Todos los hermanos adjacentes ~
div ~ p
Cualquier elemento p adjacente de un div.
Note
Sólo se tienen en cuenta los hermanos siguientes, no los anteriores.
Para seleccionar un elemento HTML según su estado. Se expresa con :. Ejemplos:
:root:not(p)a:linka:visiteda:activea:hoverdiv:hoverinput:focusinput:checkedinput:validinput:invalidp:first-childtr:nth-child(even)p:last-child- ...
Más información en https://www.w3schools.com/css/css_pseudo_classes.asp
Para seleccionar partes de un elemento HTML. Se indica con ::. Ejemplos:
p::afterp::beforep::first-linep::first-letterp::selectiondialog::backdropli::marker- ...
Mas información en https://www.w3schools.com/css/css_pseudo_elements.asp
Para seleccionar partes de un elemento HTML. Se indica con []. Ejemplos:
a[target]a[target="_blank"]input[type="text"]input[type="button"]- ...
Más información en https://www.w3schools.com/css/css_attribute_selectors.asp
Estos 3 aspectos determinan que valor de propiedad será aplicado a un elemento cuando dicha propiedad aparece varias veces con distintos valores en la hoja de estilo a aplicar.
El listado de reglas CSS que establecemos es interpretado de forma secuencial. Es decir, si definimos una propiedad al principio de la hoja de estilos y más adelante volvemos a definir la misma propiedad con otro valor, la que se aplicará será esta última, puesto que sobreescrirá a la primera.
| Peso | Tipo | Ejemplo |
|---|---|---|
| 1000 | en línea | <h1 style="color: pink;"></h1> |
| 100 | id | #navbar |
| 10 | clases, pseudoclases, selectores de atributos | .test, :hover, [href] |
| 1 | elementos, pseudoelementos | h1, p::before |
Material de consulta: https://www.w3schools.com/css/css_specificity.asp
Muchas de los valores de las propiedades se heredan de padres a hijos, es decir que elementos contenedores a elementos contenidos.
No todas las propiedades son heredadas. Las propiedades que se heredan son:
border-collapseborder-spacingcaption-sidecolorcursordirectionempty-cellsfont-familyfont-sizefont-stylefont-variantfont-weightfont-size-adjustfont-stretchfontletter-spacingline-heightlist-style-imagelist-style-positionlist-style-typelist-styleorphansquotestab-sizetext-aligntext-align-lasttext-decoration-colortext-indenttext-justifytext-shadowtext-transformvisibilitywhite-spacewidowsword-breakword-spacingword-wrap
Cuando trabajamos con propiedades heredables, dos valores que son de gran utilidad son:
initial: Si la propiedad es heredada, ignoramos y establecemos valor predeterminado.inherit: Si la propiedad no es heredada, forzamos a heredar el valor del padre.
Podemos indicar que un elemento haga un reset de todas las propiedades, incluso las predeterminadas. Por ejemplo:
p {
all: initial;
}También podemos indicar que un elemento herede todas las propiedades de su padre, incluso las no heredables. Por ejemplo:
p {
all: inherit;
}Un elemento HTML puede ser posicionado de 5 maneras posibles:
staticrelativeabsolutefixedsticky
Para hacer uso en CSS de las position anteriores, escribimos:
position: relative;
position: absolute;
position: fixed;
position: sticky;Una vez establecido el modo de posicionado, podemos utilizar las propiedades top, bottom, left y right para indicar el desplazamiento respecto de la posición original del elemento en cuestión.
El resto de elementos no son desplazados de su posición.
static
Los elementos HTML son colocados de esta manera de forma predeterminada. Por tanto, es innecesario indicarlo. Las propiedades top, bottom, left, right no tienen efecto.
relative
Las propiedades top, bottom, left, right indican desplazamiento respecto de la posición original del elemento.
El elemento deja espacio vacío en su posición original.
absolute
Las propiedades top, bottom, left, right indican desplazamiento respecto al ancestro posicionado más cercano del elemento.
Si el elemento no tiene antepasados posicionados (en forma relative, absolute, fixed o sticky), entonces utiliza el cuerpo del documento y se mueve junto con el desplazamiento de la página.
El elemento no deja espacio vacío en su posición original.
fixed
Las propiedades top, bottom, left, right indican desplazamiento respecto al viewport. Por tanto, el elemento siempre permanece en el mismo lugar incluso si se desplaza la página.
El elemento no deja espacio vacío en su posición original.
sticky
Las propiedades top y bottom indican desplazamiento respecto al viewport, pero sólo se aplica cuando el desplazamiento de la página hace que el elemento pueda desaparecer de la vista. En este caso, el elemento se pegará al viewport
El elemento deja espacio vacío en su posición original.
La posición sticky es usada a menudo para posicionar cabeceras, barras de navegación y similares que no queremos que desaparezcan de la vista al desplazar hacia abajo la página. En este caso suele usarse junto a la propiedad top.
La posición sticky es usada a menudo para posicionar pies de página y similares que no queremos que desaparezcan de la vista al desplazar hacia arriba la página. En este caso suele usarse junto a la propiedad bottom.
Ejemplo:
header {
position: sticky;
top: 0px;
}
footer {
position: sticky;
bottom: 0px;
}Más información en https://www.w3schools.com/css/css_positioning.asp
Esta propiedad especifica el orden de pila de un elemento (qué elemento debe colocarse delante o detrás de los demás). Puede entenderse como la posición del elemento en el eje de coordenadas Z
Un elemento puede tener un orden de pila positivo o negativo. Por defecto, el valor de z-index es 0. Elementos con valores más elevados se superponen sobre elementos con valores más bajos.
Note
z-index sólo funciona en elementos posicionados (absolute, relative, fixed, or sticky) y elementos flexibles (elementos que son hijos directos de un elemento display: flex).
Existen numerosas formas de alinear un elemento tanto horizontalmente como verticalmente.
Para más información consultar https://www.w3schools.com/css/css_align.asp