UD01 | Hojas de estilo en la construcción de una página web

Introducción

Conectar HTML y CSS

Se muestra la forma de integrar el código CSS dentro de una página mediante el elemento HTML <style>:

Integrar CSS en el <head>
Ejemplo:

<style>

    h1{ color: red; }

</style>

<!-- No es el método más recomendable, pero es válido

sobre todo en páginas web únicas. -->

    package com.mycompany.proyecto01;
/*
com.mycompany.proyecto01
    Es el groupId. Representa la organización autora/dueña del proyecto o
    artefacto. Este dato puede verse en el archivo Project Files/pom.xml 
*/

/**
 *
 * @author manu
 */
public class Proyecto01 {
/*
Proyecto01
    Es el artifactId. este campo define el nombre por el que se conoce al
    proyecto en sí mismo. Este dato puede verse en el archivo Project
    Files/pom.xml 
*/

    public static void main(String[] args) {
        System.out.println("Hello World!");
    } //Fin del método main
} //fin de el clase Proyecto01Mad

/*
Al ejecutar este código se imprime por consola el mensaje "Hola Mundo"
Cuando se ejecuta el código de una aplicación ocurren varios procesos:
1.- El IDE (en nuestro caso NetBeans) se encarga de compilar el código
    fuentee y lo convierte en un archivo .class
    El archivo .class contienen un código próximo al código binario.
    No es 100% binario de ceros y unos.
    Este código pseudo-binario se le conoce como bytecode. está a un nivel
    intermedio entre el código fuente y el código binario.
2.- La Máquina Virtual de Java (MVJ) interpreta el bytecode a través del
    compilador Just In Time (JIT) y lo convierte en código binario
3.- Finalmente la MVJ lo ejecuta.
*/
Se muestra la forma de integrar el código CSS dentro de la etiqueta de apertura de un elemento HTML:

Integrar CSS en etiquetas HTML
Ejemplo:

<h1 style="color: red;">

<!-- Es el método menos recomendado aunque tiene cierta

utilidad cuando se trabaja con JavaScript. -->
Se muestra cómo vincular una hoja de estilos CSS externa en la página web mediante el elemento HTML <link> en el <head>:

Vincular CSS en documentos HTML
Ejemplo:

<link rel="stylesheet" href="https://almeri.media/contenidosdidacticos.es/ifcd0110/assets/css/style.css">

<!-- Es el método más recomendado cuando se quiere

compartir una misma hoja de estilos con varios documentos

HTML. -->
Se muestra cómo importar una hoja de estilos CSS externa en la web mediante @import:

Importar CSS en documentos HTML
Ejemplo:

<style>

  @import url("https://almeri.media/contenidosdidacticos.es/ifcd0110/assets/css/style.css");

</style>

<!-- Es un método muy poco recomendado. -->

Tipos de selectores

Se presentan los selectores básicos de CSS:

Selector universal
Ejemplo:

* { color: grey; }

/* El estilo se aplicará a todos los elementos de la página */

Selector de etiqueta
Ejemplo:

p { color: green; }

/* El estilo se aplicará a todos los elementos p */

Selector de clase
Ejemplo:

.especial { color: red; }

/* El estilo se aplicará a todos los elementos que tengan

la clase .especial */

Selector de id
Ejemplo:

#apartado-1 { color: blue; }

/* El estilo se aplicará al único elemento que tenga el id

apartado-1 */
Se presentan los selectores de atributos:

[atributo]
Ejemplo:

[colspan]{color:crimson}

/* [atributo] Elementos que tienen un atributo */

[atributo = "valor"]
Ejemplo:

[id = "id-dos"]{color:red;}

/* [atributo = "valor"] Elementos que tienen un atributo con

un determinado valor */

[atributo ~= "valor"]
Ejemplo:

[class ~= "li-rojo"]{color:red;}

/* Elementos que tienen un atributo con, al menos, un valor

determinado */

[atributo |= "valor"]
Ejemplo:

 [lang |= "fr"]{color:red;}

/* Elementos que tienen un atributo con un valor determinado o un

valor determinado seguido de un guion */

[atributo ^= "valor"]
Ejemplo:

[class ^= "li-verde"]{color:springgreen;}

/* Elementos que tienen un atributo con uno o varios valores que

empieza por un valor determinado */

[atributo $= "valor"]
Ejemplo:

[class $= "li-azul"]{color:blue;}

/* Elementos que tienen un atributo con uno o varios valores que

acaban por un valor determinado */

[atributo *= "valor"]
Ejemplo:

[class *= "li-marron"]{color:brown}

/* Elementos que tienen un atributo con uno o varios valores que

contengan un valor determinado */
Se presentan los selectores descendientes:

Selector descendiente
Ejemplo:

main p { color: green; }

/* El estilo se aplicará a todos los elementos p

descendientes del elemento main */
Se presentan los selectores de hijos:

Selector hijo (>)
Ejemplo:

main > p { color: green; }

