Unidad 2

Desarrollo de Sitios y Aplicaciones Web

CSS

Índice

Insertando el CSS de forma externa

Nuevas etiquetas con viejos navegadores

Degrades sin imágenes con CSS3

Decorando con bordes sombras y fondos

Regulando las repeticiones a los lados

EL CSS son las siglas de “Cascading Style Sheets” (hojas de estilo en cascada), es otro de los estándares que regula la W3C. El propósito de CSS es separar lo que es la estructura y contenido (HTML) de lo que es su estilo, color, tamaño, decoraciones varias por nombrar algunos ejemplos.

¿Cómo funciona el CSS?

Mediante el CSS, se definen las particularidades visuales y de estilo de una o varias etiquetas. Cuando hablamos de estilos que se pueden aplicar a una etiqueta, nos referimos a por ejemplo: color, fuente tipográfica, alineación, tamaño, posición.

Los ingredientes necesarios para aplicar un estilo son:

— Un elemento HTML (por ejemplo: div, header, body, p.)
— El estilo propiamente dicho (un conjunto de atributos como pueden ser color, tamaño, posición, etc.

Un selector mediante el cual se indica a que etiqueta que aplicará el estilo.

Insertando el CSS en el HTML

IMPORTANTE: En este momento las nuevas incorporaciones de CSS3 están siendo implementadas en las últimas versiones de los navegadores más populares, pero algunas de ellas se encuentran aún en estado experimental. Por esta razón, estos nuevos estilos deberán ser precedidos por prefijos tales como –moz- o -webkit- para ser efectivamente interpretados.

Sintaxis CSS

Una regla CSS consta de un selector y un bloque de declaración, cada declaración esta separada por un punto y coma (;) en el bloque.

El selector apunta al elemento HTML al que desea aplicar estilo.

En este ejemplo, todos los elementos <p> estarán alineados al centro, con un color de texto rojo, esto se asigna en <style> y se aplicara en <body> cuando encuentre un indicador <p>, es decir p{.....} tiene el estilo y cuando encuentre p < > se aplicara en esta etiqueta:

p { color: red; text-align: center; }

Ejemplo explicado

p es un selector en CSS (apunta al elemento HTML al que desea aplicar estilo: <p>).

El color es una propiedad y el rojo es el valor de la propiedad.

text-align es una propiedad y el centro es el valor de la propiedad

Cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información de la hoja de estilo.

Veamos cómo insertar código CSS en nuestro HTML. El código para CSS puede ser colocado directamente en la etiqueta que se quiera estilizar.

Veremos un ejemplo aplicando un color gris en lugar del negro, que es el color por defecto, a todo texto del <body>, utilizando el atributo style:

Pero esta práctica nos priva de la ventaja de tener separado el contenido de su estilo de presentación y no nos permite reutilizar código entre varias páginas, ya que solo aplicaría a esta pagina.

La manera de agregar el estilo antes que se cargue el contenido, es insertarlo en el <head>.

Veamos cómo seria la etiqueta <head>:

<head>
<meta charset="utf-8" />
<title>México</title>
<style type="text/css">
body { color:#333333 }
</style>
</head>

consideremos el siguiente ejemplo, con el nombre ejemplocss1.html:

ejemplocss1.html

<!DOCTYPE html>
<html>

<head>
<style>

body {
background-color: lightblue;
}

h1 {
color: white;
text-align: center;
}

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>

<body>

<h1>Mi primer ejemplo de CSS</h1>
<p>Y esto es un parrafo</p>

</body>
</html>

El resultado:

Explicación del código.

NOTA: Es posible agregar comentarios en los estilos con los caracteres: /* y */

<head>
<style>

body {
background-color: lightblue; /* indica que el color de fondo es de color azul ligero también se puede colocar el color en hex #00ffff, pero hay que localizar el código adecuado*/
}

h1 {
color: white; /* indica que el color del texto es de color blanco también se puede colocar el color en hex #ffffff, esto se le conoce como selector h1, mas adelante se explican*/
text-align: center; /* indica que va centrado */
}

p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>

en el cuerpo del código de html se ve el efecto de:

<body>

<h1>Mi primer ejemplo de CSS</h1>
<p>Y esto es un párrafo</p>

</body>
</html>

Realizamos otro ejemplo de CSS en HTML lo llamaremos ejemplocss2.html

ejemplocss2.html

<!DOCTYPE html>
<html>
<title> Ejemplo 2 de CSS. Estilos genéricos </title>
<head>
      <style type="text/css">

         body {
         background-color: #33ff66;
   background-position:0px;
        cursor:hand;
}

       h1 {color: #205596; background-color:#ffcc00;}
        a {color:#303030;font-style:italic}

       </style>

</head>

<body>

<h1>Mi segundo ejemplo de CSS</h1>
<a href="enlace">Enlace de texto</a>

</body>
</html>

El resultado es este, un color muy llamativo:

Insertando el CSS de forma externa

Una de las ventajas fundamentales del CSS es compartir un mismo estilo entre diferentes páginas HTML. De esta manera, si se quiere cambiar el estilo de todo un sitio, solamente sería necesario modificar los CSS externos y cambiarían los estilos de todas las páginas que carguen el CSS de manera externa.

Existen dos maneras de insertar CSS externo. En ambos casos, es necesario generar un archivo de texto plano con extensión: .css

Sigamos nuestro ejemplo donde lo haríamos de esta manera en un archivo llamado: estilos.css, guardamos el siguiente código:

body {
color:#999999;
}
h1 {
     color : navy;
     margin-left: 20 px;
     }

en este ejemplo usare el editor llamado bluefish, pero pueden usar cualquier otro editor, este esta disponible para Windows en licencia GNU.

Luego en el <head> veremos una manera de cargar el archivo css, en cualquiera de los dos casos, se pueden importar tantos .css como se requiera.

Veamos cada caso:

Carga de un archivo css mediante import,

y carga de un archivo css mediante link:

usemos esto:

ejemplocss3.html

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="estilos.css">
</head>

<body>

<h2>Mi tercer ejemplo de CSS</h2>
<p>Y esto es un parrafo</p>

</body>
</html>

el resultado es que cuando veamos esta pagina en body sera afectado incluyendo todo del color #999999, en lugar del color negro que se ha establecido como preferencia, este ejemplo la llamaremos ejemplocss3.html, en este texto lo pondremos de color gris, ligero para que aprecien los estilos que aplicaremos sobre secciones de nuestro ejercicio :

El atributo rel hace referencia al tipo de relación entre el HTML y el archivo CSS y el atributo href es la URL que puede ser relativo o absoluto. Y podemos apreciar que solo se ha aplicado el estilo para body, H1 no sido usado así que solo se aplica en body.

Revisemos estos conceptos, antes de continuar ya que son necesarios para la aplicación de los estilos :

Anatomía de un estilo

A cada uno de los estilos se lo conoce como “regla”. Vemos quienes son :

— <style >: es la etiqueta que especifica que contendría estilos.

— body: es una variable del tipo de selector. Este atribulo determina qué etiquetas serán afectadas. Mediante distintas sintaxis que veremos inmediatamente, se define cómo se “seleccionará” un elemento determinado para aplicarle el estilo.

— {} ; el estilo es un objeto que contiene diferentes atributos para ser aplicado a un elemento determinado.

— color:#999999: a cada uno de los atributos (que pueden ser uno o más) de un estilo se le llama declaración.

Ésta, a su vez, está compuesta por el nombre del atributo (ej. color) y su valor (ej. #999999).

Selectores CSS

Como hemos visto, una regla CSS (es decir, un estilo) está conformado por:

Selector: que determina a QUIÉN se aplicará el estilo.
Declaración: define QUÉ estilo se aplicará.

Existen varios tipos de selectores y formas de combinarlos. Nos centraremos en los más comunes y tienen un uso más generalizado.

Selector universal

Este selecciona todos los elementos de un documento HTML. Por ejemplo, esta regla aplicará a todos los elementos de una página HTML un fondo de color gris claro.

* {
background-color:#DDDDDD;
}

¿Cómo se lee este selector?
Este selector significa aplicar este estilo a todos los elementos.

Selector por etiqueta

El selector por etiqueta se le utiliza poniendo el nombre de la etiqueta como selector.
Si, por ejemplo, queremos modificar la tipografía de cualquier etiqueta <h1> y que todos se vean igual, lo hacemos de esta manera:

h1 {
color:#DDDDDD;
}

¿Cómo se entiende este selector?

Este selector significa aplicar este estilo a todo elemento cuyo nombre de etiqueta sea igual ahí h1.

Esta modificación afecta a la etiqueta que tenga el nombre del selector y a sus hijos. Si, por ejemplo, tenemos esta situación:

body {
Color:#FF0000;
}
h1 {
color:#DDDDDD;
}

Todos los elementos <body> y todos sus hijos obtendrán el valor de color, exceptuando los elementos que tengan este atributo asignado.
En nuestro ejemplo, <h1> sobrescribirá la propiedad color de <body>.

Aplicando un estilo a varias etiquetas

Un mismo estilo se puede aplicar a varias etiquetas, si tenemos por ejemplo:

h1 {
background-color = #FF0000;
h2 {
background-color = #FF0000;
}

Se puede aplicar un mismo estilo a varias etiquetas separando los nombres de etiqueta con el signo de coma (,). El siguiente código es exactamente lo mismo que el código anterior:

h1, h2 {
background-color = #FF0000;
}

Lo que significa: aplicar este estilo a toda etiqueta que se llame h1 o h2.

Es posible agregar atributos a un estilo.

Sería como una especie de “herencia”. En donde algunos atributos pueden ser compartidos con otras etiquetas y otros ser exclusivos de una o varias etiquetas en particular.
Por ejemplo, en este caso, la etiqueta h1 compartirá el valor del atributo background-color y tendrá un valor exclusivo para el atributo font-family.

h1, h2 {
background-color = #FF0000;
}
h1 {
font-family:
Georgia,
serif;
}

Selector descendente por etiqueta

Este tipo de selector permite “seleccionar” una etiqueta que esté dentro de otras.
Lamentablemente, la sintaxis puede ser promotora de errores. Para indicar que se quiere afectar únicamente a una etiqueta que esté a su vez dentro de otra, se lo indica colocando el nombre de una etiqueta al lado de la otra separado por espacios. Por ejemplo, este estilo:

header h1 {
font-family: Georgia, serif;
font-size: 36px;
}

¿Cómo se lee el selector descendente?

De acuerdo a nuestro ejemplo, se lee como: aplicar este estilo a toda etiqueta <h1> que sea hijo o descendiente de <header>.

Selector por id

Este tipo de selección permite que solo se vean afectados los elementos que tengan un id determinado. La sintaxis para determinar un selector por id es anteponiendo el signo: # al valor del atributo id presente en el HTML distintos tipos de elementos con un mismo valor para el atributo lodos los valores que coincidan con el nombre del selector (sin el signo #) serán afectados. Supongamos que tuviéramos la siguiente linea en un HTML

<h1 id="tituloPrincipal">Castillo Chapultepec /h1>

El elemento de nuestro ejemplo y cualquier otro elemento cuyo atributo id sea igual a: tituloPrincipal será afectado por este código en un CSS:

#tituloPrincipal {
font-family:Georgia, serif;
font-size:36px;
}

¿Cómo se lee el selector por Id?

Este selector significa aplicar este estilo a todo elemento cuyo atributo id sea igual a tituloPrincipal.

Selector por clase

La selección por el atributo clase permite aplicar un estilo a un elemento, en base al valor del atributo class. La forma de hacerlo es anteponiendo el signo de punto (.) al valor del atributo class que se quiera modificar.

Esta práctica permite tener más precisión y “selectividad”. En el caso que haya varias etiquetas con el mismo nombre, y solo quisiéramos afectar a una de ellas y no podemos hacerlo por medio de su nombre de id o dado el caso no es conveniente hacerlo, se puede utilizar esta técnica.

Veamos un ejemplo.

Si tenemos una etiqueta como se muestra, a continuación, en un HTML:

<h1 class="titulo">Castillo de Chapultepec</h1>

Podríamos aplicarle un estilo en el CSS de esta manera:

.titulo {
}
font-family: Georgia, serif;
line-height: 50px;
}

¿Cómo se lee un selector de clase?

Este selector significa aplicar el estilo a toda etiqueta cuyo atribulo class sea igual a: titulo.
Aplicando varios estilos con el selector de clase. A un atributo class se le puede asignar varios nombres. En este caso, se aplicará a la etiqueta los estilos correspondientes de cada una de las clases.

En el HTML:

<h1 class="titulo resaltado" >Castillo de Chapultepec </h1>

En el CSS:

.titulo {
font-family: Georgia, serif;
font-size: 36px;
}

.resaltado {
color: white;
}

También es posible seleccionar una etiqueta que tenga una o más clases. Por ejemplo:

.titulo.resaltado {
background-color: red }

Esta regla se lee como: aplicar el estilo a toda etiqueta cuyo atribulo class contenga entre sus valores a: titulo y resaltado.

Selector descendiente de clases

Este selector no debe ser confundido con el selector de clases múltiple.
Es muy fácil confundirse y tiene una aplicación distinta:

.titulo .resaltado {
background-color: red;
}

Este selector significa aplicar este estilo a toda etiqueta que tenga un atributo class con el valor .resaltado y que sea descendiente de una etiqueta que tenga un atributo class cuyo valor sea igual a .titulo

Combinación de selectores

Si aún se necesita ser más específico en la selección de etiquetas. Se pueden combinar los diferentes selectores.
Combinación del selector de etiqueta y selector universal

header * h1 { color: red;}

Este estilo significa aplicar el estilo a toda etiqueta que sea, a su vez, hijo de una etiqueta <header>. Vale aclarar que este estilo no será aplicado a todo hijo directo de una etiqueta <header>, porque el selector comienza a tener efecto a partir de los hijos de esta etiqueta.

Combinación del selector de etiqueta con el selector de id

p#titulo { color: red;}

Este estilo significa aplicar este estilo a toda etiqueta <p> cuyo atributo id sea igual a titulo.

Combinación del selector de etiqueta con el selector de clase

p.resaltado { color: red;}

Este estilo significa aplicar este estilo a toda etiqueta <p> que tenga como valor del atributo class el valor: resaltado. Si tuviéramos etiquetas <p> en alguna parte de un HTML, con la regla de nuestro ejemplo, se debería ver en color rojo solamente el <p> que dice: Este texto se debe ver Rojo, que es la única etiqueta que cumple con la condición de la regla.

<p> Este texto se verá negro</p>
<p class="resaltado">Este texto se debe verse Rojo</p>

Combinación de combinaciones

También es posible combinar combinaciones:

header#principal h1.titulo { color: red;}
<body>
    <article
       <header id=principal>
           <hgroup>
             <h1 class="titulo">Castillo Chapultepec</hl>
             <h3>Escenarios majestuosos de México</h3>
          </hgroup>
       </header>
    </article>
</body>

En este caso, significa: aplicar el estilo a toda etiqueta <h> cuyo atributo class sea igual a titulo y que sea descendiente de una etiqueta <header> cuyo id sea igual a principal.

Para ello tomaremos un ejercicio de la unidad anterior para poder apreciarlo usemos el ejemplo4.html, y lo guardamos como ejemplo4css.html y consideramos lo siguiente:

para estilos.css

body {
color:#999999;
}
h1 {
color: navy;
margin-left: 20px;
}

.titulo {
font-family: Georgia, serif;
font-size: 36px;
}

.resaltado {
color: red;
}

y en ejemplocss4.html, los cambios se ven aquí en color

ejemplocss4.html

<!DOCTYPE html>
<html lang="es">

<head>

         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>
        <link rel="stylesheet" href="estilos.css">
        <title>Conociendo HTML5</title>

</head>
<body>

<article>
<header>
             <h1 class="titulo resaltado">Castillo de Chapultepec</h1> /* a pesar que se definio h1 el estilo llamado con class declara titulo resaltado como estilos desde css */
             <h1>El Castillo de Chapultepec es un edificio ubicado en la primera sección del bosque de Chapultepec en la Ciudad de México, a 2325 metros sobre el nivel del mar. Tiene una superficie de 11.8 hectáreas y un diseño arquitectónico principalmente barroco y neoclásico.</h1> /* aqui se aplica directamente el estilo h1 desde css, este es por etiqueta*/
    </header>
    <section>

           <h4> Información general del Castillo </h4>
              <p>El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
    </section>

    <section>
                <h4>Acceso:</h4>
               <p>Si utilizas el S. T. C. Metro, las estaciones más cercanas son: </p>
               <p>Chapultepec - línea 1. Esta estación tiene acceso directo al Bosque de Chapultepec.</p>
               <p>Auditorio - línea 7. Una vez que hayas llegado a la estación Auditorio, debes tomar la línea 7 del Metrobús y bajarte en la estación Gandhi. De ahí hay que caminar al interior del Bosque hasta la rampa que sube al museo.</p>
     </section>

    <section>
             <h4 class="titulo"> Entrada general: $90.00 </h4> /* se aplica solo el estilo titulo */
             <p>Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: https://ventadeboletosenlinea.inah.gob.mx/</p>
   </section>
   <section>
             <h4 class="resaltado"> Horarios : </h4> /* se aplica solo el estilo resaltado */
             <p>Horario: martes a domingo, 9 a 17 horas. (Este horario no cambia en días festivos o periodos vacacionales)</p>
    </section>
   <footer>
           <h5>Todos los derechos reservados</h5>
   </footer>
</article>

</body>
</html>

el resultado de esto:

Ahora realizamos los siguientes cambios, en estilos.css, agreguemos esto:

body {
color:#999999;
}
h1 {
color: navy;
margin-left: 20px;
}

.titulo {
font-family: Georgia, serif;
font-size: 36px;
}

.resaltado {
color: red;
}

.importante {
font-weight:bold;
color:#330033;
}

y en ejemplocss4.html

<section>
<h4 class="resaltado"> Horarios : </h4>
<p class="importante">Horario: martes a domingo, 9 a 17 horas. (Este horario no cambia en días festivos o periodos vacacionales)</p>
</section>

lo que se observara es lo siguiente en la sección:

otro ejemplo es poner lo siguiente al final en estilos.css, este esta relacionado con id en HTML, pone de color #999900, y lo envía a la derecha :

#noticia1 {
color:#999900;
float:right;
}

y esto en html:

<footer>
<h5 id="noticia1">Todos los derechos reservados</h5>
</footer>

el resultado debería ser:

Evidencia: modifiquen el ejemplocss4.html, para cambiar el color de fondo a un color amarillo tenue (uds. deciden el tono que mas les agrade de amarillo, y color de letras del frente a color negro) pude ser el color asignado por nombre o por numero en hexadecimal.

se pueden guiar de la siguiente forma en estilos.css, uds, decidan en que parte de css actúa para toda la pagina :

background-color: lightblue;
color: green;

Selectores de atributos CSS

Es posible diseñar elementos HTML que tengan atributos o valores de atributos específicos.

El selector [atributo] se utiliza para seleccionar elementos con un atributo específico.

El siguiente ejemplo selecciona todos los elementos <a> con un atributo de destino:

a[target] {
background-color: yellow;
}

en estilos.css al final agregue:

a[target] {
background-color: yellow;
}

y en HTML ejemplocss4.html

<p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <a href="https://ventadeboletosenlinea.inah.gob.mx" target="_top">Venta de Boletos</a></p>

veamos este cambio realizado

a[target] {
background-color: yellow;
}

en estilos.css estamos indicando que aquellas etiquetas que tengan el atributo de <a ... /a> que es hacer referencia a un "link" externo en este caso serían marcadas de color amarillo, y que se a indicado como target="_top" (nota _top es solo la asignación de un string, pero puede ser cualquier texto como esto: target="aqui", o cualquier otro string sin espacios) cambiara su aspecto del tradicional a lo se ve en el ejemplo en la imagen, y que el "link" se vera representado por el texto Venta de boletos.

el resultado de esto:

El selector [atributo|="valor"] se utiliza para seleccionar elementos con un valor de atributo que contiene una palabra específica.

en estilos.css, agregue al final lo siguiente:

[class|="top"] {
background: yellowgreen;
}

top puede ser otro texto sin espacios en el.

en ejemplocss4.html agregamos en:

<section>
             <h4 class="titulo"> Entrada general: $90.00 </h4>
             <p class="top-texto">Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p>El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <a href="https://ventadeboletosenlinea.inah.gob.mx" target="_top">Venta de Boletos</a></p>
   </section>

Resultado:

revisemos el código en HTML class="top-texto" con ello solicitamos el atributo llamado top y sera aplicado al parrafo con <p > </p>, podemos ver que se declaro como top pero hemos agregado un "-" y lo puede asignar de esa forma pero no toptexto eso no seria considerado, podemos decir que si el atributo top- en HTML sera considerado usando un texto adicional pero no llevara espacios, lo cual podría ser : class="top-header" y seria aplicado.

Selector CSS [atributo^="valor"]

El selector [atributo^="valor"] se utiliza para seleccionar elementos con el atributo especificado, cuyo valor comienza con un valor especificado.

El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que comienza con "top":

Nota: ¡El valor no tiene que ser una palabra completa!

agregue al final de estilos.css

[class^="top1"] {
background: orangered;
}

en ejemplocss4.html esto:

<section>

           <h4> Informacion general del Castillo </h4>
              <p class="top1texto">El castillo de Chapultepec .</p>
              <p>Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
</section>

este caso es muy similar al anterior pero agrega la característica que con que lleve la secuencia del nombre top1 y tenga un "-" o no se aplica el atributo

El selector [attribute$="value"] se utiliza para seleccionar elementos cuyo valor de atributo termina con un valor específico.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que termina en "prueba":

Nota: ¡El valor no tiene que ser una palabra completa!

en estilos.css agregue al final:

[class$="prueba"] {
background: blueviolet;
color:white;
}

en ejemplocss4.html:

<section>
           <h4> Informacion general del Castillo </h4>
              <p class="top1texto">El castillo de Chapultepec .</p>
              <p class="primer_prueba">Las columnas están recubiertas de yeso y las cornisas contienen medallones con el emblema de la República Mexicana </p>
</section>

resultado:

el <p class="primer_prueba"> también puede ser como <p class="primerprueba"> o bien <p class="mi-prueba">

El selector [attribute*="value"] se utiliza para seleccionar elementos cuyo valor de atributo contiene un valor específico.
El siguiente ejemplo selecciona todos los elementos con un valor de atributo de clase que contiene "mus" al final del nombre :

Nota: ¡El valor no tiene que ser una palabra completa!

agrege al final en estilos.css

[class*="mus"] {
background: greenyellow;
}

en ejemplocss4.hml

<p class="revision-mus">El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <a href="https://ventadeboletosenlinea.inah.gob.mx" target="aqui">Venta de Boletos</a></p>

Resultado :

aquí usamos este estilo y en la misma linea usamos el estilo por la etiqueta <a...../a> y aquellas que tengan "mus" en el nombre al final.

Las pseudoclases

Se utiliza una pseudoclase para definir un estado especial de un elemento.

Existen dos tipos de pseudo-clases: las que indican estados y los estructurales.

Entre las que se refieren a estados, en el CSS “viejo” podemos encontrar las siguientes:

:link
:visited
:hover
:focus
:active

Por ejemplo, se puede utilizar para:

Aplicar estilo a un elemento cuando un usuario pasa el mouse sobre él, diseñe los enlaces visitados y no visitados de manera diferente.

Aplicar estilo a un elemento cuando recibe el foco (cuando se pasa el ratón por encima del elemento)

La sintaxis de pseudo-classes:

selector:pseudo-class {
property: value;
}

Los enlaces se pueden mostrar de diferentes maneras, para realizar este ejercicio crearemos otro css del nombre estilos_2.css, que contendrá lo siguiente, los enlaces se pueden mostrar de diferentes maneras, así como se vio en la unidad anterior el "link" se muestra de un color, al ingresar el color cambia en las pseudo-clases se puede personalizar :

/* link no visitado */

a:link {
color: #FF0000; /* rojo */
}

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

/* mouse sobre un link */
a:hover {
color: #FF00FF; /* magenta */
}

/* link selecionado */
a:active {
color: #0000FF; /*azul profundo*/
}

y en el ejemplocss4.html se le agregara el otro css. de la siguiente manera:

<head>

         <meta charset="utf-8" />
        <meta name=”description” content=”Ejemplo de HTML5”>
        <meta name=”keywords” content=”CECATI No. 89, Celaya, Guanajuato”>
        <link rel="stylesheet" href="estilos.css">
        <link rel="stylesheet" href="estilos_2.css">
        <title>Conociendo HTML5</title>

</head>

y en la otra parte de body:

<section>
             <h4 class="titulo"> Entrada general: $90.00 </h4>
             <p class="top-texto">Los domingos la entrada es gratuita para todo el público nacional y para los extranjeros residentes en México.</p>
             <p class="revision-mus">El museo informa: los únicos puntos de venta autorizados para la compra de boletos del museo son el sitio web: <a href="https://ventadeboletosenlinea.inah.gob.mx" target="aqui">Venta de Boletos</a></p>

             <p><b><a href="http://cecati89-plantel-ind.com" target="cecati">link a la pagina de este curso</a></b></p>

   </section>

lo que indica:
1.- se carga otra hoja de estilos estilos_2.css
2.- se solicita el estilo de la nueva referencia de estilos_2.css

el link agregado debería ser de color verde y cuando se coloca el cursor sobre el se vería de color magenta, pero tiene un fondo de color amarillo, pero de donde viene ese color amarillo si no lo he indicado aqui ? espero sus conclusiones de este estilo en particular.

Nota: a:hover DEBE venir después de a:link y a:visited en la definición de CSS para que sea efectivo. a:active DEBE venir después de a:hover en la definición de CSS para que sea efectivo. Los nombres de pseudoclases no distinguen entre mayúsculas y minúsculas.

El resultado cuando no esta el ratón sobre el link que se agrego:

y cuando el cursor esta sobre el link:

Para colocar un hover on <div> (colocar el cursor sobre un <div> )
:hover pseudo-class a <div> :

div:hover {
background-color: blue;
}

Este ejemplo es de forma directa solo seria cuestión de separar en css y html lo que es necesario, como es una prueba individual llamemos esto individual1.html:

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
color: white;
padding: 25px;
text-align: center;
}

div:hover {
background-color: blue;
}
</style>
</head>
<body>

<p>Pase el mouse sobre el elemento div a continuación para cambiar su color de fondo:</p>

<div>Pasa el ratón sobre esto</div>

</body>
</html>

el resultado es el siguiente:

Uds. hagan este ejercicio y revisen lo que sucede, y analicen el código.

este otro como individual2.html

<!DOCTYPE html>
<html>
<head>
<style>
p {
display: none;
background-color: yellow;
padding: 20px;
}

div:hover p {
display: block;
}
</style>
</head>
<body>

<div>Desplaza el ratón por este lugar para ver lo que hago
<p>Aquí estoy Hola!</p>
</div>

</body>
</html>

el resultado lo capturan y lo enviarán como actividad individual2.html, con sus capturas de pantalla, prueben cambiando el color de fondo e intenten cambiar el color de la letra

La pseudo clase :first-child coincide con un elemento específico que es el primer hijo de otro elemento.

En el siguiente ejemplo, el selector coincide con cualquier elemento <p> que sea el primer hijo de cualquier elemento, individual3.html:

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child {
color: red;
}
</style>
</head>
<body>

<p>Algún Texto</p>
<p>Algún Texto</p>

<div>
<p>Algún Texto</p>
<p>Algún Texto</p>
</div>

</body>
</html>

Resultado:

En el siguiente ejemplo, el selector coincide con el primer elemento <i> de todos los elementos <p> individual4.html

:

<!DOCTYPE html>
<html>
<head>
<style>
p i:first-child {
color: blue;
}
</style>
</head>
<body>

<p>Yo soy una persona <i>presistente</i> en mis proyectos. Yo soy una persona <i>persistente</i> en mis proyectos.</p>
<p>Yo soy una persona <i>presistente</i> en mis proyectos. Yo soy una persona <i>persistente</i> en mis proyectos.</p>

</body>
</html>

Resultado:

La pseudoclase :lang le permite definir reglas especiales para diferentes idiomas.

En el siguiente ejemplo, :lang define las comillas para los elementos <q> con lang="no": individual5.html

<!DOCTYPE html>
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>

<p>En el texto <q lang="no">una marca en el parrafo</q> en el texto.</p>
<p>En este ejemplo, :lang define la marcación para elementos q con lang="no":</p>

</body>
</html>

Resultado:

Evidencia:
Establezca el color de fondo en rojo cuando pase el ratón sobre un enlace, presento una fracción del código uds. completen lo que falta, y lo envían como evidencia de pseudoclases, ( pseudoclases_1.html ) y con capturas de pantalla (html completo y la imagen del resultado)

<style>

.......
{
background-color: red;
}
</style>

<body>

<h1>Este es encabezado.</h1>
<p>Esto es un parrafo</p>
<a href="https://cecati89-plantel-ind.com">Esto es un link</a>

</body>

pseudo-clases estructurales
:lang(idioma)	Apunta hacia elementos que tengan definido el atributo lang con el valor indicado entre los paréntesis. Por ejemplo: :lang(en){...} Seleccionará elementos como: <p lang="en">English text</p>
:first-child	Selecciona el primer elemento de una serie de elementos similares. Ejemplo: el primer “li” de una lista, el primer “tr" de una tabla, el primero de una serie de párrafos, etc.
pseudo-clases relativas a los estados
:target	Selecciona el elemento cuyo id fue utilizado en la URL que cargó la página (usando enlaces comúnmente llamados “anclas”, que terminan con un numeral y el id del elemento). Por ejemplo: si pulsamos un enlace similar a este: <a href="#noticia3">Noticia 3</a> El navegador desplazará el contenido de la página, dejando al inicio de la ventana el elemento cuyo id sea igual a “noticia3”, y en ese momento, le sucederá el estado “target”. Es decir, se aplicará lo definido en la hoja para ese estado: div:target{ background-color:gray; border:lpx solid black; }
:enabled	Selecciona los elementos de la interfaz que pueden llegar a tomar el foco o ser seleccionados. Típicamente se aplica a elementos de formulario, que no estén específicamente deshabilitados. Ejemplo: input:enabled{...}
:disabled	Por el contrario, apunta a los elementos específicamente deshabilitados mediante el atributo disabled de HTML o mediante JavaScript. Ejemplo: input:disabled{...}
:checked	Se aplica cuando el elemento de formulario de tipo checkbox o radio tiene definidos los atributos "selected” o “checked”. Ejemplo: input:checked{...}
:not(selector)	Existen casos en los que es más simple seleccionar lo que “no” sea determinado selector. Por ejemplo, si en un formulario queremos aplicar un estilo a todos los inputs menos al input de tipo submit. En vez de hacer la lista de los ¡dentificadores o clases que deberíamos aplicar a todos los inputs que no sean de tipo “submit”. Podríamos seleccionarlos así: input: not ( [type=" submit" ]){...}
pseudo-clases relativas a los estructurales recientemente incorporadas
:root	Ejemplo: :root{...} No muy usado, ya que solo seleccionará el elemento raíz de un documento HTML, que siempre será la etiqueta <html>: <html lang="sp">
:nth-chlld(n)	Selecciona el elemento indicado de una serie de elementos similares, anidados dentro de un mismo elemento padre. Por ejemplo: el segundo “11” de una lista, el lercer “tr" de una tabla, el penúltimo párrafo de una serie, etc. Ii:nth-child(2) {...} Este ejemplo selecciona el segundo li de una serie. Dentro de los paréntesis podemos escribir un número, o las palabras even (impar) y odd (par). Ejemplo: selecciona las filas impares de una tabla: tr:nth-child(odd){ background-color:gray; } Si el valor es negativo, comenzará a contar desde el último elemento de la serie hacia el principio (de atrás hacia adelante): Este ejemplo seleccionará el anteúltimo tr de una tabla: tr:nth-child(-2){ color: red; }
:nth-last-child(n)	Selecciona el número que indiquemos entre sus paréntesis, pero comenzando desde el último elemento hacia adelante: li:nth-last-child(3){ color:red; } (seleccionará el tercer li desde el último hacia adelante)
:nth-of- type(n)	A diferencia de los anteriores selectores, que requerían una serie ininterrumpida de elementos homogéneos (tr, li), los selectores que incluyen “of-type” en su nombre permiten seleccionar el segundo, tercer elemento, etc. pero de una serie no necesariamente homogénea. Por ejemplo, permiten seleccionar “el tercer párrafo de la página”, más allá de que no existan tres párrafos seguidos y aunque estén Interrumpidos por encabezados h2, h3, etc. Veamos el c.r.o <h2>Título</h2> <p>Primer párrafo</p> <h3>Subtítulo</h3> <p>Segundo párrafo</p> <h3>0tro subtítulo</h3 > <p>Tercer párrafo</p> Si queremos apuntar al tercer párrafo, lo haremos así: p:nth-of-type(3){ }
:nth- last-of- type(n)	Lo mismo que el anterior, pero comenzando desde el final (equivale a utilizar números negativos dentro de los paréntesis del selector anterior).
:last-chíld	Similar a first-chiId pero para seleccionar el último elemento de una serie: td:nth-last-child{ text-align:right; } Esto alineará a la derecha el texto del último td de cada fila de una tabla (algo muy útil para precios y demás datos numéricos).
:first-of- type	Selecciona la primera aparición del elemento indicado dentro del mismo elemento padre. Por ejemplo, el primer div que exista en el body o el primero de los elementos que tenga aplicada una clase: div:first-of-type{...} .importante:first-of-type{...} :last-of-type Lo mismo que el anterior, pero de atrás hacia adelante.
:only-child	Selecciona el elemento cuando es el único de su tipo dentro del elemento padre que lo contiene. Útil para cuando el contenido es dinámico, y proviene de una base de datos, pudiendo detectar así cuando devolvió un único resultado, de modo de darle formato diferente solo en ese caso. Ii:only-child{...}
:only-of-type	Igual al anterior, pero sin importar en qué parte del conjunto aparece.
:empty	Solo aplica lo declarado si el elemento no posee contenidos entre su apertura y su cierre, por ejemplo: p:empty{...} Si en el código hubiera un párrafo vacío, lo seleccionará: <px/p> Su uso es práctico cuando el contenido de un elemento proviene de una consulta a una base de datos, que pudiera no obtener resultados.

Pseudo-elementos

Un pseudoelemento CSS se utiliza para diseñar partes específicas de un elemento.

Por ejemplo, se puede utilizar para:

Aplicar estilo a la primera letra o línea de un elemento
Insertar contenido antes o después del contenido de un elemento

Sintaxis:

selector::pseudo-elemento {
property: value;
}

El pseudoelemento ::first-line se utiliza para agregar un estilo especial a la primera línea de un texto.

El siguiente ejemplo da formato a la primera línea del texto en todos los elementos <p>, realicemos un ejemplo de esto con el

ejemplocss_p1.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
    <p>Puede utilizar el pseudoelemento ::first-line para agregar un
      efecto especial a la primera línea de un texto. Un poco más de
      texto. Y aún más, y más, y más, y más, y más, y más, y más, y más,
      y más, y más, y más, y más.</p>
    <table width="25%" cellspacing="2" cellpadding="2" border="1">
      <tbody>
        <tr>
          <td valign="top">
            <p>Ejemplo de primer linea cuando hay un
              elemento p que llega al final del espacio por la linea de texto </p>
          </td>
          <td valign="top">Otro texto ocupando celda del lado derecho<br>
          </td>
        </tr>
        <tr>
          <td valign="top"><br>
          </td>
          <td valign="top"><br>
          </td>
        </tr>
      </tbody>
    </table>
    <p>Aqui vemos otro efecto de ::first-line este efecto se limita al ajuste del texto que se entre los elementos p </p>
    <p> </p>
</body>
</html>

Resultado:

Nota: El pseudoelemento ::first-line solo se puede aplicar a elementos a nivel de bloque.

Las siguientes propiedades se aplican al pseudoelemento :: de primera línea:

propiedades de fuente

propiedades de color

propiedades de fondo

espaciado de palabras

espaciado de letras

decoracion-de-texto

alineación vertical

transformación de texto

altura de la línea

claro

Observe la notación de dos puntos dobles: ::primera línea versus :primera línea

Los dos puntos dobles reemplazaron la notación de dos puntos para los pseudoelementos en CSS3. Este fue un intento del W3C de distinguir entre pseudoclases y pseudoelementos.

La sintaxis de dos puntos se utilizó tanto para pseudoclases como para pseudoelementos en CSS2 y CSS1.

Para compatibilidad con versiones anteriores, la sintaxis de dos puntos es aceptable para los pseudoelementos CSS2 y CSS1.

El pseudoelemento ::first-letter se utiliza para agregar un estilo especial a la primera letra de un texto.

El siguiente ejemplo da formato a la primera letra del texto en todos los elementos <p>, ejemplo de esto con el

ejemplocss_p2.html:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}

p::first-letter {
color: #009900;
font-size: xx-large;
}
</style>
</head>
<body>
    <p>Puede utilizar el pseudoelemento ::first-line para agregar un
      efecto especial a la primera línea de un texto. Un poco más de
      texto. Y aún más, y más, y más, y más, y más, y más, y más, y más,
      y más, y más, y más, y más.</p>
    <table width="25%" cellspacing="2" cellpadding="2" border="1">
      <tbody>
        <tr>
          <td valign="top">
            <p>Ejemplo de primer linea cuando hay un
              elemento p que llega al final del espacio por la linea de texto </p>
          </td>
          <td valign="top">Otro texto ocupando celda del lado derecho aquí no lleva el elemento p <br>
          </td>
        </tr>
        <tr>
          <td valign="top"><br>
          </td>
          <td valign="top"><br>
          </td>
        </tr>
      </tbody>
    </table>
    <p>Aqui vemos otro efecto de ::first-line este efecto se limita al ajuste del texto que se entre los elementos p </p>
    <p>Hemos usado ::first-letter pseudo-elemento para agregar efecto especial al primer carácter de los textos de este ejemplo!</p>
</body>
</html>

El resultado:

tenemos una asignación de tamaño nuevo: xx-small, x-small, small, medium, large, x-large, xx-large, xxx-large

Es el tamaño absoluto, basadas en el tamaño de fuente predeterminado del usuario (que es mediano). Prueba cambiar font-size: xx-large; con xx-small, x-small, small, medium, large, x-large, xxx-large

En todos los navegadores es funcional este codigo.

El pseudoelemento ::before se puede utilizar para insertar algún contenido antes del contenido de un elemento ejemplo de esto con el

ejemplocss_p3.html

El siguiente ejemplo inserta una imagen antes del contenido de cada elemento <h1>:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <style>
h1::before {
content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>Esto es un header h1 </h1>
<p>::before pseudo-elemento inserta el contenido antes de un elemento.</p>
</body>
</html>

para la imagen que esta en content: url(smiley.gif); pueden descargar de internet una imagen de este tipo, y dejala en el directorio donde esta el ejemplo de html, coloquen el nombre correcto y el resultado:

El pseudoelemento ::after se puede utilizar para insertar algún contenido después del contenido de un elemento.

El siguiente ejemplo inserta una imagen después del contenido de cada elemento <h1>, ejemplo de esto con el

ejemplocss_p4.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <style>
h1::after {
content: url(smiley.gif);
}
</style>
</head>
<body>

<h1>Esto es un header h1 </h1>
<p>::after pseudo-elemento inserta el contenido después de un elemento.</p>
</body>
</html>

El pseudoelemento ::selection Las siguientes propiedades CSS se pueden aplicar a ::selection: color, background, cursor, outline.

El siguiente ejemplo hace que el texto seleccionado sea rojo sobre un fondo amarillo, cuando se cargue en el navegador seleccione un texto, o parte de el, ejemplo de esto con el ejemplocss_p5.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8">
    <style>
::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>

<h1>Esto es un header h1 </h1>
<p>::selection pseudo-elemento en algún lugar seleccione texto</p>
</body>
</html>

Evidencia:

Establece el color de fondo en rojo, de la primera línea del párrafo, agrega lo necesario para que sea interpretado en el navegador, lo envían como evidencia de pseudoelementos, ( pseudoelementos_1.html ) y con capturas de pantalla (html completo y la imagen del resultado), las pseudoclases se pueden combinar con los pseudoelementos , primero la pseudoclase y despues el pseudoelemento, .p_class::p_elemento

Resumen de las psudoclases

Selector	Ejemplo	Descripcion
:active	a:active	Seleciona el link activo
:checked	input:checked	Selecciona cada elemento <input> marcado
:disabled	input:disabled	Selecciona cada elemento <input> deshabilitado
:empty	p:empty	Selecciona cada elemento <p> que no tiene hijos
:enabled	input:enabled	Selecciona cada elemento <input> habilitado
:first-child	p:first-child	Selecciona cada elemento <p> que sea el primer hijo de su padre
:first-of-type	p:first-of-type	Selecciona cada elemento <p> que sea el primer elemento <p> de su padre
:focus	input:focus	Selecciona el elemento <input> que tiene foco
:hover	a:hover	Selecciona enlaces al pasar el mouse sobre el
:in-range	input:in-range	Selecciona elementos <input> con un valor dentro de un rango específico
:invalid	input:invalid	Selecciona todos los elementos <input> con un valor no válido
:lang(language)	p:lang(it)	Selecciona cada elemento <p> con un valor de atributo lang que comienza con "it"
:last-child	p:last-child	Selecciona cada elemento <p> que sea el último hijo de su padre
:last-of-type	p:last-of-type	Selecciona cada elemento <p> que sea el último elemento <p> de su padre
:link	a:link	Selecciona todos los enlaces no visitados
:not(selector)	:not(p)	Selecciona cada elemento que no sea un elemento <p>
:nth-child(n)	p:nth-child(2)	Selecciona cada elemento <p> que es el segundo hijo de su padre
:nth-last-child(n)	p:nth-last-child(2)	Selecciona cada elemento <p> que sea el segundo hijo de su padre, contando desde el último hijo
:nth-last-of-type(n)	p:nth-last-of-type(2)	Selecciona cada elemento <p> que sea el segundo elemento <p> de su padre, contando desde el último hijo
:nth-of-type(n)	p:nth-of-type(2)	Selecciona cada elemento <p> que es el segundo elemento <p> de su padre
:only-of-type	p:only-of-type	Selecciona cada elemento <p> que sea el único elemento <p> de su padre
:only-child	p:only-child	Selecciona cada elemento <p> que sea el único hijo de su padre
:optional	input:optional	Selecciona elementos <input> sin atributo "requerido"
:out-of-range	input:out-of-range	Selecciona elementos <input> con un valor fuera de un rango especificado
:read-only	input:read-only	Selecciona elementos <input> con un atributo de "solo lectura" especificado
:read-write	input:read-write	Selecciona elementos <input> sin atributo de "solo lectura"
:required	input:required	Selecciona elementos <input> con un atributo "requerido" especificado
:root	root	Selecciona el elemento raíz del documento.
:target	#news:target	Selecciona el elemento #news activo actual (se hace clic en una URL que contiene ese nombre de ancla)
:valid	input:valid	Selecciona todos los elementos <input> con un valor válido
:visited	a:visited	Selecciona todos los enlaces visitados

Resumen de los psudoelementos

Selector	Ejemplo	Descripcion
::after	p::after	Insertar algo después del contenido de cada elemento <p>
::before	p::before	Insertar algo antes del contenido de cada elemento <p>
::first-letter	p::first-letter	Selecciona la primera letra de cada elemento <p>
::first-line	p::first-line	Selecciona la primera línea de cada elemento <p>
::marker	::marker	Selecciona los marcadores de los elementos de la lista.
::selection	p::selection	Selecciona la parte de un elemento que es seleccionada por un usuario

Los prefijos

Vamos a adelantarnos a un tema relacionado con la sintaxis de CSS, que aplicaremos mucho a partir de los siguientes capítulos: los prefijos.

En el proceso de evolución de los navegadores, algunos eligen adelantarse y comenzar a interpretar experimentalmente algunas propiedades CSS cuando aún no están estandarizadas; en ese caso, el W3C no les permite implementarlas con la sintaxis futura, y por lo tanto los desarrolladores de navegadores recurren a agregar un prefijo, que solo funcionará en ese navegador, advirtiendo al diseñador que quiera hacer uso de esa funcionalidad que todavía no es parte del estándar (y previniendo que en el futuro todavía pudiera cambiar la sintaxis definitiva de esa propiedad, lo que haría que dejase de funcionar si el diseñador hubiera usado directamente la sintaxis sin prefijo, obligándolo a corregir todos sus códigos). Este cambio de sintaxis ha sucedido varias veces ya en la breve historia de HTML5, por ejemplo, en el caso de los degradés.

Esta política nos permite generar código compatibilizado, ya que si deseamos que los usuarios de versiones de algún navegador que se animó a interpretar algo “antes de tiempo" puedan ver ese efecto, simplemente deberemos agregar a siguientes prefijos:

Prefijo:        Navegador:
-moz-            Mozilla Firefox
-webkit-        Safari y Chrome
-0-                Opera
-ms-             Internet Explorer

-khtml- Konqueror (navegador preinstalado en algunos Linux)

Un ejemplo de código ya compatibilizado:

.tres__columnas {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;

-moz-column-width: 120px;
-webkit-column-width: 120px;
column-width: 120px;

-moz-column-gap: 24px;
-webkit-column-gap: 24px;
column-gap: 24px;

-moz-column-rule : Ipx solid #999;
-webkit-column-rule: lpx solid #999;
column-rule: lpx solid #999;
}

Unidades de medida

Las unidades de medida son comunes a varios atributos como margin, width, padding por mencionar algunos.

Toda medida que no tenga asignada una unidad de medida será ignorada. Excepto que el número asignado sea 0 (cero). Las unidades de medida deben colocarse a continuación de un número sin espacios.

Unidades de medida absolutas

mm: milímetros.
cm: centímetros.
in: pulgadas. 1 pulgada son 2,54 cm.
pt: puntos. 1 punto son 1/72 pulgadas que son 0,035 mm aproximadamente.
pe: esta medida representa picas. 1 pica es igual a 12 puntos y 0,42 mm aproximadamente.

Unidades de medida relativas

em: esta medida es igual a los puntos de correspondientes a la fuente que se esté utilizando en la etiqueta.
px: pixels, el tamaño del pixel depende de la densidad de pantalla en donde se lo vea.
ex: esta medida corresponde al alto de la letra x de una fuente.

Modelo de cajas

El CSS se basa en el diseño de cajas. Es decir, todo contenido que coloquemos dentro de una etiqueta estará dentro de un rectángulo.
Dicho sea de paso, en geometría, un cuadrado también es considerado un rectángulo.
Es fundamental entender el llamado Modelo de cajas y como se estructura una caja.

Las cajas tienen la estructura de varias cajas superpuestas. Entendiendo su estructura podremos entender qué efecto tendía su modificación.

Veamos los detalles:

Contenido: en esta caja, se ubica el texto, imagen, etc.

Padding: se trata del área que se encuentra a partir del limite del contenido hacia el exterior.

El padding tomará el color de fondo

Border: el borde es el contorno del padding. Puede tener color, grosor y diferentes opciones de estilo como, por ejemplo, línea como sólida, punteada y rayas.

Margin: es un área a partir del borde. Esta área siempre será transparente, no tendrá ningún tipo de color o relleno.

Los fondos que pueden ser de color, o bien, pueden ser una imagen. Entonces, el esquema completo de las cajas quedará como se muestra en la siguiente figura:

Por lo tanto, si tenemos una etiqueta que tiene un fondo de color y una imagen configurada mediante los atributos: background-color y background- image respectivamente.

Si la etiqueta tiene asignado un color y una imagen. La imagen se verá sobre el fondo. Si la imagen fuera más chica o tuviera partes transparentes se verá el color de fondo por detrás. En resumen:

En el padding: se verá la imagen y el color de fondo si han sido definidos.

En el margin: no se verá nada, es transparente. Se verá el color de fondo o imagen del padre de la etiqueta.

Cuestiones al “margen”

Algunas cuestiones del margin que debemos tener en cuenta.

La primera es con respecto al tamaño de una etiqueta. El tamaño de una etiqueta está dado por la suma del tamaño de sus propiedades:

padding, border y margin. Las propiedades width y height únicamente afectan el ancho y alto del contenido.

Entonces, por ejemplo, una etiqueta que tenga esta regla:

.dimensiones {
width: 300px;
height: 250px;
padding: 10px;
border: 5px;
margin: 15px;
}

Para obtener el ancho de la etiqueta, debemos sumar:

width:                                  300 px
padding izquierdo y derecho: 20 px (10 x 2)
border izquierdo y derecho:   10 px (5 x 2)
margin izquierdo y derecho: 30 px (15x 2)
Total:                                    360 px

Para obtener el alto de la etiqueta debemos sumar:

height:                                  250 px
padding izquierdo y derecho: 20 px (10 x 2)
border izquierdo y derecho:   10 px (5 x 2)
margin izquierdo y derecho:   30 px (15x 2)
Total:                                   310 px

código con “estilo”

A nuestra página de ejemplo, le agregaremos más texto y haremos algunos ajustes en el CSS para que quede estilizada.

Es posible agregar comentarios en los estilos dentro de los caracteres: /* y */

En las reglas para cada elemento, hay una breve explicación de los atributos utilizados. Se puede encontrar una referencia de todos los atributos en: http://www.w3schools.com/cssref/

Ejemplo: estilos_3.css:

* {
/* Define el máximo ancho de un elemento */
max-width:700;
}
body {
/* Determina el color del texto */
color:#333333;
max-width: 930px;
}

article {
/* Hace "flotar" el elemento, es decir acomoda un elemento de tal forma que el texto lo rodee */
float: right;
/* Determina el ancho de un elemento */
width: 620px; /* puedes modificar este tamaño y ver el resultado */
}

section {
/* Se define un tipo de línea en la parte inferior del elemento */
border-bottom:1px solid #eeeeee;
}

h1 {
/* define la fuente de texto. En caso que el navegador no soporta una fuente utilizara las siguientes
separadas por coma. Si la fuente tiene dos o más palabras,se lo debe poner entre comillas */
font-family:Georgia,serif;

/* Tamaño de la fuente */
font-size:36px;
color: #AA1111;
border-bottom: 1px dotted #AA1111;
/* Determina el interlineado del texto */
line-height: 50px;
/* Define el área más externa. El margen no tiene fondo es completamente transparente */
margin-top: 0px;
}

h3 {
font-family:Verdana; /*Geneva; ,sans-serif;*/
font-size:16px;
font-style:italic;
line-height: 12px;
}

h4 {
font-family: "Lucida Grande", Verdana,sans-serif;
font-size:15px;
}

p {
font-family:"Palatino Linotype","Book Antigua",Palatino,serif;
/* Define el tipo de alineación del texto*/
text-align: justify;
}

header {
margin-top: 0px;
height:100px;
1ine-height:80 %;
}

figure {
float: left;
/* Establece el grosor alrededor del contenido y hasta el borde si el elemento lo tuviera. El padding a
diferencia del margin tiene fondo y toma el color de fondo del contenido */
padding: 5px;
margin-top:10px;
margin-bottom:0px;
margin-left:0px;
margin-right:10px;
border: 1px solid #eeeeee;
}

figcaption {
font-family:Arial, Helvética,sans-serif;
font-size: 90%;
text-align: left;
}

footer {
font-family:Thaoma,sans-serif;
text-align:right ;
color:#DFDFDF;
padding-right: 20px;
/* Fondo de color del elemento */
background: #c0c0c0;
}

Puedes cambiar valores según se vayan presentado los formatos, texto, importancia del texto, acomodos de cajas, etc. lo que no debes de olvidar que puedes cambiar colores fuentes , tamaños, ... etc. en .css para no alterar el html principal

Del ejemplo13.html modificarlo con lo siguiente (es el fragmento del inicio) y pasarlo como

ejemplocss_p6.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="”description”" content="”Ejemplo" de="" html5”="">
    <meta name="”keywords”" content="”CECATI" no.="" 89,="" celaya,="" guanajuato”="">
      <link rel="stylesheet" href="estilos_3.css">
    <title>Conociendo HTML5</title>
</head>
<body>
................
.................
</body>
</html>

Resultado:

Ahora cambie los siguientes valores:

<figure>
        
         <img
          src="images1/chapultepec.jpg" alt="Castillo de Chapultepec"
          width="487" height="365"> <figcaption>Esta es una fotografía
          del interior del castillo de Chapultepec</figcaption>
</figure>

Realiza comentarios sobre lo que has observado en este ultimo ejemplo de HTML Y CSS y enviar la evidencia des este ejercicio de html y css, con el nombre que les corresponden, enviar los al correo donde recibes tu enlace al curso, y menciona que es evidencia de html - css.

Nuevas etiquetas con viejos navegadores

Con respecto a las etiquetas semánticas, ¿qué ocurre con los navegadores antiguos que no las soportan? Porque hasta ahora todo suena muy lindo e incluso con mucho sentido, gracias a la semántica de las etiquetas HTML5, que tienen un propósito.
Pero así como existe todo lo bueno, también existe Internet Explorer 8 (en adelante, IE) y sus viejas versiones que son el dolor de cabeza de los desarrolladores Web, el ángel caído de los navegadores el obstáculo más eficiente para impedir la completa felicidad de los desarrolladores y de la humanidad.

Las etiquetas que la mayoría de los navegadores no conocen, al menos las representan y hay formas de indicarles que traten a etiquetas como header, article y cualquier otra etiqueta nueva que pudiera salir como lo hacen con un contenedor <div>. Pero, en las versiones anteriores a IE 9, no permiten este comportamiento.

Para mitigar este inconveniente, existe una solución que permite utilizar la nueva semántica y no tener que esperar hasta el año 2085 para poder utilizar la nueva semántica del CSS.

La solución se llama: HTML5 Shiv y consiste en un código JavaScript que habilita el uso de la nueva semántica en navegadores anteriores al IE 9.

Antes de agregar nuestros estilos en el <head>, deberemos añadir la siguiente línea:

Este código cargará la solución para que se pueda desplegar la nueva semántica de CSS, únicamente si el navegador es anterior al IE9.

También, podrías bajar el archivo y guardarlo en el servidor donde se sirve tu sitio. Pero cargarlo directamente del sitio, garantiza tener siempre la última versión actualizada y desentenderse del tema.

Si el navegador es una versión anterior a IE9, este código se bajara y ejecutará para que la semántica de CSS funcione.

Resumen de esta sección

Las páginas HTML tienen estructura de árbol. Al nodo que contiene a otro se lo llama padre. Al nodo contenido, hijo. Los nodos que son hijos de un mismo padre se los llama hermanos.
El CSS (Cascade Sheet Style), que significa hojas de estilo en cascada, consiste en manejar por separado el contenido de su estética.
La forma más conveniente de insertar un CSS es hacerlo de manera externa.
El elemento base para estructurar una página HTML es el <div >.
La semántica, en HTML5, tiene el propósito de darle un significado y sentido a las etiquetas. Para que las estructuras sean fácilmente interpretadas por las personas y los robots buscadores.
El <header> se utiliza para encabezados como logos y títulos.
El <hgroup> agrupa elementos de headings: <hl>, <h2>, <h1>,<h4>, <h5> y <h6>.
El <article> para estructuras de contenido independientes que tienen un sentido en sí mismas.
El <section> separa diferentes contenidos que en conjunto conforman una unidad.
El <footer> se utiliza para el pie de página en donde figuran por ejemplo: el mapa del sitio, copyright, derechos de autor.
Un estilo está compuesto por un selector (que puede ser por id, clase o etiqueta) y un conjunto de atributos al que se le llama declaración.
Hay diferentes variaciones para combinar los selectores.
El modelo de cajas por etiqueta contempla: contenido, padding (que toma el color de fondo), border y margin (que es transparente).
El orden de aparición de capas en una etiqueta es el siguiente contenido, borde, Imagen de fondo, color de fondo.
El tamaño de una etiqueta consiste la suma del tamaño del contenido (alto o ancho), padding, border y margin.
Para compatibilidad con Internet Explorer 9, se debe utilizar la solución llamada: HTML5 Shiv.

Presentación visual de una pagina WEB por secciones

Color y degradé CSS3

Efectos de translucidez y nuevos modelos de color

Una de las primeras propiedades CSS3 en popularizarse fue opacity (opacidad). Es común encontrar sitios que la aplican para generar translucidez, debido a que muchos navegadores comenzaron a implementarla hace varios años. Como sabemos, ese es el punto crítico de cualquier nueva tecnología web: que el programa navegador que utilizará el usuario sepa interpretarla.

Podemos agrupar las novedades de CSS3 referidas al manejo de colores en dos grandes áreas:

• Efectos de translucidez (tanto de textos como de colores de fondo de cajas) sin necesidad de imágenes PNG.

• Efectos de degradé, lineales o radiales, e incluso repetidos en franjas, sin utilizar imágenes.

A continuación veremos en detalle cómo utilizar cada una de estas técnicas.

Esta propiedad puede compatíbilizarse con Exploradores utilizando filtros propietarios de ese navegador, con dos sintaxis diferentes para distintas versiones de Explorer, de la siguiente manera:

#algo{
filter:alpha(opacity=50); /* Para versiones de Explorer anteriores a la 8 */
-ms-filter: "progid:DXImageTransform.Microsoft .
Alpha(Opacity=50)"; /* Para Explorer 8 */
opacity: 0.5;
}

El uso de opacity no es ideal para volver translúcidos los colores de fondo con textos dentro, pero sin embargo sigue siendo muy interesante para volver translúcidas imágenes de fondo que se superponen a otras, o para volver completamente invisible un elemento provisoriamente (y transformarlo interactivamente en visible más adelante).

En el caso de buscar colores de fondo o de texto que se vuelvan translúcidos, es más conveniente utilizar los nuevos modelos de color RGBa y HSLa. Tienen la ventaja de que no “contagian” la translucidez a sus elementos anidados dentro, solucionando el problema que describimos anteriormente.

Revisemos cómo se utilizan estos nuevos modelos de color que permiten aplicar translucidez.

El modelo RGBa

El modelo RGBa simplemente agrega un canal alpha (o nivel de translucidez) a un color RGB común.

Su sintaxis es:

rgba(255,255,255, 0.5);

Donde los 3 primeros valores son los de un color RGB tradicional (red, green y blue, o sea, cantidad de rojo, verde y azul), y el cuarto valor es la traslucidez, desde 0 (totalmente transparente) hasta 1 (sólido por completo). Podemos aplicarlo a cualquier propiedad CSS que necesite un color como parámetro, por ejemplo, background-color:

#caja{
background-color: rgba(255,255,255,0.5);
}

