v3 2 HTML CSS

HTML/CSS
Marcas bsicas
HTML
Las marcas de texto en html, se emplean para el
estructurado semntico del contenido.
Los textos habituales estn formados por prrafos,
palabras en negrita o cursiva, anotaciones y
correcciones, citas a otros documentos externos...
Marcado bsico:
 - prrafo
 - da nfasis al texto que encierra
 - Mxima importancia al texto
que encierra
Las etiquetas para la bold o negrita y la etiqueta para
la itlica o cursiva, son similares visualmente, pero sin
significado semntico.
http://www.w3.org/wiki/HTML/Elements/b
CSS
El lenguaje de marcas HTML, est orientado a la
definicin de la estructura y la semntica del
documento y no a su representacin grfica.
CSS controla el aspecto grfico del documento
mediante hojas de estilo (style sheets), 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/
CSS
Cada etiqueta HTML tiene unos valores de CSS por
defecto, que pueden variar segn el navegador, que
tendremos que modificar con nuestros estilos
personales.
Visualizacin valores por
defecto CSS en el
navegador
HTML
Ejemplo valores CSS por defecto del navegador, de:
h1, p, strong, em.h1{
display:block;
font-size:2em;
marginbefore:0.67em;
marginafter:0.67em;
margin-start:0;
margin-end:0;
font-weight:bold; }
p{
display: block;
margin-before:
1em;
margin-after:
1em;
margin-start: 0;
margin-end: 0; }
strong{
font-weight:bold;
}
em{
fontstyle:italic; }
CSS
Ms informacin valores por defecto:
W3C:
http://dev.w3.org/html5/markup/elements.html
Internet Explorer:
http://www.iecss.com/
Firefox:
http://mxr.mozilla.org/mozilla-central/source/layout/style/html.css
Chrome, Safari:
http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Opera
http://www.iecss.com/opera-10.51.css
CSS
La primera forma de aadir el estilo CSS a un
documento HTML es con elementos en lnea, es el
mtodo ms sencillo, aadiendo un atributo style en
el elemento concreto dentro de la pgina. No se
pueden reutilizar para varios elementos que
comparten las mismas propiedades.
Se escriben las propiedades del estilo en las marcas
del HTML como "nombre: valor" separadas por punto
y coma.
<body style="color: red; ">


Mi primera pgina
CSS
La segunda forma aade el estilo CSS en un bloque
<style> en la cabecera (<head>) y aplica el estilo
a varios elementos de la pg.. 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.
CSS
Lo ms aconsejable para mantener la separacin
entre contenido y presentacin, en una hoja de estilo
CSS separada del HTML, que se importa con un
elemento <link> en la cabecera.
CSS
La principal ventaja es que
las hojas de estilo son
aplicables a una o a muchas
pginas. Permite adems
adaptar la presentacin a
PCs, mviles, tabletas o
impresoras con el atributo
media que activar el estilo
especfico de cada
dispositivo.
<link rel="stylesheet"
type="text/css" media="screen"
href="sans-serif.css">
<link href=estilo.css"
rel="stylesheet" type="text/css"
media="(min-width:380px)">
CSS
Formato de las normas y comandos de estilo
El estilo se define entre llaves "{" y "}"; el selector