/* El estilo se aplicará a todos los elementos p hijos

directos del elemento main */
Se presentan los selectores de hermanos adyacentes:

Selector adyacente (+)
Ejemplo:

h2 + p{color:red;}

/* El estilo se aplicará a los elementos p hermanos adyacentes

del elemento h2 */
Se presentan los selectores de hermanos generales:

Selector hermanos generales (~)
Ejemplo:

h2 ~ p{color:red;}

/* El estilo se aplicará a los elementos p hermanos del

elemento h2 */
Se expone cómo agrupar selectores:

Selector agrupados (,)
Ejemplo:

.estilo-1, .estilo-2 {color: brown;}

/* El mismo estilo se aplicará a los selectores .estilo-1 y

.estilo-2 */
Ejercicios de repaso de selectores

Reglas CSS para medios diferentes

Se presentan las reglas media de CSS:

Reglas @media para pantalla e impresora
Ejemplo:

@media screen{

    p { color:red; }

}

/* Los párrafos se verán rojos por pantalla */



@media print{

    p { color:blue; }

}

/* Los párrafos se verán azules por la impresora */
Se presenta cómo importar hojas de estilo CSS en un documento HTML donde cada hoja va destinada a un medio diferente:

Reglas @import para pantalla e impresora
Ejemplo:

<style>

    @import url("https://almeri.media/contenidosdidacticos.es/ifcd0110/assets/css/style.css") screen;

    <!-- Importa la hoja de estilos para la pantalla -->

    @import url("https://almeri.media/contenidosdidacticos.es/ifcd0110/assets/css/style-print.css") print;

    <!-- Importa la hoja de estilos para la impresora -->

</style>
Se presenta cómo establecer estilos especiales a medios como una impresora mediante el elemento HTML <link>:

Vincular hojas para pantalla e impresora
Ejemplo:

<link rel="stylesheet" type="text/css" media="screen"

href="https://almeri.media/contenidosdidacticos.es/ifcd0110/assets/css/style.css">

<!-- Vincula la hoja de estilos para la pantalla -->



<link rel="stylesheet" type="text/css" media="print"

href="https://almeri.media/contenidosdidacticos.es/ifcd0110/assets/css/style-print.css">

<!-- Vincula la hoja de estilos para la impresora -->

Resetear y normalizar

Se presentan la diferencia entre resetear y normalizar una página web.

Principios Básicos del CSS

Herencia
Se presenta el concepto de la herencia en CSS:

Propiedades heredables por defecto
Ejemplo:

body {

    color:red;

}

/* Color es una propiedad heredable por defecto */

Propiedades no heredables por defecto
Ejemplo:

div.contenedor {

    border:solid; 

}

/* Esta propiedas no se hereda por defecto */

Forzar herencia
Ejemplo:

header{

    border:inherit;

}

/* Con inherit, el borde hereda el valor */

Forzar el valor inicial o predeterminado
Ejemplo:

footer {

    font-family: initial;

}

/* Con initial, footer vuelve a tener el valor inicial de la

propiedad font-family */
Especificidad
Se presenta el concepto de cascada:

Cascada
Ejemplo:

.seccion-01 h3 { color:red; }

.seccion-01 h3 { color:green; }

/* En dos reglas CSS con dos selectores idénticos que

modifican una misma propiedad, la segunda regla vence

a la primera */

Especificidad | Selector básico de etiqueta
Ejemplo:

span { color:green; }

/* especificidad = 0, 0, 0, 1 */

Especificidad | Selector básico de clase
Ejemplo:

.frase-destacada { color:lightcoral; }

/* especificidad = 0, 0, 1, 0 */

Especificidad | Selector básico de identificador
Ejemplo:

#destacado { color:orange; }

/* especificidad = 0, 1, 0, 0 */

Especificidad | Sin selector
Ejemplo:

<span style="color:red;">

Soy un span

</span>

<!-- Sin selector, con una regla en el atributo de un elemento

especificidad = 1, 0, 0, 0 -->

Especificidad | Ejemplo de cálculo 1
Ejemplo:

span.frase-destacada { color:lightgreen; }

/* especificidad = 0, 0, 1, 1 */

Especificidad | Ejemplo de cálculo 2
Ejemplo:

section blockquote#cita { background-color:pruple; }

/* especificidad = 0, 1, 0, 2 */

Especificidad | Ejemplo de cálculo 3
Ejemplo:

article.articulo section blockquote#cita {

     background-color:saddlebrown;

}

/* especificidad = 0, 1, 1, 3 */

Especificidad | Ejemplo de cálculo 4
Ejemplo:

<span style="color:red;">

    Soy un span

</span>

<!-- especificidad = 1, 0, 0, 0 -->

Propiedad !important
Ejemplo:

.seccion-01 h3 { color:red!important; } /* Esta regla vence */

.seccion-01 h3 { color:green; }

/* Se debe tener mucho cuidado con el uso de !important.

Se utiliza para convertir una propiedad y un valor particular

en el elemento más específico, de modo que se invalidan las

reglas normales de la cascada.  */