Ese fue el valor aplicado a la caja de texto que permite manera de volver translúcido su color blanco de fondo. A diferencia de opacity, la transparencia de color lograda con RGBa no tiene impacto sobre el texto y demás elementos y cajas anidados dentro del elemento cuyo color de fondo se volvió translúcido. Además, no solamente podemos aplicarle el modelo de color RGBa a colores de fondo, sino que también podemos utilizarlo como color de texto, para crear letras translúcidas.

Por ejemplo:

#texto{
color: rgba(255,255,255,0.5) ; }

Para tener una alternativa para aquellos navegadores que no entienden este modelo de color y para que estos no dejen sin ningún color al elemento al que le apliquemos un color RGBa, deberemos declarar un color alternativo en un modo de color antiguo: hexadecimal o RGB. Es fundamental que hagamos este agregado en primer lugar ya que el orden es clave como veremos en unas líneas:

#caja{
/* Fallback sólido, antes de lo que realmente queremos aplicar */
background-color:rgb(100,20,40);
/* Propiedad nueva, que algún navegador no podrá procesar */
background-color:rgba(100,20,40,0.5);
}

Ante todo, tanto para éste como para otros trucos solamente en Explorers, lo ideal es colocar este código en una hoja de estilos externa vinculada mediante comentarios condicionales (para que la lean solo los Explorers, y la ignoren el resto de navegadores).

Dentro de esa “hoja-para-explorer.css” que solo leerán los Explorers, colocaremos un filtro, pero como no existe un filtro especifico para colores translúcidos, nos valdremos de un truco ingenioso. Utilizáronlos el filtro para degrades, realizando un degradé que comience desde un color translúcido y que termine en ese mismo color translúcido:

.translucido {
background:transparent;
filter:progid:DXImageTransform.
Microsoft.gradient(startColorstr=#99000050,endColorstr=#99
000050);
/* mismo valor de inicio y fin /
zoom: 1;
}

Notemos varios puntos:

• Ante todo, al principio hemos aplicado el valor transparent al color de fondo. Esto es necesario ya que el Explorer ha leído previamente la hoja de estilos normal que leen todos los navegadores cuyo link, siempre debe ir antes del link entre comentarios condicionales, para que el Explorer sobre-escriba los valores que nos interesa modificarle.

Debido a esto, si habíamos aplicado un color sólido de fallback al Explorer por ahora el elemento destinatario le quedó pintado de ese color sólido. Y como vamos a aplicarle un color translúcido, es mejor asegurarnos de que estemos comenzando con un fondo limpio, transparente.

• El formato de color de inicio y fin no es el mismo que el de RGBa, sino que es el siguiente:

— AARRGGBB

Donde los dos primeros dígitos (AA) son los valores de Alpha (la translucidez). Sus valores pueden variar entre 00 (transparente) hasta FF (sólido). Los valores se expresan en hexadecimal, con dos dígitos, a diferencia de opacity, que iba de 0 a 1. Luego vienen dos dígitos hexadecimales para Red (RR), dos para Green (GG) y dos para Blue (BB). Por ejemplo, si el color a volver un 45% translúcido fuera FFCC00 el código quedaría:

99FFCC00

Si partimos de un color RGB, podemos usar un conversor para obtener el valor hexadecimal correspondiente

http://www.javascripter.net/faq/rgbtohex.htm

Y una vez que tenemos ese valor hexadecimal, podemos convertirlo a RGBa con un segundo conversor:

http://hex2rgba.devoth.com/

Por último, hemos aplicado zoom:1. Este valor es necesario para evitar problemas con los filtros en Explorer. Los Explorers permiten aplicar algunos filtros únicamente a elementos HTML según el criterio de que tengan definida una propiedad no estándar llamada “hasLayout”. Esa propiedad se define con un valor de “true” (verdadero) bajo circunstancias muy arbitrarias, por lo que es mejor prevenir y forzar a que hasLayout tenga un valor de “true”. Para eso pueden aplicarse distintos trucos que le colocan ese valor, siendo el más inofensivo el de zoom:1 (escalar al tamaño 100%, es decir, no modificar el tamaño original del elemento). A partir de esta declaración, Explorer procesará correctamente el filtro a cualquier elemento al que se nos ocurra aplicarlo.

para mostrar lo anterior hagamos un cambio a estilos_3.css, al final de esta hoja de estilos, de esta forma:

p.fod {
background:rgba(139,00,139,0.5);
/* este color localizarlo en la pagina http://www.javascripter.net/faq/rgbtohex.htm */
}

