Css reglas1
-
Upload
joseph-gregory-sandoval -
Category
Documents
-
view
1.021 -
download
0
description
Transcript of 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>.