CSS y HTML
Html
<html>
<head>
</head>
<body>
</body>
</html>
Elementos de texto HTML
• <> </>
• Formato de títulos <H1> Texto a mostrar<H1>
<FONT>
• Formatea el tipo y tamaño del texto
• Valida partes limitadas del texto
• <FONT FACE="arial" SIZE=5
COLOR=red>car...
<B>, <I>, <U>
• <B> Texto en negrita </B>
• <I> Texto en cursiva </I>
• <U> Texto subrayado </U>
• <STRIKE> Texto tachado ...
Párrafos y alineación
• <P ALIGN=left>
Define un párrafo y alinea el texto a la
izquierda(left).
<P ALIGN=right>
Define un...
Salto de línea con <BR>
Simula o es similar al efecto de la tecla enter.
Disponer el texto con <DIV ALIGN> y <CENTER>
<DIV...
Líneas horizontales con <HR>
• Las líneas horizontales constituyen un
instrumento idóneo para dividir partes del
documento...
Listas ordenadas
• Las listas ordenadas constan de una sola marca
de apertura y cierre <OL></OL> y tantas marcas
de lista ...
• Ordenación con letras mayúsculas:
<OL TYPE=A>
• Ordenación con letras minúsculas:
<OL TYPE=a>
• Ordenación con números r...
Insertar imágenes
• La marca <IMG> no necesita cierre y su
sintaxis correcta es:
<IMG SRC="immagine.gif">
donce SRC corres...
Otra forma añadiendo borde
• <IMG SRC="immagine.gif" WIDTH=178
HEIGHT=180 BORDER=2 ALT="Obra de K.
Haring“>
CSS
• CSS, siglas de "Cascade Style Sheet", son un
conjunto de instrucciones que definen la
apariencia de diversos element...
En un text file
• Se guarda el archivo con extensión css
• La hoja de estilo se declara en la sección head,
dentro del ele...
FUERA DEL DOCUMENTO
<link rel="stylesheet" type="text/css" href="style/style.css" />
Clases. Selectores
• Una clase es una definición de un estilo que en
principio no está asociado a alguna etiqueta
HTML, pe...
Llamado a la clase
• Se utiliza el atributo class seguido del nombre
del selector:
<p class=”titulolibro”>2001: Una Aventu...
Ejemplo 1
<HTML>
<HEAD>
<TITLE>Titulo</TITLE>
<STYLE TYPE="text/css">
H1.nuevaclase { color:red; }
.nuevaclase2 {color:blu...
Una misma etiqueta HTML puede tener diferentes "clases",
permitiendo que un mismo elemento ofrezca diferentes estilo
H1.cl...
Reglas
• Una regla tiene tres elementos
– Selector
– Propiedad
– Valor
selector {propiedad: valor;}
Ej
h1 { font-weight: n...
• Las reglas pueden contener mas de una
propiedad.
• h1 { font-weight: normal; color: red;}
• Las propiedades se separan p...
Implementación.
Declarar reglas en la página web.
<head>
<title>Aquí va un título</title>
<style type="text/css">
h1, h2, ...
Párrafos
• Ejercicio 2.
Listas.
• Permiten desplegar unas opciones para que el
usuario seleccione a su criterio.
1. <select> ... </select>
2. <sel...
Ejercicio 3
• Crear una lista para los días de la semana
• Crear una lista para seleccionar idiomas
Formularios
• Una forma para capturar o enviar información
del usuario.
• Capturan datos
• Llenar encuestas
• Enviar comen...
Características
• El formulario consta de unas cajas de texto
donde el usuario responde a una serie de
preguntas. Para ell...
Elementos
• Etiqueta <form> .... </form>.
Css reglas1
Upcoming SlideShare
Loading in …5
×

Css reglas1

1,137 views

Published on

Reglas css

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,137
On SlideShare
0
From Embeds
0
Number of Embeds
897
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css reglas1

  1. 1. CSS y HTML
  2. 2. Html <html> <head> </head> <body> </body> </html>
  3. 3. Elementos de texto HTML • <> </> • Formato de títulos <H1> Texto a mostrar<H1>
  4. 4. <FONT> • Formatea el tipo y tamaño del texto • Valida partes limitadas del texto • <FONT FACE="arial" SIZE=5 COLOR=red>caracteres para formatear</FONT> • Caracteres para formatear
  5. 5. <B>, <I>, <U> • <B> Texto en negrita </B> • <I> Texto en cursiva </I> • <U> Texto subrayado </U> • <STRIKE> Texto tachado </STRIKE>
  6. 6. Párrafos y alineación • <P ALIGN=left> Define un párrafo y alinea el texto a la izquierda(left). <P ALIGN=right> Define un párrafo y alinea el texto a la derecha (right). <P ALIGN=center> Define un párrafo y centra el texto (center).
  7. 7. Salto de línea con <BR> Simula o es similar al efecto de la tecla enter. Disponer el texto con <DIV ALIGN> y <CENTER> <DIV ALIGN=left>Texto e imágenes a la izquierda</DIV> Mueve a la izquierda los elementos contenidos dentro de sus marcas. <DIV ALIGN=right>Texto e imágenes a la derecha</DIV> Mueve los elementos a la derecha. <DIV ALIGN=center>Texto e imágenes centrados</DIV> Centra los elementos.
  8. 8. Líneas horizontales con <HR> • Las líneas horizontales constituyen un instrumento idóneo para dividir partes del documento y hacer más legible el texto. La sintaxis necesaria para su inserción en un documento HTML es la siguiente: <HR align="CENTER" size="2" width="400" color="Red" noshade>
  9. 9. Listas ordenadas • Las listas ordenadas constan de una sola marca de apertura y cierre <OL></OL> y tantas marcas de lista como voces hay en el menú <LI>. La sintaxis correcta para elaborar listas ordenadas es: <OL> <LI> Primera voz del menú <LI> Segunda voz del menú <LI> Tercera voz del menú </OL>
  10. 10. • Ordenación con letras mayúsculas: <OL TYPE=A> • Ordenación con letras minúsculas: <OL TYPE=a> • Ordenación con números romanos en mayúscula: <OL TYPE=I> • Ordenación con números romanos en minúscula (romanitos): <OL TYPE=i>
  11. 11. Insertar imágenes • La marca <IMG> no necesita cierre y su sintaxis correcta es: <IMG SRC="immagine.gif"> donce SRC corresponde al inglés Search. <TITLE>La mia prima home page con la guida di HTMLpoint</TITLE> <BODY BGCOLOR="white"> <IMG SRC="immagine.gif" width="178" height="180"> </HEAD> </HTML>
  12. 12. Otra forma añadiendo borde • <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring“>
  13. 13. CSS • CSS, siglas de "Cascade Style Sheet", son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. • Las CSS son importantes ya que El html es limitado a la hora de aplicarle forma a un documento. Las css, ayudan a superar las limitaciones y dar una mejor apariencia a los documentos HTML
  14. 14. En un text file • Se guarda el archivo con extensión css • La hoja de estilo se declara en la sección head, dentro del elemento style. • Por ejemplo: <head> <title>Aquí va un título</title> <link rel="stylesheet" href="estilo.css" type="text/css" /> </head>
  15. 15. FUERA DEL DOCUMENTO <link rel="stylesheet" type="text/css" href="style/style.css" />
  16. 16. Clases. Selectores • Una clase es una definición de un estilo que en principio no está asociado a alguna etiqueta HTML, pero que podemos asociar a etiquetas concretas. • Se declaran por una palabra que asigna el autor, precedida de un punto. • Ej. .titulolib .titulolibro { font-size: 50%; font-family: Times New Roman; color:blue;}
  17. 17. Llamado a la clase • Se utiliza el atributo class seguido del nombre del selector: <p class=”titulolibro”>2001: Una Aventura Espacial</ <p>Genero ciencia Ficción</p> La clase actúa como atributo de una etiqueta y para aplicarlo se llama al estilo incluyendo el nombre de la clase dentro de la etiqueta que corresponda.
  18. 18. Ejemplo 1 <HTML> <HEAD> <TITLE>Titulo</TITLE> <STYLE TYPE="text/css"> H1.nuevaclase { color:red; } .nuevaclase2 {color:blue;} </STYLE> </HEAD> <BODY> <H1 CLASS="nuevaclase">Este texto aparece en rojo</H1> <H1>Este texto aparece como un H1 normal</H1> <H1 class="nuevaclase2">Este texto aparece en blue</H1> <P class="nuevaclase">Este texto aparece en rojo</P> </BODY> </HTML>
  19. 19. Una misma etiqueta HTML puede tener diferentes "clases", permitiendo que un mismo elemento ofrezca diferentes estilo H1.clase1 {font: 15px; color: red;} H1.clase2 {font: 15px; color: blue;} H1.clase3 {font: 15px;color: green;} Esto se transformaría a nivel de código: <H1 CLASS="clase1 ">Este texto se vería en color rojo</H1> <H1 CLASS="clase2">Este texto se vería en color blue</H1> <H1 CLASS="clase3">Este texto se vería en color green</H1>
  20. 20. Reglas • Una regla tiene tres elementos – Selector – Propiedad – Valor selector {propiedad: valor;} Ej h1 { font-weight: normal; } Evita que el elemento marcado con h1 aparezca en negrita
  21. 21. • Las reglas pueden contener mas de una propiedad. • h1 { font-weight: normal; color: red;} • Las propiedades se separan por ; Una regla puede incluir simultáneamente mas de un elemento h1, h2, h3, h4 { font-weight: normal; color: red; }
  22. 22. Implementación. Declarar reglas en la página web. <head> <title>Aquí va un título</title> <style type="text/css"> h1, h2, h3 { font-weight: normal; color: blue; } </style> </head>
  23. 23. Párrafos • Ejercicio 2.
  24. 24. Listas. • Permiten desplegar unas opciones para que el usuario seleccione a su criterio. 1. <select> ... </select> 2. <select name=«descriptor de la lista"> 3. <option> texto_de_la_opción </option>
  25. 25. Ejercicio 3 • Crear una lista para los días de la semana • Crear una lista para seleccionar idiomas
  26. 26. Formularios • Una forma para capturar o enviar información del usuario. • Capturan datos • Llenar encuestas • Enviar comentarios, etc • Puede contener, campos de texto, botones, listas desplegables.
  27. 27. Características • El formulario consta de unas cajas de texto donde el usuario responde a una serie de preguntas. Para ello puede escribe la información solicitada, y/o elegir mediante botones entre una o varias alternativas de entre una lista. Esta información puede mandarse al correo electrónico del administrador o bien a un programa que se encarga de procesarla automáticamente.
  28. 28. Elementos • Etiqueta <form> .... </form>.

×