Es una etiqueta usando clase (class), en ejemplocss_p6.html agreguemos esto:

<td valign="top"><p class="fod">En la Planta Baja encontrarás la Sala
Siqueiros que exhibe los siguientes temas:</p> <br>
</td>

El resultado es:

si modificamos la transparencia a 0.25

El modelo HSL

Este segundo modelo de color nuevo, si bien no es translúcido, lo incluimos porque tiene una variante que sí lo es y que veremos, a continuación. Forma sus tonos de una manera mucho más intuitiva para programadores que el modelo RGB a partir de tres datos: el tono, la saturación y el brillo. En inglés la sigla es HSL (Hue, Saturation,Lightnees )

#objeto{
color: hsl(360,100%,20%);
}

El resultado es similar al que podría lograrse con cualquier otro modelo de color sólido ya difundido como RGB o hexadecimal, por lo que no recomendamos su uso en circunstancias normales. Solo tiene sentido utilizarlo si se van a manipular los valores de cada parámetro mediante programación.

Los valores de tono se extraen del valor del ángulo seleccionado dentro del círculo cromático y van de 0 a 360 (0 rojo, 120 verde, 240 azul, 360 rojo):

Valores para HSL tomados de un ángulo del círculo cromático.

Los valores del segundo parámetro, la saturación, van desde 0 (gris,ausencia de color) hasta 100% (el color saturado al máximo).

