CSS3

Posted on by

id, clases, pseudo-clases

Conceptos básicos: CSS es un lenguaje que trabaja junto con HTML para proveer estilos visuales a los elementos del documento, como tamaño, color, fondo, bordes, etc.

Importante:
-moz (Mozilla) o -kevit (Chrome, Safari, Opera)

Estructura en Bloque

  • Cuando hablamos de estructura, nos referimos a la manera en la que un sitio web está dispuesto.
  • Cada navegador implementa una estructura por defecto.

Block

Son posicionados uno sobre otro hacia abajo en la página. (por defecto en los navegadores).

Inline-block

Son posicionados lado a lado, uno al lado del otro en la misma línea, sin ningún salto de línea a menos que no haya más espacio horizontal para ubicarlos.

Modelo de caja

Todas las reglas que especifican la disposición en la que será organizada una página web se le denomina «Modelo de Caja»

Conceptos

CSS3

  • Sobreescribe los estilos básicos del navegador
  • Puede crear nuevos estilos
  • Se pueden combinar los estilos para hacer cosas geniales

Estilos en línea

<p style=»font-size: 20px>Esto es un párrafo</p>

  • Forma
    • Simple
    • Rudimentaria
    • Poco práctica
    • Pero puede ser útil para una vista rápida de un estilo que deseemos implementar

Estilos embebidos

Una mejor alternativa es insertar los estilos en la cabecera del documento y luego usar referencias para afectar los elementos HTML correspondientes

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Elementos en bloque</title>
        <style>
           p { font-size: 20px }
        </style>
    </head>
    <body>
        <p>Esto es un párrafo</p>
    </body>
</html>

Archivos externos

  • Tiene más ventajas que el método de estilos embebidos
  • Facilita la actualización de los extilos
  • Se implementa mediante la etiqueta <link>
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Elementos en bloque</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
    </head>
    <body>
        <p>Esto es un párrafo</p>
    </body>
</html>

estilos.css

p{
    font-size:: 20px;
}

Selector Universal

Este selector representa cada uno de los elementos en el cuerpo del documento, y es útil cuando necesitamos establecer ciertas reglas básicas

*{
margin: 0;
}
p:nth-child(2){
background: #999999;
}

Referencia por etiqueta
Referencia por la palabra clave del elemento

Referencia por id

Problema
Supongamos que desemos implementar dos estilos diferentes a una misma etiqueta
La respuesta más simple es hacer uso de un id

<body>
<p id="articulo">Texto para el artículo</p>
<p id="aside">Texto para el aside</p>

estilos.css

p#articulo{
    font-size:: 20px;
}

p#aside{
    color:: red;
}

Para referenciar un elemento en particular usando el atributo id desde nuestro archivo CSS la regla debe ser declarado con el símbolo # delante del valor que usamos para identificar el elemento.

Notas para las referencias en id

  • Es una referencia sumamente específica, ya que no debe de haber más de un elemento con el nombre del id
  • Normalmente se emplean los id para elementos estructurales
  • Suele emplearse más en JavaScript
  • CSS3 nos proporciona referencias más flexibles

Referencias con el atributo class

  • Este atributo es más flexible
  • Puede ser asignado a cada elemento HTML en el documento que comparte un diseño similar

Se emplea de forma similar que el id sólo que:
– En HTML, en vez de colocar id se coloca class

<p class="principal">Texto para el artículo</p>
<p class="aside">Texto para el aside</p>

En CSS3, en vez de colocar #, se coloca un punto (.)

.principal{
    font-size:: 20px;
}

.aside{
    color:: red;
}

Un dato
¿porqué colocar un punto antes de la referencia?
La razón es que con las clases podemos construir referencias más complejas

p.principal{
    font-size:: 20px;
}

p.aside{
    color:: red;
}

De esta manera, sólo las etiquetas <p>, se verán afectadas por esta clase.

Referenciando por cualquier otro atributo

  • Las nuevs especificaciones de CSS3 nos permite referenciar por cualquier otro atributo:
    <p name=»especial»>Referencia por cualquier otro atributo</p>
  • El CSS3 sería: 
         p[name="especial"] {
         font-size: 20px;
         color: red;
     }

Referencias locas

p[name^="mi"] {
    font-size: 20px
}

(^) Será asignada a todo elemento <p> que contenga un atributo name con un valor comenzado en «mi».

p[name$="mi"] {
    font-size: 40px
}

(^) Será asignada a todo elemento <p> que contenga un atributo name con un valor finalizado en «mi».

p[name*="mi"] {
    font-size: 60px
}

(^) Será asignada a todo elemento <p> que contenga un atributo name con un valor que incluye el texto «mi».

Referenciando con pseudo clases

Consideremos el siguiente código

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <title>Estilos con pseudo clases</title>
        <link rel="stylesheet" type="text/css" href="css/estilos.css">
    </head>
    <body>
        <div id="wrapper">
            <p class="miestilo1">Párrafo1</p>
            <p class="miestilo2">Párrafo2</p>
            <p class="miestilo3">Párrafo3</p>
            <p class="miestilo4">Párrafo4</p>
        </div>
    </body>
</html>

La etiqueta <div> agrupa a varias etiquetas <p>.
La etiqueta <div> se considera una etiqueta padre.
Las etiquetas <p> son hijos de la etiqueta <div> y hermanos entre si.

Las pseudo clases nos permiten hacer referencias considerando la estructura del documento

p:nth-child(2)
{
background: #999999;
}

En este caso p es el elemento clave
La referencia nth-child() nos permite encontrar un hijo específico
El 2 nos indica a que elemento hermano nos referimos
A continuación se coloca el estilo que queramos utilizar

Odd – even

Son dos palabras reservadas.

Odd afecta a los elementos hijos que poseen un número impar.
Even afecta a los elementos hijos que poseen un número par.

Haciendo uso de odd y even, se facilita muchísimo la tarea de alternar estilos en una serie de elementos contínuos.

*{
margin: 0px;
}

p:nth-child(odd)
{
background: #999999;
}
p:nth-child(even)
{
background: #cccccc;
}

Otras pseudo clases

Existen otras importantes pseudo clases relacionadas con esta última, como

  • firstchild – Referencia sólo al primer hijo
  • last-child – Referencia al último hijo
  • only-child – Referencia a elementos padres que sólo tienen un hijo

Pseudo clase not()

  • Se emplea para realizar una negación
  • Tiene el mismo alcance que un selector universal
    *{
    margin: 0px;
    }
    :not(p){
    margin: 0px;
    }
  • Dentro de los paréntesis podemos colocar la referencia que queramos

En este caso estamos indicando con un selector universal * un margen de 0px (es decir sin margen) a todos los elementos de la página.
Con la pseudo clase :not(p) le indicamos que a los elementos p no les afecte el margen de 0px, de tal manera que utilizarán las características por defecto del navegador o las que nosotros deseemos.

Nuevos selectores

Estos selectores usan los símbolos <, + y div>p.mitexto2{
color: #990000;
}
Le decimos es este elemento( p.mitexto2) sea afectado siempre que tenga como padre un elemento div

p.mitexto2 + p{
color: #990000;
}
El elemento <p> inmediatamente inferior al elemento p con la clase (mitexto), se verá afectado por los estilos.

p.mitexto2 ~ p{
color: #990000;
}

El estilo será aplicado a todos los elementos <p> que son hermanos y se encuentran luego del elemento <p> identificado con el valor mitexto2 en su atributo class.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *