Enciclopedia Galáctica

Esta página es de solo lectura. Puedes ver la fuente pero no puedes cambiarla. Pregunta a tu administrador si crees que esto es incorrecto.
====== CSS Básico ======
**Hojas de Estilo en Cascada** (del inglés **C**ascading **S**tyle **S**heets) o CSS, es el lenguaje de estilos utilizado para describir la presentación de documentos HTML. CSS es uno de los lenguajes base de la Open Web y posee una especificación estandarizada por parte del W3C.

===== Sintaxis =====
Para definir estilos, se hace el siguiente modo:

<code css>
  p {                     /* Elemento HTML a dar formato, llamado selector */
    color: red;           /* Propiedad color del elemento (en ester caso texto del párrafo) */
    text_align: center;   /* Propiedad de alineamiento del texto, en este caso centrado */
    }
</code>

Las indentaciones y saltos de línea se han puesto e este modo para ganar claridad, pero son ignorados.
Los elementos a dar formato se denominan selectores:
  * **Elementos HTML**: Pueden definirse varios elementos separados por comas. Afecta a todos los elementos de ese tipo.
  * **Id**: Si en HTML se define una id para un elemento concreto, se puede dar formato sólo a ese elemento indicando //#id//.
  * **Clase**: Si en HTML se define una clase para varios elementos o tipos de elementos, se puede dar formato a esa clase indicando //.clase//.
  * *****: Selector universal que afecta a todos los elementos.

Cabe la posibilidad de que a un elemento se le puedan asignar varias clases en el HTML:
<code html>p class="nombreClase1 nombreClase2"</code>