Y el brillo va desde 0 (ausencia de luz) hasta 100% (blanco), lo cual logra una serie de tonos pastel entre medio.

Siendo los valores de estos dos últimos parámetros (saturación y brillo) variables entre 0 y 100%, son más sencillos de manejar interactivamente en aplicaciones web por programadores que el modelo hexadecimal o que el RGB. Tal como dijimos anteriormente, ese es el único escenario en el que valdría la pena utilizar este modelo de color.

Recordemos también que debemos colocar un color en un modelo antiguo (RGB por ejemplo) como primera opción, para el caso de los navegadores que no comprendan este nuevo modelo.

Si en el momento de codificar no disponemos de programas editores de color como el Photoshop, podemos utilizar un conversor para buscar un valor RGB similar al HSL elegido y usarlo como fallback:

https://serennu.com/colour/hsltorgb.php

El modelo HSLa

Al igual que RGBa para colores en RGB, HSLa aplica un canal de translucidez a un color expresado en el modelo HSL. Su sintaxis es:

Tono, saturación, brillo + Translucidez: HSLa

#objeto{
background: hsla(300,130%,65%, 0.5);
}

El resultado es idéntico al logrado con RGBa.

Al igual que HSL, solo conviene utilizarlo si el color va a ser manipulado mediante programación, de lo contrario, es mejor utilizar RGBa para que podamos compatibilizarlo fácilmente.

Degrades sin imágenes con CSS3

Ahora que conocemos los nuevos modelos de color de CSS3, sigamos profundizando en las novedades relativas al color, pero esta vez en base a la combinación de dos o más colores mediante transiciones paulatinas entre ellos: los degrades, también llamados degradados o gradiente:.

Su aplicación es muy difundida en botones, fondos de cajas y de página, y muchos otros elementos de una página.

Para crear degrades, hasta ahora necesitábamos aplicar una imagen repetida en mosaico, la típica “franja" con repeat x (o en sentido vertical con repeat y):

La sintaxis necesaria para crear un degradé es un tanto compleja, e incluso ha cambiado varias veces, por lo cual nuestra propuesta es utilizar en primer lugar alguno de los tantos generadores de degrades

visuales, como por ejemplo el de Colorzilla:

http://www.colorzilla.com/gradient-editor/

Luego de generar un degradé básico, ajustaremos y corregiremos manualmente los detalles que no hayan quedado a nuestro gusto. Desde ya que para hacer esos ajustes, necesitaremos conocer la sintaxis de las propiedades CSS implicadas, y por eso haremos una completa referencia a continuación.

Para clasificar y ordenar nuestro trabajo, diremos que existen cuatro tipos de degrades:

1. Lineal

2. Lineal repetido,

3. Radial, y

4. Radial repetido.

1. Degradé lineal

Antes de comenzar, notemos que la propiedad que se utiliza para aplicar un degradé no es background-color, sino que es background-image, por lo que aún nos queda libre la propiedad background-color para aplicar un color liso como “plan B”, para navegadores que no soporten esta funcionalidad.

La sintaxis mínima de la propiedad background-image que genera un degradé linear elemental es:

#caja{
background-image: linear-gradient(white, black);
}

Cuando no especificamos más que los dos colores, el degradado comenzará en el lado superior (top) y descenderá hasla el fondo (bottom).

Los prefijos existentes

-khtml-         Konqueror, navegador para Linux
-moz-             Mozilla Firefox
-ms-               Microsoft Internet Explorer
-o-                  Opera
-webkit-         Webkit, es decir, Google Chrome y Safari

La forma de utilizarlos es muy simple, por ejemplo:

Esto solamente será ejecutado en versiones de Firefox que no soporten la versión estándar de linear-gradient.

Además, al igual que en los modos nuevos de color, podemos definir un fallback para casos en que el navegador no entienda este degradé, por lo que el código de un degradé compatibilizado terminará siendo similar al siguiente:

#caja{
background-color: #444444; /* recordemos que background-color no era utilizado por los degrades */
background-image: url(foto/fallback.png);
/* imagen en mosaico, recordar definir repetición */
/* Firefox 3.6+ */
background .image: -moz-linear - gradient(white,black);
/* Safari 5.1+, Chrome 10+ */
background-image: -webkit-linear-gradient(white, black);
/* Opera 11.10+ /
background-image: -o-linear-gradient(white, black);
/* Sintaxis sin prefijjos, para navegadores nuevos */
background-image: linear-gradient(white, black);
}

Podemos evitar el escribir manualmente todos estos prefijos y generarlos automáticamente con herramientas online como Prefixr. A partir de su uso, simplemente pegamos el código en su sintaxis sin prefijos y nos devuelve el código repetido tantas veces como sea necesario, cada una con su respectivo prefijo.

Otros detalles que debemos considerar, más allá de fallbacks y prefijos, es que algunas versiones de los navegadores con motor Webkil (Safari y Chrome) necesitan otra sintaxis, y los Explorer utilizan el mismo filtro que ya hemos utilizado para crear colores RGBa, con lo cual la sintaxis completa de un degradé compatible con todos los navegadores sería similar a la que sigue:

#caja{
background-color: #444444;
background-image: url(foto/fallback.png);
background-image: -webkit-gradient(linear, left top, left
bottom, from(#444444), to(#999999)); /* sintaxis Webkit */
background-image: -webkit-linear-gradient(top, #444444,#999999);
background-image: -moz-linear-gradient(top, #444444,#999999);
background-image: -ms-linear-gradient(top, #444444,#999999);
background-image: -o-linear-gradient(top, #444444,#999999);
background-image: linear-gradient(top, #444444, #999999);
filter:
progid; DXImageTransform.Microsoft.gradient(startColorStr= '#444444', EndColorStr='#999999'); /* Explorer 6 a 9 */
}

Dirección del degradé

Releamos el código del ejemplo anterior:

Esta sintaxis que aún soportan muchas versiones de navegadores populares, todavía podíamos especificar la dirección en la que se realizaría el cambio de un color hacia otro simplemente indicando un punto de inicio (en este ejemplo, la palabra “top”).

Desde que en 2012 se decidió que la palabra a colocar al inicio de linear-gradient debería llevar antepuesta la palabra “to”, y por lo tanto, indica el lugar de llegada, hacia donde terminará el degradé, y no su punto de inicio, como antes. Por ejemplo, si antes decíamos:

Ahora deberíamos decir:

Se trata de un cambio bastante molesto, si queremos evitarlo, la mejor forma es no utilizar nunca las palabras clave (top, bottom, left o right) sino por el contrario, definir en grados la dirección o punto de finalización de nuestro degradé, de la siguiente manera:

background-image: linear-gradient (0deg, #444444, #999999)) ; 0deg, significa 0 (cero) Grados que es donde parte el efecto.

Veamos un ejemplo para entenderlo mejor (de ahora en más, simplificaremos sin poner los prefijos ni fallbacks), en este ejemplo no indicamos el orden, se toma de arriba a bajo, agrege esto al final de estilos_3.css:

#grad1 {
height: 200px;
background-color: red; /* Para navegdores que no soportan los gradientes */
background-image: linear-gradient(red, yellow);
}

si ya se, que me dirían que es esta exagerado pero si, es para que uds. lo modifiquen y en ejemplocss_p6.html se mofique de esta manera:

<td valign="top" id="grad1">Cuenta con un acervo especializado en
                historia de México, arte, numismática, pintura,
                indumentaria, mobiliario y arquitectura. Horario: Lunes
                a viernes, de 9:00 a 16:30 horas. Ubicación: Edificio anexo
                al Castillo de Chapultepec. Está abierta a todo el
                público para consulta en sala.<br>
              </td>

y el resultado es:

cambien el color, y lo envian como evidencia, de captura de pantalla con el nombre, degradado1.png

ahora modifiquemos el codigo a lo siguiente:

#grad1 {
height: 200px;
background-color: red; /* Para navegadores que no soportan gradientes*/
background-image: linear-gradient(red 15%, yellow 85%);
}

revisa el resultado, y realiza tu comentario.

red 15%, yellow 85%, esto indica que de color rojo sera 15% y amarillo de 85%, bueno no necesariamente debe ser rojo.

Veamos un ejemplo de esto con más de dos colores. Hemos colocado cada color en una línea para mayor legibilidad. Además, agregamos la sintaxis específica para Webkit al final, pues bien estas transiciones de llaman stop, entonces agreguemos esto al final de estilos_3.css:

#grad2 {
background-image: linear-gradient(
90deg,
rgb(14,115,115) 50%,
rgb(167,163,212) 90%,
rgb(121,66,204) 95%
) ;
/* Sintaxis de stops para Webkit */
background-image: -webkit-linear-gradient(
linear, 0% 0%, 100% 0%,
color-stop(0.5, rgb (14,115,115)),
color-stop(0.9, rgb(167,163,212)),
color-stop(0.95, rgb(121,66,204))
);
}

y en ejemplocss_p6.html

<td valign="top" id="grad2">¿Cómo llegar?<br>
              </td>
              <td valign="top">Puede llegarse por el Paseo de la
                Reforma, el Circuito Interior o la Avenida
                Constituyentes. Las estaciones de metro más cercanas son
                Auditorio y Chapultepec. Esta última cuenta con un
                acceso directo al bosque.<br>
              </td>

el resultado es en Google Chrome en FireFox en Brave

en Opera en Seamonkey

Vemos como es el efecto en los diversos navegadores, usando la etiqueta Webkit,

Para obtener lo que necesito es necesario probar con diferentes navegadores y detectar lo necesario para que se pueda apreciar los que estoy mostrando.

En este ejemplo cómo el primer color se ha mantenido intacto hasta el 50% que indica en su stop. Luego, el segundo tramo del degradé ha sido la transición entre ese primer color y el segundo, entre el 50% y el 90% de la longitud de la caja;. Y por último, el cambio del segundo al tercer color tuvo lugar entre el 90% y el 95%, quedando último color sólido entre el 95% y el final.

Un detalle extra antes de finalizar: se pueden realizar degrades desde un color hasta una transparencia total, pero cuidemos de no utilizar la palabra “transparent" para ello, ya que esto equivale a colocar un cero en cada parámetro de un color RGBa. Por ejemplo, equivale a rgba(0,0,0,0), y eso, siendo estrictos, es un color "negro transparente" porque el cero en cada canal RGB equivale a negro. Por lo tanto, un degradé desde un color claro, supongamos blanco, hacia transparente, usando la palabra transparent, pasará por una escala de grises, hasta llegar a la transparencia y ésta será muy notoria, sobre todo por estar sobre un color claro de fondo, como en este ejemplo:

translucido{
width: 300px;
helght : 120px;
background-color: #FFCC00;
background-image: linear-gradient(90deg,rgb(255,255,255), transparent);
}

Notemos como del naranja se pasa a un “color oscuro”, y luego cada vez más claro hasta volverse transparente.

La solución es utilizar como punto de llegada del degradé el mismo color del que partimos, por ejemplo, blanco, pero dentro de una sintaxis RGBa que llegue al valor “0” de alpha para ese color en particular:

#translucido{
width: 300px;
height: 120px;
background-color: #FFCC00;
background-image: linear-gradient(90deg,rgb(255,255,255), rgba(255,255,255,0) );
}

De esta manera, el degradé será desde blanco rgb(255,255,255) hasta blanco transparente rgba(255,255,255,0) que, en este caso, nos deja ver el color claro de fondo aplicado a la figura en la zona derecha pero evitando esos grises que aparecían al usar la palabra "transparent”, como se puede aprecier en elcodigo es un efecto usando un relleno color naranja y despues colocar un gradiente de color blanco para dar la aparencia de degradacion del color.

Añada este codigo a estilos_3.css, y en ejemplocss_p6.html agrege esto en la siguiente seccion del codigo:

<td valign="top" id="grad2">¿Cómo llegar?<br>
              </td>
              <td valign="top" id="translucido">Puede llegarse por el Paseo de la
                Reforma, el Circuito Interior o la Avenida
                Constituyentes. Las estaciones de metro más cercanas son
                Auditorio y Chapultepec. Esta última cuenta con un
                acceso directo al bosque.<br>
              </td>

Resultado de esto:

Para Chrome: Para FireFox: Para Seamonkey:

Degradé lineal repetido

Una variante de los degrades lineales es que el degradé se repita, a la manera de un mosaico, como acostumbramos hacer con imágenes. Para eso, se usa la propiedad repeating-linear-gradient:

Al igual que en el degradé lineal no repetido, el punto de origen puede ser una posición (left, top, etc.) o un ángulo, y puede omitirse. Pero lo importante en el degradé lineal repetido es determinar el ancho cada “franja", lo que a su vez indica cuántas veces se repite. Para ello usaremos un porcentaje, al igual que hacíamos con los stops, con la particularidad de que ese porcentaje será el del último color, que señalará el punto de finalización de cada franja, y por lo tanto "espesor” de la misma.

Ejemplo de repetición lineal:

#caja{
background: repeating-linear-gradient(#FFF, #3CF 20%);
}

Ese 20% al lado del último color de la lista indica que ese color finalizará al 20% de la longitud de la caja, y a la vez, que allí finalizará un degradé completo, comenzando a repetirse a partir de ese punto tantas veces como quepan en el 100% en este caso, ocupa 20% cada repetición, por lo que se obtendrán 5 repeticiones:

Notemos que cada 20% se percibe claramente el “empalme” entre el final de una franja y el comienzo de la siguiente; si queremos evitarlo, podemos realizar un degradé que tenga al menos 3 colores: uno inicial, uno intermedio, y luego volver al mismo color inicial, para que al empalmarse no se note la unión. Sería así:

#caja{
background: repeating-linear-gradient(#FFF, #000, #FFF 25%) ;
}

Por el contrario, si queremos lograr franjas totalmente “macizas", sin transiciones, mediante un stop podemos hacer coincidir el punto de fin de un color con el punto de inicio del color siguiente:

#caja{
background: repeating-linear-gradient(45deg, green, green 20px, gray 20px, gray 40px);
}

Además del ángulo de 45 grados para indicar una dirección en diagonal, notemos que el valor de 40px al lado del color final indica el espesor de la franja (40px), mientras que se logró mantener cada color sn cambios de tono indicando el comienzo (green, en el punto inicial de la franja) y luego un segundo color... green también, a los 20px. Hasta allí, tenemos una franja de un color liso hasta el mismo color liso. Luego se indica que el siguiente color (gray) comience en el exacto punto en que terminó el anterior (20px) y que haga un degradé hacia el mismo color gray, pero ubicado en el punto 40px (que coincide con el final de la franja). A partir de allí, se repetirán franjas de 40px de espesor, 20 grises, 20 verdes.

Agreganos este codigo a estilos_3.css

#diagonal1{
color: #ffffff; /* modificamos el color del texto para que se vea notorio*/
background: repeating-linear-gradient(45deg, green, green 20px, gray 20px, gray 40px);
}

y esto a ejemploscss_p6.html

<td valign="top" id="diagonal1">En la Planta Alta:<br>
</td>

Resultado:

Degradé radial

Otro tipo de degrades es el radial (expandiéndose circularmente, o de forma de elipse). Un generador online para hacerlos fácilmente es el de Westciv, tambien encontramos otros ejemplos para crear gradientes lineales,

http://westciv.com/tools/radialgradients/index.html

El esquema de la sintaxis completa de un degradé radial es:

background: radial-gradient(parámetros);

Aquí los parámetros posibles son:

1) Punto central de inicio del primer color

