Diferencias

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

--- css:basics [2021/07/07 14:02] – [Declaración de estilos] 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 50: / Línea 111: @@
 ===== 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}}
@@ Línea 56: / Línea 118: @@
   * **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 referencial al modelo de caja, puede solapar a éste en función de las propiedades que tenga declaradas.
+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.