==== Combinators ====
Un selector CSS (elemento a dar formato), puede tomar más de un simple selector. Un //combinator// es un operador entre selectores, para definir una relación entre ambos, a la que se le aplicará el estilo:
  * **Descendiente [Espacio]**: Afecta a todos los elemntos contenidos en éste. Se deja un espacio, ejemplo: div { 
  * **Hijo >**: afecta a los elementos especificados, dentro del elemento donde se declara. Ejemplo: div > p {
  * **Hermano adyacente +**: Afecta a un elemento que esté inmediatamente después de otro elemento especificado. Ejemplo: div + p { afectará al primer <p> que estén después de un <div> y a la misma altura (no contenido en él).
  * **Hermano general ~**: Afecta a un elemento que esté espués de otro elemento especificado, no sólo al que está inmediatamente después. Ejemplo: div ~ p { afectará a todos los <p> que estén después de un <div> y a la misma altura).

==== Pseudoclases y pseudoelementos ====
Las **pseudoclases** definen diferentes formas en que puede visualizarse un elemento dependiendo de su estado, ejemplo: enlace antes de ser pulsado, después de ser pulsado o cuando se sitúa el cursor sobre él. Pueden combinarse con las clases.
Sintaxis:
<code css>
selector:pseudo-clase {
  propiedad: valor;
}
</code>

Ejemplo:
<code css>
 /* unvisited link */
a:link {
  color: #FF0000;
}

/* visited link */
a:visited {
  color: #00FF00;
}

/* mouse over link */
a:hover {
  color: #FF00FF;
}

/* selected link */
a:active {
  color: #0000FF;
} 
</code>

Los **Pseudoelementos** dan estilo a diferentes partes de un elemento.\\
Sintaxis: 
<code css>
selector::pseudo-elemento {
  propiedad: valor;
}
</code>

Ejemplo:
<code css>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</code>


===== Declaración de estilos =====
  * **CSS externo**: En un documento nombreDocumento.css que debe ser referenciado en el //head// del HTML. Se van declarando los estilos de los diferentes elementos uno debajo de otro. 
<code html> 
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="mystyle.css">
  </head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html> </code>
  * **CSS interno**: Se declaran los estilos el la cabecera del HTML. En lugar de hacer una referencia, se escriben los estilos uno debajo de otro.
  * **CSS en línea**: Se declaran los estilos en cada elemento afectado, dentro de la etiqueta HTML que corresponda. Se suelen poner "seguidos", es decir, sin saltos de línea ni indentaciones.

Cuando se declaran a la vez en diferentes sitios, se toman por orden de preferecia:
  - En línea.
  - Interno.
  - Externo.
  - Por defecto del explorador.

==== Comentarios ====
Los comentarios en CSS tienen la sintaxis /* Línea/s de comentario */ 
No olvidar que en HTML los comentarios eran de la forma <!-- Comentario -->

===== Modelo de Caja =====
CSS funciona con un "modelo de caja". Cada elemento se encuentra dentro de una caja, cuyos límites, bordes, colocación y espacios interiores y exteriores pueden definirse mediante distintas propiedades.

{{ :css:box_model.png?direct |Modelo de caja de CSS}}

En este modelo se distinguen las propiedades:
  * **margin**: Márgenes. Espacio exterior al borde del elemento. Si el superior y el inferior son diferentes, se "colapsan", es decir, ambos adquieren el valor del más alto. Esto no ocurre con el resto de propiedades del modelo de cajas. Puede depender del elemento en el que está englobado con la propiedad //inherit//.
  * **border**: Borde del elemento. Por defecto es invisible, pero se le puede dar estilo.
  * **padding**: Espacio interior al borde del elemento. Entre el contenido y el borde. Puede expresarse en % respecto al ancho del contenedor (caja delimitada por los bordes, //width+padding//). También permite usar la propiedad //inherit//.

==== Ancho (Width) y alto (Height) de un elemento ====
Estas propiedades se refieres al ancho y alto del **contenedor** (contenido), sin contar //margin//, //padding// y //borders//.
El ancho y alto totales de la caja es el resultdo de sumer ancho/alto, más //margin//, //padding// y bordes.

==== Outline ====
Aunque no está referenciada respecto al modelo de caja, existe un elemento denominado **//Outline//**, que se corresponde con una línea exterior al borde, pero pegada al mismo. 
Al no referenciar al modelo de caja, puede solapar a éste en función de las propiedades que tenga declaradas.

===== Posicionamiento (Layout) =====
Los elementos se posicionan con las propiedades //top//, //bottom//, //left// y //right//. Sin embargo, estas propiedades no funcionarán a menos que se establezca primero la propiedad //position//, y funcionan diferente según el valor de esta posición:
  * **Static**: Por defecto. Se colocan los elementos según el flujo "normal" de la web. No le afectan las propiedades //top//, //bottom//, //left// y //right//.
  * **Relative**: Se indica la distancia a la que se situará el elemento, tomando como referencia su posicionamiento "normal". Ningún otro elemento ocupará su hueco.
  * **Fixed**: Siempre se sitúa en la posición indicada. SIEMPRE. Aunque se haga //scroll// SEGUIRÁ AHÍ.
  * **Absolute**: Se posiciona de forma relativa al elemento en el que está contenido, y variará en función de lo que varíe el posicionamiento de éste. Si no está contenido en ninguno, se "mueve" de forma normal con la página web respetando el //scroll//.
  * **Sticky**: Funciona como unposicionamiento relativo, hasta que llega en pantalla a una posición indicada, en la cual se queda en posicionamiento fijo. Ejemplo: top 0; Cuando se haga //scroll// hacia abajo, el elemento se moverá hasta la parte superior, y cuando llegue ahí, ahí se queda.

==== z-index ====
Esta propiedad lo que indica es la prioridad en caso de solapamiento de elementos.

===== Visualización =====
Hay dos maneras de controlar los elementos que aparecen: //display// y //visivility//.

==== Display ====
Es la propiedad CSS más importante para controlar el //layout//. Indica si un elemento se muestra (se carga o no en la web) y de qué manera.
Cada elemento HTML tiene un valor de //display// por defecto dependiendo de su tipo de elemento. La mayoría de los elements son //block// o //inline//:
  * **block**: El elemento no puede tener ningún otro al lado, y se sitúa debajo del anterior y encima del siguiente.
  * **inline**: El elemento se sitúa en línea con el anterior. No respeta top y bottom, en margin y padding. Tampoco tienen efecto las propiedades height y width.
  * **inline-block**: El elemento se comporta como inline, pero se pueden aplicar propiedades height y width.

Display tiene una [[https://www.w3schools.com/cssref/pr_class_display.asp|gran cantidad de propiedades]].

==== Visivility ====
Esta propiedad indica si el elemento se muestra, pero siempre se carrga en la web, y por lo tanto se respeta su hueco, a diferencia de //display//.
Algunos de sus valores son: 
  * **visible**: Valor por defecto.
  * **hidden**: No se ve, pero queda su hueco.
  * **collapse**: Sólo afecta a elementos de tablas. Elimina filas o columnas y el espacio se "colapsa" (se elimina el hueco), que puede usarse para ver otro elemento.

==== Float ====
La propiedad //float// especifica si un elemento debe flotar hacia la izquierda, hacia la derecha o no flotar. Los elementos posicionados //absolute// ignoran esta propiedad.
Los elementos próximos a un elemento flotante fluirán a su alrededor. Para evitar esto, hay que usar la propiedad //clear// o el truco //clearfix//. 

==== Clear ====
Esta propiedad se usa cuando se desea situar un elemento debajo de un float (no a su izquierda o derecha):
  * **none**: El elemento no se coloca debajo de flotante. Por defecto.
  * **left** o **right**: El elemento cae debajo de los "flotantes" situados a la izquierda o derecha.
  * **inherit**: Valor muy común en muchas propiedades. Hereda del elemento contenedor.


==== Overflow ====
Esta propiedad indica qué ocurre cuando un contenido es mayor que el elemento que lo contiene (caja).
Algunos valores que puede tomar:
  * **visible**: Por defecto, se sale de la "caja".
  * **hidden**: no se ve la parte que se sale de la "caja".
  * **scroll**: Se muestran barras de scroll.
  * **auto**: Se muestran las barras de scroll, sólo si se da la situación de solapamiento.