Css reglas1

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>caracteres para formatear</FONT>
• Caracteres para formatear

<B>, <I>, <U>
• <B> Texto en negrita </B>
• <I> Texto en cursiva </I>
• <U> Texto subrayado </U>
• <STRIKE> Texto tachado </STRIKE>

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).

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.

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>

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>

• 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>

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>

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 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

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>

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, 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;}

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.

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>

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>

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

• 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; }

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>

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>

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 comentarios, etc
• Puede contener, campos de texto, botones,
listas desplegables.

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.

Elementos
• Etiqueta <form> .... </form>.

Css reglas1

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Css reglas1

Similar a Css reglas1 (20)

Más de Joseph Gregory Sandoval

Más de Joseph Gregory Sandoval (17)

Css reglas1