2) Forma: circle | ellipse y Tamaño: closest-side | closest-corner | farthest-side | farthest-corner

2b) Ancho y alto

3) Lista de colores y sus stops, si los hubiera

Describiremos a continuación los posibles valores de cada uno de los parámetros.

1) Punto central del degradé: a diferencia del degradé lineal, donde teníamos que definir una dirección, un sentido para la transición entre dos colores, aquí lo que debemos definir es el centro desde el cual omenzará el primero de los colores. Al tratarse de un punto en el plano, serán necesarios dos valores: una coordenada en el eje X y una en el eje Y.

Por ejemplo:

background: radial-gradient(100px 50px, [etc...]);

Eso equivale a indicar que a 100 px del lado izquierdo y 50 del lado superior estará el punto central donde el primer color estará a su 100% de intensidad.

En el siguiente ejemplo, se toman los tamaños dados en px pixeles

individual6.html:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* para navegadores que no soportan gradientes */
background-image: radial-gradient(red, yellow, green);
}
</style>
</head>
<body>

<h1>Gradiente Radial Paradas de color espaciadas uniformemente</h1>

<div id="grad1"></div>

</body>
</html>

el resultado es:

Para establecer colores espaciados

individual7.html:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* para navegadores que no soportan gradientes */
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>

<h1>Gradiente Radial - Paradas de color diferentemente espaciadas</h1>

<div id="grad1"></div>

</body>
</html>

Formas del degradado.

Siguiendo con los parámetros posibles, el segundo parámetro es doble, define dos cosas a la vez: la forma y el tamaño de la transición circular entre los dos colores. La forma tiene solo dos valores posibles:

circle y ellipse, y el valor por omisión es ellipse.

Es decir, que si omitimos el parámetro de la forma, se generará un degradé con forma de elipse, a excepción de que la caja donde lo aplicamos tenga forma exactamente cuadrada, en cuyo caso se generará un círculo de todos modos.

individual8.html:

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* Para navegadores que no soportan gradientes */
background-image: radial-gradient(red, yellow, green);
}

#grad2 {
height: 150px;
width: 200px;
background-color: red; /* Para navegadores que no soportan gradientes */
background-image: radial-gradient(circle, red, yellow, green);
}
</style>
</head>
<body>

<h1>Degradado radial: formas</h1>

<h2>Elipse (esto es el valor predeterminado):</h2>
<div id="grad1"></div>

<h2><strong>Circulo:</strong></h2>
<div id="grad2"></div>

</body>
</html>

Resultado:

En cuanto al tamaño, existen dos posibilidades: definir un tamaño con una medida exacta (lo detallaremos mas adelante), o utilizar una palabra clave.

Las palabras que indican el tamaño son las siguientes, con su significado:

closest-side La transición será corta y completa dentro de la figura, desde el punto inicial o centro del degrade hasta el lodo mas cercano a el.

farthest-side La transición llegará hasta el lado más alejado del punto inicial o centro del degradé.

closest-corner La transición irá hasta la esquina más cercana al punto inicial del degradé.

farthest-corner La transición irá hasta la esquina más alejada del punto inicial, quedando el segundo color fuera de la caja.

individual9.html

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 150px;
background-color: red; /* Para navegadores que no soportan gradientes*/
background-image: radial-gradient(closest-side at 60% 55%, red, yellow, black);
}

#grad2 {
height: 150px;
width: 150px;
background-color: red; /* Para navegadores que no soportan gradientes */
background-image: radial-gradient(farthest-side at 60% 55%, red, yellow, black);
}

#grad3 {
height: 150px;
width: 150px;
background-color: red; /* Para navegadores que no soportan gradientes*/
background-image: radial-gradient(closest-corner at 60% 55%, red, yellow, black);
}

#grad4 {
height: 150px;
width: 150px;
background-color: red; /* Para navegadores que no soportan gradientes */
background-image: radial-gradient(farthest-corner at 60% 55%, red, yellow, black);
}
</style>
</head>
<body>

<h1>Degradados radiales: palabras clave de diferentes tamaños</h1>

<h2>closest-side:</h2>
<div id="grad1"></div>

<h2>farthest-side:</h2>
<div id="grad2"></div>

<h2>closest-corner:</h2>
<div id="grad3"></div>

<h2>farthest-corner (default):</h2>
<div id="grad4"></div>

</body>
</html>

Degradé radial repetido

Al igual que el lineal, el degradé radial también puede repetirse en franjas; la propiedad es repeating-radial-gradient. Con el mismo criterio que en el linear repetido, el último valor de porcentaje o ancho en pixeles (colocado en el último color de la lista) será el que defina el espesor del degradé completo a repetir.

individual10.html

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* Para navegadores que no soportan gradientes */
background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
</style>
</head>
<body>

<h1>Gradiente Radial repetido</h1>

<div id="grad1"></div>

</body>
</html>

Y con esto, hemos completado nuestro recorrido por las novedades relativas al color de CSS3: la principal, su modelo de color RGBa que podemos aplicar a fondos y tipografías, y los degrades, que aun con sus sintaxis “cambiantes”, nos permiten ahorrar imágenes y hacer páginas mucho más livianas.

Decorando con bordes, sombras y fondos

Efectos visuales simplificados

CSS3 facilita enormemente la creación de efectos decorativos típicos, haciendo que sea el propio navegador de los usuarios el que produzca el efecto, evitando la necesidad de descargarle imágenes o incluso scripts, como era preciso hacer hasta ahora para lograr similares resultados. En consecuencia, CSS3 ahorra a nuestros usuarios miles de bytes de descarga, volviendo nuestras páginas mucho más livianas y rápidas, y además nos simplifica la creación y el mantenimiento de numerosos efectos decorativos. Estas son razones más que suficientes para comenzar a aplicarle CSS3 ya mismo a nuestros sitios.

Podemos clasificar los tipos de efectos decorativos en los siguientes grupos:

• Efectos de bordes redondeados en cajas.
• Bordes de cajas rellenados con imágenes decorativas.
• Generación de sombras en cajas y en tipografías; y creación de efectos 3D y de iluminación, logrados a partir de múltiples sombras combinadas.
• Uso de imágenes de fondo múltiples en un mismo elemento HTML, y otras propiedades nuevas relativas a fondos de caja.

Bordes redondeados

Un efecto muy difundido para quebrar la rigidez rectangular de las cajas HTML (y especialmente de botones de navegación), es el de crearles bordes redondeados; pero hasta ahora, para crear bordes redondeados debíamos modificar el marcado HTML, agregando varios divs adicionales solo para sostener la imagen de una punta curva en cada esquina del elemento real al que queríamos redondear su borde... ¡Y eso por no mencionar la época en la que teníamos que hacer una tabla de tres filas y tres columnas solo para lograr el mismo efecto, acomodando ocho imágenes diferentes: una para cada una de las cuatro esquinas, y otras para los cuatro lados!

Gracias a CSS3, es posible redondear los bordes de cualquier elemento HTML sin alterar para nada su marcado, simplemente indicando cuál de las esquinas queremos redondear, y en qué medida.

Desde ya que el elemento al que queremos redondear sus esquinas debe tener definido un borde, que es el que se redondeará (si el borde y el fondo son del mismo color, se percibirá que es la figura la que se ha redondeado).

La sintaxis mínima de esta nueva propiedad es:

#caja {
border-radius:3 5px;
}

Al especificarlo de esa manera, con un solo valor, ese valor se aplicará por igual a las cuatro esquinas del elemento en cuestión, tal como si la curvatura fuera el radio de un círculo circunscrito en cada una de las esquinas, radio de una longitud igual a la definida (35px en este ejemplo):

Desde ya que debemos incluir los prefijos para cpmpatibilizar estos bordes con navegadores antiguos, por loa que nuestro código va quedando como así:

#algo{
border:2px solid #09F;
-moz-border-radius: 35px; /* Firefox */
-webkit-border-radius: 35px; /* Safari, Chrome */
border-radius: 35px; /* estándar */

ejemplo con varios cuadros con esquinas redondeadas

individual11.html

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="”description”" content="”Ejemplo" de="" html5”="">
    <meta name="”keywords”" content="”CECATI" no.="" 89,="" celaya,=""
      guanajuato”="">
    <title>Bordes css3</title>

    <style>
#rcorners1 {
border-radius: 25px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 25px;
border: 2px solid #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 25px;
background: url(images1/papel1.jpg);
background-position: left top;
background-repeat: repeat;
padding: 20px;
width: 200px;
height: 150px;
}
</style>

</head>
<body>
    <h1>La propiedad de radius </h1>
    <p>Esquinas redondeadas para un elemento con color de fondo particular:</p>
    <p id="rcorners1">Esquinas redondeadas ! </p>
    <p>Esquinas redondeadas con un elementos de borde:</p>
    <p id="rcorners2">Esquinas redondeadas !</p>
    <p>Esquinas redondeadas con un elementoscon una imagen :</p>
    <p id="rcorners3">Esquinas redondeadas ! </p>
</body>
</html>

Bordes individuales (ovalados)

También podemos indicar la curvatura de una esquina individualmente, mediante dos sintaxis diferentes: la de definir por separado cada esquina con las propiedades border-top-left-radius, border-top-right-radius, bordei bottom-left-radius y border-bottom-right-radius; o utilizando una baim para separar la curvatura horizontal de la vertical. Veremos ambas sintaxis a continuación.

Eso nos permite definir esquinas de forma ovalada, al poder indicar dos valores por cada esquina (la distancia horizontal desde el borde izquierdo y la vertical desde el borde superior, hasta el centro de una elipse que servirá de guía para el redondeo), creando asi esquinas ovaladas. Por ejemplo:

#caja {
border-top-left-radius :100px 50px;
}

Lo que producirá el siguiente efecto:

Exactamente el mismo resultado puede lograrse mediante la sintaxis abreviada (border-radius) si separamos con una barra los valores horizontales de los verticales. Por ejemplo:

#caja {
border-radius:100px 000/ 50px 000;
}

Los valores ubicados antes de la barra, se refieren a la distancia en el eje X desde el borde izquierdo hasta el centro de la elipse que se ubicará en cada esquina (los cuatro valores siguen el orden top left, top right, bottom right y bottom left, por eso en este caso que solo queríamos redondear la esquina top left con un centro a 100px del 0 del eje X y a 50px del 0 del eje Y, hemos indicado un valor distinto a cero solo en el primero de los cuatro valores: el 100px antes de la barra es la distancia desde left al centro de la elipse).

Los valores colocados después de la barra, indican la distancia en el eje Y desde el borde superior hasta el centro de la elipse, para cada esquina respectivamente. Por eso, el 50px ubicado en primer lugar después de la barra es la distancia desde top hasta el centro de la elipse, todo referido a la esquina top-left ya que es el primero de los cuatro valores. El resultado es exactamente el mismo que en el ejemplo anterior, solo que con otra sintaxis.

Podemos lograr efectos interesantes combinando valores horizontales y verticales mediante esta sintaxis de barra, combinada con porcentajes, por ejemplo, Lados curvos:

#caja {
border-radius:30px / 50%;
}

En este caso, el primer valor -en pixeles- se aplica en sentido horizontal (el centro queda a 30 pixeles del lado izquierdo y derecho), mientras que los porcentajes se encargan de regular el redondeo en sentido vertical (el centro queda al 50% del alto de la figura en el eje Y).

Otro efecto que podemos lograr usando porcentajes es el de "anular" una esquina si aplicamos un valor de 100%, ya que el centro estará al 100% de left y al 100% de top, es decir, en la esquina inferior derecha, redondeando el borde de la esquina top-left de esta manera:

#caja {
border-radius:100% 20px 40px 20px;
}

En este otro caso, redondeará a mitades iguales entre las dos primeras esquinas, las superiores:

#caja {
border-radius:50% 50% 10px 10px / 90px 90px 10px 10px;
}

Notemos que el centro de la elipse de la primera esquina (top-left) queda definida por un 50% en el eje X (el centro horizontal) y 90px desde top (el primer valor luego de la barra), y algo similar sucede con la segunda esquina, top-right, que es definida por el segundo 50% antes de la barra y el segundo 90px después de la barra, siendo el primero la distancia en X y el otro la distancia en Y al centro de la elipse. El resto de esquinas (bottom-right y bottom-left) poseen un redondeo circular definido en pixeles de 10px de radio tanto horizontal como vertical, por eso es circular la forma de esas dos esquinas inferiores.

Revisemos esto llamándolo

individual12.html

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners2 {
border-radius: 15px 50px 30px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners3 {
border-radius: 15px 50px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}

#rcorners4 {
border-radius: 15px;
background: #73AD21;
padding: 20px;
width: 200px;
height: 150px;
}
</style>
</head>
<body>

<h1>Propiedades del radius-border con esquinas redondeadas</h1>

<p>Cuatro valores - border-radius: 15px 50px 30px 5px:</p>
<p id="rcorners1"></p>

<p>Tres valores - border-radius: 15px 50px 30px:</p>
<p id="rcorners2"></p>

<p>Dos valores - border-radius: 15px 50px:</p>
<p id="rcorners3"></p>

<p>Un valor - border-radius: 15px:</p>
<p id="rcorners4"></p>

</body>
</html>

Ahora con estos ejemplos

individual13.html

<!DOCTYPE html>
<html>
<head>
<style>
#rcorners1 {
border-top-left-radius :100px 50px;
background: #73AD21;
padding: 20px;
width: 100px;
height: 75px;
}

#rcorners2 {
border-radius:100px 000/ 50px 0 0 0;
background: #73AD21;
padding: 20px;
width: 100px;
height: 75px;
}

