Apuntes Css y Js

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011
Hojas de Estilo en Cascada (CSS)

Finalidad del uso de CSS La razn principal por la que se usa CSS en el diseo de sitios web, es para separar lo que es el contenido de una pgina (texto, imgenes, etc.), de los detalles estticos, es decir, de formatos de fuente, colores, alineaciones, etc. Qu nos posibilita esta separacin? Poder tener un sitio con muchas pginas que luzcan similares y a la vez lograr un mantenimiento ms gil y sencillo, debido a que un nico archivo de estilo puede ser reutilizado en muchas pginas. Incorporacin de estilos en archivos HTML
HTML Una pgina web elemental, tiene al menos ciertas Etiquetas (o tags) que permiten ir dibujando lo que se desea ver en la pgina. Estas etiquetas pertenecen al lenguaje HTML. CSS permite personalizar stas etiquetas, cambindole alguna propiedad, como por ejemplo fondo, borde, fuente, color, etc. Toda pgina sencilla en HTML debe contener al menos las siguientes etiquetas: <html> <head> <title>Mi primer pagina</title> </head> <body> </body> </html> <html> y </html>: tienen la funcin de indicar donde inicia y finaliza una pgina
Prof. Myriam Ruiz Pg. 1
Tc c S
< ody>y < ody> Es donde realmente dibujaremos nuestra pgina. Todo lo que escribamos ah se mostrar en lo que es la pgina en s. Tres formas de agregar CSS en un archivo HTML 1. Dentro de una etiqueta Esto se aplicar solo a la etiqueta en la que se realice. Empie a por style= y dentro van todas las propiedades CSS. <h1 style= "color:blue; background-color:#669999 ">Bienvenidos< h1> 2. Dentro del mismo html Se escribe entre las etiquetas de head, y contiene cada etiqueta (pero sin <> , seguido de llaves, entre las cuales se modificarn las propiedades.
<head> <style type="text/css"> H1 { Color:blue; Background-color:lightyellow; } </style> </head>

2 e e SS y J v Sc

73 !(
( 33 % (
'%'
< le> y <

'%'
0& 3 '3 %'
( % 1$ 3 ( 4 0$ 3 02 1 !( 0! ( 0) $ ( '%& %$ ! # ! ( 0 0& 0 5$ $ ( 0% %! 6 '2 %3 0'( & $

e e c c
"
"
< e
8
>y< e
"
e e e e se e s c es TML, c s los es los y ee e s los sc s le> e c e el ttulo que te la pgina en la parte superior de la ventana del navegador.
>

3. En un archi o externo Las propiedades estticas de CSS estarn en un archivo separado del HTML. Deber invocarse el archivo CSS mediante la etiqueta Lin .
<head> <li el </head>
t lesheet t
e="text/ ss"href="miestil . ss">
Rel: indica que se relacionar el HTML con una hoja de estilo (stylesheet). Type: Le indica al navegador que se trata de un archivo de texto, ms especficamente de CSS. Href: Indica la ubicacin y nombre del archivo de estilos, con su extensin (.css). Ubicacin del CSS
Si el archivo .css est ubicado en la misma carpeta que el archivo .htm, colocaremos solo el nombre completo del archivo css. Si desde donde tenemos el html hubiera que ingresar a una carpeta, en href pondremos:No breCarpeta/miestilo.css Si el archivo css estuviera un nivel ms arriba que el html, se debe indicar que para encontrarlo se sube un nivel con puntos: ../miestilo.css
Tipo de elementos que podemos personalizar mediante estilos 1. Etiquetas: nombrando la etiqueta sin <>, entre llaves { } se personaliza Ejemplo: En el archivo HTML ponemos: <p> Este es un prrafo</p> En el archivo de estilo ponemos:
P{
E
l r: reen; font famil :verdana; text ali n: enter; text decoration: nderline;
Prof. Myriam Ruiz
Pg. 3
Tcnico Superior en Informtica Aplicada
Es decir, decimos que los prrafos tendrn: Color de fuente verde, fuente de tipo verdana, texto alineado al centro y subrayado . Luce as:
2. Id: Cuando queremos hacer referencia a un nico elemento html, podemos ponerle un Id (identificador), con el cual poder luego nombrar ese elemento en el archivo CSS. Esto lo usamos cuando queremos que algn tipo de etiqueta est personalizada (ej.: alguna de las h1, o de las p), pero no todas. Ejemplo: En el HTML ponemos <h1 id="titulo"> Bienvenidos</h1> En el estilo ponemos #titulo { Background:cyan; color: lue; order-color:green; order-style:dotted; order-width:3 x; // Para que un borde se vea debe tenerestilo y grosor Observe que el nombre de una Id en el CSS va antecedida del s mbolo #
Pg.4
Apunte de CSS y avaScript
3. Clases: Cuando queremos utilizar en muchas etiquetas la misma configuracin CSS, podemos crear una clase, que podr ser invocada en etiquetas diferentes. Para insertar una clase se usa la palabra class y para modificarla en el CSS se usa un punto . delante del nombre de clase. Ejemplo En el HTML ponemos: <table> <tr> <td class="celdai">Dato 1</td> <td class="celdap">Dato 2</td> <td class="celdai">Dato 3</td> <td class="celdap">Dato 4</td> </tr> </table> En el CSS ponemos: .celdai { bac ground-color:#CCFF66;} .celdap { bac ground-color:#CC99FF;}
G G
Prof. Myriam Ruiz
Pg. 5
Etiquetas que vamos a modificar mediante C Etiquetas HTML de Texto
<pre></pre>: Texto pre-formateado (toma todos los espaciados y saltos de lnea que escribamos en el archivo HTML) <h1></h1>: Ttulo ms grande <h6></h6>: Ttulo ms pequeo Enlaces <ahref= URL ></a>: Hipervnculo <ahref= mailto:EMAIL ></a>: Hipervnculo mailto (para envo de correo) <aname= name ></a>: Indica una marca donde ira un hipervnculo <ahref= #name ></a>: Enlaza hacia algn lugar dentro del mismo sitio Formato y presentacin <p></p>: Nuevo prrafo <br>: Inserta un interlineado suave. Salto de lnea <ol></ol>: Lista ordenada <li></li>: Entrada en una lista <ul></ul>: Lista con vietas sin ordenar <div>: Para dar formato a porciones grandes del documento html, incluyendo hojas de estilo Elementos Grficos <imgsrc= name >: Incorpora una imagen <hr>: Linea horizontal Tablas <table></table>: Crea tabla <tr></tr>: Crea filas en una tabla <td></td>: Crea columna en una fila
Pg.6 Apunte de CSS y avaScript
II
<th></th>: Encabezado de tabla, texto normal, negrita y centrado <tdcolspan=#>: Expansin de una celda, en nmero de columnas <tdrowspan=#>: Expansin de una celda, en nmero de celdas <tdnowrap>: Texto continuo dentro de una celda Formularios <form></form>: Formulario <select name= name ></select>: Mendesplegable <option></option>: Opcin del men desplegable <textarea name= name cols=40 rows=8></textarea> Crea una caja de texto, columnas es el ancho y las lineas la altura (cols y rows) <input type= chec box name= name > : Creaun chec box. <input type= radio name= name value= x > : Creabotn de radio. <inputtype=textname= name size=20> : Crea una opcin de texto para entrada de informacin <input type= submit value= name >: Creabotn de envo <input type= image border=0 name= name src= name.gif > : Creabotn de envo con imagen <inputtype= reset >: Crea botn de limpieza (reset).
P P
Maquetacin de una pgina Web: Las divisiones de la pgina en encabezado, men, contenido y pie, que antes se acostumbraban hacer con tablas, hoy en da se acostumbra hacerlas con la etiqueta Div y CSS. Esto se debe a que es ms fcil modificar la estructura de muchas pginas mediante la modificacin de su hoja de estilos, que tener que modificar varias tablas en las distintas pginas de nuestro sitio.
Prof. Myriam Ruiz
Pg. 7
TABLA DE PROPIEDADES CSS

Fuente <Font>
Atributo
font-family font-style font-weight
Que hace
Elije el ti o de fuente que usar ambia el formato Grosor de la letra
Valores
arial ; sans-serif ; helvetica ; verdana normal ; italic ; oblique ; normal ; bold ; bolder ; lighter ; 100..500..900 ; xx-small ; x-small ; small ; medium ; large ; x-large ; xx-large ;
font-size
Tamao de la letra
. Texto <Text>
Atributo
word-spacing letter-spacing text-decoration
Que hace
Espaciado entre Palabras Espaciado entre letras Subrayado
Valores
normal y unidades de medida SS ; normal y unidades de medida SS ; none ; [ underline ; overline ; line through ] ; baseline ; sub ; super ; top ; text -top ; middle ; capitalize ; uppercase ; lowercase ; none; left ; right ; center ; justify ; normal y unidades de medida SS ; nombre o valor RGB
vertical-align
Alineacin del texto vertical
text-transform
Transformar a letra capital , mayusc., minus. Alineacin del texto Altura de la linea olor de fuente
text-align line-height color .
Fondo <Background>
Atributo
background-color background-image: url(imagen.ext) backgroundattachment
Que hace
olor de fondo Imagen de fondo
Valores
color, nombre o valor RGB nombre de la imagen con path relativo o absoluto scroll ; fixed
Que el fondo de mueva con el texto o quede fijo
Pg.8

background-position Posicin del fondo top ; center ; bottom ; left ; right ; unidades de medida SS ; repeat-x; repeat-y ; repeat; no-repeat
background-repeat . Clasificacin
Si se repite el fondo
Atributo
display white-space
Que hace
Indica como mostrar un objeto Indica cmo tratar los espacios en blanco Tipo de Vieta
Valores
block ; inline ; list-item ; none normal ; pre ; nowrap ;
list-style-type
disc ; circle ; square ; decimal ; lower-roman ; upper-roman ; lower-alpha ; URL - nombre de la imagen inside ; outside ;
list-style-image list-style-position
Imagen para vieta
Marco <Box>
Atributo
margin-top margin-right margin-bottom margin-left padding-top padding-right padding-bottom padding-left border-top-width
Que hace
Margen superior Margen derecho Margen inferior Margen izquierdo Espacio interno superior Espacio interno derecho Espacio interno inferior Espacio interno izquierdo Anchura de borde superior
Valores
unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida unidades de medida SS ; SS ; SS ; SS ; SS ; SS ; SS ; SS ;
thin ; medium ; thick ; unidades de medida SS ; thin ; medium ; thick ; unidades de medida SS ; thin ; medium ; thick ; unidades de medida SS ;
border-right-width
Anchura de borde derecho
border-bottom-width
Anchura de borde inferior
Prof. Myriam Ruiz
Pg. 9

border-left-width Anchura de borde izquierdo thin ; medium ; thick ; unidades de medida SS ; thin ; medium ; thick ; unidades de medida SS ; color, nombre o valor RGB ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; none ; dotted ; dashed ; solid ; double ; groove ; ridge ; auto ; unidades de medida SS ; auto ; unidades de medida SS ; left ; right ; none ; left ; right ; none ; both ;
border-width
Anchura de todos los bordes
border-color border-style
olor de borde Estilo de la linea del borde (punteado, solido, doble, etc) Borde Superior
border-top
border-right
BordeDerecho
border-bottom
Borde Inferior
border-left
BordeIzquierdo
width height float clear
Anchura de un objeto Altura de un objeto Flotar o posicionarse Indica interrumpir el esquema de los objetos que flotan
Ejemplos
Creacin de Hipervnculos y A pginas externas: <ahref="http://www.lagaceta.com.ar/">LaGaceta</a> y A pginas dentro de nuestro sitio, dentro de la misma carpeta desde donde parte el hipervnculo: <a href="interactivo.htm">Interactivos</a> y A pginas dentro de nuestro sitio, dentro de una carpeta en un nivel ms abajo que desde donde parte el hipervnculo: <ahref="textos/programa.htm">Programa</a>
Pg.10
y A pginas dentro de nuestro sitio, por encima del nivel desde donde parte el hipervnculo: <a href="../lin s.htm">Lin s</a> Men con CSS En el HTML ponemos: <ahref="http:\\www.lagaceta.com.ar">LaGaceta</a> <ahref="http:\\www.infobae.com">Infobae</a> <ahref="http:\\www.lanacion.com.ar">LaNacion</a> En el archivo de estilo ponemos: a{ bac ground-color:#CCCCCC; display:bloc ; width:80px; text-align:center; border-bottom:2px solid; text-decoration:none; padding:3px; } a:hover { bac ground-color:#FFFF66; border-top:3px solid blue; border-left:3px solid blue; border-bottom:0px; width:77px; } a:visited, a:lin { color:#006600;}
T T T T S S
Prof. Myriam Ruiz
Pg. 11
Explicacin 1. Se cambia las propiedades de los hipervnculos para que de entrada todos tengan: un fondo de color bac ground-color un ancho para el fondo display:bloc y width un borde border una alineacin text-align y no tengan subrayado: text-decoration:none 2. Tenemos que configurar un elemento del hipervnculo que nos permita que al acercar el mouse a un lin (a:hover) suceda lo siguiente: su color de fondo cambie bac ground-color Se agregue un borde superior y uno a la izquierda, y se saque el borde inferior, para dar la sensacin de que se lo est presionando bordertop y border-left Ajustar el ancho del hipervnculo, para que sea igual a los que no estamos por presionar, teniendo en cuenta que hemo s agregado un borde izquierdo width 3. Se establece que el color de los hipervnculos sin visitar y no visitados tendrn el mismo color a:lin , a:visited { color:#006600;}
` Y X W V
Pg.12
Maquetacin de una pgina Web: 1. Realizar en un archivo HTML, las delimitaciones de la pgina en, por ejemplo, encabezado, men, contenido y pie, mediante la utilizacin de la etiqueta Div: <html> <body> <div id="contenedor"> <div id="cabecera"> Encabezado</div> <div id="menu">Lateral Izquierdo</div> <div id="contenido">Lateral derecho</div> <div id="pie">Pie</div> </div> </body> <html> 2. En la hoja de estilos realizar las siguientes configuraciones: I. Con el selector universal *, indicamos que todos los mrgenes y el espacio que se deja entre el contenido de una etiqueta y su borde valdrn cero. * { margin:0; padding:0; } II. Aqu definimos el ancho (width), la altura (height, medida en em, que equivale a la altura de la letra m de la fuente que usemos por defecto) y color de fondo, del div que contiene al resto de los div. #contenedor { width:100%; height:38em; bac ground-color:#FF0000; }
a
Prof. Myriam Ruiz
Pg. 13
III. Definimos color de fondo y altura del encabezado #cabecera { bac ground-color:#CCCC99; height:3em; } IV. Indicamos que el men flotar hacia la izquierda (float:left) , tendr un ancho, un color de fondo y una altura #menu { float:left; width:15%; bac ground-color:#CC99CC; height:32em; } V. Luego, sin sacar el flotado, indicaremos que el contenido se acomode ocupando el 100% del espacio que quede a continuacin del men, tenga un color de fondo y una altura idntica al div del men. #contenido { width:100%; bac ground-color:#FFFF99; height:32em;} VI. Por ltimo, mediante clear:left, haremos que el pie no intente ubicarse al costado del contenido, sino que se ubique debajo, rompiendo el flotamiento a la izquierda que vena aplicndose. #pie { clear:left; bac ground-color:#66FFFF; height:3em; }
c c c c
Al final queda una delimitacin como la siguiente:
Formulario <HTML><HEAD> <TITLE>Formulario</TITLE></HEAD> <BODY> <FORM ACTION="mailto:pepe@yahoo.com.ar" METHOD="POST"> Nombre: <INPUT type="text" name="nombre" value="Ana" size="20" maxlength="20"><br> Email: <INPUT type="text" name="mail" value="pepe@argentina.com" size="20" maxlength="25"><br> Club: <select name="club"> <option value="River">River</option> <option value="Boca">Boca</option> <option value="Indep">Independiente</option> <option value="Racing">Racing</option> </select><br> Edad: <input type="radio" name="edad" value="18-20"> De 18 a 20 <input type="radio" name="edad" value="21-24"> De 21 a 24 <input type="radio" name="edad" value="25mas"> De 25 en adelante<br>
Prof. Myriam Ruiz
Pg. 15
Que hace falta?: <input type="chec box" name="apu">Apuntes <input type="chec box" name="ejplos">Ejemplos <input type="chec box" name="ejcios">Ejercicios<br> Mensaje:<br> <TEXTAREA name="msg" cols="20" rows="10"></TEXTAREA><br> <INPUT type="submit" value="Enviar"> <INPUT type="reset" name="borrar" value="Borrar"> </FORM></BODY></HTML> Se obtiene lo siguiente:
e e e
CSS en Formulario form { border: 10px solid #666699; bac ground-color:#ccc; padding:10px; width:400px;} input {
bac ground-color:#CC99FF;} select { bac ground:#f00; color:#000; border:dotted 3px #fff;} .botones { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 15px; bac ground-color: #333333; color: #FFFFFF; margin-right: 6px; }
f f f
Prof. Myriam Ruiz
Pg. 17
JavaScri t
Cuadros de dilogo 1. Mtodo alert(): Sirve solo para mostrar mensajes
i
Valor por defecto Apunte de CSS y JavaScript
alert( Te to +variable Por ejemplo:

g g h g
\n Produce un salto de Lnea

g s
alert( Bienvenido!\nEsta Web est dedicada a JavaScript. )
2. Mtodo prompt() del objeto window: muestra una caja de te to en la que el usuario puede escribir. Tambin muestra dos botones, Aceptar y Cancelar. Ejemplo: variable =prompt( Su color favorito es: , Azul )
q qq q p
Este cuadro de dilogo permite capturar datos introducidos por el usuario y realizar una accin en base a ellos. Por ejemplo, podemos pedirle al usuario que introduzca su nombre, y despus mostrarlo: < TML>< EAD> <TITLE>Ejemplo 2.2: pgina que pide el nombre< TITLE> < EAD> <B DY> <SCRIPT type= te t/javaScript > nombre = prompt( Introduzca su nombre: , )
Pg.18
qq q
p q
t r
document.write( < 2>Bienvenido, + nombre + </H2>") </SCRIPT> <P>Aqu va el resto de la pgina...</P> Concatenacin </B DY> de te to con </HTML> variable Aparece el cuadro de dilogo:
y u u v u x w
Y luego se escribe en la pgina:
Funciones de conversin de tipos Todo lo que se ingresa a travs de prompt se considera texto, por lo tanto, antes de poder hacer operaciones matemticas deber transformarse a nmero entero o con decimales: parseInt(valor): convierte te to a nmero entero parseFloat(valor): convierte te to a nmero real o con decimal. Ejemplo: num=prompt("Ingrese un nmero",""); num=parseInt(num); // ahora la variable si contiene un nmero
x
Prof. Myriam Ruiz
Pg. 19
3. Mtodo confirm() del objeto window:Mostrar un cuadro de dilogo con el mensaje de texto que le pasemos como parmetro, y dos botones, Aceptar y Cancelar: rpta=confirm("Desea volver al inicio de la pgina?")
Este mtodo devuelve verdadero (true) si se pulsa Aceptar y fals o (false) si se pulsa Cancelar, lo cual puede asignarse a una variable y luego analizarlo mediante la estructura condicional if.
Estructuras de control y if - Sintaxis if (condicin) {Acciones a realizar en caso positivo} else {Acciones a realizar en caso negativo} Ejemplo if Sencillo <script type="text/javascript"> conf = confirm("Desea Seguir?") if (conf) { document.write("Presion Aceptar"); } else { document.write("Presion Cancelar"); } </script>
Ejemplo ifanidado: Ingresar 3 nmeros y determinar cul es mayor vara,b,c; a=parseInt(prompt("ingrese A:","")); b=parseInt(prompt("ingrese B:","")); c=parseInt(prompt("ingrese C:","")); if (a>b) { if (a>c) { document.write("a es el mayor"); } } else { if (b>c){ document.write("b es el mayor"); } else { document.write("c es el mayor"); } }
y switch Se utiliza cuando una variable puede tomar ms de 2 valores switch (expresin) { case valor1: Tarea1; Brea ; case valor2: Tarea2; Brea ; Default: Tarea; }

Prof. Myriam Ruiz
Pg. 21
Ejemplo: Switch (dia_de_la_semana) { case 1: document.write("Es Lunes") brea case 2: document.write("Es Martes") brea case 3: document.write("Es Mircoles") brea case 4: document.write("Es ueves") brea case 5: document.write("Es viernes") brea case 6: case 7: document.write("Es fin de semana") brea default: document.write("Ese da no existe") }

y for Se utiliza cuando debemos hacer una misma tarea un nmero de veces que conocemos de antemano for (inicializar contador; final de repeticin ; como cambia el contador ) { Tareas a realizar } Ejemplo: mostrar los distintos tamaos de encabezados h for (i=1;i<6;i++){ document.write("<H" + i +">Encabezado "+ i+ "</H" + i + "<br>");
y while Se utiliza cuando debemos hacer una misma tarea un nmero de veces que no conocemos de antemano
while (condicin){ tarea a ejecutar } y do while do { tareas } while (condicin) Ejemplo: varnum; do { num=prompt("Ingrese un nmero","") } while (isNaN(num))
isNaN: es una funcin que devuelve verdadero si lo que recibe como parmetro no es no un nmero.
Pg. 23
Prof. Myriam Ruiz
Arreglos (Array) Cuando tenemos que ingresar muchos valores y conservarlos en memoria, no es til usar variables de memorias aisladas y con nombres diferentes, es mejor crear un nico nombre de variable de tipo arreglo, y diferenciar los datos por la posicin que ocupan en el arreglo. Creacin (declaracin) de Arraysjavascript
1. Si no tenemos determinada la cantidad de componentes que tendr, se declara as: varmiArray = new Array(); Tenga en cuenta de respetar las minsculas y maysculas como aparecen. 2. Tambin podemos crear el array avascript especificando el nmero de componentes que va a tener. varmiArray = new Array(10); 3. Si sabemos los datos que contendr el arreglo, podemos declararlo as: varmiArray = new Array("Lunes","Martes","Miercoles","Jueves","viernes"); Cargar datos en un arreglo Escribir el nombre del arreglo, seguido de corchetes que contengan el ndice de la posicin donde queremos guardar el dato. Ejemplo: varaColores = new Array(); acolores[0] = "Rojo"; acolores[1] = "Verde"; acolores[2] = "Azul"; Lo ms prctico para cargar un arreglo de muchas componentes es utilizar la estructura for.
Ejemplo: Ingresar 3 nmeros y calcular su promedio varnum = new Array(3) ; // Primero ingresar los nmeros en el arreglo for (i=0;i<3;i++){ num[i] = prompt("Ingrese el nmero " + i, ""); } suma=0; // Segundo, leer el arreglo e ir sumando sus elementos for (i=0;i<3;i++){ suma = suma + num[i];} Promedio = suma/3; alert("Promedio= "+ Promedio); Observe: Todo recorrido que se haga con for para leer o escribir en un arreglo, debe comenzar con un contador en cero. Funciones y Cmo se escribe una funcin functionnombrefuncion (){ instrucciones de la funcin... return variable;} Veamos un ejemplo de funcin para escribir en la pgina un mensaje de bienvenida dentro de etiquetas <H1> para que quede ms resaltado. functionescribirBienvenida(){ document.write("<H1>Hola a todos</H1>") } y Cmo llamar a una funcin NombreDeLaFuncion()
Prof. Myriam Ruiz
Pg. 25
Ejemplocompleto: <html><head><title>Ejemplo JavaScript</title> <script type="text/javascript"> function Cuadrado (valor){ return valor*valor; } </script></head> <body> <script type="text/javascript"> num = parseInt(prompt("Ingrese un nmero", "")); cuad = Cuadrado(num); alert ("Su cuadrado es= " + cuad); </script></body></html> y Invocar elementos por su name Insertamos una imagen (img) en el body, le damos un nombre (name) y debajo insertamos un botn y programamos en su evento onClic para que llame a una funcin que cambiar el path o ubicacin (src) de la imagen mostrada (con lo que mostrar otra imagen). <html><head> <script type="text/javascript"> function Cambiar() { document.imagen.src="foto2.jpg" } </script> <title>JavaScript: invocandoelementos</title> Cuando se produzca el evento </head> clic llamar a la funcin <body> <imgname="imagen" src="foto1.jpg"> <input type="button" value="OtraImagen" onClic ="Cambiar()"> </body></html>
Botn
Pg.26
Apunte de CSS y JavaScript
Indice
Formas de Insertar un Estilo 2 3 Insertar un archivo CCS (Lin ) Personalizar etiqueta .. 3 Personalizar Id ..4 Personalizar Clase (class) ..5 Breve detalle de etiquetas HTML 6 Para qu sirve la maquetacin CSS 7 Tabla de Propiedades CSS 8 Creacin de Hipervnculos (<a>) .. 10 Men con CSS . 11 Maquetacin con CCS (Titulo, men, contenido y pie). . 13 Formulario (form) 15 CSS en formulario . 16 alert y prompt . 18 confirm . 20 If (Si) 20 switch (Segn) . 21 for (Hacer) . 22 While (Mientras) . .. 23 Arreglo (Array) . 24 Crear Funciones . . 25 Invocar elementos por su name .. 26
Prof. Myriam Ruiz
Pg. 27

Apuntes Css y Js

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Apuntes Css y Js

Transféré par

Droits d'auteur :

Formats disponibles

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Hojas de Estilo en Cascada (CSS)

< le> y <

0& 3 '3 %'

( % 1$ 3 ( 4 0$ 3 02 1 !( 0! ( 0) $ ( '%& %$ ! # ! ( 0 0& 0 5$ $ ( 0% %! 6 '2 %3 0'( & $

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

<head> <li el </head>

e="text/ ss"href="miestil . ss">

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Etiquetas que vamos a modificar mediante C Etiquetas HTML de Texto

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

TABLA DE PROPIEDADES CSS

Alineacin del texto vertical

text-align line-height color .

Que el fondo de mueva con el texto o quede fijo

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Imagen para vieta

Anchura de borde derecho

Anchura de borde inferior

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Anchura de todos los bordes

width height float clear

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Apunte de CSS y avaScript

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Al final queda una delimitacin como la siguiente:

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

alert( Te to +variable Por ejemplo:

\n Produce un salto de Lnea

alert( Bienvenido!\nEsta Web est dedicada a JavaScript. )

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Y luego se escribe en la pgina:

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Planeamiento y Control de Proyectos Instituto Nicols Avellaneda - 2011

Prof. Myriam Ruiz

Tcnico Superior en Informtica Aplicada

Apunte de CSS y JavaScript