02. CSS 3 – Espacio de informática

Introducción

CSS (Cascading Style Sheets – Hojas de estilo en cascada)

En cascada significa que un solo archivo css puede controlar a varios archivos html.

Sintaxis de css 3

elemento {

propiedad: valor;

}

El ; último se podría omitir.

Hay que enlazar el archivo html con el correspondiente css.

Cómo dar estilos a un HTML

Al guardar un archivo css hay que darle la extensión css. Con /* se puede poner un comentario, se cierra con */

Ej:

header {

width: 80%;

height: 300px;

background: orange;

}

En el html habría que enlazar:

PRIMERA FORMA

<head>

SEGUNDA FORMA (Dentro del archivo html)

<head>

<style>

div {

width: 50px;

height: 50px;

margin: 20px;

background: green;

}

</style>

<body>

</body>

TERCERA FORMA (Se usa poco)

En un div solo:

Normalize

Buscar normalize y descargarlo.

En el html

link rel=»stylesheet» href=»normalize.css » (Se pone de primero este link)

Esto hace que en todos los navegadores se vea igual.

Compatibilizar navegadores

Buscar modernizr (Ve lo que he escrito y si algo no funciona con esa versión del navegador lo transforma)

En descargar hay una lista completa. Se seleccionan las que nos interesan, después build y descargar. También se puede pulsar en Development Build para seleccionar todos. Luego Build y descargar.

en <head> se pone

Prefijos

Algunas propiedades CSS especiales necesitan prefijos para los navegadores. Se averigua en la página caniuse.com

Selectores id y class

Sirve para elegir a que elementos html queremos darle formato.

Ejercicio:

Crea el siguiente html:

<html>

<body>

<h2>Título secundario</h2>

<h2>Título secundario 2</h2>

</body>

</html>

Crea el siguiente CSS:

h2 {

color: red;

}

Añadimos lo siguiente en el html:

<h2>Título secundario</h2>

</header>

Si ahora pongo en el CSS:

header h2 {

color: red;

}

ahora solo cambia rojo el h2 del header.

Añadimos lo siguiente en el html:

Fuera del header:

<h3>Título terciario</h3>

Para que salga también rojo:

header h2,

h3 {

color: red;

}

Si queremos especificar algo de forma específica (selector id)

Añadimos cinco párrafos:

<p>Texto de prueba</p>

<p id=»p_azul»>Texto de prueba</p>

<p>Texto de prueba</p>

en el CSS añadimos:

p {

color: red;

}

p#azul {

color: blue;

}

Se podría omitir la p delante de la almohadilla pero poniéndola es mejor para identificar ese id.

id solo se puede emplear en un elemento.

Class

Sirve para varios elementos:

Crear un nuevo html:

<p class=»prueba»>Texto con clase</p>

<p>Texto con clase</p>

<p class=»prueba»>Texto con clase</p>

en el CSS:

