Diferencias

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

--- css:basics [2021/07/08 13:02] – alberto
+++ css:basics [2021/07/08 13:44] (actual) – alberto
@@ Línea 6: / Línea 6: @@
 <code css>
-  p {                     /* Elemento HTML a dar formato */
+  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 */
@@ Línea 21: / Línea 21: @@
 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 =====
@@ Línea 58: / 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 66: / 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 =====
+===== 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 81: / Línea 142: @@
 ==== Display ====
-Es la propiedad CSS más importante para controlar el //layout//. Indica si un elemento se muestra y de qué manera.
+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.
@@ Línea 88: / Línea 149: @@
 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.