Ahora también distribuidor oficial BQ

Aplicaciones Web (I)

HTML5 CSS3 JSHERRAMIENTAS

 

Notas acerca de Sublime Text

Instalar con repositorios en Ubuntu.


sudo add-apt-repository ppa:webupd8team/sublime-text-3 
sudo apt-get update 
sudo apt-get install sublime-text-installer

Instalar Package Control:   View > Show Console  (Ctrl+\)


import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)


Para su instalación en Windows, seguir las instrucciones en la web Package Control.

 

 Nota acerca de la depuración en Firefox

Herramientas de desarrollo web de Firefox (https://developer.mozilla.org/es/docs/Tools)

 

 ALTA EN SERVIDOR

Cada uno deberá crearse una cuenta para subir los trabajos.

 

INTERNET Y LA NUBE

Clientes, servidores y la nube

Clientes: Dan acceso a información y servicios en Internet

Servidores: Alojan la información y los servicios

La nube: conjunto de terminales y servidores interconectados con aplicaciones y protocolos de Internet

TCP/IP: protocolos de interconexión de redes de fibra, cable, WIFI, … sobre los que se implementan las aplicaciones de Internet y sus protocolos

Clientes, navegadores y tiendas

Clientes de acceso a Internet más importantes
PCs, portátiles, tabletas, teléfonos inteligentes

Navegador (browser) cliente Web de acceso a servidores
Utilizan: URL, HTTP, HTML, CSS y JS
P.E.: Chrome, Firefox, Internet Explorer, Opera, Safari, …

Tiendas de aplicaciones
Instalan aplicaciones en móviles y tabletas
Las aplicaciones usan las normas de la Web (URL, HTTP, …)

Máquina servidora (host)

Contiene información y servicios

Una máquina servidora tiene una dirección “conocida” en Internet
Dirección simbólica (de dominio o DNS): crisanformacion.com, google.com, …
Cada dirección de dominio tiene una dirección IP (binaria) asociada

Hay 2 tipos de direcciones IP: IPv4 e IPv6
IPv4: versión 4 del protocolo IP con dirección de 32 bits o 4 octetos
ejemplo:
192.9.0.144,
127.0.0.1 (localhost – mi máquina),

IPv6: versión 6 del protocolo IP (última) con dirección de 128 bits
ejemplo:
2001:db8:85a3::8a2e:370:7334, …

Servidores y puertos

Puerto
Dirección de 16 bits dentro de la máquina servidora
Es donde se instala el programa servidor
El programa servidor es lo que normalmente denominamos servidor
Cliente y servidor se comunican a través de un protocolo: HTTP, SMTP, …
Utilizando el interfaz de sockets TCP/IP para comunicar entre ambos

Los servicios tienen un protocolo y un puerto por defecto
Web: protocolo HTTP (puerto 80), HTTPS (443)
Email: protocolo SMTP (puerto 25), POP3 (110), IMAP (143)
Shell segura: protocolo SSH (puerto 22)

Si un servidor no está en el puerto por defecto
Su dirección debe incluir el puerto, p.e. crisanformacion.com:8080, 192.9.0.144:8080

URL

URL (Uniform Resource Locator)
Dirección de un recurso en un servidor en Internet

Internet soporta muchos tipos de servicios diferentes
Cada tipo de servicio utiliza un URL y protocolo diferentes

Algunos ejemplos de tipos de URLs
URL Web: utiliza HTTP para acceder a recursos, incluye
Protocolo, servidor y recurso (camino): http://google.com/picture.png

URL de correo (email): identifica el buzon de usuario, incluye
protocolo, buzon de usuario y servidor: mailto:pepe_garcia@gmail.com

HTTP (HiperText Transfer Protocol)

Protocolo del Web
Procesa recursos identificados por un URL en un servidor remoto

Métodos o comandos principales de HTTP
GET: trae al cliente (lee) un recurso identificado por un URL
POST: crea un recurso identificado por un URL
PUT: actualiza un recurso identificado por un URL
DELETE: borra un recurso identificado por un URL
… (hay más comandos)

Aplicación Web

Aplicaciones ejecutables en un navegador creadas con HTML, CSS y JavaScript

HTML
Lenguaje de marcado de páginas Web define la estructura del contenido de una página Web
En WebApps define la interfaz de la aplicación con el usuario
CSS
Define el estilo visual de un una página o aplicación Web (HTML)
JavaScript
Lenguaje de programación de aplicaciones de cliente

WebApps o aplicaciones de cliente

Aplicaciones que residen en un servidor
        Se ejecutan en un cliente
        Se identifican con un URL: http://upm.es/apps/webapp.html
        El cliente trae la aplicación del servidor con el protocolo HTTP (GET)
Las apps se construyen con las tecnologías de la Web
URLs, HTTP, HTML, CSS y JavaScript

 

HTML5 CSS3 JSHTML

¿Qué es HTML?

  • Es un lenguaje de marcas para formatear y estructurar un documento, que puede leerse en cualquier navegador. <html> … … </html>
  • Estandarizado en la norma ISO de SGML  (Standard Generalized Markup Lenguage).
  • El W3C desarrolla especificaciones técnicas y directrices, de forma que se pueda asegurar una  alta calidad técnica y editorial.

Estructura HTML

Un documento HTML tiene tres etiquetas que describen la estructura general de un documento y dan una información sencilla sobre él. <html>, <head> y <body>
Las etiquetas pueden escribirse tanto en mayúsculas como en minúsculas, pero se recomienda el uso de minúsculas: <html> o <HTML>, <body> o <BODY>
Adicionalmente <!doctype html> declara un documento HTML5 para que se visualice correctamente. Doctype comienza a utilizarse en HTML4.01 y XHTML
Se puede comprobar si el lenguaje de marcado es correcto en: http://validator.w3.org/

<html> para identificar que esta codificado en este lenguaje y limitar, el principio y el fin del documento.

<head> la cabecera, que contiene información y recursos sobre el propio documento y que no aparece en el documento, destacando el titulo <title>. Será el nombre que aparece en la cabecera del visualizador y en los buscadores de ahí la importancia de que sea significativo.

<meta charset=”character_set”> La etiqueta meta define varios tipos de metadatos. El atributo charset especifica la codificación usada en nuestra página.
Charset utf-8 es la Unicode Transformation Format 8-bit representa el código de caracteres UNICODE. Es compatible con ASCII. Permite visualizar los caracteres de todos los idioma.

Caracteres especiales: para incluir en el texto caracteres que son propias del lenguaje HTML es necesario usar su anotación codificada:
http://dev.w3.org/html5/html-author/charref


Espacio en blanco    (non-breaking space)    &nbsp;
<                    Menor que               &lt;
>                    Mayor que               &gt;
&                    Ampersand               &amp;
“                    Comillas                &quot;
‘                    Apóstrofe               &apos;

<body> El cuerpo contiene los elementos visibles en la página. Las imágenes, los encabezados, los párrafos de texto, las listas, las tablas, los hipervínculos…

Lenguaje HTML

Un documento HTML inserta en el texto etiquetas que controlan los diferentes aspectos de la presentación y la semántica del    contenido.
Los textos habituales están formados por encabezados <h1>, párrafos <p>, texto importante <strong>, enfatizado <em>, listas    <ul> <li>…

Semántica

El lenguaje de marcas HTML, está orientado a la definición de la estructura y la semántica del documento y no a su representación gráfica.

Las marcas de texto en html, se emplean para el estructurado semántico del contenido.

Los textos habituales están formados por párrafos, palabras en negrita o cursiva, anotaciones y correcciones, citas a otros documentos externos…

Marcado básico:
<p></p> – párrafo
<em></em> – da énfasis al texto que encierra
<strong></strong> – Máxima importancia al texto que encierra
Las etiquetas <b> para la bold o negrita  y la etiqueta <i> para la itálica o cursiva, son similares visualmente, pero sin significado semántico.
http://www.w3.org/wiki/HTML/Elements/b

Listas:

<ul></ul> – define listas, no ordenadas.
<ol></ol> – define listas, ordenadas.
<li></li> – define los elementos de las listas

Citas:

<blockquote></blockquote> – citas textuales de un texto externo.
El atributo cite = “url” – Indica la dirección de la página web original de la que se extrae la cita.

<blockquote cite="http://crisanformacion.com/conocenos/">
 La academia Crisan Formación abrió sus puertas en 2013 y ...
 </blockquote>

Texto preformateado:

<pre></pre> – mantiene el aspecto visual, los elemento en blanco se mantienen igual que en el texto original.

Abreviatura y acrónimo:

<abbr></abbr> – para indicar el significado de una abreviatura o un acrónimo.

Salto de línea:

<br> – Salto de línea en el texto, sin los márgenes definidos para el párrafo.

Pocas veces hay que usar un salto de línea: Una poesía, un listado del código, cuando cada línea no es un párrafo por sí sola.

Superíndices y subíndices:

<sup></sup>
<sub></sub> – para etiquetar el texto como super o subíndices.

Código:

<code></code> – para representar fragmentos de código informático.

Valores por defecto:

 code {
 fontefamily: monospace;}

Otras marcas de texto:

Texto borrado <del> e insertado <ins> en un documento.
Listas de definiciones <dl>, <dt> y <dd>

Tabla

Las tablas se definen con las etiquetas <table>, <tr> para cada fila y <td> para cada columna <th> indica que una celda es la cabecera.

Recursos HTML

MDN: Lista de Elementos HTML5
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
W3C: HTML5 elements
http://dev.w3.org/html5/markup/elements.html
Woork Up: HTML5 tag reference
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet1.pdf

 

HTML5 CSS3 JS

CSS

CSS controla el aspecto gráfico del documento mediante hojas de estilo stylesheets, indicando al navegador como se deben visualizar los elementos de un documento HTML. Así se consigue separar el aspecto del contenido.

Proyecto css Zen Garden:
http://www.mezzoblue.com/zengarden/alldesigns/

Selectores CSS

Para aplicar un estilo de presentación, el selector de elemento  puede ser una etiqueta HTML:

p, h1, ul, li

    El estilo afecta a todo el contenido incluido dentro de esa etiqueta

<p></p>, <h1></h1>, <ul></ul>.

    El selector puede aplicarse a más de una etiqueta HTML:

selector, selector
h1,h2,h3 // Afecta a los elementos <h1>, <h2> y <h3>

El estilo puede estar en la cabecera de la página, debe expresarse en un elemento <style> dentro de la cabecera <head> del documento.

selector { y cada declaración: propiedad : valor;}

Cada etiqueta HTML tiene unos valores de CSS por defecto, que pueden variar según el navegador, que tendremos que modificar con nuestros estilos personales.

Más información valores por defecto:

W3C:
http://dev.w3.org/html5/markup/elements.html
Internet Explorer:
http://www.iecss.com/
Firefox:
http://mxr.mozilla.org/mozillaecentral/source/layout/style/html.css
Chrome, Safari:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Opera
http://www.iecss.com/operae10.51.css

Añadiendo CSS

La primera forma de añadir el estilo CSS a un documento HTML es con elementos en línea, es el método más sencillo, añadiendo un atributo style en el elemento concreto dentro de la página. No se pueden reutilizar para varios elementos que comparten las mismas propiedades en otras páginas.
Se escriben las propiedades del estilo en las marcas del HTML como “nombre: valor” separadas por punto y coma.

<body style="color: red;">
<p style="font-size: 16px; color: blue; font-family: Arial,sans-serif;">
Mi primera página</p>

La segunda forma añade el estilo CSS en un bloque <style> en la cabecera  (<head>) y aplica el estilo a varios elementos de la página.

<style type="text/css">
 body   { font-family: Arial, Helvetica, sans-serif; }
 h1     { font-size: 1.4em; background-color: #CCC; }
 p      { background-color: #CCC;}
 em     { color: orange; background-color: #E8E8E8; }
 strong { color: red; background-color: #E8E8E8; }
 </style>

Cada elemento HTML tiene una caja asociada, donde aplican los comandos de estilo CSS. El color de fondo aplicado a cada elemento HTML del ejemplo, muestra la caja asociada a cada uno.

Lo más aconsejable para mantener la separación entre contenido y presentación, en una hoja de estilo CSS separada del HTML, que se importa con un elemento <link> en la cabecera.

<link href="hojaestilo.css" rel ="stylesheet" type="text/css">

La principal ventaja es que las hojas de estilo son aplicables a una o a muchas páginas. Permite además adaptar la presentación a PCs, móviles, tabletas o impresoras  con el atributo media que activará el estilo específico de cada dispositivo.

<link href="estilo1.css"
      rel="stylesheet"
      type="text/css"
      media="screen">
<link href="estilo2.css"
      rel="stylesheet"
      type="text/css"
      media="(min-width:380px)">

http://www.w3.org/TR/css3emediaqueries/

 

HTML5 CSS3 JS

UNICODE

Alfabeto, código y codificación

Juego de caracteres o alfabeto
Conjunto de caracteres normalizados para representar una lengua

Código de caracteres (ver http://www.w3schools.com/tags/ref_charactersets.asp)
Código numérico asignado a cada carácter de un alfabeto, p.e.
ASCII: Alfabeto inglés (EEUU) codificado en 7 bits por carácter
ISO Latin-1 (ISO 8859, ISO Latin-15): Alfabetos de Europa occidental, 8 bits
UNICODE: código internacionalizado que soporta muchas lenguas

Codificación
Representación binaria de un código de caracteres, p.e. UNICODE tiene
UTF-8: Código de longitud variable de 1, 2, 3 o 4 bytes, eficiente para lenguas latinas
UTF-16: Codifica plano BMP en 2 bytes, otros planos en 4 bytes
UTF-32: Código de longitud fija: 4 bytes eficiente con planos que no son BMP

Unicode Consortium

UNICODE es un consorcio internacional
Define normas de internacionalización (I18N)
Códigos de caracteres (UNICODE), símbolos, librerías software, formatos, …
http://www.unicode.org/

Código UNICODE
Código de caracteres internacionalizado, es el resultado más conocido del consorcio y puede representar muchas lenguas
Ver: http://www.unicode.org/charts/

UNICODE BMP: subconjunto ASCII (Basic Latin)
http://www.unicode.org/charts/PDF/U0000.pdf

UNICODE BMP: extensión ISO Latin1
http://www.unicode.org/charts/PDF/U0080.pdf

¿Cuantos códigos de caracteres manejamos?

El diseño de una página Web
Se pueden utilizar códigos diferentes
El editor utilizará el código seleccionado
El fichero se podrá guardar con otro código
El SO (Windows, Linux, …) utiliza otro código

La navegación por Internet
Puede utilizar códigos diferentes
El navegador tiene un código configurado por el usuario que lo utiliza
El servidor suele estar internacionalizado
HTML indica el código de la página
OJO: debe coincidir con el del fichero en disco

Entidad de caracter / Character entities

La sintáxis de HTML obliga a no utilizar algunos caracteres
<” es comienzo de marca y no se puede incluir dentro de un texto
Dentro de un texto “<” debe representarse con “character entities
Problemas similares ocurren con otros caracteres: >, &, …

Las tablas completas están en
http://brajeshwar.github.io/entities/
http://www.w3schools.com/html/html_entities.asp
http://www.w3.org/TR/html4/sgml/entities.html

 

HTML5 CSS3 JSURL

Recurso Web

Contenido digital procesable con HTTP
Normalmente se almacena en un fichero en un servidor
p.e., página Web, foto, película, fichero o parte de el, registro de una BD, …

URL Web

Dirección unívoca de un recurso Web en Internet
HTTP permite procesar el recurso Web identificados por el URL Web

Un URL Web tiene 3 componentes básicos

Por ejemplo, en http://google.com/picture.png
http es el protocolo o método de acceso al recurso
google.com es la dirección del servidor en Internet donde reside el recurso
/picture.com es el camino (path) dentro del servidor que identifica el fichero

Path o camino de un URL

El path es la ruta desde el directorio raíz    a través de los directorios del servidor que lleva al recurso

Los servidores Web suelen estar configurados para que el fichero index.html o index.htm se pueda omitir
/lib/coches/index.html será equivalente a /lib/coches/

El camino (path) es el camino de directorio UNIX (path)  ..  se refiere al directorio anterior
/lib/casas/../coches/vw.html es equivalente a /lib/coches/vw.html

Hiperenlace

El hiperenlace permite navegar por Internet
Define una relación entre documentos
<a href=”http://upm.es”>UPM</a>

Atributos de <a …>
href: hiperenlace asociado
alternate: página alternativa
rel: relación con la página enlazada alternate, author, license, tag, …
type: mime-type de página enlazada

Ejemplos
<a rel=”license” href=”http://creativecommons.org/licenses/by-nc/3.0/”>license</a>

 

Ancla (Anchor o Fragment)

El ancla (anchor) se añade al final del URL identifica un elemento dentro una página Web
El identificador debe ser único en la página Web
Formato: <protocol://><host><path><anchor>
Por ejemplo: http://dit.upm.es/ej_id.html#seccion2
#seccion2 : identifica la sección 2 de la página HTML

 

URLs relativos

Relativos al recurso anterior
Solo llevan path, el navegador añade host, protocol y port del acceso anterior

Ejemplos

Path absoluto:
/lib/coches/vw.html
Camino absoluto desde el directorio raíz del servidor
Path relativo:
coches/vw.html, vw.html
Camino relativo desde el directorio del recurso actual
Path relativo con .. :
../casas/chalet.html
Camino relativo con vuelta a directorio padre
Anchor solo:
#seccion3
Elemento con id=seccion3 en el mismo recurso
¡Ojo! El navegador no accede al servidor, el recurso ya esta cargado

 

URL con pregunta o query

Se puede añadir una pregunta o query con parámetros
<protocol://><host><path><query>
pregunta o query: parámetros con la siguiente sintáxis
?param1=valor1&param2=valor2&…
Se utilizan en interfaces REST de acceso a servicios
Identifican información en una base de datos

Ejemplo
http://upm.es/lib/rec1.html?usuario=1527
?usuario=1527 : envía el parámetro “usuario=1527”

 

Otros URLs

El URL soporta otros servicios accesibles con otros protocolos, tales como telnet, mailto, file, ftp, …

URL de identificación de ficheros locales (con un path):
file:///dir1/dir2/fichero.html
Solo tiene protocolo y path absoluto.

URL de email
Permite crear correos electrónicos en documentos Web. Al hacer clic en ellos se despliega el correo especificado.

Mas información en:
http://email.about.com/od/mailtoemaillinks/a/mailto_elements.htm

 

HTML5 CSS3 JS

Estructura HTML

Los elementos html pueden visualizarse como bloque o como en línea.

Los elementos bloques block ocupan todo el ancho de la página y fuerzan a una nueva línea antes y después.

<article> <aside> <canvas> <div> <footer> <h1> <h2> <h3> <h4> <h5> <h6> <header> <p> <pre> <section> <ul>…

https://developer.mozilla.org/es/docs/Web/HTML/Block-level_elements

Los elementos en línea inline sólo ocupan el ancho necesario y no fuerzan nuevas líneas.

<em> <a> <br> <img> <span> <button> <input> <select> <textarea>…

https://developer.mozilla.org/en/docs/Web/HTML/Inline_elemente

 

DIV

El elemento <div> es un elemento de bloque que se emplea para contener en su interior otros elementos HTML.

El elemento <div> no tiene ningún significado, es semánticamente neutro.

Empleando CSS, el elemento <div>, se puede utilizar para estructurar el documento en grandes bloques de contenido.

El div es la propuesta para sustituir a los elementos <table> para el diseño. El propósito del elemento <table>, es para mostrar datos tabulados.

<div> define bloque un genérico empleado para formatear con CSS.

<div id=”caja” class=”cabecera”> … </div>

Atributo ID: identifica unívocamente un elemento HTML en una página. Un elemento HTML solo debe tener un atributo ID y éste debe ser único en la página. El selector CSS  #caja se refiere al elemento con atributo id=”caja” como en #caja {color:blue}

Atributo CLASS: define una clase de elementos HTML. Un elemento puede tener varios atributos CLASS. El selector CSS .cabecera se refiere a todos los elemento de la clase cabecera (que llevan el atributo class=”cabecera”) como en .cabecera {color:red}

 

SPAN

El elemento HTML <span> es un elemento en línea que se emplea como un contenedor de texto.

El elemento <span> no tiene ningún significado especial, es semánticamente neutro.

Cuando se utiliza junto con CSS el elemento <span> se puede utilizar para establecer los atributos de estilo para las partes del texto mediante un identificador id o una clase class.

Los elementos <DIV> y <SPAN> se emplean para definir normas de estilo más específicas.

El atributo id se emplea para identificar un elemento único.

El atributo class cuando hay más de un elemento que mantienen una relación significativa, puede ser compartir el estilo.

 

Estructura HTML

En HTML5, los bloques, son sustituidos por bloques semánticos que muestran significado por si mismos.

<header>
<nav>
<section>
<aside>
<article>
<footer>

Una página de este tipo realizada con los nuevos bloques semánticos del HTML5 quedaría como en el ejemplo 05e_bloques_html5.html

En cambio, una página de este tipo realizada con <div> quedaría como el ejemplo 05f_bloques.html

Es habitual una caja contenedor para impedir que ocupe toda la página cuando la ventana de la navegador es muy grande o controlar la disposición de los elementos cuando es muy pequeña.

La estructura HTML debe realizarse en el sentido lógico de lectura del documento, y cuando la página se vea sin aplicar los estilos no pierda su significado.

 

Herencia CSS

Para entender como funcionan los selectores y la herencia CSS es necesario entender qué es el árbol del documento.

Árbol del documentoVer imagen de arbol.png

Ancestor es un elemento conectado pero más arriba en la estructura del documento html
Ancestor de nav es div.caja o body

Descendientes son los elementos conectados pero más abajo en la estructura del documento.
Descendientes de nav son ul y todos los li y a

Parent es el elemento conectado y directamente sobre un elemento en la estructura del documento.
El parent de nav es div.caja

Child es el elemento conectado y directamente debajo de un elemento en la estructura del documento.
El child de nav es ul

Siblings, son los elementos que comparten un mismo padre en la estructura del documento.
Son siblings header, nav, article y footer todos ellos con el parent div.caja

Si definimos un estilo en el body, todos los elementos situados debajo en el árbol del documento, heredan esa propiedad.
Prueba a añadir el siguiente código temporalmente en la cabecera de 05c_arbol.html y ábrelo

<style type="text/css">
 body { color: red; }
 </style>

 

HTML5 CSS3 JS

Prioridad CSS

Selectores CSS

El selector aplica a todos los elementos HTML de la página con esa etiqueta (p).

p {
color: #F00;
}

El selector múltiple de CSS, incluye varios selectores separados por coma (,) aplicando el estilo a cuálquier elemento con alguna de las marcas incluidas: h1, h2, h3.

h1, h2, h3 {
color: #F00;
}

El selector puede incluir etiquetas separadas por espacios. El selector aplicará solo a elementos con la última marca (ul), con los anteriores como ancestros, es decir .caja deberá ser ancestro de nav y nav deberá ser ancestro de ul.

.caja nav ul {
color: #F00;
}

 

Prioridad CSS

Cuando dos declaraciones afectan a un mismo elemento. ¿cuál de ellas se interpreta en el navegador como más importante?

Hay que calcular la tupla (A, B, C, D) ganadora de todas las reglas CSS que compiten. A tiene máximo peso y D mínimo. Si hay empate en A, se mira B y así sucesivamente.
A = estilo en línea
B = número de IDs
C = número de clases
D = número de marcas HTML

Ver: 06a_prioridad.html
A = 0 estilos en línea
B = 0 ID
C = 0 clases
D = 1 elemento
Puntuación línea 10 = 0,0,0,1

A = 0 estilos en línea
B = 0 ID
C = 0 clases
D = 2 marcas
Puntuación línea 9 = 0,0,0,2

A = 0 estilos en línea
B = 1 ID
C = 1 clase
D = 1 elemento
Puntuación línea 8 = 0,1,1,1

A = 0 estilos en línea
B = 1 ID
C = 0 clases
D = 2 marcas
Puntuación línea 7 = 0,1,0,2

La ganadora es, #caja .cabecera h1 {color: red;} = 0,1,1,1

Cuando dos declaraciones tienen el mismo valor:
Será la última especificada
Ver: 06b_prioridad.html

Selector universal *
Afecta a todos los elementos.

* {
 color: #F00;
 }

Ver: 06c_selectores01.html

 

Reglas CSS

Modificación de estilos, por el usuario en el navegador: tipografíasPrioridad CSS

Reglas adicionales de prioridad de las declaraciones CSS ordenadas de menor a mayor:

  • CSS por defecto del Navegador (navegador)
  • CSS en preferencias de usuario del navegador (usuario)
  • CSS en página HTML o script CSS (diseñador)
  • CSS en página HTML o script CSS con !important (diseñador), p. e. body {color:blue !important;}
  • CSS en preferencias de usuario del navegador con !important (usuario), p. e. body {color:blue !important;}

Recursos CSS

Kseso CSS: CSS básico: Cascada, especificidad y herencia
http://ksesocss.blogspot.com/2012/05/css-basico-cascada-especificidad-y.html
Dev.Opera: Recorriendo el árbol DOM
http://dev.opera.com/articles/view/traversing-the-dom-es/
LIBROS WEB: Árbol de nodo
http://librosweb.es/javascript/capitulo_5/arbol_de_nodos.html
UOC: Herencia y cascada
http://mosaic.uoc.edu/ac/le/es/m6/ud2/
LIBROSWEB: Colisiones de estilos
http://librosweb.es/css/capitulo_2/colisiones_de_estilos.html
CSS: Specificity Wars
http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.htmlRecursos HTML
Bruce Lawson: HTML5 articles and sections: what’s the difference?
http://www.brucelawson.co.uk/2010/html5-articles-and-sections-whats-the-difference/
html5 Doctor: The article element
http://html5doctor.com/the-article-element/
HTM5 paso a paso: div, section y article
http://html5pasoapaso.blogspot.com.es/2011/08/div-section-y-article.html
ondho: HTML5 (discusiones entre article y section)
http://www.ondho.com/html5-discusiones-entre-article-y-section/

 

Comments are closed.