1.2. CSS

Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:

  1. El selector (por ejemplo: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
  2. La propiedad (por ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
  3. Y el valor ('white' y 'black'), el cual da el valor para la propiedad.
body { 
  font-family:'Cuprum',arial,serif;
  font-size: 18px;
  margin-left: 20px;
  margin-right: 20px;
  min-width:240px;
  line-height: 1.5;
  padding-left: 20px;
  padding-right: 20px;
}

Por lo tanto una regla se compone de un selector y una declaración que está encerrada entre {} de forma que con la declaración decimos qué tiene que hacerse y es el selector el encargado de indicar a qué elemento de nuestro HTML se le debe aplicar la declaración.

La declaración es un conjunto de líneas separadas por ; (punto y coma) y cada línea (aunque pueden estar todas seguidas) se compone de una propiedad y un valor de forma que especificamos qué modificación visual queremos realizar (propiedad) y en qué medida (valor).

Selectores

La especificación CSS aporta varios tipos de selectores:

Selector universal

Es muy útil para inicializar las propiedades de todas las marcas HTML. Utilizamos el carácter asterisco para hacer referencia a este selector.

* {
  color:#00;
  font-family:'Cuprum',arial,serif;
  font-size: 18px;  
  margin:0px;
  padding:0px;
}

Selector de tipo o etiqueta.

Se usa para aplicar estilos en las etiquetas HTML. Es muy útil para establecer un patrón común de comportamiento, es habitual tener un estilo base para etiquetas como los p (párrafos), div (cajas), h1 (titular nivel1), h2 etc. que luego se ven sobrescritos por otros estilos en casos concretos (como por ejemplo un estilo para los h2 de un artículo y otro para los h2 de los bloques).

a { 
  color: #0000cc;
  text-decoration: none;
}
abbr, acronym {
   border-bottom: .1em dotted;
   color: purple;
   cursor: help;
   text-decoration: underline;
}
}

Selector descendente.

Permite establecer un estilo para una etiqueta que se encuentre dentro de otra. Nos permite tener diferentes estilos para las mismas etiquetas HTML según su jerarquía dentro del documento.

table thead, tfoot {
  font-family: "Palatino Linotype", "Book Antiqua",
           Palatino, serif;
  font-weight: bold;
  text-align: center;
  font-size:18px;
}
ol li {
  margin: 0 0 5px 0;
  font-size: 95%;
  text-align:justify;
  line-height: 150%;
}
ul li {
  margin: 0 0 5px 0;
  font-size: 95%;
  line-height: 150%;
  text-align:justify;
}

Selector de clase

Son los más utilizados junto con los selectores de ID que se verán a continuación. La principal característica de este selector es que en una misma página HTML varios elementos diferentes pueden utilizar el mismo valor en el atributo class

.destacado {
  color: #0000CD;
  font-family:"Courier New", Courier, monospace;
  font-size: 24px;
  font-weight:bold;
}
/*Código html*/
<p class='destacado'>Noticia destacada</p>
}

Es posible combinar un selector de etiqueta con un selector de clase:

img.izquierda {
	float:left;
	margin: 10px;
	padding: 5px;
}
img.derecha {
	float:right;
	margin: 10px;
	padding: 5px;
}

Selector de ID

El id es, como su propio indica, un identificador y los identificadores tienen que ser ¡¡únicos!!

Antes de usarlos deberías plantearte si un selector ID es lo más correcto, la respuesta siempre será no

Este selector viene precedido por una almohadilla #

Selector de hijos

Un selector de hijos aplicará el estilo a la etiqueta contenida dentro de otra si es hija de primer nivel, es decir, está justo dentro y sólo dentro de esa etiqueta, así pues en este ejemplo tenemos dos representaciones de la misma imagen y cada una se comporta de diferente forma. La que se encuentra directamente dentro del div y la que se encuentra dentro de p

<div>
  <h3>PESHAWAR, Pakistán</h3>
  <img src='SharbatGula.png' alt='Foto Original' title='Foto Original' >
  <p><img src='SharbatGula.png' alt='Floto a la derecha' title='Floto a la derecha'>Sharbat Gula fue fotografiada cuando tenía 12 años por el fotógrafo Steve McCurry ...</p>

  <p>El mismo hombre que la fotografió, Steve McCurry realizó una búsqueda de la joven que duró 17 años. El fotógrafo realizó numerosos viajes a la zona hasta que, en enero de 2002 ...</p> 
  </p>
</div>
div > img {
  border: 0px;
  float:none;
  height: 160px;
  width: 222px;
} 
img {
  border: 0px;
  float:right;
  height:64px;
  padding: 10px;
  width: 89px;
}
p {
  margin-bottom: 10px;
  margin-top:    10px;
  padding:3px 0;
  text-align:justify;
}

Selector de atributos

Es un selector muy utilizado a la hora de agregar estilos a los elementos de un formulario permitiéndonos maquetar (sin tener que especificar un class) todos los inputs de tipo texto, todas las cajitas donde solemos poner cosas como nuestro nombre… las cajas de texto de una línea (no las áreas).

El selector de atributos se construye colocando el nombre de la etiqueta y, entre corchetes, el nombre del atributo + el grado de concreción sobre el atributo, lo que significa que tiene varias formas de usarse, se muestran solo las de soporte general.