#rcorners3 {
border-radius:30px / 50%;
background: #73AD21;
padding: 20px;
width: 100px;
height: 75px;
}

#rcorners4 {
border-radius:100% 20px 40px 20px;
background: #73AD21;
padding: 20px;
width: 100px;
height: 75px;
}
#corners5 {
border-radius:50% 50% 10px 10px / 90px 90px 10px 10px;
background: #73AD21;
padding: 20px;
width: 100px;
height: 75px;
}

</style>
</head>
<body>

<h1>Propiedades del radius-border con esquinas redondeadas</h1>

<p>Ovalo - border-radius: border-top-left-radius :100px 50px;:</p>
<p id="rcorners1"></p>

<p>Segunda forma con barra - border-radius:100px 000/ 50px 0 0 0;</p>
<p id="rcorners2"></p>

<p>Otra forma como el anterior usando - border-radius:30px / 50%;</p>
<p id="rcorners3"></p>

<p>Efecto interesante 1- border-radius:100% 20px 40px 20px:</p>
<p id="rcorners4"></p>

<p>Efecto interesante 2 -:border-radius:50% 50% 10px 10px / 90px 90px 10px 10px </p>
<p id="corners5"></p>

</body>
</html>

Propiedad	Descripción
border-radius	Una propiedad abreviada para configurar las cuatro propiedades de borde---radio
border-top-left-radius	Define la forma del borde de la esquina superior izquierda.
border-top-right-radius	Define la forma del borde de la esquina superior derecha.
border-bottom-right-radius	Define la forma del borde de la esquina inferior derecha.
border-bottom-left-radius	Define la forma del borde de la esquina inferior izquierda.

Imágenes de borde

Con la propiedad CSS border-image, puede configurar una imagen para usarla como borde alrededor de un elemento.

Para lograr aplicar con CSS un "marco" que envuelva al rectángulo de la imagen central, contamos con una nueva propiedad llamada "border-lmage", que se basa en la utilización de un sprite (una única imagen creada a partir de fragmentos pegados de otras imágenes). La propiedad border-image asigna cada fragmento del sprite a una esquina o lado de la caja a decorar.

La forma precisa en que se realiza esta asignación de las distintas partes de un sprite a cada zona de la caja es la clave de la sintaxis de la nueva propiedad border-image que aprenderemos a continuación.

En primer lugar, debemos indicar la URL de esa imagen sprite que se utilizará como imagen de borde.

Para aplicar border-image, debemos contar con un borde tradicional, al que deberemos definir su color, su estilo y su espesor:

#caja {
border-color: #000000;
border-style: solid;
border-width: 30px 12px 20px 40px;
}

Notemos que hasta aquí, en nuestro ejemplo tendremos un rectángulo con 4 bordes sólidos de distinto espesor

Es en el espesor de esos 4 lados definidos (30, 12, 20 y 40 pixeles en este caso) en donde aplicaremos las imágenes de borde (ese borde será la tela o "canvas" que pintaremos con partes de nuestra imagen sprite). Esos cuatro valores se declaran en el mismo orden que los cuatro valores de la vieja propiedad border: top, right, bottom y left. Notemos que en este ejemplo los hemos declarado con valores notoriamente distintos, justamente para que se aprecie qué valor genera cada borde.

Este borde tradicional también será el fallback, es decir, el borde que mostrarán navegadores muy antiguos, que no soporten border-image.

Entonces, retomando el hilo, la propiedad border-image requiere declarar primero una imagen de borde, luego un espesor de borde y un par de elementos más (algunos opcionales) que describiremos a continuación:

Especificar la URL de la imagen de tipo sprite a utilizar.
Indicar el tamaño de franja a aplicar de la imagen desde el lado respectivo desde el que se aplicará. Éste debe coincidir con el espesor del borde definido anteriormente, en los cuatro lados.
Indicar qué sucederá con la zona central de la imagen de borde (si será transparente o se verá).
Indicar el espesor de los bordes (border-width) ya sea dentro de la misma propiedad border-image, o usando border-width de la manera tradicional, como hemos visto unos párrafos más arriba.
Indicar si alguna de las franjas de imagen de borde se desplazará por fuera de la caja que llevará aplicado el borde;Agregar una o varias palabras clave que indiquen el efecto con que se aplicará el borde en cada lado (repetición, estiramiento, redondeo, etc.).

Un ejemplo definido con la sintaxis más completa que sea posible, podría ser el que sigue:

#caja {
border-image: url(sprite.png) 54 22 28 14 / 54 22 28
14 / 27 22 28 14 fill stretch round;
}

Podemos desglosar los cinco puntos anteriores de ese ejemplo:

1. url(sprite.png) es la ruta hacia el sprite

2. 54 22 28 14 son los tamaños de franja a aplicar de la imagen sprite, contando desde arriba, la derecha, abajo y la izquierda; si agregamos la palabra fill al final de los valores numéricos, indicaremos que la zona central de la imagen de borde será visible (por defecto, es transparente).

3. 54 22 28 14 son los espesores de los bordes (border-width) enel caso de que la figura tenga aplicado un border-width que no coincida con los tamaños de franja definidos en el punto anterior.

4. 27 22 28 14 indica si la franja se desplaza fuera de la caja.

5. stretch round indica que la parte de la imagen de borde superior e inferior se estirará (stretch) entre las esquinas derecha e izquierda, y que en cambio la zona de los laterales izquierdo y derecho repetirá en mosaico vertical redondeando (round) su tamaño si no coincidiera exactamente con la distancia entre la esquina superior y la inferior.

De los anteriores cinco puntos, podemos deducir que la propiedad border-image es en realidad una abreviatura de 5 propiedades distintas, esas propiedades (incluyendo sus valores por defecto) son:

border-image-source : none
border-image-slice : 100%
border-image-width : 1
border-image-outset: 0
border-image-repeat: stretch

Siguiendo con nuestra primera aproximación con la sintaxis, y como ya hemos visto en otras técnicas de CSS3, por compatibilidad con navegadores antiguos, nos conviene repetir la misma orden con distintos prefijos.

Para el siguiente ejemplo puedes usar cualquier imagen completa el que uso fue esta: el ejercicio es

individual15.html

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 30px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 50 round;
}

#borderimg2 {
border: 30px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 20% round;
}

#borderimg3 {
border: 30px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 30% round;
}
</style>
</head>
<body>

<h1>La propiedad de border-image</h1>

<p id="borderimg1">border-image: url(images1/bordes.jpeg) 50 round;</p>
<p id="borderimg2">border-image: url(images1/bordes.jpeg) 20% round;</p>
<p id="borderimg3">border-image: url(images1/bordes.jpeg) 30% round;</p>

<p><strong>Nota:</strong> Internet Explorer 10, y recientes versiones no soportan border-image.</p>

</body>
</html>

Resultado:

si queremos agregar una imagen de fondo, descargamos la imagen de preferencia o la que sea necesaria en mi caso use:

el código es el siguiente, puedes observar en donde se modifico :

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg1 {
border: 30px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 50 round;
background: url(images1/papel2.jpg);
}

#borderimg2 {
border: 30px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 20% round;
background: url(images1/papel2.jpg);
}

#borderimg3 {
border: 30px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 30% round;
background: url(images1/papel2.jpg);
}
</style>
</head>
<body>

<h1>La propiedad de border-image</h1>

<p id="borderimg1">border-image: url(images1/bordes.jpeg) 50 round;</p>
<p id="borderimg2">border-image: url(images1/bordes.jpeg) 20% round;</p>
<p id="borderimg3">border-image: url(images1/bordes.jpeg) 30% round;</p>

<p><strong>Nota:</strong> Internet Explorer 10, y recientes versiones no soportan border-image.</p>

</body>
</html>

Resultado:

otro ejemplo

individual16.html

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg {
border: 10px solid transparent;
padding: 15px;
border-image: url(images1/bordes.jpeg) 30 stretch;
}
</style>
</head>
<body>

<h1>La propiedad border-image</h1>

<p>Aqui, la mitad de la seccion esta stretch para crear el borde:</p>
<p id="borderimg">border-image: url(images1/bordes.jpeg) 30 stretch;</p>

<p>Esta es la imagen original:</p><img src="images1/bordes.jpeg">
<p><strong>Nota:</strong> En Internet Explorer 10, y versiones recientes, no soportan la propiedad border-image.</p>

</body>
</html>

Resultado:

prueba cambiando el valor de strech, border y padding, realiza comentarios al respecto

Regulando las repeticiones a los lados

La propiedad de repetición de fondo establece si y cómo se repetirá una imagen de fondo o borde.

De forma predeterminada, una imagen de fondo se repite tanto vertical como horizontalmente.

Consejo: La imagen de fondo se coloca según la propiedad de posición de fondo. Si no se especifica ninguna posición de fondo, la imagen siempre se coloca en la esquina superior izquierda del elemento.

descarguen una imagen de un tablero de ajedrez (o algo que uds. les agrade), que usaremos para este ejemplo, y guardarlo en el directorio images1, revisemos el siguiente código individual17.html :

<!DOCTYPE html>
<html>
<head>
<style>
#borderimg_{
border-width: 56px 56px 56px 56px;
border-style: solid;
border-color:#DCF99D;
border-image: url(images1/ajedrez.jpeg);
/* no indico el repeat solo estan las esquinas */
}

#borderimg_r{
border-width: 56px 56px 56px 56px;
border-style: solid;
border-color:#DCF99D;
border-image: url(images1/ajedrez.jpeg) 56 56 56 56 repeat;
/* debo de indicar los bordres para que se repita en esros border*/
}

</style>
</head>
<body>

<h3>La propiedad border-image en cada esquina</h3>
<p id="borderimg_">Imagen en borde en cada esquina</p>
<h3>La propiedad border-image en cada esquina con la imagen principal al dentro del borde</h3>
<p id="borderimg_"><img src="images1/ajedrez.jpeg"></p>

<h3>La propiedad border-image repeat</h3>
<p id="borderimg_r">border-image</p>
<h3>La propiedad border-image-repeat en cada esquina con la imagen principal al dentro del borde</h3>
<p id="borderimg_r"><img src="images1/ajedrez.jpeg"></p>

<p>Esta es la imagen original:</p><img src="images1/ajedrez.jpeg">
<p><strong>Nota:</strong> En Internet Explorer 10, y versiones recientes, no soportan la propiedad border-image.</p>

</body>
</html>

Resultado:

si deseas la imagen original que se vea mas pequeña modifica los atributos de esta imagen en altura y ancho.

independientemente que se pueda establecer en <body> la propiedad de background, se puede hacer de esta forma

individual18.html:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(images1/papel2.jpg);
background-repeat: repeat-y;
}
</style>
</head>
<body>

<h1>El fondo se repite propiamente en vertical</h1>

</body>
</html>

background-repeat: repeat-y; esto indica que sera en el eje y, eje vertical:

el mismo ejemplo pero en forma horizontal:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(images1/papel2.jpg);
background-repeat: repeat-x;
}
</style>
</head>
<body>

<h1>El fondo se repite propiamente en horizontal</h1>

</body>
</html>

Resultado:

Otro detalle de sintaxis es que los valores numéricos que indican la distancia desde los bordes pueden ser los 4 diferentes, o declarar solo 2 (se aplicará el primero con idéntico valor arriba y abajo, y el segundo valor a izquierda y derecha), o declarar solo 1 (se aplicará a los 4 lados por igual).

Algunos ejemplos:

1. Cuatro valores (top, right, bottom y left):

border-image: url(sprite.png) 12 24 14 18 repeat stretch;

2. Dos valores (el primero top y bottom, el segundo right y left):

border-image: url(sprite.png) 15 30 repeat stretch;

3. Un valor (el mismo a los cuatro lados):

border-image: url(sprite.png) 33 repeat stretch;

Efectos de sombra

Con CSS puedes agregar sombras al texto y a los elementos. Aprenderemos sobre las siguientes propiedades:

text-shadow

box-shadow

Sombra de texto

La propiedad text-shadow de CSS aplica sombra al texto.

En su uso más simple, solo especificas la sombra horizontal (2px) y la sombra vertical (2px),

individual19.html:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 3px 3px;
}
h3 {

text-shadow: 4px 4px;
}
</style>
</head>
<body>

<h1>Efecto de sombra de texto 2px</h1>

<h2>Efecto de sombra de texto 3px</h2>

<h3>Efecto de sombra de texto 4px</h3>
</body>
</html>

text-shadow: 4px 4px; el 4px es la cantidad de desplazamiento horizontal y vertical de la sombra con respecto al texto, después de este ejemplo sugerimos usar valores diferentes para observar los que sucede.

Resultado:

Añadimos un color a la sombra

individual20.html :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>

<h1>Efecto de sombra con color </h1>

</body>
</html>

Resultado:

Veamos este es muy interesante individual21.html :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 20px 20px 8px #009900;
}
</style>
</head>
<body>

<h1>Efecto de sombra con otro aspecto con color </h1>

</body>
</html>

Resultado, individual21.html :

modifiquen el parámetro 5px, y vean lo que sucede

Ahora con 2 y 3 sombras individual22.html :

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px #fff,
3px 3px #666;
}
h2
{
text-shadow: 2px 5px 1px #999,
10px 15px 1px #000,
-5px 10px 1px #333;
}

</style>
</head>
<body>

<h1>Efecto de sombra con otro aspecto de doble sombra </h1>
<h2> Efecto de sombra de 3 </h2>
</body>
</html>

Resultado:

text-shadow: 2px 5px 1px #999,
10px 15px 1px #000,
-5px 10px 1px #333;

primer valor es el desplazamiento horizontal (+ ó -), segundo el vertical (+ ó -), el tercer valor es el grosor de la sombra y el ultimo valor es el color.

si se desea con efecto de neon usa esto: text-shadow: 0 0 3px #FF0000; se sugiere hacer un ejemplo cada quien para que vean el resultado.

este otro es muy interesante :

text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;

que efecto sera ?

este otro que sera ?

color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;

por ultimo :

color: coral;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

Otro efecto muy interesante es el siguiente

individual23.html:

<!DOCTYPE html>
<html>
<head>
<style>
div.test {
white-space: nowrap;
width: 200px;
overflow: hidden;
border: 1px solid #000000;
}

div.test:hover {
overflow: visible;
}
</style>
</head>
<body>

<p>Pase el cursor sobre los dos divs siguientes para ver el texto completo.</p>
<div class="test" style="text-overflow:ellipsis;">Este es un texto largo que no cabe en el cuadro.</div>
<br>
<div class="test" style="text-overflow:clip;">Este es un texto largo que no cabe en el cuadro.</div>

</body>
</html>

La propiedad white-space de CSS, determina cómo se maneja el espacio en blanco dentro de un elemento. Para hacer que las palabras se dividan en sí mismas, usa overflow-wrap (en-US), word-break (en-US), o hyphens en su lugar.

Valores

normal

Secuencias de espacios en blanco son reducidas a un solo espacio. Saltos de linea en el origen son tratados como un espacio en blanco. Agregar saltos de linea necesarios para llenar el contenedor.

nowrap

Reduce espacios en blanco igual que el modo normal, pero suprime saltos de linea del origen.

pre

Secuencias de espacios son preservados. Lineas son solo rotas en caracteres de saltos de linea encontrado en el origen y en elementos html <br>.

pre-wrap

Secuencias de espacio son preservadas. Lineas son rotas en caracteres de saltos de linea, en elementos html <br>, y agrega saltos necesarios para rellenar los cuadros de linea

pre-line

Secuencias de espacios en blanco son reducidas. Lineas son rotas en caracteres de salto de linea, en elementos html <br>, y los necesarios para rellenar los cuadros de linea

La siguiente tabla resume el comportamiento de los diversos valores de white-space:

	Nuevas líneas	Espacios y tabulaciones	Ajuste de texto
