En este capítulo hablaremos de las propiedades CSS float, margin y padding. También veremos los nuevos selectores CSS aparte de los que ya existían.

float

La propiedad float rompe el flujo de como se colocan los elementos en una página web. Dicha propiedad hará que el elemento ya no ocupe el ancho de la pantalla, sino el ancho correspondiente al elemento en sí, y los más importante es que el resto de elementos que están a su lado se van a situar rodeando a dicho elemento.

clear

El elemento clear no tiene en cuenta que se trata de un float y lo trata como un bloque.

Nuevos selectores

Los selectores que han existido hasta HTML5 eran estos 3:

  • Selectores de etiqueta
  • Selectores de id
  • Selectores de clase

existen son los selectores de etiqueta, como el siguiente:

p {

}

Los selectores de id que son los que tienen la almohadilla delante, y sólo se pueden aplicar a un único elemento de nuestra página web, como son:

#nombreidentificativo {

}

Los selectores de clase, que comienzan con punto, y se pueden aplicar a múltiples elementos de nuestra página web, como son:

.nombreidentificativo {

}

A partir de HTML5 se han creado nuevos selectores que apuntan a elementos más específicos, como son las etiquetas con el atributo name, que siguen la siguiente sintaxis:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p[name="miselementos"]{
color:red;
}
</style>
</head>
<body>
<p name="miselementos">Hola</p>
<p>Adios</p>
<p>Febrero</p>
</body>
</html

Este selector permite incluir tres símbolos:

  • Acento circunflejo (^): que indica que se aplicará CSS a las etiquetas que comiencen por un valor de atributo en concreto, como puede ser: p[name^="mis"], el cual aplicará el CSS a todos los atributos con el valor 'mis'.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p[name^="mis"]{
color:red;
}
</style>
</head>
<body>
<p name="miselementos">Hola</p>
<p name="misestilos">Adios</p>
<p>Febrero</p>
</body>
</html
  • Signo dolar ($): aquellos elementos que finalicen con un valor que hayamos aplicado se modificará su CSS.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p[name$="os"]{
color:red;
}
</style>
</head>
<body>
<p name="miselementos">Hola</p>
<p name="misestilos">Adios</p>
<p>Febrero</p>
</body>
</html
  • Signo asterisco (*): aquellos elementos que encuentren los caracteres que están con el asterisco.

Ejm

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p[name*="el"]{
color:red;
}
</style>
</head>
<body>
<p name="miselementos">Hola</p>
<p name="misestilos">Adios</p>
<p name="mielemento">Febrero</p>
</body>
</html

Pseudoclases

Son nuevas en CSS3, y son las siguientes:

  • nth-child()
  • nth-child(odd)
  • nth-child(even)
  • first-child
  • last-child
  • only-child

Lo vamos a ver con un ejm.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p:nth-child(2){
color:red;
}
</style>
</head>
<body>
<p>Hola</p>
<p>Adios</p>
<p>Febrero</p>
</body>
</html>

Lo que hace es aplicar el CSS al segundo <p> de nuestro listado. Si en vez del 2 ponemos un 3, se aplicará el CSS al tercer elemento <p> hijo de <body>. Este selector permite utilizar la palabra odd, que aplica el CSS a los elementos impares, de la siguiente forma

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p:nth-child(odd){
color:red;
}
</style>
</head>
<body>
<p>Hola</p>
<p>Adios</p>
<p>Febrero</p>
</body>
</html

Para los elementos pares, es decir, para que se aplique el CSS a <p>Adiós</p>, se utiliza la palabra even, de la siguiente forma.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p:nth-child(even){
color:red;
}
</style>
</head>
<body>
<p>Hola</p>
<p>Adios</p>
<p>Febrero</p>
</body>
</html

Existe otra pseudoclase que es first-child, que aplicará CSS a todos los primeros elementos hijos del elemento padre, de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
p:first-child{
color:red;
}
</style>
</head>
<body>
<p>Hola</p>
<p>Adios</p>
<p>Febrero</p>
</body>
</html

Aplicará el CSS al primer hijo de <body>, <p>Hola</p>. last-child hará lo mismo pero para los últimos hijos del elemento padre. También encontramos la pseudoclase only-child, que aplicará formato CSS a aquellas etiquetas que sean únicas.

Centrar contenido

Para centrar un contenido se utiliza el elemento CSS margin: auto, de esta manera centra tanto por la derecha como por la izquierda el contenido del bloque que sea, veamos un ejm.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title>Selectores</title>
<style>
#principal {
width: 500px;
text-align: center;
margin: 25px auto;
padding: 25px;
background-color: red;
}
</style>
</head>
<body>
<header id="principal">
<span>Prueba CSS</span>
</header>
</body>
</html

Aplicar bordes a una caja

Se hace usando el elemento border de la siguiente forma

#principal {
border: 3px solid #F00;
}

Que significa que a la caja le aplicamos un borde de 3px sólido y de color rojo.

Redondear los bordes de una caja

Se hace con la nueva regla CSS3 denominada border-radius, de la siguiente manera.

border-radius: 5px;

Establecer sombras a cajas (contenedores)

Se puede hacer utilizando la propiedad box-shadow de la siguiente manera

box-shadow: #999 (color de la sombra) 4px (desplazamiento horizontal) 4px (desplazamiento vertical) 10px (difuminación de la sombra)

Aplicar sombras a textos

Se hace mediante la propiedad text-shadow, y adquiere los mismos parámetros que box-shadow.