“CSS - Estructura” Rogelio Ferreira Escutia
Estuctura de herencia 2
Comentarios 3
Estructura 4
Modificando el comportamiento de etiquetas 5
Creando tus propios selectores 6
Prioridad de de Asignación de Estilos 1) Estilo del navegador por default. 2) Estilo de una hoja de estilo externa. 3) Estilo dentro de la página HTML. 7
Prioridad de de Asignación de Estilos cuando se repite algún estilo 1) Se toma el último estilo asignado. 8
Para evitar que una propiedad sea reasignada 1) Se coloca “!important” en la propiedad que queremos que no sea asignada 9
Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento de Sistemas y Computación Correo: rogelio@itmorelia.edu.mx rogeplus@gmail.com Página Web: http://antares.itmorelia.edu.mx/~kaos/ http://www.xumarhu.net/ Twitter: http://twitter.com/rogeplus Facebook: http://www.facebook.com/groups/xumarhu.net/
Formularios 11
Formulario Básico 12
13
Pre-rellenar campos <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Formularios</title> </head> <body> <h2>Pre-rellenado de campos</h2> <form action="recibir.php" method = "post"> Nombre: <input type="text" name="nombre" value="Escribe tu nombre aqui" /><br/> <input type="submit" value="Enviar"/> </form> </body> </html> 14
Rogelio Ferreira Escutia Instituto Tecnológico de Morelia Departamento de Sistemas y Computación Correo: rogelio@itmorelia.edu.mx rogeplus@gmail.com Página Web: http://antares.itmorelia.edu.mx/~kaos/ http://www.xumarhu.net/ Twitter: http://twitter.com/rogeplus Facebook: http://www.facebook.com/groups/xumarhu.net/
Checkbox <!DOCTYPE html> <html> <head> <title>Formulario (Checkbox)</title> <meta charset="utf-8" /> </head> <body> <h2>Formulario (checkbox)</h2> <form method="get" action="grabar.php"> Selecciona tus Pasatiempos:<br /> <input name="peliculas" type="checkbox" checked="checked" />Películas<br /> <input name="libros" type="checkbox" />Libros<br /> <input name="internet" type="checkbox" />Internet<br /><br /> <input type="submit" value="Enviar"/> </form> </body> </html> 16
Checkbox 17
RadioButton <!DOCTYPE html> <html> <head> <title>Formulario (RadioButton)</title> <meta charset="utf-8" /> </head> <body> <h2>Formulario (RadioButton)</h2> <form method="get" action="grabar.php"> Selecciona tu actividad favorita:<br /> <input name="intereses" type="radio" value="peliculas" checked="checked" />Películas<br /> <input name="intereses" type="radio" value="libros" />Libros<br /> <input name="intereses" type="radio" value="internet" />Internet </form> </body> </html> 18
RadioButton 19