Técnicas de visualización
|
|
|
- Roberto Miguélez Soto
- hace 7 años
- Vistas:
Transcripción
1 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
2 Introducción al CSS» CSS (Cascading StyleSheets ) Hojas de estilo en cascada. Lenguaje de estilo que define la presentación de los documentos HTML. Con CSS se puede modificar fuentes, colores, márgenes, anchuras, alturas,... HTML CSS Estructura el contenido Formatea el contenido
3 Sintáxis básica de CSS A qué elemento(s) se aplica la propiedad selector { propiedad : valor; } La propiedad que se quiere modificar El valor que recibirá la propiedad» Ejemplo: En HTML En CSS <body bgcolor="#ff0000"> body {background-color: #FF0000;}
4 Aplicar CSS a un documento HTML 1 - En la misma etiqueta usando el atributo style: <html> <head>...</head> <body style="background-color: #FF0000;"> </body> </html> 2 - En la cabecera del documento usando la etiqueta style: <html> <head> <title>ejemplo</title> <style type="text/css"> body {background-color: #FF0000;} </style> </head> <body>... </body> </html>
5 Aplicar CSS a un documento HTML 3 - Externa, usando un enlace a una hoja de estilos (documento de texto con extensión css): <html> <head> <title>ejemplo</title> <link rel= stylesheet type= text/css href= hojaestilo.css media= all > </head> <body>... </body> </html> hojaestilo.css: body { background-color: black; /* esto es un comentario */ }
6 Aplicar CSS a un documento HTML 3 - Externa, usando un enlace a una hoja de estilos (documento de texto con extensión css): <html> <head> <title>ejemplo</title> <link rel= stylesheet href= hojaestilo.css > </head> <body>... </body> </html> HTML5 hojaestilo.css: body { background-color: black; /* fondo de la página en color negro */ }
7 Tipos de selectores Selector de tipo: CSS p { color: red } CSS p, h1 { color: red } HTML <body> <h1>título</h1> HTML <body> <h1>título</h1> </body> <p>en en un lugar </p> </body> <p>en en un lugar </p> NAVEGADOR Título En en un lugar NAVEGADOR Título En en un lugar
8 Tipos de selectores Selector descendente: CSS div p { color: red } Selector de hijos: CSS div > p { color: red } HTML <body> <div><p>título</p></div> <p>en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML <div><span><p>título</p> </span></div> <div><p>en en un lugar </p></div> NAVEGADOR Título En en un lugar
9 Tipos de selectores Selector de classe: class CSS.cita {color: red; font-weight: bold} Selector de identificador: id CSS #first-p {color: grey; font-weight: bold} HTML <body> <p>título</p> <p class="cita">en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML <body> <p id="first-p">en un lugar </p> <p>y en otro lugar</p> </body> NAVEGADOR En en un lugar Y en otro lugar Más de un elemento pueden tener el mismo atributo class en la misma página. Cada id debe ser único por página.
10 Tipos de selectores Selector de elemento específico CSS p.cita {color: red; font-weight: bold;} Selector adyacente CSS h1 + h2 {color: red} h1~h2 {color: red} HTML <body> <h1 class= cita >Título</h1> <p class="cita">en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML NAVEGADOR Título Subtítulo Otro subtítulo <h1>título</h1> <h2>subtítulo</h2> <h2>otro subtítulo</h2> Título Subtítulo Otro subtítulo
11 Tipos de selectores Selector de atributos CSS p[class] {color: red} Selector adyacente CSS a[href= ] {color: red} HTML <body> <p class= main >Título</h1> <p class= cont">en en un lugar </p> </body> NAVEGADOR Título En en un lugar HTML <a href= >URL</a> <a href= 2</a> NAVEGADOR URL URL2
12 Tipos de selectores Pseudo-classes CSS a:link {color: red} a:visited {color: grey} a:hover {color: black Pseudo-classe nth-child CSS ul li:nth-child (1) {color:grey} ul li:nth-child (even) { background-color:grey} HTML <a href= >URL</a> NAVEGADOR URL (link no visitado) URL (link visitado) URL (con el ratón encima) HTML <ul><li>item 1</li><li>Item 2</li> <li>item 3</li><li>Item 4</li></ul> NAVEGADOR 1. Item 1 2. Item 2 3. Item 3 4. Item 4
13 Tipos de selectores Selector universal CSS * {margin: 0; padding: 0} HTML <body> <header> <h1>título</h1> </header> <main> <p>párrafo</p> <p>otro párrafo</p> <ul> <li>item1</li> <li>item2</li> </ul> </main> </body> NAVEGADOR TÍTULO Párrafo Otro párrafo. Item 1. Item 2 TÍTULO Párrafo Otro párrafo Item 1 Item 2 Sin aplicar el CSS Aplicando el CSS
14 El modelo de cajas Casi cualquier elemento en html funciona como una caja con un margen (margin), un borde (border), un relleno (padding) y un contenido (content). Margin - Área entorno al borde. El margen no tiene color de fondo, es completamente transparente. top Border - Borde entorno al padding y el content. left right Padding - Área entorno al content. El padding es afectado por el color de fondo de la caja. bottom Content - El área de contenido de la caja, dónde aparecen el texto, imágenes,...
15 El modelo de cajas <p>texto EN PÁRRAFO UNO</p> <p class= dos >TEXTO EN PÁRRAFO DOS</p> p.dos { p.dos { background-color: #9ACD32; } background-color: #1E90FF; margin: 0.5em; } TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS p.dos { p.dos { background-color: #1E90FF; margin: 0.5em; border-width: 2px; border-style: solid; border-color: black; } background-color: #1E90FF; margin: 0.5em; border: 2px dashed black; padding: 1em; } = TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO UNO TEXTO EN PÁRRAFO DOS
16 El modelo de cajas Los valores del padding, margin y border de las cajas: -1 valor (10px) afecta cada lado por igual - 2 valores (10px 5px) especifica el valor del top/bottom (primer valor) y el right/left (segundo valor) -3 valores (10px 5px 2px) especifica el top (primer valor), el right/left (segundo valor) y el bottom (tercer valor) -4 valores (10px 5px 2px 1px) especifica el valor del top, el right, el bottom y el left respectivamente. Ejemplo con el ancho de borde (válido también para margin y padding): p.dos { border-width: 10px; } p.dos { border-width: 10px 5px; } TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO DOS p.dos { p.dos { border-width: 10px 5px 2px; } border-width: 10px 5px 2px 1px; } TEXTO EN PÁRRAFO DOS TEXTO EN PÁRRAFO DOS
17 Posicionamiento STATIC: es el posicionamiento normal de todos los elementos. Significa que cada elemento se posiciona donde le corresponde según el flujo normal de la página. div.tres { position: static;} <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3 RELATIVE: el elemento se posicionará a la distancia indicada respecto de dónde debería estar según el flujo normal de la página. La distancia se especifica mediante top, left, bottom, right. I puede indicarse con unidades o porcentajes. div.tres { position: relative; top: 20px; left: 20px } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3
18 Posicionamiento ABSOLUTE: el elemento se muestra exactamente donde se indica en las propiedades top, bottom, left o right, respecto a la página). div.tres { position: absolute; top: 0px; left: 3px } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 3 div 1 div 2 RELATIVE + ABSOLUTE: si especificamos un elemento con posicionamiento relativo, todos los elementos que tenga dentro se posicionaran de forma relativa a él. div.2 { div.3 { position: relative; position: absolute; top: 0px; right: 0px } <div class= 1 >div 1</div> <div class= 2 >div 2 </div> <div class= 3 >div 3</div> div 1 div 2 div 3
19 Posicionamiento FLOAT: Con la propiedad float se puede posicionar un elemento a la derecha o a la izquierda de otro, dejando que el resto de elementos fluyan a su alrededor. div.dos { float: left; } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3 div 1 div 2 Si añadimos contenido en el div 3, este va fluyendo alrededor del div 2 div.dos { float: left; width: 100px;} <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3
20 Posicionamiento FLOAT: Con la propiedad float se puede posicionar un elemento a la derecha o a la izquierda de otro, dejando que el resto de elementos fluyan a su alrededor. div.dos { float: left; } <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3 div 1 div 2 Si añadimos contenido en el div 3, este va fluyendo alrededor del div 2 div.dos { float: left; width: 100px;} <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div> div 1 div 2 div 3
21 Posicionamiento FLOAT: Con la propiedad float se puede posicionar un elemento a la derecha o a la izquierda de otro, dejando que el resto de elementos fluyan a su alrededor. div.uno { float: left; width: 100px;} div.dos { float: left; width: 100px; } div.tres { clear: both; } div 1 div 2 div 3 <div class= uno >div 1</div> <div class= dos >div 2</div> <div class= tres >div 3</div>
22 Centrado de elementos CENTRADO HORIZONTAL p { text-align: center } h1 { text-align: center } img { display: block; margin-left: auto; margin-right: auto } div.dos { margin: auto; width: 200px } div.tres { margin: 10px auto; width: 200px } <div class= uno > <h1>título</h1> <p>texto del párrafo</p> <img href= imagen alt= imagen > </div> <div class= dos >div 2</div> <div class= tres >div 3</div> text-align: center - centrado de textos margin: auto - centrado de elementos TÍTULO Texto del párrafo imagen div 2 div 3
23 Centrado de elementos CENTRADO VERTICAL OPCIÓN A: p { height: 200px; display: table-cel; vertical-align: middle } Texto del párrafo OPCIÓN B (CSS3): p { margin: 0; position: absolute; top: 50%; transform: translate (0, -50%)} div.uno {position: relative; } <div class= uno > <h1>título</h1> <p>texto del párrafo</p> <img href= imagen alt= imagen > </div> Texto del párrafo
24 Centrado de elementos CENTRADO VERTICAL Y HORIZONTAL DE TODA LA PÁGINA.pagina {margin: 0; position: absolute; width: 60%; height: 60%; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%);} p { text-align: center } h1 { text-align: center } TÍTULO Texto del párrafo <body> <div class= pagina > <header> <h1>título</h1> </header> <main> <p>texto del párrafo</p> </main> <footer></footer> </div> </body>
25 Colores en HTML: los 16 colores básicos
26 Colores en HTML: los colores hexadecimales 1 - Cada código de 6 dígitos se compone de 3 grupos de valores: #XXxxxx R (valor del color rojo) #xxxxxx G (valor del color verde) #xxxxxx B (valor del color azul) 2 Cada grupo es un valor entre 0 i F en el sistema hexadecimal, que cuenta A B C D E F, siendo 0 el valor nulo i F el valor más alto. #FF0000 = ROJO #00FF00 = VERDE #0000FF = AZUL
27 Colores en HTML: la paleta de 216 colores hexadecimales
28 Colores en HTML: la paleta de 216 colores hexadecimales
29 Colores en HTML: la paleta de 216 colores hexadecimales CSS3 permite añadir un canal alfa al sistema de color RGB. background-color: rgba(72, 61, 139, 0.5); color: #4b0082; Texto en color índigo color: #00FF00; = color: #0F0; Texto en color verde Texto Algunas herramientas online para trabajar el color en páginas web:
30 Tipos de letra en CSS 1 - Usar tipografías seguras: helvetica, arial, verdana, times new roman, body { font-family: Arial, Helvetica, sans-serif ; } H1 { font-family: "Courier New", Courier, monospace ; } Nota: Especificar el tamaño de fuente global en el elemento body o en el html body { font-size: 12px; }
31 Tipos de letra en CSS 2 - Incrustar fuentes con CSS usando { font-family: FFF tusj'; /* nombre con el que llamamos la fuente */ src: url('fonts/fff_tusj.eot '); } /* si hemos subido la fuente a nuestro servidor { font-family: Gentium; src: url( } /* si la fuente està en internet { font-family: 'MyWebFont'; src: url('webfont.eot'); /* Modo compatible con IE9 */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Navegadores modernos */ url('webfont.ttf') format('truetype'), /* Safari, Android, ios */ url('webfont.svg#svgfontname') format('svg'); /* Legacy ios */ } Página online para descargar kits de tipografías en distintos formatos:
32 Normas básicas de las hojas de estilos 1. Primero se definen los estilos para ETIQUETAS html (header, footer, div, a, p, etc.) 2. Después se definen los estilos para IDENTIFICADORES (id). 3. Al final se definen los estilos para las CLASES (class). 4. Los estilos se ordenan conforme van apareciendo en la disposición del html, teniendo en cuenta la prioridad anterior. 5. Los atributos se declaran de la siguiente forma: { atributo1: valor1; atributo2: atributo2; atributon: valorn; } 6. Los atributos se ordenan alfabéticamente: display, color, width, 7. Declaramos el tamaño de fuente global en el body o en el html, que será el tamaño estándar por el que se regirán las fuentes de las etiquetas. 8. Si tenemos estilos para el comodín *, html y/o body, son los primeros en definirse. 9. Si tenemos estilos para resetear elementos html, estos irán antes de cualquier estilo.
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:
HTML 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
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Informá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
Capas. 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
EL 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
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales CSS - Hojas de Estilo Las hojas de estilo en cascada son un lenguaje formal usado para definir la presentación
Diseñ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
CSS 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
Informá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
HOJAS 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
Taller 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
HOJAS 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:
CSS AVANZADO Hojas de Estilo. Iván Martínez Toro
CSS AVANZADO Hojas de Estilo Iván Martínez Toro ÍNDICE DECONTENIDOS Pseudoclases. Fuentes. Modelo de caja: posición. Floaty Clear. Display. Fondos. Listas con estilo. Enlace importante. PSEUDOCLASES Modifican
Problemas típicos con HTML
Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla
Anexo 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;
Maquetació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.
Modelo de Cajas. Maquetación Web con HTML 5 y CSS 3. Ing. Rasjido Jose UNPA - UACO
Modelo de Cajas Maquetación Web con HTML 5 y CSS 3 Ing. Rasjido Jose UNPA - UACO AGENDA Propiedades de las cajas Tipos de cajas Esquemas de posicionamiento Bibliografía 2 Propiedades de las cajas Cada
Introducció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!
Maquetació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
En 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
CSS. Página 1/16. Atributo id #texto1 {font-size: 20px;} <p id= texto1 >Texto</p> p:nth-child(2) { background: # }
CSS. Página 1/16 Introducción CSS p, span{ color: #FF0000; font-size:24px; Pseudoclases
Informática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Box model El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página
Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Box
Dar 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
HOJAS 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:
TIC 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
CSS. 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
ELECTIVA 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
Conceptos 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
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
Figura 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
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 2009-2010 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades d Colores Cajas Posicionamiento Contenido
CSS: 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
CSS: 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
CSS 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
DISEÑ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
Curso de Maquetación Web: HTML 5 y CSS
Curso de Maquetación Web: HTML 5 y CSS Aprende a maquetar sitios Web de forma ágil y profesional sin usar tablas. Separa el diseño visual del contenido y optimiza al máximo los estilos de las páginas Web.
Índice general. Pág. N. 1. Capítulo 1. Capítulo 2
Pág. N. 1 Índice general Capítulo 1 Introducción al diseño web con HTML 5 y CSS3 1.1 Las versiones del HTML 1.2 Los navegadores y sus diferencias 1.2.1 Tiempo de carga 1.2.2 Entorno de trabajo 1.2.3 Ventanas
Producción Digital I. Lic. Wenceslao Zavala 26 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 26 de Septiembre 2018 El ancho de la caja del sitio no debe superar los 1300 px, y si la resolución es más pequeña, debe adaptarse al navegador. Trabajo Práctico
Tema 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
Cómo se define? selector {propiedad1: valor1; propiedad2: valor2}
Hojas de Estilos Cómo se define? selector {propiedad1: valor1; propiedad2: valor2} Tipos de selector Etiqueta de HTML Identificador De clase sintaxis Nbre_Etiqueta #nbre_identificador.nombredeclase Dónde
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.
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
Cap. 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
UNIVERSIDAD 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:
escuela 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
escuela 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
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
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
Diseñ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
CSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D)
APRENDERAPROGRAMAR.COM CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Catedra 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
Z-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
DISEÑ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
Que 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
Técnicas de visualización
Técnicas de visualización LENGUAJE HTML 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 Introducción
Páginas WEB Accesibles. Visualización de una página I. Una introducción a las páginas de estilo CSS. Luis Fernando Llana Díaz. 27 de octubre de 2008
Una introducción a las páginas de estilo CSS Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 7 de octubre de 008 Visualización de una página I Analizar el HTML y crear
CSS básico. Introducción, Unidades y Selectores
CSS básico. Introducción, Unidades y Selectores LMSGI, módulo del ciclo de FP de Grado Superior, Administración de Sistemas Informáticos en Red [1] introducción a CSS LMSGI, módulo del ciclo de FP de Grado
Edició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
CSS Cascading Style Sheets Selectores y Unidades
Selectores y Unidades Los selectores seleccionan el cuadro al que se aplica el formato Como ya sabemos, toda regla CSS empieza por un selector, que son una de estas tres cosas, o una combinación de las
Resumen 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.
CSS (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
Hojas 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
Roatan Bilingual School
Roatan Bilingual School Evaluación final de Informática Grado: Noveno Valor: 15% Primer paso: Crear una carpeta con su nombre en documentos de la computadora. Segundo paso: Copia y pega el código en el
CSS 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
Aplicaciones 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
Producción Digital I. Lic. Wenceslao Zavala 19 de Septiembre 2018
Producción Digital I Lic. Wenceslao Zavala 19 de Septiembre 2018 Trabajo Práctico N 3 Sitio Navegable entre secciones A partir de la maqueta de HTML realizada en el TP N 2, se deberá tener el sitio con
Hojas 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)
Modelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
Modelo de caja El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente.
REFERENCIA 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
MENÚ 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
Computación Web (Curso 2015/2016)
Introducción a CSS Computación Web (Curso 2015/2016) Jesús Arias Fisteus // jaf@it.uc3m.es Introducción a CSS p. 1 Introducción a CSS Introducción a CSS p. 2 Hola Mundo! 1 body { 2 color: rgb(200, 200,
Ejercicios de repaso de conceptos de CSS y CSS avanzado.
Ejercicios de repaso de conceptos de CSS y CSS avanzado. 1- HTML y CSS básico. Uso de selectores. Escribir el código HTML y CSS de una página web donde se modifiquen las siguientes propiedades mediante
CSS 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
Departamento 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
GUIA DE CLASES ONCE DOCENTE IRINA DONADO CUEVAS GRADO ONCE GRUPOS TECNOLOGÍA E
Página 1 de 13 GUIA DE CLASES ONCE DOCENTE IRINA DONADO CUEVAS GRADO ONCE GRUPOS 01 02 03 ÁREA TECNOLOGÍA E INFORMÁTICA PERIODO: SEGUNDO ASIGNATURA INFORMÁTICA META DE FORMACIÓN DEL ÁREA: El 92% de los
Producción Digital I. Lic. Wenceslao Zavala 12 de Septiembre
Producción Digital I Lic. Wenceslao Zavala 12 de Septiembre 2018 consultas@producciondigitalup.com www.producciondigitalup.com Realizar la maqueta en HTML de la versión de escritorio del Wireframe entregado
ESTILIZANDO 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
Informá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 - parte 3 Box
Guí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
HOJAS 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
HTML 2 / Atributos/etiquetas(Tags)
HTML 2 / Atributos/etiquetas(Tags) ATRIBUTOS bgcolor=#ff0000 Asigna un color en hexadecimal o en RGB a el fondo de todo el body ( la página) FGCOLOR="#00FF00" Asigna un color en hexadecimal
PADDING 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
Resumen 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
DEGRADADOS 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
XHTML y CSS 2. Área de Ingeniería Telemática
XHTML y CSS 2 XHTML 1.0 Modo de renderizado Box Model Tipos de elementos Posicionamiento de elementos CSS 2 Contenidos XHTML y CSS 2 2 XHTML 1.0 titulo del documento
El capítulo dedicado a CSS consta de dos prácticas, que corresponden a las sesiones de clase de teoría.
DAWEB Práctica 3, día nueve de Marzo 2017 Introducción El capítulo dedicado a CSS consta de dos prácticas, que corresponden a las sesiones de clase de teoría. La primera práctica trata sobre la maquetación
III. 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
Apuntes de CSS Novedades CSS3
Apuntes de CSS3 14. Novedades CSS3 0. Bordes en nuestra página. Todos los elementos HTML son considerados como bloques. Para visualizar sus bordes podemos recurrir a nuestra hoja de estilos CSS. El ejemplo
CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D)
APRENDERAPROGRAMAR.COM CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D) Sección: Cursos Categoría: Tutorial básico del programador
INSERTAR UN MENÚ DESPLEGABLE
INSERTAR UN MENÚ DESPLEGABLE 0. Ahora vamos a editar el blog para poder tener en la zona superior un menú desplegable. 1. Volveremos a Blogger, vamos a la sección de Plantilla y pulsamos en Editar HTML.
Formateo 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
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
Curso 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
PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D)
APRENDERAPROGRAMAR.COM PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D) Sección: Cursos Categoría: Tutorial básico del programador
TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D)
APRENDERAPROGRAMAR.COM TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D) Sección: Cursos Categoría: Tutorial básico del programador web: