Trabajo taller de sistemas PHP 2020

Capitulo 2

Para crear diseños web profesionales, es imprescindible conocer y dominar los selectores de CSS. Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página.
A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web.

2.1. Selectores básicos

2.1.1 Selector universal

Se utiliza para seleccionar todos los elementos de la página.
El selector universal se indica mediante un asterisco . A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.

* {
  margin: 0;
  padding: 0;
}


2.1.2 Selector de tipo o etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector.
Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML correspondiente a los elementos que se quieren seleccionar.
En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple.

h1 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h2 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}
h1, h2, h3 {
  color: #8A8E27;
  font-weight: normal;
  font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

2.1.3. selector de desendentes


Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

El selector del siguiente ejemplo selecciona todos los elementos <span> de la página que se encuentren dentro de un elemento <p>:
<p>
  ...
  <span>texto1</span>
  ...
  <a href="">...<span>texto2</span></a>
  ...
</p>
El motivo es que en el selector descendente, un elemento no tiene que ser descendiente directo del otro. La única condición es que un elemento debe estar dentro de otro elemento, sin importar el nivel de profundidad en el que se encuentre. Al resto de elementos de la página que no están dentro de un elemento , no se les aplica la regla CSS anterior.
p span  { color: red;  }
h1 span { color: blue; }

Con las reglas CSS anteriores:

Los elementos <span> que se encuentran dentro de un elemento <p> se muestran de color rojo.
Los elementos <span> que se encuentran dentro de un elemento <h1> se muestran de color azul.
El resto de elementos <span> de la página, se muestran con el color por defecto aplicado por el navegador.


El último selector indica el elemento sobre el que se aplican los estilos y

 todos los selectores anteriores indican el lugar en el que se debe encontrar 

ese elemento.




Los estilos de la regla anterior se aplican a los elementos de tipo que se encuentren dentro de elementos de tipo , que a su vez se encuentren dentro de elementos de tipo que se encuentren dentro de elementos de tipo .

2.1.4. Selector de clase

¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal no se puede utilizar porque selecciona todos los elementos de la página. Por último, el selector descendente tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.




<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et est adipiscing accumsan...</p>
  <p>Class aptent taciti sociosqu ad litora...</p>
</body>

Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal no se puede utilizar porque selecciona todos los elementos de la página. Por último, el selector descendente tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.


<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>

Los selectores de clase son imprescindibles para diseñar páginas web complejas, ya que permiten disponer de una precisión total al seleccionar los elementos. Además, estos selectores permiten reutilizar los mismos estilos para varios elementos diferentes.

A continuación se muestra otro ejemplo de selectores de clase:
.aviso {
  padding: 0.5em;
  border: 1px solid #98be10;
  background: #f6feda;
}

.error {
  color: #930;
  font-weight: bold;
}
<span class="error">...</span>

<div class="aviso">...</div>

El elemento <span> tiene un atributo class="error", por lo que se le aplican las reglas CSS indicadas por el selector .error. Por su parte, el elemento <div> tiene un atributo class="aviso", por lo que su estilo es el que definen las reglas CSS del selector .aviso.

En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera de nuevo el ejemplo anterior:
<body>
  <p class="destacado">Lorem ipsum dolor sit amet...</p>
  <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p>
  <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p>
</body>
¿Cómo se pueden aplicar estilos CSS sólo al primer párrafo? El selector universal no se puede utilizar porque selecciona todos los elementos de la página. Por último, el selector descendente tampoco se puede utilizar porque todos los párrafos se encuentran en el mismo sitio.
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... }

/* Todos los elementos con atributo class="aviso" que estén dentro
   de cualquier elemento de tipo "p" */
p .aviso { ... }

/* Todos los elementos "p" de la página y todos los elementos con
   atributo class="aviso" de la página */
p, .aviso { ... }
La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco.

Error. Destacado, que se interpreta como «aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado».

2.1.5. Selector de ID




Aunque puede utilizarse un selector de clase para aplicar estilos a un único elemento, existe otro selector más eficiente en este caso. El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id.


2.1.5. Combinación de selectores básicos

CSS permite la combinación de uno o más tipos de selectores para restringir el alcance de las reglas CSS. El anterior selector solamente selecciona aquellos elementos con un class=«especial» que se encuentren dentro de cualquier elemento con un class=«aviso».
Ahora, el selector solamente selecciona aquellos elementos de tipo con un atributo class=«especial» que estén dentro de cualquier elemento de tipo que tenga un atributo class=«aviso».
La combinación de selectores puede llegar a ser todo lo compleja que sea necesario: ul#menuPrincipal li.destacado a#inicio { ... }


            2.2. selector avanzado


No obstante, CSS define otros selectores más avanzados que permiten simplificar las hojas de estilos.
Desafortunadamente, el navegador Internet Explorer 6 y sus versiones anteriores no soportaban este tipo de selectores avanzados, por lo que su uso no era común hasta hace poco tiempo.


2.2.1. selector de hijos


Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento.

p > span { color: blue; }

<p><span>Texto1</span></p>
<p><a href="#"><span>Texto2</span></a></p>
En el ejemplo anterior, el selector p > span se interpreta como «cualquier elemento que sea hijo directo de un elemento », por lo que el primer elemento cumple la condición del selector.

p a { color: red; }
p > a { color: red; }

<p><a href="#">Enlace1</a></p>
<p><span><a href="#">Enlace2</a></span></p>
El primer selector es de tipo descendente y por tanto se aplica a todos los elementos que se encuentran dentro de elementos . En este caso, los estilos de este selector se aplican a los dos enlaces.


2.2.2. selector de atributos


El último tipo de selectores avanzados lo forman los selectores de atributos, que permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.

Los cuatro tipos de selectores de atributos son:

[nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
[nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
[nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
[nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.


A continuación se muestran algunos ejemplos de estos tipos de selectores:
/* Se muestran de color azul todos los enlaces que tengan
   un atributo "class", independientemente de su valor */
a[class] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan
   un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; }

/* Se muestran de color azul todos los enlaces que apunten
   al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; }

/* Se muestran de color azul todos los enlaces que tengan
   un atributo "class" en el que al menos uno de sus valores
   sea "externo" */
a[class~="externo"] { color: blue; }

/* Selecciona todos los elementos de la página cuyo atributo
   "lang" sea igual a "en", es decir, todos los elementos en inglés */
*[lang=en] { ... }

/* Selecciona todos los elementos de la página cuyo atributo
   "lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */
*[lang|="es"] { color : red }

       2.3. Agrupación de reglas

h1 { color: red; }
...
h1 { font-size: 2em; }
...
h1 { font-family: Verdana; }




Las tres reglas anteriores establecen el valor de tres propiedades diferentes de los elementos . El ejemplo anterior tiene el mismo efecto que las tres reglas anteriores, pero es más eficiente y es más fácil de modificar y mantener por parte de los diseñadores.


       2.4. Herencia

Una de las características principales de CSS es la herencia de los estilos definidos para los elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos descendientes heredan de forma automática el valor de esa propiedad. Si se considera el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
  body { color: blue; }
</style>
</head>

<body>
  <h1>Titular de la página</h1>
  <p>Un párrafo de texto no muy largo.</p>
</body>
</html>


En el ejemplo anterior, el selector body solamente establece el color de la letra para el elemento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
  body { font-family: Arial; color: black; }
  h1 { font-family: Verdana; }
  p { color: red; }
</style>
</head>

<body>
  <h1>Titular de la página</h1>
  <p>Un párrafo de texto no muy largo.</p>
</body>
</html>


En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del elemento , por lo que todos los elementos de la página se mostrarían con ese mismo color y tipo de letra. Igualmente, los elementos de la página se muestran del color rojo establecido por el selector p y con un tipo de letra Arial heredado del elemento .
Por último, aunque la herencia automática de estilos puede parecer complicada, simplifica en gran medida la creación de hojas de estilos complejas.


       2.5. coliciones de estilo


En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo elemento HTML. El problema de estas reglas múltiples es que se pueden dar colisiones como la del siguiente ejemplo:




p { color: red; }

p { color: blue; }




¿De qué color se muestra el párrafo anterior? CSS tiene un mecanismo de resolución de colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de navegador, de usuario o de diseñador), la importancia de cada regla y lo específico que sea el selector.


El método seguido por CSS para resolver las colisiones de estilos se muestra a continuación:

Determinar todas las declaraciones que se aplican al elemento para el medio CSS seleccionado.
Ordenar las declaraciones según su origen (CSS de navegador, de usuario o de diseñador) y su prioridad (palabra clave !important).
Ordenar las declaraciones según lo específico que sea el selector. Cuanto más genérico es un selector, menos importancia tienen sus declaraciones.
Si después de aplicar las normas anteriores existen dos o más reglas con la misma prioridad, se aplica la que se indicó en último lugar.


Hasta que no se expliquen más adelante los conceptos de tipo de hoja de estilo y la prioridad, el mecanismo simplificado que se puede aplicar es el siguiente:

Cuanto más específico sea un selector, más importancia tiene su regla asociada.
A igual especificidad, se considera la última regla indicada.


Como en el ejemplo anterior los dos selectores son idénticos, las dos reglas tienen la misma prioridad y prevalece la que se indicó en último lugar, por lo que el párrafo se muestra de color azul.

En el siguiente ejemplo, la regla CSS que prevalece se decide por lo específico que es cada selector:

p { color: red; }
p#especial { color: green; }
* { color: blue; }

<p id="especial">...</p>


Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la misma, decide la especificidad del selector. El selector * es el menos específico, ya que se refiere a "todos los elementos de la página". El selector p es poco específico porque se refiere a "todos los párrafos de la página". Por último, el selector p#especial sólo hace referencia a "el párrafo de la página cuyo atributo id sea igual a especial". Como el selector p#especial es el más específico, su declaración es la que se tiene en cuenta y por tanto el párrafo se muestra de color verde.

Trabajo taller de sistemas PHP 2020

lunes, 1 de junio de 2020

Capitulo 2

2.1. Selectores básicos

2.1.1 Selector universal

2.1.2 Selector de tipo o etiqueta

2.1.3. selector de desendentes

2.1.4. Selector de clase

2.1.5. Selector de ID

2.1.5. Combinación de selectores básicos

2.2. selector avanzado

2.2.1. selector de hijos

2.2.2. selector de atributos

2.3. Agrupación de reglas

2.4. Herencia

2.5. coliciones de estilo

No hay comentarios:

Publicar un comentario