Css reglas1
-
Upload
joseph-gregory-sandoval -
Category
Documents
-
view
1.031 -
download
0
description
Transcript of Css reglas1
![Page 1: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/1.jpg)
CSS y HTML
![Page 2: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/2.jpg)
Html
<html> <head> </head> <body> </body>
</html>
![Page 3: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/3.jpg)
Elementos de texto HTML
• <> </> • Formato de títulos <H1> Texto a mostrar<H1>
![Page 4: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/4.jpg)
<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
![Page 5: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/5.jpg)
<B>, <I>, <U>
• <B> Texto en negrita </B> • <I> Texto en cursiva </I> • <U> Texto subrayado </U> • <STRIKE> Texto tachado </STRIKE>
![Page 6: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/6.jpg)
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).
![Page 7: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/7.jpg)
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.
![Page 8: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/8.jpg)
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>
![Page 9: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/9.jpg)
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>
![Page 10: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/10.jpg)
• 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>
![Page 11: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/11.jpg)
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>
![Page 12: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/12.jpg)
Otra forma añadiendo borde
• <IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Obra de K. Haring“>
![Page 13: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/13.jpg)
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
![Page 14: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/14.jpg)
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>
![Page 15: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/15.jpg)
FUERA DEL DOCUMENTO
<link rel="stylesheet" type="text/css" href="style/style.css" />
![Page 16: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/16.jpg)
![Page 17: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/17.jpg)
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;}
![Page 18: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/18.jpg)
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.
![Page 19: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/19.jpg)
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>
![Page 20: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/20.jpg)
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>
![Page 21: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/21.jpg)
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
![Page 22: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/22.jpg)
• 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; }
![Page 23: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/23.jpg)
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>
![Page 24: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/24.jpg)
Párrafos
• Ejercicio 2.
![Page 25: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/25.jpg)
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>
![Page 26: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/26.jpg)
Ejercicio 3
• Crear una lista para los días de la semana • Crear una lista para seleccionar idiomas
![Page 27: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/27.jpg)
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.
![Page 28: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/28.jpg)
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.
![Page 29: Css reglas1](https://reader033.fdocuments.net/reader033/viewer/2022052217/559c6e6b1a28ab5d358b46f9/html5/thumbnails/29.jpg)
Elementos
• Etiqueta <form> .... </form>.