CSS ha logrado ser un lenguaje de gran importancia
CSS hace la vida más fácil a los programadores de páginas web
CSS facilita la vida a muchas otras profesiones
Hoja de estilo es un tipo de archivo de plantilla que contiene la configuración de la fuente, el estilo, el formato y visualización que permiten mostrar un documento
CSS apareció en HTML 4.0 con el fin de resolver un problema con las versiones anteriores de HTML
p[ɲombre^="te"] { font-size: 1cm }
p[ɲombre$="te"] { font-size: 1cm }
p[ɲombre*="te"] { font-size: 1cm }
Ejemplos:
^= asigna a todo elemento p que empieza por "te"
$= asigna a todo elemento p que termina en "te"
*= asigna a todo elemento p que contiene "te"
CSS3 incorpora pseudoclases que hacen la selección más específica
<!DOCTYPE html>
<html lang="es">
<head> <meta charset="utf-8"> <title>Pseudoclases</title>
<link rel="stylesheet" href="estilos.css"> </head>
<body> <div id="ejemplo">
<p class="texto1">Mi texto1</p>
<p class="texto2">Mi texto2</p>
<p class="texto3">Mi texto3</p>
<p class="texto4">Mi texto4</p>
</div> </body>
</html>
Pseudoclases
El ejemplo anterior incluye cuatro elementos <p> que son hermanos entre sí e hijos del mismo elemento
Mediante pseudoclases de puede aprovechar esta organización y referenciar un elemento específico sin importar cuánto conocemos sobre sus atributos y valor
Una pseudoclase se agrega añadiendo : (dos puntos) detrás de la referencia y antes de su nombre
Ejemplo:
p:nth-child(2){ background: #999999; }
Pseudoclases
Esta regla puede incluir otras referencias. Ej.:
.miclase:nth-child(2){ background: #999999; }
Se puede crear estilos para todos los elementos
p:nth-child(1){ background: #999999; }
p:nth-child(2){ background: #CCCCCC; }
p:nth-child(3){ background: #999999; }
p:nth-child(4){ background: #CCCCCC; }
Pseudoclases
Es posible incorporar nuevos elementos <p> y nuevas reglas, mediante odd y even
Así se puede dar distinto formato a los hijos pares e impares. Ej.:
p:nth-child(odd){ background: #999999; }
p:nth-child(even){ background: #CCCCCC; }
Pseudoclases
Ejemplo de :nth-child para tablas
span:nth-child(2n+1)
{
background-color: red;
}
<div>
<span>Este span es rojo</span>
<span>Este span no lo es.</span>
<span>Pero este si lo es</span>
<span>Este no lo es...</span>
</div>
Se verá alternativamente cada frase con fondo rojo y blanco
Pseudoclases
:first-child selecciona el primer elemento hijo de un elemento. Ej.:
p em:first-child {
color: red;
}
El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento y que se encuentre dentro de un elemento <p>
Pseudoclases
Ejemplo de :first-child
span:first-child {
background-color: navy;
}
<div>
<span>Este span es azul marino</span>
<span>Este span no lo es</span>
</div>
Se mostraría la primera frase con fondo azul y la segunda con el color por defecto
Pseudoclases
:last-child selecciona el último elemento hijo. Ej.:
li:last-child {
background-color: lime;
}
<ul>
<li>Este elemento no es de color lima</li>
<li>Este otro tampoco</li>
<li>Este lo es</li>
</ul>
Se mostraría el tercer párrafo con fondo color lima
Pseudoclases
:only-child selecciona el único elemento hijo de su padre. Ej.:
span:only-child {
color: red;
}
<div>
<span>Este span es el único hijo de su padre</span>
</div>
<div>
<span>Este span es uno de los dos hijos de su padre</span>
<span>Este span es uno de los dos hijos de su padre</span>
</div>
Se mostraría el primer párrafo en rojo. Los dos siguientes en negro, formando otro párrafo
Pseudoclases
:not(X) (negación), es una notación funcional que toma un selector simple X como argumento
Coincide con un elemento que no está representado por el argumento
X no debe contener otro selector de negación
Selecciona el único elemento hijo de su padre
Ej.:
p:not(.clasi) { color: red; }
body :not(p) { color: green; }
<p>Algún texto.</p>
<p class="clasi">Algún otro texto.</p>
<span>Más texto<span>
Se mostraría el primer párrafo en rojo, el siguiente en negro y el último en verde
Pseudoclases
Pseudoclases :link y :visited: sirven para aplicar diferentes estilos a los enlaces de una misma página
:link se aplica a todos los enlaces que todavía no han sido visitados
:visited se aplica a todos los enlaces que han sido visitados al menos una vez
Ejemplo:
a:link { color: red; }
a:visited { color: navy; }
Pseudoclases
Pseudoclases :hover, :active y :focus permiten variar los estilos de un elemento en respuesta a las acciones del usuario
:active, se activa cuando el usuario activa un elemento, sobre un elemento. El estilo se aplica durante un tiempo prácticamente imperceptible, desde que se pulsa el botón del ratón hasta que se suelta
:focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el elemento está seleccionado. Normalmente se aplica a los elementos <input> de los formularios cuando están activados y se puede escribir directamente en esos campos.
Pseudoclases
Un mismo elemento puede verse afectado por varias pseudoclases de forma simultánea. Al pulsar un enlace que fue visitado previamente, al enlace le afectan las pseudo-clases :visited, :hover y :active
Es importante cuidar el orden en el que se establecen las diferentes pseudo-clases
El único orden correcto para establecer las cuatro pseudoclases principales en un enlace es:
a:link { ... } a:visited { ... } a:hover { ... } a:active { ... }
Pseudoclases
Pseudoclase :lang se emplea para seleccionar elementos en función de su lengua
p { color: blue; }
p:lang(es) { color: red; }
Selector de hijos
Muy diferente en su funcionamiento
Se utiliza para seleccionar un elemento que es hijo directo de otro elemento
Se indica mediante >
<html>
<header>
<style type="text/css">
#tipo_selector > li {font-color: navy; font-size: 16pt ; }
</style>
</header>
<body>
<ul id=”tipo_selector”>
<li>Selector hijo
<ul>Selector descendente</ul>
<ul>Selector adyacente</ul>
</li>
</body><footer></footer>
</html>
Selector adyacente
Selecciona elementos que se encuentran justo a continuación de otros
Emplea el signo + para separar los dos elementos
Los elementos que forman el selector adyacente deben cumplir las siguientes condiciones:
- elemento2 debe aparecer inmediatamente después de elemento1 en el código
En el ejemplo el título y el primer párrafo se muestran en rojo
<header>
<style>h1 + p {font-color: red ; }</style>
</header>
<body>
<h1>Texto padre del selector, con H1</h1>
<p>Formato de acuerdo al selector adyacente</p>
<p>Párrafo sin color rojo</p>
</body>
<footer></footer>
</html>
Selectores, propiedades, valores y unidades
Selector de hijos
Similar al selector descendente, diferente en su funcionamiento
Seleccionar un elemento que es hijo de otro, se indica mediante >
p > span { color: blue; }
<p>
<span>Texto1</span>
</p>
<p>
<a href="#">
<span>Texto2</span>
</a>
</p>
Texto1 aparecerá en azul
Selectores, propiedades, valores y unidades
Selector de hermanos generales
Separa dos selectores y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común. Se indica mediante ~
p ~ span {
color: red;
}
<span>Este span no es rojo.</span>
<p>Aquí hay un párrafo.</p>
<code>Aquí hay algo de código.</code>
<span>Aquí hay un span. Es rojo porque va precedido de un párrafo y ambos comparten el mismo padre.</span>
Se mostrarán tres párrafos, el último presenta la segunda frase en rojo
Unidades de medida
Las medidas en CSS se emplean para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto
Las medidas se indican como un valor numérico seguido de la unidad
Dos tipos: absolutas y relativas
Si no se indica ninguna unidad, la medida se ignora
Unidades absolutas:
in, pulgadas (inches). in = 2.54 cm
cm, centímetros y mm, milímetros (SI)
pt, puntos. pt = 1 pulgada/72, 0.35 mm
pc, picas. pc = 12 puntos, es decir, 4.23 mm
Unidades de medida
Ejemplos:
/* El cuerpo de la página debe mostrar un margen de media pulgada */
body { margin: 0.5in; }
/* Los elementos <h1> deben mostrar un interlineado de 2 cm */
h1 { line-height: 2cm; }
/* Las palabras de todos los párrafos deben estar separadas 4 mm */
p { word-spacing: 4mm; }
/* Los enlaces se deben mostrar con un tamaño de letra de 12 puntos */
a { font-size: 12pt }
/* Los elementos <span> deben tener un tamaño de letra de 1 pica */
span { font-size: 1pc }
Unidades de medida
Unidades relativas:
em, (no confundir con la etiqueta <em>) relativa respecto del tamaño de letra del elemento
ex, relativa respecto de la altura de la letra x del tipo y tamaño de letra del elemento
px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página
em y ex no han sido creadas por CSS, llevan décadas utilizándose en la tipografía
La unidad 1em equivale a la anchura de la letra M del tipo y tamaño de letra del elemento
La unidad em hace referencia al tamaño en puntos de la letra que se está utilizando
Si se utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos
El valor de 1ex se puede aproximar por 0.5 em
Unidades de medida
La proliferación de sitios con diseño adaptable (responsive) ha dado lugar al uso de unidades relativas
Consiguen una mejor visualización en dispositivos móviles
Dan problemas por el efecto “cascada”. Ej.:
<style>
body { font-size: 100%; }
p, li { font-size: 0.75em; }
</style>
<p> soy un texto de 12px </p>
<ul>
<li> yo también soy un texto de 12px
<ul><li> Yo tengo 9 px </li></ul>
</li>
</ul>
Unidades de medida
CSS3 propone nuevas unidades
rem a diferencia de em, está referido al elemento raíz de la página en lugar del contenedor
vw % de la anchura de la ventana del dispositivo
vh % de la altura de la ventana del dispositivo
vim % de la dimensión, altura o anchura, más pequeña del dispositivo
Ejemplo: suponiendo un tamaño de ventana del navegador de 1000×800, establecer el texto en 1.8vw equivale a 18 px , 2vh serían 16px y 1.5vmin = 12px
Otras instrucciones
Float
Simple pero útil para que el diseño de la página se adapte al dispositivo de visualización
Modifica el flujo normal de la página y lo ubica a izquierda o derecha del resto del contenido de su elemento padre
Tres posibilidades: none, left, right
img {
float: right;
margin: 0 0 1em 1em;
}
Otras instrucciones
<!DOCTYPE html>
<html lang="es">
<head>
<title>float</title>
<style type="text/css">
p.derecha {
border: 1px dotted black;
float: right;
width: 10em;
padding: 0.25em;
margin: 1em 1em 1em;
}
p.izquierda {
border: 4px dotted black;
float: left;
width: 10em;
padding: 0.25em;
margin: 0 1em 1em;
}
div {
width: 50%;
}
</style>
</head>
<body>
<h1>CSS float</h1>
<h2>Ejemplo</h2>
<div>
<p class="derecha">Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.</p>
<p class="izquierda">Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.</p>
<p> Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.
Esto es texto. Esto es texto. Esto es texto.</p>
</div>
</body>
</html>
Otras instrucciones
Clear
Complementa a float
Especifica que un elemento no admite un flotante a su izquierda, derecha o a ambos lados
Se puede usar en un elemento flotante para impedir que otros flotantes puedan quedar sobre algunos de sus lados
<!DOCTYPE html>
<html lang="es">
<head>
<title>clear</title>
<style type="text/css">
.wrapper {
border: 1px solid black;
padding: 10px;
}
.izda {
border: 1px solid black;
clear: left;
}
.negro {
float: left;
margin: 0;
background-color: black;
color: #fff;
width: 20%;
}
.rojo {
float: left;
margin: 0;
background-color: red;
width: 20%;
}
p {
width: 50%;
}
</style>
</head>
<body>
<h1>CSS float</h1>
<h2>Ejemplo</h2>
<div class="wrapper">
<p class="negro">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
<p class="rojo">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<p class="izda">Este es con con clear</p>
</div>
</body>
</html>
Otras instrucciones
z-index
Indica el orden en el eje z de un elemento y sus descendientes
Cuando varios elementos se superponen, determina cuales tapan a otros
Para una caja posicionada, la propiedad z-index indica:
El nivel de apilamiento en el actual contexto de apilado
Si la caja establece un contexto de apilamiento
Ejemplo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<h2 id="Ejemplos">Ejemplo</h2>
<div style="border: dashed; position: relative; height: 8em; margin-bottom: 1em; margin-top: 2em;">position:relative; z-index:1; <span style="background: gold; left: 60px; position: absolute; top: 3em;">position:absolute; z-index:2; left:60px; top:3em;</span> <span style="background: lightgreen; height: 7em; left: 20em; opacity: 0.9; position: absolute; top: -25px;">position:absolute; z-index:3;<br>
left:20em; top:-25px; opacity:0.9</span></div>
</body>
</html>
Otras instrucciones
/