Diferencias

Muestra las diferencias entre dos versiones de la página.

--- css:basics [2021/07/08 13:32] – alberto
+++ css:basics [2021/07/08 13:44] (actual) – alberto
@@ Línea 22: / Línea 22: @@
 <code html>p class="nombreClase1 nombreClase2"</code>
-==== //Combinators// ====
+==== 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 {
@@ Línea 28: / Línea 28: @@
   * **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 =====
@@ Línea 65: / Línea 119: @@
   * **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 ====
+==== 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.
@@ Línea 73: / Línea 127: @@
 Al no referenciar al modelo de caja, puede solapar a éste en función de las propiedades que tenga declaradas.
-===== Posición / //Layout// =====
+===== 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//.
@@ Línea 121: / Línea 175: @@
   * **scroll**: Se muestran barras de scroll.
   * **auto**: Se muestran las barras de scroll, sólo si se da la situación de solapamiento.