determina sobre que elementos HTML aplica el estilo,
cada bloque de declaracin: {declaracin;
declaracin} separadas por punto y coma ";".
Cada declaracin: propiedad : valor, (fija un valor
para una propiedad del estilo).
H1 {color : green; text-align : center}
HTML
Listas:
<ul></ ul > - define listas, no ordenadas.
<ol></ ol > - define listas, ordenadas.
<li></li> - define los elementos de las listas
ul{
display:block;
list-style-type:disc;
marginbefore:1em;
margin-after:1em;
margin-start:0;
margin-end:0;
paddingol{
start:40px; }
display:block;
list-styletype:decimal;
marginbefore:1em;
margin-after:1em;
margin-start:0;
Texto HTML
Citas: <blockquote></ blockquote > - citas
textuales de un texto externo.
El atributo cite = "url" - Indica la direccin de la
pgina web original de la que se extrae la cita.
blockquote{
display:block;
marginbefore:1em;
margin-after:1em;
margin-start:40px;
marginend:40px; }
Texto HTML
Texto preformateado:
<pre></ pre > - mantiene el aspecto visual, los
elemento en blanco se mantienen igual que en el
texto original.
pre{
display:block;
fontfamily:monospace;
white-space:pre;
margin:1em 0; }
Texto HTML
Abreviatura y acrnimo:
<abbr></abbr> - para indicar el significado de una
abreviatura o un acrnimo.
Texto HTML
Salto de lnea:
 - Salto de lnea en el texto, sin los mrgenes
definidos para el prrafo.
Pocas veces hay que usar un salto de lnea: Una
poesa, un listado del cdigo, cuando cada lnea no es
un prrafo por s sola.
Texto HTML
Superndices y subndices:

 - para etiquetar el texto como super o
subndices.
sub{
vertical-align:sub;
font-size:smaller; }
sup{
vertical-align:super;
font-size:smaller; }
Texto HTML
code:
<code></code> - para representar fragmentos de
cdigo informtico.
Valores por defecto:
code {
font-family: 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.
Tabla CSS
Texto HTML
LIBROS WEB: Marcado bsico de texto
http://librosweb.es/xhtml/capitulo_3/marcado_basico_
de_texto.html
Con Clase: Texto
http://html.conclase.net/w3c/html401-es/struct/text.ht
ml
MDN: CSS
https://developer.mozilla.org/en-US/docs/Web/CSS
HTML/CSS
Fin del tema
Ejercicio
1.- En el archivo creado en el ejercicio anterior "la primera
pgina Web", cambiar el color del fondo, de la fuente, la familia
tipogrfica y el tamao.
Ejercicio
1.- Los valores de estilos CSS por defecto del navegador, son iguales en todos los
navegadores
a) Si b) No
2.- Que es ms aconsejable, que el estilo este en la lnea o en la cabecera del documento.
a) En la lnea b) En la cabecera
3.- Que es ms aconsejable, que el estilo este en la cabecera del documento o en archivo
CSS aparte.
a) En la cabecera b) En hoja de estilo CSS aparte
4. El uso de los estilos CSS en la lnea del HTML, est desaconsejado?
a) Si B) No
5.- Puede haber estilos diferentes dependiendo del dispositivo?.
a) Si B) No C) Si, si el estilo CSS se aplica en la lnea del HTML
6.- la etiqueta <th> representa:
a) Una celda importante de la tabla b) una celda de la tabla c) Una celda que es
cabecera de la tabla
7.- La etiqueta da nfasis al texto que encierra, por defecto se representa:
a) de color rojo "red b)como cursiva c) como redonda d) como negrita
8.- La etiqueta da mxima importancia al texto que encierra, por defecto se
representa:
a) de color rojo "red b)como cursiva c) como versalita d) como negrita
9.- Las listas de informacin no ordenadas se identifican con la etiqueta:
a) <ul> b) <ol> c) <dl>
10.- La etiqueta <blockquote> se emplea para tratar:
a) para bloques de texto b) en prrafos sangrados c) para representar citas d)
para representar fragmentos de cdigo informtico
Ejercicio - Soluciones
1.- Los valores de estilos CSS por defecto del navegador, son iguales en todos los
navegadores
a) Si b) No B
2.- Que es ms aconsejable, que el estilo este en la lnea o en la cabecera del documento.
a) En la lnea b) En la cabecera B
3.- Que es ms aconsejable, que el estilo este en la cabecera del documento o en archivo
CSS aparte.
a) En la cabecera b) En hoja de estilo CSS aparte B
4. El uso de los estilos CSS en la lnea del HTML, est desaconsejado?
a) Si B) No A
5.- Puede haber estilos diferentes dependiendo del dispositivo?.
a) Si B) No C) Si, si el estilo CSS se aplica en la lnea del HTML A
6.- la etiqueta <th> representa:
a) Una celda importante de la tabla b) una celda de la tabla c) Una celda que es
cabecera de la tabla C
7.- La etiqueta da nfasis al texto que encierra, por defecto se representa:
a) de color rojo "red b)como cursiva c) como redonda d) como negrita B
8.- La etiqueta da mxima importancia al texto que encierra, por defecto se
representa:
a) de color rojo "red b)como cursiva c) como versalita d) como negrita D
9.- Las listas de informacin no ordenadas se identifican con la etiqueta:
a) <ul> b) <ol> c) <dl> A
10.- La etiqueta <blockquote> se emplea para tratar:
a) para bloques de texto b) en prrafos sangrados c) para representar citas d)
para representar fragmentos de cdigo informtico C

v3 2 HTML CSS

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

v3 2 HTML CSS

Transféré par

Droits d'auteur :

Formats disponibles

HTML/CSS

Proyecto css Zen Garden:

<body style="color: red; ">

El estilo se define entre llaves "{" y "}"; el selector

Vous aimerez peut-être aussi