Ut2 HTML Css

IES Ramn y Cajal (Tocina)
UT2. HTML y CSS

Javier Ferrer Garca
HTML
Javier Ferrer Garca
Contenido
1. HTML ........................................................................................................................................2
1.1. VERSIONES ........................................................................................................................2
1.2. NORMAS BSICAS Y ELEMENTOS FUNDAMENTALES ........................................................3
1.3. ESTRUCTURA BSICA .........................................................................................................1
1.4. ELEMENTOS .......................................................................................................................2
1.5. FORMULARIOS...................................................................................................................3
1.6. APIS HTML5 .......................................................................................................................5
2. CSS ............................................................................................................................................7
2.1. HOJAS DE ESTILO ...............................................................................................................7
2.1.1. CONCEPTOS FUNDAMENTALES ..................................................................................7
2.1.2. CONCEPTOS AUXILIARES ..........................................................................................17
ANEXO I ......................................................................................................................................19
1 de 22
HTML
Javier Ferrer Garca
1. HTML
El HTML (Hyper Text Markup Language), lenguaje de marcado de hipertexto, es un lenguaje de
marcas (utiliza etiquetas, como marcas para delimitar elementos del lenguaje), que sirve para
describir el contenido y la estructura de las pginas web, que pueden ser interpretadas y
visualizadas a travs de los navegadores de Internet (clientes web: Firefox, Internet Explorer,
Chrome, etc.).
1.1. VERSIONES
En los ltimos aos, la versin de HTML recomendada por el W3C era HTML 4.01. Al disear
una pgina web conviene especificar qu versin de HTML se est usando; esto se hace
indicando la etiqueta < ! DOCTYPE> en la primera lnea, para que el navegador sepa
interpretarla correctamente. El HTML 4.01 tena tres variantes de DTD:
HTML 4.01 Strict: Slo permite etiquetas definidas en HTML 4.01.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional: Es una mezcla de todos los HTML.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset: Igual que el Transitional y adems soporta marcos (frames), que
actualmente se consideran algo obsoleto y anticuado.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">
HTML5: Ofrece herramientas grficas de geolocalizacin, de arrastrar y soltar, nuevos
formularios, grficos, animacin, etc.
< ! DOCTYPE html>
HTML5 es la ltima versin de HTML. El trmino representa dos conceptos diferentes:
Se trata de una nueva versin de HTML, con nuevos elementos, atributos y

comportamientos.
Contiene un conjunto ms amplio de tecnologas que permite a los sitios Web y a las
aplicaciones ser ms diversas y de gran alcance. A este conjunto se le llama HTML5 y
amigos, a menudo reducido a HTML5.
Las diferentes tecnologas de HTML5 se pueden clasificar en varios grupos segn su funcin:
Semntica: Permite describir con mayor precisin cul es su contenido.

Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.
Sin conexin y almacenamiento: Permite a las pginas web almacenar datos
localmente en el lado del cliente y operar sin conexin de manera ms eficiente.
Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como
lo son audio y video nativamente.
Grficos y efectos 2D/3D: Proporciona una amplia gama de nuevas caractersticas que
se ocupan de los grficos en la web como lo son canvas 2D, WebGL, SVG, etc.
Rendimiento e Integracin: Proporciona una mayor optimizacin de la velocidad y un
mejor uso del hardware.
2 de 22
Comentado [j1]: Los actuales navegadores ya estn

diseados para manejar la mayora de las funcionalidades
recogidas en HTML5, pero no todas. Para saber si un
navegador soporta todas las caractersticas de HTML5 puede
utilizarse la aplicacin de la pgina
http://www.html5test.com .
HTML
Javier Ferrer Garca
Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de

entrada y salida de nuestro dispositivo.
CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseos ms
sofisticados.
1.2. NORMAS BSICAS Y ELEMENTOS FUNDAMENTALES

