Curso de Cascade Style Sheet Manual del alumno <CSS>
|
|
- Eugenia San Segundo Ruiz
- hace 6 años
- Vistas:
Transcripción
1 Curso de Cascade Style Sheet Manual del alumno <CSS> Ing. Cedric Simon Tel: Cel: c e d r i s o l u c i o n j a v a. c o m Web: SolucionJava.com
2 Curso de Cascade Style Sheet CSS Pagina 2 / 26 Índice de contenido 1. Introducción al curso Objetivo de este curso Manual del alumno Ejercicios prácticos Requisitos para atender a este curso Soporte después del curso Introducción El tag LINK Hojas de estilos alternativas La 6. Reglas básicas Agrupación de selectores y declaraciones Atributos CLASS y ID CLASS ID Pseudo-Clases y Pseudo-Elementos Estructura Especificidad Estilos en cascada Colores y unidades Colores Unidades...17 Medidas absolutas de longitud:...17 Medidas relativas de longitud: Indentación Margenes Introducción Margin Padding Alineación Espacios en blanco Anchura de líneas Espacio entre palabras Transformaciones del texto Decoración del texto...26
3 Curso de Cascade Style Sheet (CSS) Pagina 3 / Objetivo de este curso 1. Introducción al curso En este curso vamos a aprender el uso de hojas de estilo, que nos permitirá crear páginas web mas atractivas Manual del alumno Este manual del alumno es una ayuda para el alumno, para tenga un recuerdo del curso. Este manual contiene un resumen de las materias que se van a estudiar durante el curso, pero el alumno debería de tomar notas personales para completas este manual. Este manual es una versión adaptada del manual 'CSS Practico' escrito por Ricardo Borillo y publicado en Ejercicios prácticos Para captar mejor la teoría, se harán muchos ejercicios con los alumnos, para probar la teoría y verificar la integración de la materia. También, el alumno podrá copiar sus códigos en una memoria flash al fin del curso para llevarse, con fin de seguir la práctica en su hogar Requisitos para atender a este curso El conocimiento del lenguaje HTML es requerido para poder atender a este curso. Si el alumno tiene dificultades en un u otro capitulo, el debe sentirse libre de pedir explicaciones adicionales al profesor. Pero si aparece que el alumno no posee los requisitos mínimos para este curso, por respeto a los otros alumnos que ya poseen esta materia, el alumno podría ser traslado para otro curso en el futuro, cuando el cumplirá con los requisitos Soporte después del curso Si tienes preguntas sobre la materia del curso en tus ejercicios prácticos, puedes escribir tus preguntas a cedric@solucionjava.com. Para informaciones sobre otros cursos, visita el sitio web
4 Curso de Cascade Style Sheet CSS Pagina 4 / Introducción CSS son las siglas de "Cascade Style Sheet". Se trata de una especificación sobre los estilos físicos aplicables a un documento HTML, y trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento. En este curso veremos algunos conceptos básicos de cómo aplicar este lenguaje para definir estilos. En los orígenes de la Web y en sus primeras versiones, HTML era un lenguaje fácil de aprender y muy reducido en cuanto a sus tags y estructura. Estamos hablando de los años 1990 al Todo cambió cuando empezaron a surgir los primeros navegadores que eran capaces de representar recursos gráficos como añadido a la información textual. Así, el número de sitios web comenzó a crecer y con él, el número de tags que la especificación HTML contemplaba. El objetivo era construir sitios web cada vez más atractivos visualmente hablando, con lo que HTML debía incluir nuevos tags destinados a conseguir diversos efectos visuales. Con todos estos cambios que la web había sufrido, nos encontramos con que un lenguaje que en sus inicios había sido "orientado a la estructura", ahora estaba totalmente "orientado a la visualización" (HTML 4 es la más viva representación de esta realida). Encontramos tags com <B>, <U> o <I> que definen estilos de visualización sin aportar nada a la estructura del documento representados. Otro aspecto importante y que condiciona totalmente la estructura del documento es el uso del tag FONT. Con el uso de este tag podemos hacer que una zona que corresponde a la cabecera o título de una página, y que debería expresarse con un H1, pase ahora a estar definida mediante el tag FONT. Con este cambio se pierder totalmente la estructura del documento. La realidad ahora es que el mayor número de los sites realizados con HTML 4 consiguen que el volumen de información de visualización sea muy superior al de la información verdaderamente relevante. Esto parece, cuanto menos precoupante. Motivos por los que no podemos permitir que nuestros documentos publicados en la web pierdan su estructura: 1. La indexación por los buscadores es mucho más complicada (Google asigna un peso mucho mayor a una página que utliza H1 para definir sus secciones, que a los campos META del documento). 2.Se reduce la acesibilidad. Actualmente existen aplicaciones que permiten la lectura de páginas web como ayuda a los discapacitados (persona ciegas o con otras discapacidades). Si una persona discapacitada intenta acceder a una página sin una mínima estructuración, el resultado puede ser lamentable. 3.La estructura de la página y la información contenida en la misma es mucho más sencilla de mantener. Actualmente, ciertos aspectos del código HTML pueden hacer que una misma página tenga visualizaciones distintas en distintos navegadores. Estos herrores de diseño son dificilmente depurables cuando la página contiene una estructura de tags complicada y sin ninguna estructuración. Por otra parte, un cambio en un tipo de fuente supone el rediseño de todas las páginas de un site al tener que sustituir todos los valores para el tag FONT. Todos estos problemas han sido seguidos muy de cerca por el W3C, el cual comenzó a trabajar en 1995 en CSS.
5 Curso de Cascade Style Sheet (CSS) Pagina 5 / 26 Principales características aportadas por CSS en contraposición a los elementos de visualización presentes en la especificación de HTML 4: 1.Estilo enriquecido. CSS permite la creación de documentos visualmente mucho más ricos que lo que HTML nunca permitirá. No en vano CSS está pensado única y exclusivamente para asistir al diseñador a la hora de dar estilo a un documento estrucuturado. 2.Fácil de utilizar. La utilización de hojas de estilo CSS hace que el diseñador pueda reducir sustancialmente su carga de trabajo al diseñar todo un site. Esto se debe a que CSS es capaz de centralizar ciertos efectos visuales que plasmemos en diversas secciones del site, en lugar de tenerlos diseminados por páginas y páginas del sitio. 3.Reutilización en múltiples páginas. Una hoja de estilo que recoja aspectos visuales comunes a varias páginas puede ser reutilizada en cualquier sección del site aprovechando dichos efectos ya definidos. De esta manera es sencillo generar un estilo general del web y mantenerlo así consistente para todas las páginas. Así, si deseamos modificar un estilo que es común a todo el site, sólo necesitaríamos modificar una línea de nuestro fichero CSS (con la aproximación clásica que ofrece HTML, deberíamos modificar todas y cada una de las páginas). 4.Reduce el tamaño del código HTML enviado. Al centralizar los estilos ya no es necesario la utilización de tags como FONT en todos los documentos del site. De esta manera se reduce considerablemente el tiempo en que tarda en cargarse el código de una página. 5.Nos prepara par el futuro. Debemos ser conscientes que muchos tags como FONT, BASEFONT, U, STRIKE, S, CENTER, han sido marcados por el W3C como "deprecated", es decir, que se desaconseja su uso ya que serán eliminados en un futuro de la especificación. De igual menera HTML retornará progresivamente a sus orígenes, volviendo a ser un lenguaje para la estrucuturación de información. Esta es la via de XML, cuya primera aproximaciés es el lenguaje de marcas XHTML.
6 Curso de Cascade Style Sheet CSS Pagina 6 / 26 Veamos un ejemplo de tag link 3. El tag LINK <link rel="stylesheet" type="text/css" href="estilos.css" title="default"> Para conseguir la adecuada carga de la hoja de estilos, debemos posicionar este elemento en el HEAD de la página. Atributos del tag LINK.- REL: define el tipo del documento o "con qué tiene relación". En general, su valor será "stylesheet". TYPE: será siempre "text/css". HREF: es el valor de la URL que nos permite el acceso al fichero de estilos. TITLE: actualmente casi no se utiliza, pero será muy importante en el futuro. Su importancia radica en que puede haber en el mismo documento más de un tag LINK. En el caso de que haya más de un tag LINK, sólo aquellos cuyo valor de REL sea "stylesheet" se aplicarán inicialmente al documento: <link rel="stylesheet" type="text/css" href="basic.css"> <link rel="stylesheet" type="text/css" href="splash.css"> El navegador cargará ambas hojas de estilo, combinando las reglas que definen y aplicando el resultado al documento.
7 Curso de Cascade Style Sheet (CSS) Pagina 7 / Hojas de estilos alternativas Es de especial utilidad hacer uso del tag TITLE, cuando definimos hojas de estilo alternativas. En el siguiente ejemplo se definen tres hojas de estilo dentro del mismo documento de forma que: La primera definición se aplicará siempre. El navegador nos permitirá seleccionar alguna de las dos siguientes como fuente alternativa de estilos. Además, cuando nos presente el menú para seleccionar la hoja de estilos alternativa, utilizará el atributo TITLE para su identificación. <link rel="stylesheet" type="text/css" href="fija.css" title="default"> <link rel="alternate stylesheet" type="text/css" href="alternativa1.css" title="vista de impresión"> <link rel="alternate stylesheet" type="text/css" href="alternativa2.css" title="vista decorada"> El tag STYLE.- permite dos tipos de tratamiento: 1.Definir estilos que se aplicarán al tag en que se ubique, sin necesidad de definirlos en el HEAD del documento. 2.Definir una hoja de estilo completa en el HEAD sin que esta se almacene en un fichero externo. Siempre debe hacer uso del atributo TYPE. Contiene estilos que se aplicarán al documento, pero también puede contener múltiples enlaces a hojas de estilo externas definidas con la
8 Curso de Cascade Style Sheet CSS Pagina 8 / La La única diferencia con el tag LINK es su sintaxis y el lugar donde puede utlizarse. La sólo puede utilizarse dentro de una región STYLE en el HEAD de la página. Además, estas directivas deben definirse antes de cualquier regla CSS que contenga esta región STYLE. <style url(externo.css); h1 {color: gray;} </style> Con la no podemos definir hojas de estilos alternativas, y en algunos navegadores no se cachea estos contenidos. Comentarios en CSS.- Podemos definir comentarios dentro de un fichero CSS haciendo uso de una sintaxis muy similar a la C/C++, es decir, se considerará un comentario cualquier sección del documento que comience con /* y termine con */.
9 Curso de Cascade Style Sheet (CSS) Pagina 9 / Reglas básicas Con CSS podemos aplicar reglas de estilo a un tipo determinado de elementos dentró del documento HTML, así podemos podemos conseguir el mismo efecto que utilizando el marcado tradicional: <h2><font color="red">texto de prueba</font></h2> Pero con el mínimo esfuerzo: H2 {color: red;} A esta expresión se la denomina "regla", y esta en concreto, permite poner en rojo los elementos de tipo h2. Estructura de las reglas.- Cada regla tiene dos partes: 1.El "selector": el selector es la parte de la regla que selecciona a qué partes del documento se les debe de aplicar el estilo. En cuanto a la declaración se compone de una combinación de propiedades CSS. Normalmente, el selector es un elemento HTML, aunque puede tomar otros valores. Si estamos formatenado un documento XML, puede tomar el valor de cualquiera de los elementos o nodos del documento XML: QUOTE {color: gray;} BIB {color: red;} BOOKTITLE {color: purple;} 2.La "declaración": además, la declaración se compone de una lista de parejas "propiedad : valor" separadas por punto y coma, que se corresponden con propiedades válidas dentro de la especificación CSS. Motivos por los que se puede anular una declaración: -Si utilizamos un propiedad que no existe, la declaración entera es ignorada. -Si utilizamos un valor incorrecto para una propiedad, sólo debería ignorarse el valor, aunque este aspecto depende de la implementación del navegador (aunque la mayoría son bastante tolerantes con los errores en el código CSS). Si la definición del valor de una propiedad permite el uso de más de una palabra, estas estarán separadas por espacios en blanco. Además existen unos poco ejemplos en los que se pueden utilizar otros tipo de elementos dentro de la declaración. Es el caso de la propiedad FONT: H2 {font: large/150% sans-serif;} Esta declaración permite definir además del tamaño de la fuente, el grosor de la línea en la que está el texto.
10 Curso de Cascade Style Sheet CSS Pagina 10 / Agrupación de selectores y declaraciones Normalmente, se da el caso en que dos elementos del documento HTML comparten la definición de la misma propiedad CSS. Estos elementos podemos declararlos de una forma extendida: H1 {color: purple;} H2 {color: purple;} H3 {color: purple;} H4 {color: purple;} H5 {color: purple;} H6 {color: purple;} O utilizar la agrupación para conseguir una declaración más compacta (el resultado es el mismo en ambos casos): H1, H2, H3, H4, H5, H6 {color: purple;} Otros ejemplos de estructuras de agrupación que son equivalentes: H1 {color: purple; background: white;} H2 {color: purple; background: green;} H3 {color: white; background: green;} H4 {color: purple; background: white;} B {color: red; background: white;} H1, H2, H4 {color: purple;} H2, H3 {background: green;} H1, H4, B {background: white;} H3 {color: white;} B {color: red;} H1, H4 {color: purple; background: white;} H2 {color: purple;} H3 {color: white;} H2, H3 {background: green;} B {color: red; background: white;} Agrupación de declaraciones.- Podemos agrupar declaraciones cuando tenemos diferentes reglas que definen propiedades de un mismo elemento. Por ejemplo: H1 {font: 18pt Helvetica;} H1 {color: purple;} H1 {background: aqua;} Podemos redefirnirlo como: H1 {font: 18pt Helvetica; color: purple; background: aqua;} Los espacios en blanco serán ignorados, así que el navegador se fiará de la correcta estructura sintáctica de las reglas. Es por eso, que para una más sencilla visualización, podemos escribir las reglas CSS de esta forma: H1 { font: 18pt Helvetica; color: purple; background: aqua;
11 Curso de Cascade Style Sheet (CSS) Pagina 11 / 26 } Es una buena práctica terminar las declaraciones siempre con punto y coma (aunque no es obligatorio). Motivos: -Te permite habituarte a terminar las declaraciones correctamente, que es uno de los errores más comunes. -Si decides añadir una nueva declaración a la regla, no tiens porque preocuparte de cómo termina la anterior. -Algumos navegadores antiguos pueden confundirse cuando las reglas no se terminan adecuadamente. Combinaciones de agrupación de selectores y declaraciones.- BODY {background: white; color: gray;} H1, H2, H3, H4, H5, H6 {font-family: Helvetica, sans-serif; color: white; background: black;} H1, H2, H3 {border: 2px solid gray; font-weight: bold;} H4, H5, H6 {border: 1px solid gray;} P, TABLE {color: gray; font-family: Times, serif;} PRE {margin: 1em; color: maroon;}
12 Curso de Cascade Style Sheet CSS Pagina 12 / CLASS 8. Atributos CLASS y ID El atributo CLASS nos permite asignar estilos al documento sin preocuparnos de los elementos concretos a los que se aplicarán. Como desventaja, está el hecho de que debemos modificar el código HTML del documento, incluyendo atributos CLASS en los lugares donde queramos aplicar estilos. <p class="cita">en en lugar de la mancha... Sólo nos queda definir este nuevo estilo como una regla más de nuestro documento CSS:.cita {font-weight: bold; color: red;} El punto inicial es necesario para mantener la definición de este estilo desvinculada de cualquier elemento del documento. Si queremos restringir el uso de este estilo a un tipo de elemento, podemos definirlo como: p.cita {font-weight: bold; color: red;} 8.2. ID El atributo ID en cierta forma, es igual que CLASS. Diferencias: La definición de los estilos de tipo ID, están precedidas por el carácter #, en lugar del punto. #first-para {font-weight: bold;}<p ID="first-para">This is the first paragraph, and will be boldfaced.</p> El mismo atributo ID sólo puede usarse en un elemento. Debe ser único. En la realidad, los navegadores no hacen comprobaciones de este tipo y podemos utilizar el mismo valor de ID para dar estilo a múltiples elementos. Los estilos de tipo ID también pueden definirse al margen de cualquier elemento, pero estas definiciones no tienen ningún sentido al ser sus valores únicos y no aplicables a otros elementos.
13 Curso de Cascade Style Sheet (CSS) Pagina 13 / Pseudo-Clases y Pseudo-Elementos Permite la asignación de estilos a estructuras, estados de los elementos o estados del propio documento, las cuales no deben estan definidas en la estructura del propio documento. Pseudo-Clases.- En el caso de los enlaces, algunos de ellos hacen referencia a páginas que ya han sido o no visitadas. No hay ninguna forma posible de poder formatear de forma diferente estos tipos de enlaces en HTML, para ello utilizamos unas estrucuturas virtuales que no se corresponden con ningún objeto del documento HTML, conocidas como pseudo-clases. En CSS1, hay sólo tres pseudo-clases: :link: hace referencia a cualquier enlace no visitado de la página. :visited: hace referencia a cualquier enlace ya visitado de la página. :active: hace referencia al enlace en el que estamos haciendo click en este momento o estamos activando. En CSS1 sólo se puede definir esta propidedad sobre los enlaces, mientras que en CSS2 esta propiedad se aplica a cualquier elemento. Pseudo-Elementos.- En CSS1, hay dos pseudo-elementos que son :first-letter y :first-line. Se utilizan para dar estilo a la primera letra de un elemento de bloque (un párrafo por ejemplo) y a su primera línea respectivamente. Ejemplo: P:first-letter {color: red;} P:first-line {color: gray;} Restricciones en las Pseudo-Clases y los Pseudo-Elementos.- Cuando aplicamos un pseudo-elemento sólo podemos emplear en su definición, los siguientes estilos: 1.first-letter -propiedades de las fuentes -fondos y colores -text-decoration -vertical-align (si float es none) -text-transform -line-height -márgenes -padding -bordes -float -clear 2.first-line -propiedades de las fuentes -fondos y colores -word-spacing -letter-spacing -text-decoration -vertical-align -text-transform -line-height -clear En CSS1, no podemos combinar una pseudo-clase y un pseudo-elemento para la misma definición de estilo. Esto cambia en CSS2, aunque la sintaxis de definición es bastante rígida.
14 Curso de Cascade Style Sheet CSS Pagina 14 / Estructura La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, sobre todo en torno a las relaciones entre padres e hijos. El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entre los elementos. Por ejemplo, si queremos definir que los EM que estén dentro de un H1 serán grises, podemos añadir un atributo CLASS a cada EM que esté dentro de un H1, o definir una regla como la siguiente: H1 EM {color: gray;} Herencia.- Es la propiedad por al cual un estilo no sólo se aplica a un elemento en concreto, sino que es heredado por sus descendientes y aplicado por estos: H1 {color: gray;} <H1>Meerkat <EM>Central</EM></H1> Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones (normalmente de sentido común) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definición de bordes.
15 Curso de Cascade Style Sheet (CSS) Pagina 15 / Especificidad Hay ocasiones en las que podemos encontrarnos en la situación de que un mismo elemento tenmúltiples definiciones para ser formateado de formas distintas:.grape {color: purple;} H1 {color: red;} <H1 CLASS="grape">Meerkat <EM>Central</EM></H1> En estos casos CSS define que se debe aplicar el estilo que sea más específico, ejemplo de gradación que aplicará un navegador a la hora de aplicar los estilos: H1 {color: red;} /* specificity = 1 */ P EM {color: purple;} /* specificity = 2 */.grape {color: purple;} /* specificity = 10 */ P.bright {color: yellow;} /* specificity = 11 */ P.bright EM.dark {color: brown;} /* specificity = 22 */ #id216 {color: blue;} /* specificity = 100 */ Por definición, los estilos heredados tendrán un valor de especificidad 0 y los aplicados a través de la propiedad STYLE, un valor superior a 100. Importancia.- Podemos marcar que ciertos estilos son más importantes que otros, pudiendo así modificar las reglas de especificidad aplicadas por el navegador. Un estilo importante se define añadiendo la coletilla!important al final del mismo: P.dark {color: #333!important; background: white;} Esto estilos recibirán siempre el valor de especificidad más alto considerado por el navegador.
16 Curso de Cascade Style Sheet CSS Pagina 16 / Estilos en cascada Cuando hay dos reglas que tienen la misma especificidad sobre el mismo elemento: H1 {color: red;} H1 {color: blue;} Debemos seguir el siguiente proceso para decidir qué estilos aplicar: 1.Buscar todas las declaraciones que contengan un selector que encaje con un elemento dado. 2.Ordenar por especificidad todas las declaraciones que se aplican a este elemento. También debemos ordenarlas por su origen como: Diseñador, navegante o navegador (la priorización sigue este orden). 3.Ordenar por orden las declaraciones. Las últimas declaraciones tendrán un peso más elevado. Las declaraciones obtenidas como consecuencia de un IMPORT se considerarán como las primeras teniendo así un peso menor, al contrario de las resultantes de aplicar un STYLE que se pondrán al final de la lista con un peso más elevado. Así el color obtenido para el elemento H1 será azul. Clasificación de los elementos.- En CSS1, los elementos formateados pueden agruparse en tres categorías: -Elementos de bloque. Como los párrafos, los encabezdos, las tablas, las listas, los DIV o el BODY. Son lso que fuerzan un salto de línea al final de los mismo. -Elementos inline. Como los enlaces, el énfasis o el SPAN. Pueden ser hijos de cualquier otro elemento. -Elementos de lista. Son aquellos que en HTML sólo pueden contener elementos de tipo LI. Pueden ser automáticamente numerados o susceptibles de tomar algún tipo de estilo que se aplique a cada uno de los ítems que los definen. Podemos cambiar la visualización de ciertos elementos mediante la propiedad display, la cual tiene las siguientes características: -Puede tomar los valores: block, inline, list-item, none (oculta el elemento). -No se hereda. -Es aplicable a todos los elementos. Con display podemos cambiar aspectos típicos de visualización que están definidos en HTML, como el hecho de que los párrafos sean de tipo bloque: P {display: inline;} Pero cuando realmente se le saca partido a la propiedad display, es cuando formateamos un documento XML. Esto se debe a que XML no tiene un comportamiento predefinido para los elementos que contiene. CSS2 completa los tipos de formateos añadiendo un tratamiento específico para tablas, filas y celdas.
17 Curso de Cascade Style Sheet (CSS) Pagina 17 / Colores 13. Colores y unidades Lista de colores disponibles por nombre: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, yellow. Están tomados de los dieciseis colores básicos que se generan como VGA. Colores definidos mediante valores RGB. Pueden definirse como valores porcentuales entre 0 y 100 % (color: rgb(100%,80%,60%)), o mediante valores numéricos entre 0 y 255 (color: rgb(255,0,0)). Colores definidos mediante valores hexadecimales con la estructura #RRGGBB (color: #FF0000). La notación hexadecimal puede abreviarse cuando sus valores se repiten para cada par, como en la expresión color: #000. Colores web-safe. Son aquellos cuya visualización se mantendrá entre navegadores. Existen 216 de estos colores, los cuales se obtienen mediante incrementos del 20%, 51 unidades o 33 en hexadecimal (rgb(40%,100%,80%), rgb(0,204,153) o #669933) Unidades Medidas absolutas de longitud: -Pulgadas (in). -Centímetros (cm). -Milímetros (mm). -Puntos (pt). Medida tipográfica utilizada en la definición de las fuentes. En una pulgada hay 72 puntos (font-size: 18pt equivale a font-size: 0.25in). -Picas (pc). Mediada también tipográfica que hace corresponder una pica a 12 puntos. Medidas relativas de longitud: em: se corresponde al tamaño de la fuente para el parrafo en concreto al que se aplique. Si definimos que el texto tendrá un tamaño de 14 puntos, el valor de 1em será equivalente a 14 puntos. ex: similar a em, pero hace corresponder el tamaño actual de la fuente, al que tendría una X minúscula. En CSS2 se añaden unidades de medida adicionales como: Valores de ángulo: utilizado para definir la posición desde la cual se ha originado un sonido determinado. Tenemos tres tipos de ángulos: degrees, grados (grad) y radianes (rad). Valores de tiempo: utilizados para introducir retardos entre los elementos hablados de una página. Pueden ser milisegundos (ms) o segundos (s). Valores de frecuencia: define la frecuencia que los navegadores que generan voz pueden emitir.
18 Curso de Cascade Style Sheet CSS Pagina 18 / Indentación Indentación de la primera línea de un párrafo. Es una propiedad que se aplica a elementos de tipo bloque, y acepta tanto un valor de longitud, como un porcentaje: P {text-indent: 0.25in;} Podemos conseguir una sangría francesa, utilizando valores negativos para la indentación: P {text-indent: -30px;} Ejemplo : <html> <head> <title>propiedades del texto</title> <style> p.indentacion { text-indent: 0.25in; } p.indentacion_francesa { margin-left: 0.25in; text-indent: -0.25in; } p.indentacion:first-letter, p.indentacion_francesa:first-letter { font-size: 24pt; background-color: magenta; color: white; padding: 5px; border: 1px solid navy; } </style> </head> <body> <p class="indentacion"> Texto de ejemplo sobre los valores de la indentación. Texto de ejemplo sobre los valores de la indentación. <p class="indentacion_francesa"> Texto de ejemplo sobre los valores de la indentación. Texto de ejemplo sobre los valores de la indentación. </body> </html>
19 Curso de Cascade Style Sheet (CSS) Pagina 19 / Introducción 15. Margenes Hay dos propiedades que establecen la separación de los elementos: margin y padding. Si bien parecen lo mismo porque a veces no notamos ninguna diferencia entre usar una u otra, no lo son. Podríamos decir que margin es la separación de un elemento de otro y padding es el relleno, la separación entre un elemento y aquel que lo contiene Confuso? Ciertamente, lo es. Veamos la sintaxis de las propiedades ya que son sencillas Margin margin es una forma reducida de establecer la separación de los cuatro bordes al mismo tiempo. sintaxis en HTML elemento {margin: valores;} por ejemplo: div {margin: 2px 0 10px 5px;} Donde el orden de los valores es: arriba, izquierda, derecha, abajo y, cada una de ellos puede ser especificad por separado. La propiedad margin-bottom establece el margen inferior; margin-right el margen derecho; marginbottom el margen inferior y margin-left el margen izquierdo. sintaxis en HTML elemento {margin-top: valor;} elemento {margin-roght: valor;} elemento {margin-bottom: valor;} elemento {margin-left: valor;} por ejemplo: div {margin-left: 5px;}
20 Curso de Cascade Style Sheet CSS Pagina 20 / 26 Nota: * Si sólo de especifica un valor, este se aplica a los cuatro lados. * Si se especifican dos valores, el primero se aplica a los márgenes superior e inferior y el segundo a los márgenes derecho e izquierdo. * Si se especifican tres valores, el primero se aplica al margen superior, el segundo a los márgenes derecho e izquierdo y el tercero al margen inferior. * Si establecemos cuatro valores, definirán los márgenes superior, derecho, inferior e izquierdo respectivamente. Los valores los separamos mediante espacios; por ejemplo: div {margin: 10px 20px;} En los llamados elementos inline, los márgenes superior e inferior no tienen efectos prácticos Padding La propiedad padding es una forma reducida de establecer el "relleno" de los cuatro lados al mismo tiempo y tiene la misma sintaxis que margin. sintaxis en HTML elemento {padding: valores;} elemento {padding-top: valor;} elemento {padding-right: valor;} elemento {padding-bottom: valor;} elemento {padding-left: valor;} por ejemplo: div {padding-left: 5px;} El padding o relleno, es la cantidad de espacio a insertar entre el objeto y su margen o, si hay un borde (propiedad border) la distancia entre el objeto y el borde. Sigue todas las reglas que los márgenes excepto que sólo se pueden usar valores positivos. Por ejemplo: div {padding: 50px 10px 20px 30px} Cada elemento de una página web es un rectángulo que tiene un contenido (textos, imágenes, etc.) y una serie de áreas opcionales a su alrededor (border, margin y padding) por lo tanto, el tamaño final depende de todas y cada una de esas propiedades aunque también depende de si han asignadas otras propiedades como width y height, si contiene texto u otros elementos, si es una tabla, si... etc. En térmimos generales, el ancho es la suma de los márgenes, los bordes y los rellenos izquierdos y derechos más el ancho del contenido y la altura es la suma de los márgenes, lso bordes y los rellenos superiores e inferiores más la altura del contenido.
21 Curso de Cascade Style Sheet (CSS) Pagina 21 / Alineación Nos permite alinear los textos dentro de elementos de bloque de las siguientes formas: -Izquierda (left). -Centrado (center). -Derecha (right). -Justificado (justify), es decir, centrado a derecha e izquierda. Podemos utilizar el valor de "text-align: center" para reemplazar al tag CENTER que ahora es DEPRECATED: Ejemplo: <html> <head> <title>propiedades del texto</title> <style> h1 { text-align: left; } h2 { text-align: right; } h3 { text-align: center; } </style> </head> <body> <h1>alineación izquierda</h1> <h2>alineación derecha</h2> <h3>alineación centrada</h3> </body> </html>
22 Curso de Cascade Style Sheet CSS Pagina 22 / Espacios en blanco Se define mediante la propiedad "white-space", la cual puede tomar los siguientes valores: pre. Cuando queremos que se tome literalemente los escrito, incluyendo todos y cada uno de los espacios en blanco. nowrap. Permite que se conserve todo el texto definido sin aplicar ningún salto de línea forzado por algún elemento del documento. Es el sustituto del típico <TD nowrap>. normal. Valor por defecto para la definición de espacios en blanco, la cual no aplica ninguna consideración especial sobre el texto. Como las explicaciones incluídas en el estándar CSS 2.1 pueden llegar a ser confusas, la siguiente tabla resume el comportamiento de cada valor: Valor Respeta espacios en blanco Respeta saltos de línea Ajusta las líneas normal no no si pre si si no nowrap no no no pre-wrap si si si pre-line no si si Ejemplo: <html> <head> <title>propiedades del texto</title> <style> p { width: 300px; } p.libre { white-space: pre; } p.sinsaltos { white-space: nowrap; } p.normal { white-space: normal; } </style> </head> <body> <p class="libre"> Texto con distintas representacion de espacios en blanco para ver su comportamiento. <p class="sinsaltos"> Texto con distintas representacion de espacios en blanco para ver su comportamiento. <p class="normal"> Texto con distintas representacion de espacios en blanco para ver su comportamiento. </body> </html>
23 Curso de Cascade Style Sheet (CSS) Pagina 23 / Anchura de líneas Define la distancia entre las líneas base de dos líneas de texto. En resumen, esta propiedad permite aumentar o disminuir la distancia vertical entre dos líneas de texto. Esta distancia pude expresarse con medidas relativa (em, ex), valores absolutos (cm, in, px) o porcentajes directamente. Ejemplo <html> <head> <title>propiedades del texto</title> <style> p { width: 300px; } p.normal { line-height: 14pt; } p.grande { line-height: 150%; } p.xgrande { line-height: 200%; } </style> </head> <body> <p class="normal"> Texto con distintas medidas entre líneas para ver su comportamiento en párrafos de texto. <p class="grande"> Texto con distintas medidas entre líneas para ver su comportamiento en párrafos de texto. <p class="xgrande"> Texto con distintas medidas entre líneas para ver su comportamiento en párrafos de texto. </body> </html>
24 Curso de Cascade Style Sheet CSS Pagina 24 / Espacio entre palabras Se define mediante la propiedad "word-spacing" y puede tomar los valores "normal" (equivalente a cero) o un valor numérico. Ejemplo: <html> <head> <title>propiedades del texto</title> </head> <body> <p style="word-spacing: normal;"> Prueba de espaciado de palabras en un parrafo. <p style="word-spacing: 0;"> Prueba de espaciado de palabras en un parrafo. <p style="word-spacing: 1em;"> Prueba de espaciado de palabras en un parrafo. <p style="word-spacing: 2em;"> Prueba de espaciado de palabras en un parrafo. <p style="word-spacing: -1em;"> Prueba de espaciado de palabras en un parrafo. </body> </html> Espacio entre letras.- Idéntico al espaciado entre palabras, pero aplicado a los caracteres que forman cada palabra. Su propiedad asociada es "letter-spacing".
25 Curso de Cascade Style Sheet (CSS) Pagina 25 / Transformaciones del texto Permiten modificaciones en la presentación de las cadenas de texto mediante la propiedad "texttransform", la cual puede tomar alguno de los siguientes valores: uppercase: todo el texto se transformará a mayúsculas. lowercase: todo el texto se transformará a minúsculas. capitalize: convierta a mayúscula la primera letra de cada palabra. none: no se realizará ninguna transformación sobre el texto. Ejemplo: <html> <head> <title>propiedades del texto</title> <style> p { font-size: 200%; font-weight: bold;} </style> </head> <body> <p style="text-transform: uppercase;"> Prueba de transformación <p style="text-transform: lowercase;"> Prueba de transformación <p style="text-transform: capitalize;"> Prueba de transformación </body> </html>
26 Curso de Cascade Style Sheet CSS Pagina 26 / Decoración del texto Añade a las cadenas de texto cierto formato mediante el uso de la propiedad "text-decoration", la cual puede tomar uno de los siguientes valores: underline: subraya el texto asociado. overline: dibuja un línea sobre el texto asociado. Es como un subrayado, pero sobre la parte superior del texto. line-through: tacha el texto asociado dibujando una línea sobre el mismo. blink: hace que el texto asociado parpadee. none: no aplica ningún elemento decorativo al texto. Ejemplo: <html> <head> <title>propiedades del texto</title> <style> p { font-size: 200%; font-weight: bold;} </style> </head> <body> <p style="text-decoration: underline;"> Prueba de decoración del texto <p style="text-decoration: overline;"> Prueba de decoración del texto <p style="text-decoration: line-through;"> Prueba de decoración del texto <p style="text-decoration: blink;"> Prueba de decoración del texto (este está parpadeando :) </body> </html>
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2017 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Selector universal Se utiliza para seleccionar todos los elementos de la página. * { } margin: 0; padding:
Más detallesInformática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2017 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Selector
Más detallesHOJAS DE ESTILO EN CASCADA
HOJAS DE ESTILO EN CASCADA Introducción Permiten definir las páginas con aspecto homogéneo sin tanto esfuerzo. Forma de definir los estilos Como atributo de una etiqueta afecta a esa etiqueta Sintaxis:
Más detallesQue son las hojas de estilo (CSS)?
Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia
Más detallesDar formato a los documentos XML
Dar formato a los documentos XML Ofimática Avanzada Profesor: Víctor Fresno Fernández Hojas de estilo La función de las hojas de estilo CSS es la de separar el contenido de la presentación Lenguaje diseñado
Más detallesHOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet)
HOJAS DE ESTILOS EN CASCADA CSS (Cascading Style Sheet) 1. QUÉ ES UNA HOJA DE ESTILOS? Las hojas de estilos son un conjunto de instrucciones, el cual permiten manejar el formato y presentación de contenido
Más detallesELECTIVA FE I. Tema 3: Introducción a las hojas
Tema 3: Introducción a las hojas de estilo en cascada CSS Qué son las hojas de estilo en cascada o CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos
Más detallesInformática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2016 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS CSS - Hojas
Más detallesDiseño web. Fundamentos de CSS. Informática 4º ESO
Diseño web Fundamentos de CSS Informática 4º ESO Cascading Style Sheets HTML está bastante limitado a la hora de dar formato a las páginas web HTML fue inventado por científicos Énfasis en el contenido
Más detalles<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Más detallesESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil
ESTILIZANDO CON CSS Sesión 08 By Ing. David Gil UNIDADES CSS UNIDADES DE LONGITUD Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que
Más detallesTIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web INTRODUCCIÓN Las Hojas de Estilo en Cascada o CSS es un lenguaje creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es
Más detallesCapas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML
Capas Capas Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML y Uso principal es poder aplicar estilo en el cuerpo/porción del documento
Más detallesIntroducción a CSS. Aplicaciones Web (2016/17) Jesús Arias Fisteus. Aplicaciones Web (2016/17) Introducción a CSS 1
Introducción a CSS Jesús Arias Fisteus Aplicaciones Web (2016/17) Aplicaciones Web (2016/17) Introducción a CSS 1 Parte I Introducción a CSS Aplicaciones Web (2016/17) Introducción a CSS 2 Hola Mundo!
Más detallesCSS (Cascading Style Sheets)
Herencia CSS (Cascading Style Sheets) La herencia de los estilos definidos mediante CSS es uno de los conceptos más característicos de este lenguaje de hojas de estilos. Muchas de las propiedades que se
Más detallesescuela técnica superior de ingeniería informática
Tiempo: 2h escuela técnica superior de ingeniería informática Hojas de Estilo en Cascada (CSS) Departamento de Lenguajes Grupo de Ingeniería del Software Octubre 2007 Versiones previas: David Benavides
Más detallesescuela técnica superior de ingeniería informática
Versiones previas: David Benavides y Amador Durán (septiembre 2006) Reestructuracion General: Manuel Resinas (octubre 2007) Ultima Revision: Cambios Menores. Pablo Fernandez (Octubre 2010) Tiempo: 2h escuela
Más detallesAplicaciones Web XHTML+CSS. David Cabrero Souto. Grupo MADS (http://www.grupomads.org/) Universidade da Coruña
Aplicaciones Web XHTML+CSS David Cabrero Souto Grupo MADS (http://www.grupomads.org/) Universidade da Coruña W3C Establece estándares: recomendaciones. HTML 4.0 XHTML 1.0, XHTML 1.1, XHTML 2.0, XFORMS
Más detallesCap. IV - Selectores, identificadores, clases y otros by Tux Merlin - Joomla-gnu.com
CSS como dijimos significa Cascading Style Sheet, traducido Hojas de Estilo en Cascada, pero por qué lo de "cascading"? Esto se refiere a la de herencia que poseen los elementos, es decir, cuando definimos
Más detallesHojas de Estilo en Cascada (CSS)
Hojas de Estilo en Cascada (CSS) Grupo de Ingeniería del Software y Bases de Datos Universidad de Sevilla Presentación y La separación del (la información que se muestra) de la presentación (cómo se muestra)
Más detallesFormateo de Texto. (parte II)
Formateo de Texto (parte II) JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS Objetivos Identificar la diferencia entre background y foreground. Conocer las diferentes maneras de aplicar color al texto. Conocer más
Más detallesResumen Rápido de CSS
Resumen Rápido de CSS Selectores. Resumimos la manera de seleccionar los elementos a ''lookear''. * Todos los elementos div #div #div * Todos los elementos dentro de
Más detallesHTML Estático: Hojas de Estilo. HTML Estático: Hojas de Estilo
escuela técnica superior de ingeniería informática HTML Estático: Hojas de Estilo Departamento de Lenguajes Noviembre 2004 Usando el atributo STYLE dentro de una etiqueta HTML Esto Esto es es un un párrafo
Más detallesRoberto Gómez Cárdenas Qué es CSS? Cascading Style Sheets, hojas de estilo en
CSS y XML Roberto Gómez Cárdenas rogomez@itesm.mx http://homepage.cem.itesm.mx/rogomez Lámina 1 Qué es CSS? Cascading Style Sheets, hojas de estilo en cascada. Tecnología desarrollada por la W3C con el
Más detallesCSS BÁSICO Hojas de Estilo. Iván Martínez Toro
CSS BÁSICO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al CSS. Cómo es CSS? Sintaxis general. Reglas. Selectores. Class. Divy Span. Uso de las hojas de estilo. CSS (CASCADING STYLE
Más detallesExamen de CSS - Cuestionario
Examen de CSS - Cuestionario Qué propiedad de CSS se emplea para definir el espacio entre caracteres? word-spacing white-space letter-spacing Las anteriores respuestas no son correctas Cómo se hace en
Más detallesCurso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas.
Pag. 1 de 16. Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas. Cursos Thales CICA Web 2006. Curso WEBCSS A. Gámez, L.M. Marín, F. Mesa & S. Fandiño El modelo de cajas Índice del bloque
Más detallesDepartamento de Lenguajes y Sistemas Informáticos. Hojas de Estilo en Cascada (CSS)
escuela técnica superior de ingeniería informática Tiempo: 2h Hojas de Estilo en Cascada (CSS( CSS) Departamento de Lenguajes Grupo de Ingeniería a del Software Noviembre 2006 Versión previa: David Benavides
Más detallesHOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
Más detallesETIQUETAS PRINCIPALES
HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,
Más detallesQUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un
QUÉ ES UNA HOJA DE ESTILOS? Una hoja de estilo en cascada (CSS) es un conjunto de reglas en las que definimos el formato que va a tomar un determinado elemento de una página web. Siglas CCS significa "Cascading
Más detallesMaquetación Web: HTML 5 y CSS
Maquetación Web: HTML 5 y CSS Programa de Estudio Maquetación Web: HTML 5 y CSS Aprende amaquetar sitios Web de forma ágil y profesional sin usar tablas.separa el diseño visual del contenido y optimiza
Más detallesEn que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
Más detallesMaquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
Más detallesCSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS
Más detallesTaller de Programación II J2EE
ᄎ INACAP Universidad Tecnológica de Chile Sede Santiago Centro Taller de Programación II J2EE Tema 02 Cascading Style Sheets (CSS) Ing. Manuel López R. Qué es CSS? La tecnología CSS (Cascading Style Sheets
Más detallesFigura 1: página de la vivienda sin estilo
Diseño de Interfaces Hombre Máquina Prácticas de laboratorio Curso 2009/10 Práctica 2 Interacción con hojas de estilo en cascada 1 Objetivo 1.1 Creación de una hoja de estilo La figura 1 muestra una página
Más detallesCSS. Contenido. Programación en Internet Curso Introducción Sintaxis. Cajas Posicionamiento. Programación en Internet
Departamento de Lenguajes y Sistemas Informáticos CSS Programación en Internet Curso 2006-2007 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades Colores Cajas Posicionamiento Contenido
Más detallesConceptos Teóricos de HTML5 (material extra adicional libro):
Temario de Examen Unidad I Materia: Informática Catedráticos: Víctor Aquino/Débora Santizo Temas: Uso del programa Sublime Text Forma Correcta de guardar archivos html y css (.html y.css) Uso de la etiquetas
Más detallesREFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG)
REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG) Esta referencia se distribuye bajo licencia Creative Commons. Usted es libre de: Copiar, distribuir y comunicar públicamente Hacer obras derivadas
Más detallesEL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
Más detallesCSS-Hojas de estilos en cascada
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG.
Más detallesCatedra de Base de Datos
Catedra de Base de Datos Facultad de Ciencias Exactas y Tecnología Universidad Nacional de Tucumán Ciclo Lectivo 2017 Diseño en HTML y CSS Tipología de los sitios web. La estructura de las paginas. Etiquetas
Más detallesESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D)
APRENDERAPROGRAMAR.COM ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesDEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesUNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
Más detallesTema 2. I- Hojas de estilo CSS.
Tema 2. I- Hojas de estilo CSS. Programación Multimedia. G.I.M. Inmaculada Coma, Francisco Grimaldo Resumen En este tema: Recordaremos cómo crear estilos CSS e insertarlos en una página HTML. Recordaremos
Más detallesPrácticas Internet y web 2.0. Utilizar hojas de estilo para dar formato a las páginas web.
PRÁCTICA 13. HOJAS DE ESTILO. Objetivos: Utilizar hojas de estilo para dar formato a las páginas web. Teoría: ESTILOS. CSS (Cascading Style Sheets) es un lenguaje que describe el estilo de una página web.
Más detallesTécnicas de visualización
Técnicas de visualización Hojas de estilo CSS Máster en Tecnologías de la Información Geográfica Laboratori d Informació Geogràfica i de Teledetecció (LIGIT) Departament de Geografia. UAB Anna Jiménez
Más detallesHOJAS DE ESTILO: CSS3
HOJAS DE ESTILO: CSS3 ETIQUETAS HTML5 HOJAS DE ESTILO CSS3 CONTENIDO PRESENTACIÓN El mismo contenido puede visualizarse en función de la hoja de estilo. Permiten actualizar y cambiar la presentación de
Más detallesEFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D)
APRENDERAPROGRAMAR.COM EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D) Sección: Cursos Categoría: Tutorial básico del programador web:
Más detallesPADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D)
APRENDERAPROGRAMAR.COM PADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Más detallesEjemplo: font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma de la lista de atributos es opcional)
Anexo: Reglas básicas sobre la sintaxis CSS: Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un
Más detallesCSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz
CSS: Hojas de Estilo en Cascada Didier Fabián Granados Muñoz Contexto Qué hay detrás de esto? Contexto Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades
Más detallesResumen del Manual de CSS. Resumen CSS. Este es un resumen de lo visto en el manual de CSS de Aprende-Web.
Resumen CSS Este es un resumen de lo visto en el manual de CSS de Aprende-Web. http://aprende-web.net/css Selectores y otros elementos. Selectores básicos * : Selector universal. Afecta a toda la página.
Más detallesQué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
Más detallesQué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML.
Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es la mejor forma de separar los contenidos y su
Más detallesAnexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
Más detallesDISEÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
Más detallesLa primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:
TEMA P1. CURSO BÁSICO DE PROGRAMACIÓN EN LENGUAJE HTML HTML es un acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto,
Más detallesMENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
Más detallesCapítulo 3 Estilo para un documento HTML: CSS
Capítulo 3 Estilo para un documento HTML: CSS.3.0 Qué es el estilo?!"#$ "!$ &'!$!($ ) *+ " *, -.,#/-..3.1 Propiedades y valores 0 )" & + 1& &1& 2 " '" Medidas: 3 + 14 "56 1'#/ 1/5-7 3 1 1 + 1' Colores:
Más detallesPropiedades CSS1. Sintaxis usada en definición de propiedades. Propiedades de fuentes.
Page 1 of 29 Propiedades CSS1 ntaxis usada en definición de propiedades Propiedades de fuentes Propiedades de color y fondo Propiedades de texto Propiedades de cuadros Clasificación de propiedades Unidades
Más detallesEdición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL
MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN
Más detallesIII. Hojas de estilo en cascada (CSS)
III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS 4. Declaración avanzada de CSS
Más detallesHojas de estilo (CSS)
Tema 2b Hojas de estilo (CSS) Texto http://www.flickr.com/photos/urke/3223200963 Dando estilo visual a las páginas HTML Hojas de estilo 2 Separar la estructura del documento (etiquetas HTML) del estilo
Más detallesÍndice del curso. Elementos HTML. Elementos HTML. Elementos de texto. Creación de páginas web básicas. 1.Introducción a Internet. Lenguaje HTML.
Índice del curso 1.Introducción a Internet. Lenguaje HTML. Elementos HTML Creación de páginas web básicas 2.Elementos HTML. 3.Creación y gestión de imágenes con GIMP. 4.Hojas de estilo. 5.Creación de páginas
Más detallesVamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.
Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior. 1. Lo que va siempre Ejemplo con todo lo básico-minimo obligatorio que irá siempre:
Más detallesHojas de estilo. CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR
Hojas de estilo CI-2413 Desarrollo de aplicaciones para Internet Prof. Braulio José Solano Rojas ECCI, UCR Hojas de estilo Las hojas de estilo son un gran avance para los diseñadores, ya que expanden su
Más detallesCSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
Más detallesCSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol que repesenta el documento (document
Más detallesFuncionamiento básico de CSS
Funcionamiento básico de CSS Índice de contenido Funcionamiento básico de CSS...1 1.- Introducción...2 2.- Cómo funcionan las hojas de estilo en cascada?...3 Veamos un ejemplo concreto de cómo se expresarían
Más detallesCSS: hojas de estilo en cascada
CSS: hojas de estilo en cascada Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol
Más detallesDISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
Más detalles2.4. Unidades de Aprendizaje. Unidad de aprendizaje: Desarrollo de páginas web estáticas. Número 1. Propósito de la unidad
2.4. Unidades de Aprendizaje Unidad de aprendizaje: Desarrollo de páginas web estáticas. Número 1 Propósito de la unidad Desarrollará páginas web con contenido estático siguiendo la metodología de diseño
Más detallesCSS: Hojas de Estilo en Cascada
CSS: Hojas de Estilo en Cascada B. Cristina Pelayo García-Bustelo Lenguajes para Internet EUITIO 1 Introdución Sintaxis Selectores Pseudo-clases y Pseudo-elementos Unidades de longitud 2 Herencia Cascada
Más detallesIntroducción. Qué es CSS?
Introducción Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar
Más detallesDiseño de columnas con CSS
Para el diseño de una web con varias columnas mediante CSS no existe una receta universal. De momento, y mientras se sigue desarrollando el CSS, nos basaremos en dos principios esenciales: position:absolute
Más detalles1) Directamente a la marca. 2) En el head de la página. 3) Agrupar las reglas de estilo en un archivo independiente con extensión *.
INTRODUCCION A LAS CSS HOJAS DE ESTILO (CSS) PARTE 1 QUE SON LAS HOJAS DE ESTILO (CSS) CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo
Más detallesMENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D)
APRENDERAPROGRAMAR.COM MENÚS HORIZONTALES CSS Y MENÚS VERTICALES. CREAR MENÚS CON EFECTOS A PARTIR DE LISTAS CSS. CÓDIGO DE EJEMPLOS. (CU01049D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
Más detalles1. La evolución de HTML La evolución de las CSS 16
HTML5 y CSS3 1. La evolución de HTML 15 2. La evolución de las CSS 16 2.1 La noción de módulo 16 2.2 La evolución de los estados 16 2.3 Los prefijos comerciales 17 2.4 Utilizar los prefijos comerciales
Más detallesCSS 3. Fernando O!ega.
CSS 3 Fernando O!ega fernando.ortega@eui.upm.es Qué falta en CSS 2.1? 2 Selectores Lista completa de nuevos selectores: http://www.w3.org/tr/css3- selectors/ Selector de atributo condicional: Permite seleccionar
Más detallesA lo largo de este tema vamos a aprender a crear una página básica.
Unidad 2. Estructura de una página (I) A lo largo de este tema vamos a aprender a crear una página básica. La estructura básica de una página es: Ahora veamos cómo funcionan estas etiquetas. Identificador
Más detallesZ-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
Más detallesCSS. Apuntes de guerrilla
CSS Apuntes de guerrilla Index Introducción en html 3 Diferentes medios en CSS 4 Comentarios 5 Selectores 5-6 Unidades de medidas 7 Colores 7 Box Model 8-12 Posicionamiento 13-14 Visualización 14-15 Texto
Más detallesINTRODUCCIÓN A HTML. Qué es HTML. Etiquetas
INTRODUCCIÓN A HTML Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
Más detallesGuía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.)
Guía (muy) básica de hojas de estilo (CSS) y de marcado semántico de páginas web (v1.) 1. Hojas de estilo: una base para el marcado semántico Lluís Codina UPF. Abril 2007 Una hoja de estilo es un conjunto
Más detallesYusef Hassan Montero Francisco Jesús Martín Fernández. Referencia CSS. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Referencia CSS Todos los derechos reservados www.nosolousabilidad.com Introducción Este documento tiene por objetivo servir de material de apoyo y
Más detallesCSS3 Domine los estándares web con las hojas de estilo
Utilizar las hojas de estilos en cascada 1. Objetivos del libro 13 2. La evolución de las CSS 14 2.1 Los módulos CSS3 14 2.2 Etapas en la concepción de las CSS3 15 3. Los prefijos de los navegadores 19
Más detallesUnidad I - INTRODUCCIÓN AL HTML. Profesor: Marcos Tulio Jerez Bastidas. Barinas, abril 2015
República Bolivariana de Venezuela Universidad Nacional Experimental de los Llanos Occidentales Ezequiel Zamora Programa de Ingeniería, Arquitectura y Tecnología Subproyecto de Algoritmo y Programación
Más detallesImágenes de fondo [background-image] La propiedad CSS background-image se usa para insertar una imagen de fondo.
Lección 3: Colores y fondos En esta lección aprenderás a aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Se explicarán
Más detallesLas tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
Más detallesCSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil mtorres@ual.es Departamento de Lenguajes y Computación Universidad de Almería Desarrollo de aplicaciones web 1. Características y ventajas de 2. Sintaxis
Más detallesCurso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
Más detallesCurso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com
Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite
Más detallesCSS Flujo y posicionamiento
Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes. Existen tres posibilidades de colocar
Más detallesCSS3. Tutor: Ignacio Pérez Martín. Índice. Curso: Programación Python y HTML-5. CEP Marbella-Coín.
CSS3 Tutor: Ignacio Pérez Martín. Curso: Programación Python y HTML-5. CEP Marbella-Coín. Resumen En este tema veremos como dar formato a un documento HTML utilizando las hojas de estilos (CSS). Leed este
Más detallesTexto y Organización del contenido
Opciones de formateo de texto y de organización del contenido de una página. Texto y Organización del contenido Bases de Datos 2012/2013 Luis Valencia Cabrera Contenido Organización del texto. Encabezado...
Más detalles