Css reglas1

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

Párrafos

• Ejercicio 2.

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

Documents

Transcript of Css reglas1