Antes de comenzar a utilizar cualquier lenguaje de marcas es necesario conocer sus normas
bsicas; veamos las de los elementos fundamentales en HTML5.
Etiquetas
Las marcas o etiquetas definen los elementos que conforman el lxico del lenguaje HTML. Se
delimitan por los signos "menor que" (<) y "mayor que"(>). Las etiquetas de HTML pueden ser
de dos tipos, cerradas o abiertas:
Las etiquetas cerradas son aquellas formadas por una palabra reservada del lenguaje
para indicar el principio de la etiqueta (etiqueta de apertura) y otra para el final
(etiqueta de cierre); en esta ltima se incluye el carcter "/" antes de la misma palabra
reservada de dicha etiqueta. Ejemplo de una etiqueta cerrada es: <p>Prrafo bien
cerrado</p>
Se denominan etiquetas abiertas a las que constan de una sola palabra reservada que
indica a la vez el principio y fin del elemento, es decir, no tienen la correspondiente
etiqueta de cierre. Ejemplos de etiquetas abiertas son:<hr>, <br>, <img>, <input>
HMTL5 dispone de varios elementos que no se representan ni se visualizan en pantalla, pero

que permiten agrupar a otros elementos dndoles un significado semntico comn: article,
asde, header, footer, nav, div,
Las etiquetas de HTML pueden anidarse, de manera que un elemento HTML puede contener a
otros. Las etiquetas anidadas deben estar bien "balanceadas", es decir, si se abren en un orden
determinado, se deben cerrar en el orden inverso al de apertura, debindose cerrar primero
las etiquetas de nivel inferior antes que la del nivel superior que la contiene. Ejemplos:
<body>
<body>
<hl>Ejemplo
<hl>Ejemplo
incorrecto</body>
correcto</hl>
</hl>
</body>
Atributos
Las etiquetas pueden contener atributos, los cuales sirven para configurar diferentes
caractersticas de las propias etiquetas donde se indiquen. Los atributos se deben especificar a
continuacin de la palabra reservada de la etiqueta de apertura (nunca de la de cierre)
separados por un espacio, y antes del signo de cierre de etiqueta "mayor que" (>) que la
delimita. Detrs del nombre del atributo, se indicar el valor del atributo que se quiera asignar,
separando el atributo y su valor por el signo "igual"(=). Se recomienda indicar el valor entre
3 de 22
HTML
Javier Ferrer Garca
comillas dobles para aumentar la legibilidad del cdigo y su compatibilidad con otras versiones
de HTML, aunque no sea obligatorio, salvo que el valor contenga caracteres de espacio.
Ejemplo: <input type= "text" name=" nombre">
Tanto las etiquetas como los atributos se pueden indicar en minsculas o en maysculas, en
cambio los valores de los atributos s se diferencian segn se indiquen en maysculas o en
minsculas. Se recomienda usar minsculas tanto para las etiquetas corno para los atributos.
Comentarios
Los comentarios son lneas de texto que no son interpretadas por el navegador y, por lo tanto,
no sern visualizadas al navegar sobre la pgina. Permiten realizar anotaciones y aclaraciones
sobre el cdigo fuente de una pgina web, muy tiles en futuras revisiones y modificaciones.
Los comentarios se incluyen entre los smbolos<!- - y - ->.
Ejemplo: <!- - Esto es un comentario sobre mi pgina Web - ->
Se recomienda seguir estas normas bsicas
1.3. ESTRUCTURA BSICA

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ttulo del documentos</title>
</body>
</html>
1 de 22
HTML
Javier Ferrer Garca
Uso Semntico de las etiquetas:

