Colegio Nacional de Educación Profesional Técnica
Lic. "Jesus Reyes Heroles"
Nombre del Alumno: José Guadalupe Martínez Cruz
Módulo: Diseño y Elaboración de Páginas Web
Grupo: INFO-604.
Práctica: N° 9.
Práctica: N° 9.
Introducción
Se determinan las formas de introducir estilos de CSS(Hojas de Etilo en Cascada) en los documentos HTML, que pueden ser de manera importada, llamar a documento externo(.css), en línea con la etiqueta, o definidos antes de la etiqueta de cierre del head (</head>) .Código HTML
Se generaron diversos archivos, pero los .html que se crearon son los siguientes:Estilo definido(p9.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES"> <html> <head>Practica N. 9 </head> <body>Practica 9, CSS insertado en HTML
en un documento:
<style type="text/css"> mi estilo </style>
ver Estilo en linea </body> </html>
Estilo Insertado (p9-2.hmtl)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
<head>
<title>Practica N. 9</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../p4/favicon.ico ">
</head>
<body>
<h1>Practica 9, CSS insertado en HTML </h1>
<span style="font-size:20px; color:#909000; line-height:190%; margin:24px;">Estilo en linea:
<!--// Estilo en linea--->
<br/><etiqueta style="font-size:20px; color:#909000; line-height:190%; margin:24px;"> ... </etiquet></span>
<br />
<a href="p9-3.html">Ver Estilo externo</a>
</body>
</html>
<html>
<head>
<title>Practica N. 9</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../p4/favicon.ico ">
</head>
<body>
<h1>Practica 9, CSS insertado en HTML </h1>
<span style="font-size:20px; color:#909000; line-height:190%; margin:24px;">Estilo en linea:
<!--// Estilo en linea--->
<br/><etiqueta style="font-size:20px; color:#909000; line-height:190%; margin:24px;"> ... </etiquet></span>
<br />
<a href="p9-3.html">Ver Estilo externo</a>
</body>
</html>
Estilo externo(p9-3.hmtl)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
<head>
<title>Practica N. 9</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../p4/favicon.ico ">
<link href="cssexterno.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Practica 9, CSS insertado en HTML</h1>
<h2 id="titulo">Estilo externo: <br/>
<!--// Estilo importado--->
<link href="cssexterno.css" rel="stylesheet" type="text/css" /></h2>
<br />
<a href="p9-4.html" id="titulo">Ver estilo importado</a>
</body>
</html>
<html>
<head>
<title>Practica N. 9</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../p4/favicon.ico ">
<link href="cssexterno.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Practica 9, CSS insertado en HTML</h1>
<h2 id="titulo">Estilo externo: <br/>
<!--// Estilo importado--->
<link href="cssexterno.css" rel="stylesheet" type="text/css" /></h2>
<br />
<a href="p9-4.html" id="titulo">Ver estilo importado</a>
</body>
</html>
Estilo importado(p9-4.html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//ES">
<html>
<head>
<title>Practica N. 9</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../p4/favicon.ico ">
</head>
<style type="text/css">
/* Se importan los estilos a utilizar*/
@import url('cssimport.css');
</style>
<body>
<h1>Practica 9, CSS insertado en HTML </h1>
<h3>Estilolos importado: @import url('cssimport.css');</h3>
<br />
<a href="p9.html">Ver Estilo definido</a>
</body>
</html>
<html>
<head>
<title>Practica N. 9</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/x-icon" href="../p4/favicon.ico ">
</head>
<style type="text/css">
/* Se importan los estilos a utilizar*/
@import url('cssimport.css');
</style>
<body>
<h1>Practica 9, CSS insertado en HTML </h1>
<h3>Estilolos importado: @import url('cssimport.css');</h3>
<br />
<a href="p9.html">Ver Estilo definido</a>
</body>
</html>
Explicación del código generado
El primer código muestra como definir hojas de estilo dentro de nuestro documento, las cuales pueden ser ocupadas las veces que se necesite; definir CSS se hace mediante la etiqueta “<style>” y su etiqueta de cierre “</style>”, se colca dentro de la etiqueta <head>…</head>. Dentro de ellas se definen las hojas de estilo, además en la etiqueta <style> se le especifica que es un texto y hoja de estilo con type, quedando asi:
<style type=”text/css”>.
El segundo código se observa que se definen estilos con la propiedad style=”” la cual dentro las comillas se colocan las propiedades que se le desean dar a la etiqueta que se le aplique. Estos estilos solo afectan a una parte de la pagina en donde este el elemento y los que estén dentro de el.
En el tercer muestra que se enlazó una hoja de estilo con la etiqueta “<link />”, a la cual se le colocan los atributo rel=”stylesheet” con el cual s eindica que es una de estilo, al igual que <style> se le colca la propiedad type=”text/css”, además se agrega la propiedad con la que se enlaza el archivo CSS que es href=””, dentro de las comillas de href se coloca la ubicación del archivo .css.
El ultimo archivo muestra un importación de un archivo .css, la importación se hace con @import url(""), entre las comillas(que pueden ser simples) se coloca la ruta del archivo tipo css; la sintaxis de la importacionse coloca dentro de la etiqueta <style>….</style> o dentro de otra hoja de CSS. La importación es para utilizar las declaraciones de otro archivo.
Resultados
Los resultados de los códigos mostrados de la práctica, en los cuales se demuestra la funcionalidad de la utilización de CSS, son los siguientes:Conclusión
Las hojas de estilo se utilizan para dar estilo a diferentes partes de una pagina web, básicamente declarando un tema, la forma para utilizar CSS en HTML es de cuatro formas, definiéndolo dentro de la etiqueta <style>…</style> para esos estilos se puedan ocupar en todo el documento; con la propiedad style=”…” para darle un estilo a un bloque o elemento del documento; y estilos que se pueden ocupar en casi todo un sitio web declarando el CSS en un archivo externo el cual podrá ser llamado mediante la etiqueta <link /> o sino, importando los estilos de la hoja dentro de otro archivo .css o dentro de la primera línea de la declaración hecha con la etiqueta <style> mediante @import url(‘archivo_importado.css’); .URL de la practica
Todos los archivos estan enlazados:
http://dewe.mypost.skn2.com/practicas/practica9/p9.html
No hay comentarios:
Publicar un comentario