Quitar de antes el p { color: red;

Añadir:

.prueba {

color: red;

}

Un elemento puede pertenecer a varias clases pero solo a un id.

Ej:

Al segundo y cuarto párrafo le añadimos lo siguiente:

<p class=»prueba grande»>Texto con clase</p>

Añadir al CSS:

.grande {

font-size: 20px;

}

Selectores adyacentes

Los selectores adyacentes (el que va después del más) hace referencia a un elemento que va justo después de otro.

El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento padre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis el símbolo +

Crear un html con 6 párrafos:

y realizar lo siguiente en un archivo selectores.css

p+p {

font-weight: bolder;

}

Hace referencia a todos los párrafos que tengan como hermano mayor a un párrafo (Estos dos párrafos son hermanos). Es decir, a todo párrafo que tenga un párrafo antes se le asignan estas características. Si ponemos un <div> en medio cortamos la secuencia y a partir de ahí dejará de estar en negrita.

Selectores hijos:

Creamos el siguiente código:

<div>

</div>

Si se considera el siguiente ejemplo:

<body>
<h1>Titulo1</h1>
 
<h2>Subtítulo</h2>
...
 
<h2>Otro subtítulo</h2>
...
</body>

Creamos el siguiente CSS:

h1 + h2 { 

color: red;
 }

Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:

El elemento padre de <h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.
El primer elemento <h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.
Por el contrario, el segundo elemento <h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.

El siguiente ejemplo puede ser útil para los textos que se muestran como libros:

p + p { text-indent: 1.5em; }

En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. El selector p + p selecciona todos los párrafos que están dentro de un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.

El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento padre debe ser el mismo. Si se considera el siguiente ejemplo:

p + p { color: red; }
 
<p>Lorem ipsum dolor sit amet...</p>
<p>Lorem ipsum dolor sit amet...</p>
<div>
  <p>Lorem ipsum dolor sit amet...</p>
</div>

En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:

El primer párrafo no va precedido de ningún otro párrafo, por lo que no cumple una de las condiciones de p + p
El segundo párrafo va precedido de otro párrafo y los dos comparten el mismo padre, por lo que se cumplen las dos condiciones del selector p + p y el párrafo muestra su texto de color rojo.
El tercer párrafo se encuentra dentro de un elemento <div>, por lo que no se cumple ninguna condición del selector p + p ya que ni va precedido de un párrafo ni comparte padre con ningún otro párrafo.

Selectores hijos

Escribimos en el CSS:

div >p {

color: red;

}

(Quiere decir todo párrafo que sea hijo de un div)

Si cambiamos en el html y ponemos:

<div>

</article>

</div>

ya no se pondría rojo porque p sería un hijo de un article y no de un div.

Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el «signo de mayor que» (>).

Mientras que en el selector descendente sólo importa que un elemento esté dentro de otro, independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe ser hijo directo de otro elemento.

p > span { color: blue; }

 
<p>
  <span>Texto1</span>
</p>
 
<p>
  <a href="#">
    <span>Texto2</span>
  </a>
</p>

En el ejemplo anterior, el selector p > span se interpreta como «cualquier elemento <span> que sea hijo directo de un elemento <p>«, por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>.

Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector descendente y el selector de hijos:

p a { color: red; }
p > a { color: red; }
 
<p>
  <a href="#">Enlace1</a>
</p>
 
<p>
  <span>
    <a href="#">Enlace2</a>
  </span>
</p>

El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a> que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a los dos enlaces.

El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace del ejemplo anterior.

Otra posibilidad:

p ~ p {

color: green;

}

(se escribe en pc con alt+126) (En mac con Alt+Ñ)

Lo que se consigue es que todos los párrafos que vengan después de un primer párrafo salgan en verde (el segundo p sería un hermano menor del primero)

SELECTOR DE ATRIBUTOS Y COLISIÓN DE ESTILOS

Escribir el siguiente HTML:

<html>

<body>

<div>

<h2 title=»main»>Título secundario en cabecera</h2>

<h2>Título secundario 2</h2>

</div>

</header>

<h2> Título secundario</h2>

<h3>Título terciario </h3>

</body>

</html>

En el CSS escribimos:

h2 [title] {

color:red;

}

Si hubiera más con el atributo title habría que indicar lo siguiente:

h2 [title=»main»] {

color: red;

}

Colisión de estilos:

Puede que haya elementos que reciban órdenes distintos para su estilo. Esto se soluciona con un orden de prioridad: (Se van aplicando en este orden y los que prevalecen son los últimos)

a) css del navegador

b) css del usuario

c) archivos csss enlazados en el orden que se hayan enlazado siendo las últimas enlazadas las que prevalecen.

d) propiedades que se heredan.

e) propiedades propias del elemento

f) clases asignadas y en el mismo orden de asignación

g) identificador

h) los de tipo important! (se indica en el css después del valor de la propiedad)