<header> Representa contenido introductorio del elemento que lo contiene (elemento padre).
Se usa para definir la cabecera general de la pgina o la cabecera de cualquier contenido, por
lo tanto se puede usar ms veces en una misma pgina.
<nav> Representa un grupo de links que navega a otras partes o pginas de nuestras web. Al
representar un grupo de links tenemos que maquetarlos usando listas <ul> para que
semnticamente sea perfecto. No todos los grupos de links necesitan estar en un
elemento <nav>. Es muy comn tener un footer con enlaces a poltica de privacidad, pgina de
inicio o copyright. En estos casos la etiqueta <nav>se basta por si misma y no es necesario
ponerla.
<section> es muy similar a <article> y por eso son de las que ms dudas producen, incluso los
expertos no se ponen de acuerdo a la hora de usar uno u otro. Engloba un grupo temtico de
contenido que normalmente viene seguido de un encabezado. Por ejemplo una pgina de
inicio puede ser separada en diferentes secciones, como introduccin, contenido o
informacin de contacto. Para identificarlo mejor nos podemos hacer la pregunta est todo el
contenido relacionado?
<article> Usaremos esta etiqueta si al quitarlo del contenido que lo rodea es capaz de seguir
teniendo sentido por s mismo, es decir que se pueda publicar solo.
<aside> Est diseado para representar contenido relacionado. Puede ser usado en elementos
como notas, barras laterales, grupos de enlaces <nav> y todo contenido que se considere
separado del contenido principal. Slo por el hecho de que cierto contenido aparezca a la
derecha o izquierda del contenido principal no tiene por qu ser un elemento <aside>. Para
identificarlo mejor hay que preguntarse si se puede quitar ese elemento sin reducir el
significado del contenido principal.
<footer> Se usa para definir el pie general de la pgina o el pie de cualquier seccin, por lo
tanto se puede usar ms de una vez en la misma pgina.
<main> Identifica el contenido principal de la pgina y solo puede haber uno por cada pgina.
<div> Se usa cuando necesitamos juntar contenido sin necesidad de tener sentido semntico,
es decir que no signifique nada.
1.4. ELEMENTOS
Aqu tienes una detallada y organizada lista de elementos HTML5. Tambin podis consultar la
Tabla Peridica de Elementos de HTML5.
Tambin puedes consultar la web de W3Schools donde encontrars infinidad de ejemplos para
cada elemento (tambin tienes CSS, Javascript, PHP, SQL, )
Utilizar img o picture: http://librosweb.es/tutorial/el-nuevo-elemento-picture-de-html5-paracrear-imagenes-responsive/
2 de 22
HTML
Javier Ferrer Garca
1.5. FORMULARIOS
Mencin especial merecen los formularios, los cules nos permiten comunicarnos con el sitio
web.
3 de 22
HTML
Javier Ferrer Garca
4 de 22
HTML
Javier Ferrer Garca
1.6. APIS HTML5

HTML5 introduce varias APIs (interfaces de programacin de aplicaciones) para proveer acceso
a poderosas libreras desde simple cdigo Javascript. El potencial de estas incorporaciones es
tan importante que pronto se convertirn en nuestro objeto de estudio. Veamos rpidamente
sus caractersticas para obtener una perspectiva de lo que nos encontraremos en el resto del
libro.
La siguiente es solo una introduccin, ms adelante estudiaremos cada una de estas
tecnologas con mayor profundidad.
5 de 22
HTML
Javier Ferrer Garca
Canvas Esta API es una API de dibujo, especfica para la creacin y manipulacin de grficos.
Utiliza mtodos Javascript predefinidos para operar.
Drag and Drop Esta API hace que arrastrar y soltar elementos con el ratn en la pantalla sea
posible tambin en la web.
Geolocation Esta API tiene la intencin de proveer acceso a informacin correspondiente con
la ubicacin fsica del dispositivo que est accediendo a la aplicacin. Puede retornar datos
como la latitud y longitud utilizando diferentes mecanismos (como informacin de la red o
GPS).
Web Storage Esta API permite a los desarrolladores hacer un seguimiento de la actividad de
los usuarios almacenando informacin que estar disponible en cada instancia de la aplicacin
durante la duracin de la sesin, adems ofrece a los desarrolladores un rea de
almacenamiento, creada para cada aplicacin, que puede conservar varios megabytes de
informacin, preservando de este modo informacin y datos en el ordenador del usuario de
forma persistente.
Indexed Database Esta API agrega la capacidad de trabajar con bases de datos del lado del
usuario. El sistema fue desarrollado independientemente de previas tecnologas y provee una
base de datos destinada a aplicaciones web. La base de datos es almacenada en el ordenador
del usuario, los datos son persistentes y, por supuesto, son exclusivos de la aplicacin que los
cre.
File Este es un grupo de APIs desarrollada para proveer la capacidad de leer, escribir y procesar
archivos de usuario.
XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a la
construccin de aplicaciones Ajax. Incluye nuevos mtodos para controlar el progreso de la
operacin y realizar solicitudes cruzadas (desde diferentes orgenes).
Cross Document Messaging Esta API introduce una nueva tecnologa de comunicacin que
permite a aplicaciones comunicarse entre s a travs de diferentes cuadros o ventanas.
WebSockets Esta API provee un mecanismo de comunicacin de dos vas entre clientes y
servidores para generar aplicaciones en tiempo real como salas de chat o juegos en lnea.
Web Workers Esta API potencia Javascript permitiendo el procesamiento de cdigo detrs de
escena, de forma separada del cdigo principal, sin interrumpir la actividad normal de la
pgina web, incorporando la capacidad de multitarea a este lenguaje.
History Esta API provee la alternativa de incorporar cada paso en el proceso de una
aplicacin dentro del historial de navegacin del navegador.
Offline Esta API apunta a mantener las aplicaciones funcionales incluso cuando el dispositivo
es desconectado de la red.
Trabajaremos estas APIs en el tema de javascript (si tenemos tiempo!!)
6 de 22
HTML
Javier Ferrer Garca
2. CSS
El objetivo fundamental de CSS es separar el contenido y la estructura de un documento
HTML, de su estilo y formato de presentacin.
2.1. HOJAS DE ESTILO