input[type="text"] {
  border: 1px solid #000000;
}
input[class] {
  border: 1px solid #000000;
}

Pseudo Elementos

Pseudo-elementos CSS se utilizan para añadir efectos especiales a algunos selectores.

La sintaxis de un pseudo selector es

selector::pseudo-element {
    property:value;
}

<body>
   <input type = 'text'>
   <input type = 'password'>
   <input type = 'submit'>
   <input type = 'reset'>
   <body>
  input{ background: white; }
  input[type="text"]{ border: 2px solid #D667C2; }
  input[type="password"]{ border: 2px dashed #71D1AF; }
  input[type="submit"]{ border: 2px dotted #D1CE71; }
  input[type="reset"]{ border: 2px double #2476E0; }
      

Pseudo elementos


Selector Ejemplo Descripción
:active a:active Selecciona los link activos
:hover a:hover Selecciona links on mouse over
:link a:link Selecciona todos inks
:visited a:visited Selecciona todos los links visitados
:focus input:focus Selecciona el elemento input que tiene foco
::after p::after Insertar contenido después de cada elemento <p>
::before p::before Insertar contenido antes de cada elemento <p>
::first-letter p::first-letter Selecciona la primera letra dentro del elemento<p>
::first-line p::first-line Selecciona la primera línea del elemento <p>
:first-child p:first-child Selecciona el primer elemento <p> que es hijo
:lang(language) p:lang(it) Selecciona el elemento <p> con el atributo de lenguaje que inicia con "it"

Pseudo elemento :first-line

Este pseudo elemento es usado para dar estilo a la primera línea de un texto. Solo se aplica a elmentos a nivel bloque.

Las siguientes propierdades pueden ser aplicadas al pseudo elemeto ::first-line:

<!DOCTYPE html>
<html>
  <head>
    <title>Pseudo elemento ::fistline</title>
  </head>
  <body>
  <p>El Instituto Tecnológico de Veracruz, fue
    fundado el I° de marzo de 1957 por el Presidente
    de la República Don Adolfo Ruiz Cortines, estando presentes
    el Lic. José Ángel Ceniceros, Secretario de Educación Pública
    y el Ing. Ismael Lagunes Lastra, Director Fundador; entre
    otros.</p>
  </body>
</html>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
} 

Pseudo elemento :first-letter

Este pseudo elemento es usado para dar estilo a la primera línea de un texto. Solo se aplica a elmentos a nivel bloque.

Las siguientes propierdades pueden ser aplicadas al pseudo elemento first-letter:

<!DOCTYPE html>
<html>
  <head>
    <title>Pseudo elemento ::firstletter</title>
  </head>
  <body>
  <p>El Instituto Tecnológico de Veracruz, fue
    fundado el I° de marzo de 1957 por el Presidente
    de la República Don Adolfo Ruiz Cortines, estando presentes
    el Lic. José Ángel Ceniceros, Secretario de Educación Pública
    y el Ing. Ismael Lagunes Lastra, Director Fundador; entre
    otros.</p>
  </body>
</html>
p {
  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 16px;
  text-align:justify;
}
p::first-letter {
  color: black;
  font-size: xx-large;
}1

Pseudo elemento :active

El pseudo selector :active cambia la apariencia de un enlace mientras está activado. Por lo general sólo se ve durante una fracción de segundo, y proporciona información visual de que el elemento se ha hecho clic. Se utiliza habitualmente en los vínculos de anclaje (<a href="#">).

Pseudo elemento :link

Define el estilo para ligas no visitadas.

Pseudo elemento :over

Este pseudo elemento es usado para cambiar el estilo cuando el cursor está sobre un determinado tag.

Pseudo elemento :visited

:visited es un selector de pseudo clase utilizado para anclar elementos de enlace que corresponda cuando el atributo href de ese vínculo de anclaje ha sido visitado en el pasado por este navegador.

Las siguientes propiedades pueden ser aplicadas a :visited

  • background-color
  • border-color (and its sub-properties)
  • color
  • outline-color

Existe restriciones de seguridad acerca de :visited, a saber, que un sitio web malicioso podría tener vínculos con toneladas y toneladas de sitios web. Como resultado, muchos navegadores restringen su uso. El algunos casos dejando de guardar en el historal que ese vincul o fue visitado

<!doctype html>
<html>
<head>
  <meta charset='utf-8'>
  <title>CSS pseudo Estilos</title>
  <link href='0303PseudoA.css' rel='stylesheet'/>
</head>
<body>
  <a href='http://www.google.com.mx'>Google</a>
  <a href='http://www.hotmail.com.mx'>Hotmail</a>
  <a href='http://www.prograweb.com.mx'>Prograweb</a>
  <button class='button_t1'>Hola</button>
  <button class='button_t2'>Hola</button>
  <p><a class='boton'>Pulsame</a></p>
</body>
</html>
a { 
  color: #0000cc;
  text-decoration: none;
}
a:hover	{
  color: green;
  font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-size: 18px;    
  text-decoration: underline;
}
a:link {
  color:blue;
  font-family:"Lucida Console", Monaco, monospace;
  font-size: 18px; 
}
a:visited {
  color: purple;
  text-decoration:none;
}