MEDIDAS RELATIVAS

Hay de dos tipos absolutas y relativas.

Escribir el siguiente html:

<body>

<p>Párrafo normal</p>

<p class=»em»>Párrafo EM</p>

<p class=»ex»>Párrafo EX</p>

<p class=»px»>Párrafo PX</p>

<div>

<p>em heredado</p>

<p clas=»rem»>ejemplo rem</p>

</div>

Una buena práctica es establecer el tamaño de la letra de nuestra página:

body {

font-size: 16px; (Ha de ir pegado y valen decimales 16.4px)

}

No todos los pixeles tienen el mismo tamaño en todas las pantallas, es una medida relativa.

para texto es recomendable em:

p.em {

font-size: 1em;

}

probar con 2em;

em significa lo siguiente: se considera la fuente utilizada, se toma como referencia la M y en concreto la anchura. Esa anchura es el tamaño de referencia.

Al em le influyen las herencias, si es 2em hará el doble de lo que le viene por herencia.

Al rem no le influyen las herencias, calcula a partir de lo que venga del body (r es root). Si es 2rem hará la letra el doble de lo que diga el body.

El EX calacula a partir de la altura de la X minúscula de la fuente que estemos usando.

MEDIDAS ABSOLUTAS

Crear el siguiente archivo html:

<p class=»in»> pulgadas</p>

<p class=»cm»> centímetros</p>

<p class=»pt»> puntos</p>

<p class=»mm»> milímetros</p>

4,23 mm<p class=»pc»> picas</p>

1 pulgada = 2,54 cm

1 punto = 0,35 mm

1 pica = 12 puntos = 4,23 mm

Archivo CSS:

p.in {

font-size: .5in

}

p.cm {

font-size: 1cm;

}

p.mm {

font-size: 15mm;

}

p.pt {

font-size: 20pt;

}

p.pc {

font-size: 7pc;

}

MEDIDAS PORCENTUALES

<body>

<div class=»porcentual»>Porcentual</div>

CSS:

div.fija {

height=»100px»

width=»100px»

background=»red»

}

div.porcentual {

height=»100px»

width=»50%» (Es el 50% del padre, del body)

background=»green»

margin=»5%»

}

Las medidas relativas (en %) se utilizan mucho en responsive design.

COLORES CON PALABRAS RESERVADAS

Crear colores.html

CSS:

Div {

height: 100px;

width: 100px;

border 1px solid black;

margin: 20px;

}

.reservadas {

background:lime;

}

En esta página http://html-color-codes.info/color-names/ encontraremos los nombres de los colores.

Colores RGB (Red, Green, Blue) decimales

Seguir con colores.html

CSS:

Div {

height: 100px;

width: 100px;

border 1px solid black;

margin: 20px;

}