Estn compuestas por reglas de estilo, las cuales tienen dos partes: el selector, que determina
a qu elementos se asignar el estilo definido en la regla, y la declaracin, que est compuesta
por uno o ms pares (propiedad:va!or;), que asignan un valor a la propiedad de los elementos
seleccionados por el selector.
A la hora de aplicar un estilo, se puede hacer en lnea (dentro de la etiqueta HTML), como una
hoja de estilo interna con las etiquetas <style> dentro del elemento <head> o como hoja de
estilos externa, en un archivo diferente con extensin .css y enlazndolo con la etiqueta <link>
<link rel="stylesheet" href="misestilos.css">
Esta ltima es intentaremos utilizar siempre.
2.1.1. CONCEPTOS FUNDAMENTALES

Comentarios
Para incluir un comentario es necesario incluir el texto a comentar entre los caracteres /* y */,
por ejemplo:
/* Esta es la forma de incluir un comentario vlido entre las reglas de estilo css */
Identificadores
Todos los elementos HTML tienen un atributo opcional llamado identificador (id).
Para identificar un determinado elemento en el cdigo HTML, es necesario darle un nombre
por medio del atributo id, y, posteriormente, ser necesario acceder a este elemento desde
una regla CSS para aplicarle el diseo. Esto se hace a travs del selector, que se formar con el
nombre de la etiqueta seguido del smbolo # y del nombre del atributo id.
Clases
Su utilidad es la de poder agrupar los elementos por clases o grupos para que, posteriormente,
CSS los pueda seleccionar y distinguirlos de los dems. Se utiliza el smbolo . seguido del
nombre de la clase.
7 de 22
HTML
Javier Ferrer Garca
Ejemplos:
Pseudo-clases
Las pseudo-clases permiten clasificar los elementos HTML segn el estado en el que se
encuentren. El elemento <a> de HTML, utilizado para crear hiperenlaces, tiene definidas
las siguientes pseudo-clases:
Selectores
Selector universal
Si se utiliza el asterisco (*) como selector, las propiedades especificadas afectarn a todos los
elementos de la pgina; el asterisco es el selector universal. Para declarar el color azul a todos
los elementos sera: * {color:blue}
Selector de tipo o nombre de elemento
Permite aplicar un determinado estilo a todos los elementos del tipo seleccionado, con
independencia de posibles clases, identificadores, etc. Para poder afinar ms la seleccin se
8 de 22
HTML
Javier Ferrer Garca
deben utilizar otros criterios de seleccin. Un ejemplo que declara el color azul a todos los
prrafos sera: p {color:blue}
Selector por combinacin de elementos
Por ejemplo, si se quiere formatear de color rojo los elementos p que estn dentro de un
elemento div, se debe escribir la siguiente regla: div p {color : #OOFFOO}
Selector por clase o identificador de elemento
Ya los hemos visto antes, pero no viene mal recordarlos. Si al usar un selector por clase o id, se
omite el nombre del elemento, entonces se vern afectados todos los elementos que
pertenezcan a dicha clase o todos los elementos con ese identificador. Por ejemplo, para
alinear a la izquierda todos los elementos de la clase Clase_Primera y a los que tienen como
identificador Nombre_Identificador:
.Clase_Primera
#Nornbre_Identificador
{text-align:left;}
{text-align:left;}
Para dar estilo a los prrafos de la clase "uno", y a los que tengan el identificador "dos",
definidos en un documento HTML, se tienen que escribir las reglas CSS:
p.uno
p#dos {color : #00FF00;}
{text-align:#00FF00;}
Selector por pseudo-clase del elemento

Las pseudos-clases clasifican elementos basndose en el estado en el cual se encuentren los
mismos. Se utilizan a menudo con los hiperenlaces. As, en funcin de si, por ejemplo, el enlace
ha sido visitado o no, si el usuario est pasando por encima con el cursor, poder darles
diferente estilo. Por ejemplo: a: link {color: red;}
Unin de selectores
Cuando sea necesario aplicar las mismas reglas de estilo a varios elementos, se pueden
reutilizar declaraciones, agrupando selectores, en lugar de repetir las mismas reglas de estilo
con diferentes selectores. Para ello se separan los selectores con una coma (,). Por ejemplo, si
se quiere formatear los elementos ul y ol con las mismas propiedades, se puede escribir la
siguiente regla: ul, ol {color:#00FF00;}
Colores, fondos, textos y fuentes
Para dar estilo a un documento HTML existen muchas propiedades CSS. Estas son algunas de
las que permiten establecer colores y tipos de letra:
9 de 22
HTML
Javier Ferrer Garca
Elementos HTML <div> y <span>

Los elementos de HTML <span> y <div>, junto con los atributos class e id,se suelen utilizar para
organizar la estructura de un documento HTML cuando no necesitamos aadir contenido
semntico (es decir, no utilizamos las etiquetas header, nav, section, article, aside, footer o
main).
El elemento <span> permite definir una especie de gancho, una parte de un texto, para
aadirle posteriormente un estilo diferente. Por ejemplo:
El elemento <div> permite crear bloques, capas o cajas, es decir, una agrupacin de elementos
para darles a todos ellos el mismo estilo y con ello poder estructurar una pgina web con estas
divisiones. Por ejemplo:
10 de 22
HTML
Javier Ferrer Garca
11 de 22
HTML
Javier Ferrer Garca
Para el elemento div o span se pueden utilizar las siguientes propiedades:
12 de 22
HTML
Javier Ferrer Garca
Tamao y posicionamiento: modelo de cajas

Importante: en los siguientes enlaces tienes todo lo necesario para aprender los conceptos
fundamentales del modelo de cajas y el posicionamiento.
A continuacin un breve resumen:
Ejemplo:
13 de 22
HTML
Javier Ferrer Garca
Herencia y colisiones
Una de las caractersticas principales de CSS es la herencia de los estilos definidos para los
elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos
descendientes heredan de forma automtica el valor de esa propiedad. Si se considera el
siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { color: blue; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
En el ejemplo anterior, el selector body solamente establece el color de la letra para el
elemento <body>. No obstante, la propiedad color es una de las que se heredan de forma
automtica, por lo que todos los elementos descendientes de<body> muestran ese mismo
color de letra. Por tanto, establecer el color de la letra en el elemento <body> de la pgina
implica cambiar el color de letra de todos los elementos de la pgina.
14 de 22
HTML
Javier Ferrer Garca
Aunque la herencia de estilos se aplica automticamente, se puede anular su efecto

estableciendo de forma explcita otro valor para la propiedad que se hereda, como se muestra
en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de herencia de estilos</title>
<style type="text/css">
body { font-family: Arial; color: black; }
h1 { font-family: Verdana; }
p { color: red; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del
elemento <body>, por lo que todos los elementos de la pgina se mostraran con ese mismo
color y tipo de letra. No obstante, las otras reglas CSS modifican alguno de los estilos
heredados.
De esta forma, los elementos <h1> de la pgina se muestran con el tipo de
letra Verdana establecido por el selector h1 y se muestran de color negro que es el valor
heredado del elemento <body>. Igualmente, los elementos <p> de la pgina se muestran del
color rojo establecido por el selector p y con un tipo de letra Arial heredado del
elemento <body>.
La mayora de propiedades CSS aplican la herencia de estilos de forma automtica. Adems,
para aquellas propiedades que no se heredan automticamente, CSS incluye un mecanismo
para forzar a que se hereden sus valores, tal y como se ver ms adelante.
Por ltimo, aunque la herencia automtica de estilos puede parecer complicada, simplifica en
gran medida la creacin de hojas de estilos complejas. Como se ha visto en los ejemplos
anteriores, si se quiere establecer por ejemplo la tipografa base de la pgina, simplemente se
debe establecer en el elemento <body> de la pgina y el resto de elementos la heredarn de
forma automtica.
En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo
elemento HTML. El problema de estas reglas mltiples es que se pueden dar colisiones como
la del siguiente ejemplo:
p { color: red; }
p { color: blue; }
15 de 22
HTML
Javier Ferrer Garca
<p>...</p>
De qu color se muestra el prrafo anterior? CSS tiene un mecanismo de resolucin de

colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de
navegador, de usuario o de diseador), la importancia de cada regla y lo especfico que sea el
selector.
El mtodo seguido por CSS para resolver las colisiones de estilos se muestra a continuacin:
1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS
seleccionado.
2. Ordenar las declaraciones segn su origen (CSS de navegador, de usuario o de
diseador) y su prioridad (palabra clave !important).
3. Ordenar las declaraciones segn lo especfico que sea el selector. Cuanto ms genrico
es un selector, menos importancia tienen sus declaraciones.
4. Si despus de aplicar las normas anteriores existen dos o ms reglas con la misma
prioridad, se aplica la que se indic en ltimo lugar.
El mecanismo simplificado que se puede aplicar es el siguiente:
1. Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada.
2. A igual especificidad, se considera la ltima regla indicada.
Como en el ejemplo anterior los dos selectores son idnticos, las dos reglas tienen la misma
prioridad y prevalece la que se indic en ltimo lugar, por lo que el prrafo se muestra de color
azul.
En el siguiente ejemplo, la regla CSS que prevalece se decide por lo especfico que es cada
selector:
p { color: red; }
p#especial { color: green; }
* { color: blue; }
<p id="especial">...</p>
Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la

misma, decide la especificidad del selector. El selector * es el menos especfico, ya que se
refiere a "todos los elementos de la pgina". El selector p es poco especfico porque se refiere
a "todos los prrafos de la pgina". Por ltimo, el selector p#especialslo hace referencia
a "el prrafo de la pgina cuyo atributo id sea igual a especial". Como el
selector p#especial es el ms especfico, su declaracin es la que se tiene en cuenta y por
tanto el prrafo se muestra de color verde.
16 de 22
Comentado [j2]: La hoja de estilos del navegador se

utiliza para establecer el estilo inicial por defecto a
todos los elementos HTML: tamaos de letra,
decoracin del texto, mrgenes, etc. Esta hoja de
estilos siempre se aplica a todas las pginas web, por
lo que cuando una pgina no incluye ninguna hoja de
estilos propia, el aspecto con el que se muestra en el
navegador se debe a esta hoja de estilos del
navegador.
Por su parte, la hoja de estilos del usuario es la que
puede aplicar el usuario mediante su navegador.
Aunque la inmensa mayora de usuarios no utiliza esta
caracterstica, en teora es posible que los usuarios
establezcan el tipo de letra, color y tamao de los
textos y cualquier otra propiedad CSS de los elementos
de la pgina que muestra el navegador.
Por tanto, las reglas que menos prioridad tienen son las
del CSS de los navegadores, ya que son las primeras
que se aplican. A continuacin se aplican las reglas
definidas por los usuarios y por ltimo se aplican las
reglas CSS definidas por el diseador, que por tanto
son las que ms prioridad tienen.
HTML
Javier Ferrer Garca
2.1.2. CONCEPTOS AUXILIARES

Transiciones y animaciones CSS
Las transiciones CSS, parte del borrador de la especificacin CSS3, proporcionan una forma de
animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de
manera instantnea. Por ejemplo, si cambias el color de un elemento de blanco a negro,
normalmente el cambio es instantneo. Al habilitar las transiciones CSS, el cambio sucede en
un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleracin que puedes
personalizar.
Las animaciones CSS3 permiten animar la transicin entre un estilo CSS y otro. Las
animaciones constan de dos componentes: un estilo que describe la animacin y un conjunto
de fotogramas que indican su estado inicial y final, as como posibles puntos intermedios en la
misma. Las animaciones CSS tienen tres ventajas principales sobre las tcnicas tradicionales de
animacin basada en scripts:
1. Es muy fcil crear animaciones sencillas, puedes hacerlo incluso sin tener
conocimientos de Javascript.
2. La animacin se muestra correctamente, incluso en equipos poco potentes.
Animaciones simples realizadas en Javascript pueden verse mal (a menos que estn
muy bien programadas). El motor de renderizado puede usar tcnicas de optimizacin
como el "frame-skipping" u otras para conseguir que la animacin se vea tan suave
como sea posible.
3. Al ser el navegador quien controle la secuencia de la animacin, permitimos que
optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la
frecuencia de actualizacin de la animacin ejecutndola en pestaas que no estn
visibles.
Puedes investigar ms y ver algunos ejemplos en la web de Mozilla sobre transiciones y
animaciones.
Diseo en Photoshop como plantilla en Dreamweaver
Utilizar Extract.
Ver http://www.aulaclic.es/dreamweaver-cc/t_13_5.htm o
https://helpx.adobe.com/es/dreamweaver/using/dreamweaver-integrationextract.html#main-pars_header_1
Prefijos para propiedades CSS experimentales
Existen propiedades CSS que se encuentra en estado experimental en algunos navegadores.
Para aplicarla efectivamente a sus documentos, debe declararla con los correspondientes
prefijos. Los prefijos para los navegadores ms comunes son los siguientes:
-moz- para Firefox.
-webkit- para Safari y Chrome.
-o- para Opera.
-khtml- para Konqueror.
-ms- para Internet Explorer.
-chrome- especfico para Google Chrome.
Ejemplo con la propiedad box-sizing:
div {
width: 100px;
17 de 22
Comentado [j3]: como la especificacin de las

transiciones CSS todava se encuentra en fase de
borrador, a todas las propiedades asociadas con ellas
se les aade el prefijo "-moz-" para usarse en Gecko.
Para la compatibilidad con W ebKit, se aconseja usar
tambin el prefijo "-webkit-" y para la compatibilidad con
Opera, el prefijo "-o-". Es decir, por ejemplo, la
propiedad de transicin se especificara como -moztransition, -webkit-transition y -o-transition.
HTML
Javier Ferrer Garca
margin: 20px;
padding: 10px;
border: 1px solid #000000;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
Sitios de plantillas
http://templated.co/
http://www.bestpsdfreebies.com/category-freebie/themes/
Pginas de recursos tiles para desarrolladores
18 de 22
HTML
Javier Ferrer Garca
ANEXO I
Curso completo Dreamweaver en Youtube.
Tutoriales ejercicios Dreamweaver.
19 de 22

Ut2 HTML Css

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Ut2 HTML Css

Diunggah oleh

Hak Cipta:

Format Tersedia

IES Ramn y Cajal (Tocina)

UT2. HTML y CSS

Javier Ferrer Garca

Javier Ferrer Garca

HTML 4.01 Strict: Slo permite etiquetas definidas en HTML 4.01.

HTML5 es la ltima versin de HTML. El trmino representa dos conceptos diferentes:

Se trata de una nueva versin de HTML, con nuevos elementos, atributos y

Semntica: Permite describir con mayor precisin cul es su contenido.

Comentado [j1]: Los actuales navegadores ya estn

Javier Ferrer Garca

Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de

1.2. NORMAS BSICAS Y ELEMENTOS FUNDAMENTALES

HMTL5 dispone de varios elementos que no se representan ni se visualizan en pantalla, pero

Javier Ferrer Garca

1.3. ESTRUCTURA BSICA

Javier Ferrer Garca

Uso Semntico de las etiquetas:

Javier Ferrer Garca

Javier Ferrer Garca

Javier Ferrer Garca

1.6. APIS HTML5

Javier Ferrer Garca

Javier Ferrer Garca

2.1. HOJAS DE ESTILO

Esta ltima es intentaremos utilizar siempre.

2.1.1. CONCEPTOS FUNDAMENTALES

Javier Ferrer Garca

Javier Ferrer Garca

Selector por pseudo-clase del elemento

Javier Ferrer Garca

Elementos HTML <div> y <span>

Javier Ferrer Garca

Javier Ferrer Garca

Para el elemento div o span se pueden utilizar las siguientes propiedades:

Javier Ferrer Garca

Tamao y posicionamiento: modelo de cajas

Javier Ferrer Garca

Javier Ferrer Garca

Aunque la herencia de estilos se aplica automticamente, se puede anular su efecto

Javier Ferrer Garca

De qu color se muestra el prrafo anterior? CSS tiene un mecanismo de resolucin de

Al elemento <p> se le aplican las tres declaraciones. Como su origen y su importancia es la

Comentado [j2]: La hoja de estilos del navegador se

Javier Ferrer Garca

2.1.2. CONCEPTOS AUXILIARES

Comentado [j3]: como la especificacin de las

Javier Ferrer Garca

Javier Ferrer Garca

Anda mungkin juga menyukai