normal	Contraer	Contraer	Ajustar
nowrap	Contraer	Contraer	No ajustar
pre	Preservar	Preservar	No ajustar
pre-wrap	Preservar	Preservar	Ajustar
pre-line	Preservar	Contraer	Ajustar

La propiedad de CSS text-overflow determina como el contenido que se desborda y que no es mostrado, va a hacérsele notar a los usuarios. Puede ser cortado, mostrar una elipsis ('…', U+2026 Horizontal Ellipsis), o mostrar una cadena de texto personalizada.

clip
Este es el valor predeterminado para esta propiedad. El valor de la palabra clave truncará el texto en el límite del área de contenido, por lo tanto el corte puede darse en medio de una palabra. Para recortar justo en la transición entre caracteres se puede especificar con text-overflow como una cadena vacía, si eso es compatible con sus navegadores: text-overflow: '';.

ellipsis
El valor de la palabra clave mostrará puntos suspensivos ('…', U+2026 Horizontal Ellipsis) para representar texto recortado. Los puntos suspensivos se muestran dentro del área de contenido, disminuyendo la cantidad de texto mostrado. Si no hay suficiente espacio para mostrar los puntos suspensivos, se recorta.

<string> Experimental
El <string> (en-US) que será utilizado para representar texto recortado. La cadena se muestra dentro del área de contenido, disminuyendo el tamaño del texto mostrado. Si no hay suficiente espacio para mostrar la cadena, se recorta.

fade Experimental
El valor de esta palabra clave recorta el contenido en línea del texto que se desborda y aplica un efecto de atenuación cerca del borde de la linea de la caja con total transparencia en el borde.

fade( <length> | <percentage> ) Experimental
Esta función recorta el contenido desbordante en línea y aplica un efecto de atenuación cerca del límite de la caja con total transparencia en el borde.

El argumento determina la distancia sobre la que se aplica el efecto de atenuación. El <percentage> se revuelve contra la anchura de la línea de la caja. Los valore menores que 0 se truncan a 0. Los valores mayores que el ancho de la caja se recortan al ancho de la caja.

Efectos sombra en cajas

La propiedad CSS box-shadow se utiliza para aplicar una o más sombras a un elemento.

Especificar una sombra horizontal y vertical

En su uso más simple, solo especifica una sombra horizontal y vertical. El color predeterminado de la sombra es el color del texto actual.

revisemos esto individual24.html:

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 400px;
height: 150px;
padding: 15px;
background-color: coral;
box-shadow: 20px 10px;
}
</style>
</head>
<body>

<h1>La propiedad de sombra en caja</h1>

<div>Este es un elemento div con un cuadro de sombra.</div>

</body>
</html>

Resultado, sugiero modifique los valores y vean como cambia :

Especificar un color para la sombra

El parámetro de color define el color de la sombra individual25.html.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px lightblue;
}
</style>
</head>
<body>

<h1>La propiedad box-shadow</h1>

<div>Un elemento div con un lightblue box-shadow</div>

</body>
</html>

Resultado:

Agregar un efecto de desenfoque a la sombra

El parámetro de desenfoque define el radio de desenfoque. Cuanto mayor sea el número, más borrosa quedará la sombra.

individual26.html.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue;
}
</style>
</head>
<body>

<h1>La propiedad box-shadow</h1>

<div>El elemento div con 5px blurred, lightblue box-shadow.</div>

</body>
</html>

Resultado, puedes apreciar la sombra que aspecto tiene individual25.html

Establecer el radio de extensión de la sombra

El parámetro de extensión define el radio de extensión. Un valor positivo aumenta el tamaño de la sombra, un valor negativo disminuye el tamaño de la sombra,

individual27.html

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px 12px lightblue;
}
</style>
</head>
<body>

<h1>La propiedad box-shadow</h1>

<div>Un elemento div con un cuadro de sombra lightblue borroso, con un radio de extensión de 12 px.</div>

</body>
</html>

Resultado, individual27.html

Establecer el parámetro de inserción

El parámetro de inserción cambia la sombra de una sombra exterior (inicial) a una sombra interior,

invidual28.html :

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px 5px lightblue inset;
}
</style>
</head>
<body>

<h1>La propiedad box-shadow</h1>
<div>Un elemento div con un cuadro de sombra lightblue borroso, con inset box-shadow.</div>

</body>
</html>

Resultado invidual28.html :

Agregar múltiples sombras

Un elemento también puede tener múltiples sombras invidual29.html :

<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}

#example2 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
margin: 20px;
}
</style>
</head>
<body>

<h1>Multiples Sombras</h1>

<div id="example1">
<h2>Multiple Sombras</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
<br>

<div id="example2">
<h2>Multiples Sombras con efecto borroso</h2>
<p>box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green:</p>
</div>

</body>
</html>

Resultado invidual29.html

Tarjetas

También puedes usar la propiedad box-shadow para crear tarjetas similares al papel:

individual30.htm

<!DOCTYPE html>
<html>
<head>
<style>
div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

div.header {
background-color: #4CAF50;
color: white;
padding: 10px;
font-size: 40px;
}

div.container {
padding: 10px;
}

div.polaroid {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}

</style>
</head>
<body>

<h1>Creacion de Tarjetas (cards) </h1>

<p>La propiedad de box-shadow puede ser usado para crear tarjetas de papel, el div.container es util para los 2 casos si se usan separados debén contener este elemento:</p>

<div class="card">
<div class="header">
    <h1>1</h1>
</div>

<div class="container">
    <p>Enero 1, 2024</p>
</div>
</div>

<h1>Create Images</h1>

<p>La propiedad box-shadow puede ser usada para crear imagenes de postales:</p>

<div class="polaroid">
<img src="images1/rock600x400.jpg" alt="Noruega" style="width:100%">
<div class="container">
    <p>Hardanger, Noruega</p>
</div>
</div>
</body>
</html>

use esta imagen de Noruega pero pueden usar cualquierotra imagen.

Resultado individual30.html

CSS Propiedades de sombras

La siguiente lista muestra las propiedades de sombras (shadow):

Propiedad Descripción

box-shadow Añade una o mas sombras a un elemento

text-shadow Añade una o mas sombras al texto

Sombra en Explorer

Podemos compatibilizar estas sombras con Explorers anteriores al 9 usando un filtro:

. sombra {
zoom: 1;
filter:
progidzDXImageTransform.Microsoft.Shadow(color='#969696',
Direction=135, Strength=3);
}

El valor de 1 en zoom, como ya vimos antes, es necesario para activar la propiedad hasLayout. Este paso es requerido por los Explorers para que el filtro funcione en todas las situaciones. Desde ya que este código podría estar en una hoja de estilos exclusiva para Explorers vinculada mediante comentarios condicionales.

El parámetro Direction especifica desde qué ángulo (0 a 360) proviene la luz y por lo tanto, hacia dónde se proyectará la sombra es un valor en grados, mientras que Strength, que equivale a blur, es la solides o nivel de esfumado de la sombra.

Por supuesto aquí no termina la galería de efectos de CSS3, para mayor información de mas de estos efectos esta en : https://www.w3schools.com/css/default.asp que esta en ingles

En este sitio podrías encontrar muchos efectos en CSS3 pero seguira creciendo así que deberías de revisar esta pagina de forma periódica para enterarte de mas variaciones de esto y nuevos efectos.

(1) https://developer.mozilla.org/es/docs/Web/HTML
(2)El gran libro de HTML5, CSS3 y Javascript Juan Diego Gauchat
(3) https://dinahosting.com/blog/que-es-utf-8/
(4) https://openwebinars.net/blog/que-es-css3/
(5) https://www.freecodecamp.org/espanol/news/hojas-de-estilo-css-externas-como-vincular-css-a-html-e-importar-a-head/
https://www.w3schools.com/html/default.asp
Libro: HTML5 & CSS3 for real world Alexis Goldstein
https://lenguajehtml.com/html/

Unidad 2

Desarrollo de Sitios y Aplicaciones Web

CSS

Índice

EL CSS son las siglas de “Cascading Style Sheets” (hojas de estilo en cascada), es otro de los estándares que regula la W3C. El propósito de CSS es separar lo que es la estructura y contenido (HTML) de lo que es su estilo, color, tamaño, decoraciones varias por nombrar algunos ejemplos.

¿Cómo funciona el CSS?

Mediante el CSS, se definen las particularidades visuales y de estilo de una o varias etiquetas. Cuando hablamos de estilos que se pueden aplicar a una etiqueta, nos referimos a por ejemplo: color, fuente tipográfica, alineación, tamaño, posición.

Los ingredientes necesarios para aplicar un estilo son:

— Un elemento HTML (por ejemplo: div, header, body, p.) — El estilo propiamente dicho (un conjunto de atributos como pueden ser color, tamaño, posición, etc.

Un selector mediante el cual se indica a que etiqueta que aplicará el estilo.

Insertando el CSS en el HTML

Sintaxis CSS

Una regla CSS consta de un selector y un bloque de declaración, cada declaración esta separada por un punto y coma (;) en el bloque.

El selector apunta al elemento HTML al que desea aplicar estilo.

En este ejemplo, todos los elementos <p> estarán alineados al centro, con un color de texto rojo, esto se asigna en <style> y se aplicara en <body> cuando encuentre un indicador <p>, es decir p{.....} tiene el estilo y cuando encuentre p < > se aplicara en esta etiqueta:

Ejemplo explicado

p es un selector en CSS (apunta al elemento HTML al que desea aplicar estilo: <p>).

El color es una propiedad y el rojo es el valor de la propiedad.

text-align es una propiedad y el centro es el valor de la propiedad

Cuando un navegador lee una hoja de estilo, formateará el documento HTML de acuerdo con la información de la hoja de estilo.

Veamos cómo insertar código CSS en nuestro HTML. El código para CSS puede ser colocado directamente en la etiqueta que se quiera estilizar.

Veremos un ejemplo aplicando un color gris en lugar del negro, que es el color por defecto, a todo texto del <body>, utilizando el atributo style:

Pero esta práctica nos priva de la ventaja de tener separado el contenido de su estilo de presentación y no nos permite reutilizar código entre varias páginas, ya que solo aplicaría a esta pagina.

La manera de agregar el estilo antes que se cargue el contenido, es insertarlo en el <head>.

Veamos cómo seria la etiqueta <head>:

consideremos el siguiente ejemplo, con el nombre ejemplocss1.html:

ejemplocss1.html

El resultado:

Explicación del código.

NOTA: Es posible agregar comentarios en los estilos con los caracteres: /* y */

en el cuerpo del código de html se ve el efecto de:

Realizamos otro ejemplo de CSS en HTML lo llamaremos ejemplocss2.html

ejemplocss2.html

El resultado es este, un color muy llamativo:

Insertando el CSS de forma externa

Existen dos maneras de insertar CSS externo. En ambos casos, es necesario generar un archivo de texto plano con extensión: .css

Sigamos nuestro ejemplo donde lo haríamos de esta manera en un archivo llamado: estilos.css, guardamos el siguiente código:

en este ejemplo usare el editor llamado bluefish, pero pueden usar cualquier otro editor, este esta disponible para Windows en licencia GNU.

Luego en el <head> veremos una manera de cargar el archivo css, en cualquiera de los dos casos, se pueden importar tantos .css como se requiera.

Veamos cada caso:

Carga de un archivo css mediante import,

y carga de un archivo css mediante link:

usemos esto:

ejemplocss3.html

El atributo rel hace referencia al tipo de relación entre el HTML y el archivo CSS y el atributo href es la URL que puede ser relativo o absoluto. Y podemos apreciar que solo se ha aplicado el estilo para body, H1 no sido usado así que solo se aplica en body.

Revisemos estos conceptos, antes de continuar ya que son necesarios para la aplicación de los estilos :

Anatomía de un estilo

A cada uno de los estilos se lo conoce como “regla”. Vemos quienes son :

— <style >: es la etiqueta que especifica que contendría estilos.

— body: es una variable del tipo de selector. Este atribulo determina qué etiquetas serán afectadas. Mediante distintas sintaxis que veremos inmediatamente, se define cómo se “seleccionará” un elemento determinado para aplicarle el estilo.

— {} ; el estilo es un objeto que contiene diferentes atributos para ser aplicado a un elemento determinado.

— color:#999999: a cada uno de los atributos (que pueden ser uno o más) de un estilo se le llama declaración.

Ésta, a su vez, está compuesta por el nombre del atributo (ej. color) y su valor (ej. #999999).

Selectores CSS

Como hemos visto, una regla CSS (es decir, un estilo) está conformado por:

Selector: que determina a QUIÉN se aplicará el estilo.

Declaración: define QUÉ estilo se aplicará.

Existen varios tipos de selectores y formas de combinarlos. Nos centraremos en los más comunes y tienen un uso más generalizado.

Selector universal

Este selecciona todos los elementos de un documento HTML. Por ejemplo, esta regla aplicará a todos los elementos de una página HTML un fondo de color gris claro.

¿Cómo se lee este selector? Este selector significa aplicar este estilo a todos los elementos.

Selector por etiqueta

El selector por etiqueta se le utiliza poniendo el nombre de la etiqueta como selector. Si, por ejemplo, queremos modificar la tipografía de cualquier etiqueta <h1> y que todos se vean igual, lo hacemos de esta manera:

¿Cómo se entiende este selector?

Este selector significa aplicar este estilo a todo elemento cuyo nombre de etiqueta sea igual ahí h1.

Esta modificación afecta a la etiqueta que tenga el nombre del selector y a sus hijos. Si, por ejemplo, tenemos esta situación:

Todos los elementos <body> y todos sus hijos obtendrán el valor de color, exceptuando los elementos que tengan este atributo asignado. En nuestro ejemplo, <h1> sobrescribirá la propiedad color de <body>.

Aplicando un estilo a varias etiquetas

Un mismo estilo se puede aplicar a varias etiquetas, si tenemos por ejemplo:

Se puede aplicar un mismo estilo a varias etiquetas separando los nombres de etiqueta con el signo de coma (,). El siguiente código es exactamente lo mismo que el código anterior:

Lo que significa: aplicar este estilo a toda etiqueta que se llame h1 o h2.

Es posible agregar atributos a un estilo.

Selector descendente por etiqueta

¿Cómo se lee el selector descendente?

De acuerdo a nuestro ejemplo, se lee como: aplicar este estilo a toda etiqueta <h1> que sea hijo o descendiente de <header>.

Selector por id

El elemento de nuestro ejemplo y cualquier otro elemento cuyo atributo id sea igual a: tituloPrincipal será afectado por este código en un CSS:

¿Cómo se lee el selector por Id?

Este selector significa aplicar este estilo a todo elemento cuyo atributo id sea igual a tituloPrincipal.

Selector por clase

— Un elemento HTML (por ejemplo: div, header, body, p.)
— El estilo propiamente dicho (un conjunto de atributos como pueden ser color, tamaño, posición, etc.

¿Cómo se lee este selector?
Este selector significa aplicar este estilo a todos los elementos.

El selector por etiqueta se le utiliza poniendo el nombre de la etiqueta como selector.
Si, por ejemplo, queremos modificar la tipografía de cualquier etiqueta <h1> y que todos se vean igual, lo hacemos de esta manera:

Todos los elementos <body> y todos sus hijos obtendrán el valor de color, exceptuando los elementos que tengan este atributo asignado.
En nuestro ejemplo, <h1> sobrescribirá la propiedad color de <body>.

Este selector no debe ser confundido con el selector de clases múltiple.
Es muy fácil confundirse y tiene una aplicación distinta:

Si aún se necesita ser más específico en la selección de etiquetas. Se pueden combinar los diferentes selectores.
Combinación del selector de etiqueta y selector universal