FACULTAD DE INGENIERA Y TECNOLOGAS DE LA INFORMACIN
CSS Cascading Style Sheets _______________________________________________________________________
ASIGNATURA : ELECTIVA 3 (CREACIN DE PORTALES) DOCENTE : YEIMY SILVA LOZADA SEMESTRE : VI OBJETIVO GENERAL Definir el aspecto fsico de los elementos estructurales y el contenido de un sitio web a travs de CSS (Cascade Style Sheet) . CRITERIOS DE EVALUACION Se revisar la forma en que el estudiante est realizando la estructura de su cdigo y su creatividad en la presentacin de cada uno de los ejercicios propuestos. METODOLOGIA Los estudiantes deben leer la gua de aprendizaje y desarrollar los ejercicios que se proponen, posteriormente deben hacer un sito web en donde plasme los elementos vistos. RECURSOS Y MEDIOS Equipos de cmputo, gua de aprendizaje. GUIA DE APRENDIZAJE CSS es el acrnicmo de CascadingStyle Sheets (es decir, hojas de estilo en cascada). CSS es un lenguaje de estilo que define la presentacin de los documentos HTML. Por ejemplo, CSS abarca cuestiones relativas a fuentes, colores, mrgenes, lneas, altura, anchura, imgenes de fondo, posicionamiento avanzado y muchos otros temas. El documento Html define el contenido del sitio Web. El cdigo Css define la apariencia de ese sitio. METODO EXTERNO (Enlace a una hoja de estilo desde un documento HTML) Una hoja de estilo externa puede ser enlazada a un documento HTML mediante el elemento link de HTML. La etiqueta <link> debe estar entre la etiqueta de cabecera <head> del documento. Algunos de los atributos de <link> son rel, href y type. El atributo rel se usa para definir la relacin entre el archivo enlazado y el documento HTML, puede utilizar el valor "StyleSheet" que especifica un estilo persistente o preferido es decir un estilo que se aplica automticamente (rel="StyleSheet"). El atributo opcional type se usa para especificar un tipo de medio, el valor que utiliza a fin de indicar que trabajar con hojas de estilo es text/css, as permite a los navegadores omitir los tipos de hoja de estilo que no soportan (type= text/css). Href permite establecer la ruta en donde se encuentra almacenada la hoja de estilo. Ejercicio
1. En un block de notas ingrese las siguientes lneas de cdigo:
<html> <head> <title>Ejemplo del manejo de estilos</title> <link href="Estilos/style1.css" rel="stylesheet" type="text/css" > </head> <body> <font class="texto">Muchachos este es un ejemplo del manejo de estilos</font> </body> </html>
Docente
Yeimy Silva Lozada
FACULTAD DE INGENIERA Y TECNOLOGAS DE LA INFORMACIN
CSS Cascading Style Sheets _______________________________________________________________________
Cree una carpeta llamada sitio y guarde este cdigo como index.html dentro de la carpeta creada. 2. En un block de notas digite el siguiente cdigo : body font.texto {background-color: red;} {font-family: Comic Sans Ms, verdana, sans-serif; color:#FFFFFF;}
Crear una carpeta llamada Estilos dentro de sitio y guardar este cdigo como style1.css dentro de la carpeta de Estilos. Nota: Cuando guarde el archivo es mejor que se deje el nombre entre comillas para forzar al documento a tomar la extensin .css (ver grfico 1) .
Grfico 1 Si todo va bien al revisar los archivos deben aparecer as:
COLORES Y FONDO PROPIEDAD Color DESCRIPCION Define el color de un elemento EJEMPLO h1 {color:red;}
Docente
Yeimy Silva Lozada
FACULTAD DE INGENIERA Y TECNOLOGAS DE LA INFORMACIN
background-color background-image background-repeat Define el color de fondo un elemento Se usa para insertar una imagen de fondo Controla si la imagen se repetir o no, tanto en el eje de las X como de las Y Las coordenadas se pueden indicar como porcentajes del ancho de la pantalla, como unidades fijas (pxeles, centmetros, etc.) o pueden usarse las palabras "top" (superior), "bottom" (inferior), "center" (centro), "left" (izquierda) y "right" (derecha)
CSS Cascading Style Sheets _______________________________________________________________________
body {background-color: black;} body {background-color: green; background-image: url("imagen.gif");} body {background-color: green; background-image: url("imagen.gif"); background-repeat: no-repeat;} background-position: 2cm 2cm background-position: 25% 25% background-position: top right
backgroundposition
Combinacin de propiedades background-color: black; background-image: url("imagen.gif"); background-repeat: no-repeat; background-position: right bottom; En una sola lnea quedara as: background: black url("imagen.gif") no-repeat right bottom; FUENTES PROPIEDAD font-family DESCRIPCION Se usa para establecer una lista ordenada de fuentes que se usarn para mostrar un elemento determinado o una pgina web La propiedad font-style define la fuente elegida bien con el valor normal, el valor italic o el valor oblique. La propiedad font-weight describe qu intensidad o "peso" en negrita debera tener la fuente. Toda fuente puede tener los valores normal o bold Establece el tamao de la fuente. Las unidades 'px' y 'pt' establecen el tamao de la fuente de forma absoluta, mientras que '%' y 'em' permiten al usuario ajustar el tamao de la misma segn considere oportuno. EJEMPLO h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif; font-style: italic;} td {font-family: arial, verdana, sans-serif; font-weight: bold;} h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} h3 {font-size: 1em;}
font-style font-weight
font-size
Combinacin de propiedades p {font: italic bold 20px arial, sans-serif;}El orden de los valores para la propiedad font es: font-style | font-weight | font-size | font-family TEXTO
Docente
Yeimy Silva Lozada
FACULTAD DE INGENIERA Y TECNOLOGAS DE LA INFORMACIN
PROPIEDAD
CSS Cascading Style Sheets _______________________________________________________________________ text-indent
DESCRIPCION Permite agregar sangra a la primera lnea del prrafo Establece la alineacin de un texto. Los valores posibles de esta propiedad son: left(izquierda), right (derecha) o center (centrada). Adems, el valor justify(alineacin justificada) alargar cada lnea de forma que los mrgenes izquierdo y derecho estn justificados. Establece decoraciones en el texto. underline=subrayado overline= rayado por encima line-throungh=tachado Controla la escritura en maysculas de un texto capitalize :Pone en mayscula la primera letra de cada palabra. Ej, "yeimy silva" aparecer como "Ye imy Silva". uppercase: Convierte todas las letras a mayscula. Ej, "yeimy silva" aparecer como "YEIMY SILVA". lowercase :Convierte todas las letras a minscula. Ej, "YEIMY SILVA" aparecer como "yeimy silva". none :No se realiza transformacin alguna; el texto se presenta tal como aparece en el cgido HTML. EJEMPLO p {text-indent: 30px;}
th {text-align: right;} td {text-align: center;} p {text-align: justify;} h1 {text-decoration: underline;} h2 {text-decoration: overline;} h3 {text-decoration: linethrough;}
text-align
text-decoration
h1 {text-transform: uppercase;} li {text-transform: capitalize;}
text-transform
3. Hacer un sitio web referente a cualquier tema de su inters en la parte de tecnologa (redes
neuronales, inteligencia artificial, robtica, telemtica, base de datos ) en donde ponga en prctica tanto HTML como CSS, tenga en cuenta la maquetacin del sitio. CIBERGRAFIA http://www.w3.org/Style/Examples/011/firstcss.es.html http://www.cristalab.com/tutoriales/tutorial-basico-de-css-c94l/ http://translate.google.com.co/translate?hl=es&sl=en&u=http://www.websource.net/html_codes_chart.htm&ei=e3ySS7m8DsaVtgesuujUCg&sa=X&oi=translate&ct=res ult&resnum=1&ved=0CAgQ7gEwAA&prev=/search%3Fq%3Dcode%2Bhtml%26hl%3Des
Docente
Yeimy Silva Lozada