.reservadas {

background: lime;

.luzRGB {

background: rgb(100,0,12);

}

Colores RGB (Red, Green, Blue) hexadecimales

Seguir con colores.html

CSS:

Div {

height: 100px;

width: 100px;

border 1px solid black;

margin: 20px;

}

.reservadas {

background: lime;

.luzRGB {

background: rgb(100,0,12);

}

.hex

background: hex #00FF00;

}

Si los tres indicadores de color están escritos con dígitos repetidos (el primero 00, el segundo FF y el tercero 00) se puede abreviar y poner #0f0

Colores RGB (Red, Green, Blue) porcentuales

Seguir con colores.html

<divclass=»porcentuales»></div>

CSS:

Div {

height: 100px;

width: 100px;

border 1px solid black;

margin: 20px;

}

.reservadas {

background: lime;

.luzRGB {

background: rgb(100,0,12);

}

.hex

background: hex #00FF00;

}

.porcentuales {

background: rgb(50%,25%,75%)

Colores con HSL (Hue, saturation, lightness) (Tono, saturación, luz)

La saturación representa la cantidad de gris que tiene le color, si es máxima no tendrá nada de gris.

CSS:

div {

background: hsl(240,100%,50%);

}

Colores con transparencia

CSS:

.rgb_transparencia {

background: (100,0,12,1)

}

el cuarto número varía entre 0 y 1. 0 indica total transparencia y 1 opaco. Con otros valores e mezcla con el fondo.

Con hsl es igual.

***Modelo de caja

Dentro de un elemento, por ejemplo un div, puede tener un borde interno, llamado padding. Además puede tener un borde (línea que rodea al elemento) llamado border. Como fondo elemento puede tener un fondo que sea un color o una imagen (background-color o background-image). Por último está el margen que separa a ese elemento con los de alrededor (margin).

Crear html:

<body>

<div>

<p>Hola mundo</p>

</div>

</body>

css:

div {

height: 100px;

width: 100px;

border: 3px solid black;

margin: 40px;

padding: 10px;

}

Ejemplo para que al hacer click en un vínculo sea más ancho:

css:

a {

padding: 30px;

}

Tamaño de un elemento html

<body>

<div>

<p>Hola mundo</p>

</div>

</body>

css:

div {

height: 50%;

width: 100px;

border: 1px solid black;

margin: 20px;

padding: 10px;

}

div.dimension {

min-width: 250px;

max-width: 400px;

}

Margin y padding

Seguimos con el ejemplo anterior y añadimos:

div.dimension {

min-width: 250px;

max-width: 400px;

margin: 20px;

}

si es margin: 20px 50px; (Primera cifra arriba y abajo) (Segunda cifra izq y derecha)

si es margin: 20px 50px 100px 3px; (Primera cifra arriba y después derecha, abajo e izquierda).

Se pueden mezclar px y %.

También se puede hacer:

margin: 60px;

margin-bottom: 20px;

También se pueden utilizar margin-left, margin-right y margin-top.

Si se indican varios margin, los que se aplican son los últimos escritos en el css.

Padding:

Dentro del div creamos un párrafo que ponga «Hola Mundo». En el CSS le damos un background al div.

En el css escribimos:

p {

border: 1px solid red;

background: white;

}

En div añadimos:

div.dimension {

padding: 5px;

}

Se pueden indicar en el padding igual que en el margin.

DISPLAY

Crear:

<body>

<p>Mensaje de texto 1</p>

<p>Mensaje de texto 2</p>

<p>Mensaje de texto 3</p>

<p>Mensaje de texto 4</p>

<p>Mensaje de texto 5</p>

CSS:

p {

border: 2px solid black;

background: orange;

}

Añadimos en el css:

display: inline-block; (cada párrafo ocupa lo que necesita, muy importante en responsive design)

display: inline; (es una sola línea pero se pueden cortar las palabras) (si aplicamos margin: 20px 0px; vemos que no se aplican porque se considera todo en una línea)

display: block; (ocupa toda la línea y ya se aplica por defecto)

Le damos un id=»ghost» al segundo párrafo y en css escribimos:

p#ghost {

display: none;

}

POSITION STATIC, RELATIVE, ABSOLUTE Y FIXED

Indica en que punto de la página comienza el elemento html.

static (estático) es el valor por defecto. Un elemento con position: static; no está posicionado en ninguna forma en específico. Se dice que un elemento static, está no posicionado y un elemento con valor establecido de position está posicionado. Es decir los elementos empiezan a dibujarse desde la esquina superior izquierda del elemento padre.

Crear el siguiente html:

</div>

En el CSS:

.padre {

width: 250px;

height: 250px;

margin: 25px;

background: orange;

}

.hijo1 {

width: 50px;

height: 50px;

background: red;

}

position indica a partir de que punto en la página empieza a mostrarse. Si no se indica nada el valor por defecto es position: static;

relative (relativo) se comporta de la misma manera que static a menos que le agregues otras propiedades.

Establecer las propiedades top, right, bottom, y left de un elemento con position: relative; causará que su posición normal se reajuste. Otro contenido no se puede ajustar para adaptarse a cualquier hueco dejado por el elemento.

Dispone todos los elementos como si el elemento no tuviera posición y luego ajusta la posición del elemento sin alterar la disposición (por tanto dejando un vacío donde debería estar el elemento si no estuviera posicionado).

Para los elementos con position relative , las propiedades top ó bottom especifican la separación vertical desde la posición normal y las propiedades left ó right especifican la separación horizontal.

Si ponemos:

div.hijo1 {

position: relative;

top: 30px;

}

cambiará el hijo1.

También:

div.hijo1 {

position: relative;

top: 30px;

left: 200px;

}

También se pueden poner top: -30px;

También se puede poner bottom y right.

Ahora añadimos en el html:

en el css:

div.hijo2 {

width: 100px;

height: 100px;

background: green;

}

y borramos los position de antes.

Vemos cómo se dibuja debajo del rojo.

Añadimos en css después de div lo siguiente:

div.padre > div { (se refiere a los hijos de padre que sean div)

display: inline-block;

}

Esto hará que la caja verde suba y se ponga después de la roja.

También podemos trabajar con la alineación vertical de los div: (indicarlo en div.padre >div)

vertical-align: bottom; (por defecto)

vertical-align: top;

vertical-align: middle;

Probamos con otra posibilidad: eliminamos .padre >div

y en .hijo1 ponemos position: absolute;

la caja verde subirá.

Esto significa (el absolute) para los otros elementos como si este no existiera en cuanto a posicionamiento.

Absolute: No deja espacio para el elemento. En su lugar, lo posiciona en unas coordenadas determinadas relativas a la posición más cercana de su elemento padre o del bloque contenedor inicial.

Para los elementos con position absolute , las propiedades top, right, bottom, y left especifican la separación desde los bordes del elemento bloque contenedor (aquel al que el elemento es relativamente posicionado). El margen del elemento es contado a partir de ese desplazamiento.

Ahora añadimos después de position: absolute;

top: 0px;

Esto hará que el rojo se vaya a donde empieza el body. Esto es debido a que padre no tiene especificado ningún position y entonces toma la referencia de otro padre anterior, el body. Las posiciones se tienen en cuenta a partir de un padre que tenga un position static o relative. Como el .padre no lo tienen se alineará respecto al body (que ya lleva un position por defecto).

Hacemos los siguientes cambios:

Si ahora añadimos al .padre

position: relative;

el hijo1 se alineará respecto al padre y no respecto a body.

Fixed: No deja espacio para el elemento. En su lugar, lo posiciona en unas coordenadas determinadas relativas a la ventana de visualización, que no se mueve al moverse la página. (O cuando se imprime, la posición es fija en cada página ).

Hacemos los siguientes cambios:

.hijo1 {

position: fixed;

top: 0px;

left: 0px;

}

Con position fixed las coordenadas siempre serán respecto al body.

Darle al padre

.padre {

height: 2500px;

y hacer scroll vertical y observamos cómo se comportan las dos cajas (Sirve por ejemplo para que un menú se quede siempre arriba o en una campaña de marketing se quede siempre arriba)

FLOAT Y CLEAR

Crear el siguiente html:

</div>

En el CSS:

div.padre {

width: 250px;

height: 250px;

margin: 25px;

background: orange;

}

div.hijo1 {

width: 100px;

height: 100px;

background: red;

float: right;

}

div.hijo2 {

width: 50px;

height: 50px;

background: green;

}

Al flotar se situa a la izquierda y el resto se va situando a la derecha. Después poner float: left; y en hijo2 poner display: inline-block;

Crear más hijos2 para que se vea cómo se colocan respecto al hijo1.

Sirve para que un elemento flote a un lado y el resto ocupe el hueco que quede libre.

Hacemos cambios:

</div>

y el CSS:

div.padre {

width: 250px;

height: 250px;

margin: 25px;

background: orange;

}

div.hijo1 {

width: 100px;

height: 100px;

background: red;

float: right;

}

div.hijo2 {

width: 50px;

height: 50px;

background: green;

margin: 10px 0px;

clear: both;

}

div.hijo3 {

width: 50px;

height: 50px;

background: blue;

margin: 10px 0px;

clear: both;

}

clear anula el float.

VISIBILIDAD

z-index

Seguir con el ejemplo anterior y modificar lo siguiente:

</div>

div.padre {

width: 250px;

height: 250px;

margin: 25px;

background: orange;

}

div.hijo1 {

width: 100px;

height: 100px;

background: red;

position: absolute;

}

div.hijo2 {

width: 50px;

height: 50px;

background: green;

}

Observamos que las cajas rojas quedan por detrás, para hacer que queden al frente hacemos lo siguiente:

en .hijo2 ponemos

position: relative;

z-index: 99;

(para que z-index funcione tiene que ir con un position cualquiera) (z-index indica como las capas, se suele dar de 10 en 10 el número)

Overflow:

Con overflow: hidden;

podemos eliminar del elemento todo lo que sobresalga.

Ejemplo:

.padre {

overflow: hidden;

}

.hijo2 {

position: relative;

top: -25px;

Visibilty:

Para poder ocultar un elemento pero sin que eso cambie el flujo de posicionamiento de los demás.

Poner al tercer hijo 1 la clase «hijo1 oculto»

En css escribir:

.oculto {

visibility: hidden;

}

Se mantendrá oculto y los demás elementos no se mueven.

al cuarto hijo 1 ponerle como clase: «hijo1 transparencia»

En el css irá:

.transparencia {

opacity: 0.5; (se pueden dar valores del 0 al 1)

}

PSEUDOELEMENTOS

Crear la siguiente página:

<p> Hola mundo</p>

Los pseudoelementos van siempre vinvulados a los elementos. Todo pseudoelemnto tiene que tener un content para que funcione:

En el css

p:before {

content: «-«;

}

Los pseudoelementos no son seleccionables por el usuario.

PSEUDOCLASES DE ENLACES

Creamos la siguiente página web:

Estos vínculos se cargarán con vínculos de color azul.

Con pseudoclases vamos a cambiar esos colores:

En css

a#link1:link {

color: green;

}

Saldrá verde porque es un pseudoenlace que no se visitó (el segundo link es el de pseudoenlace.

Para los ya visitados añadimos:

a#link1:visited {

color: red;

}

Pseudo clases Globales

El elemento hover es el que se activa cuando el ratón pasa por encima, en los teléfonos se activa cuando se hace click.

Creamos las siguiente página web:

<p>Párrafo</p>

<span>texto</span>

Creamos el siguiente css:

a#link1:link {

color: green;

}

a#link1:visited {

color: red;

}

p:hover {

color: green;

font-size: 20px;

font-weight: bolder;

}

Active es un estado que indica cuando el click se está ejecutando.

span:active {

color: green;

}

input:focus {

border-radius: 20px; (al hacer click en la caja del input se pone en redondo)

background: #ffd6d6;

}

PSEUDOCLASES AVANZADAS

Crear la siguiente página web:

<body>

<div>

<p>Mensaje 1/9</p>

<p>Mensaje 2/9</p>

<p>Mensaje 3/9</p>

<p>Mensaje 4/9</p>

<p>Mensaje 5/9</p>

hola 6/9 </a>

<article>article 7/9 </article>

<article class=»clase»>article 8/9</article>

<aside>aside 9/9 </aside>

</div>

Creamos el siguiente css:

div* { (* es el selector universal, es para aplicar el mismo estilo a todos los elementos de una página, en este caso a todos los div)

border: 1px solid black;

width: 80px;

height: 50px;

background: white;

display: inline-block;