CSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008
|
|
|
- Aarón Silva Guzmán
- hace 7 años
- Vistas:
Transcripción
1 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 tree). html head body meta style div div div ul p p p ul li li li li li li 2 Identificar el medio en el que va a representar la página: braille, embossed, handheld, print, projection, screen, speech, tty, tv. 3 Descargar las hojas de esilo asociadas al documento y al medio.
2 Visualización de una página II 4 Anotar en cada nodo del árbol con cada propiedad disponible según las hojas de estilo, si el medio es screen se aplica el visual formatting model. 5 Generar una estructura de formato, es parecido al árbol anterior pero puede aparecer y desaparecer información: Si un elemento tinen el valor none en la propiedad display, no aprece. El las listas aparece puede aparecer una imagen bola. No se modifica el document tree. 6 Transferir la estructura de formato al medio concreto (impimir los resultados, mostrarlos en la ventana de un navegador gráfico, pronunciar el texto, etc.). CSS: Cascade Style Sheets HTML estructura lógica del documento. CSS presentación (estilo) del documento.
3 Principios del diseño CSS I 1 Compatibilidad, hacia adelante y hacia atrás. 2 Complemento a los documentos estructurados. Documentos uniformes. Es fácil cambiar la apariencia de un documento sin alterar el HTML. 3 Independecia del fabricante, plataforma y dispositivo. 4 Mantenibilidad. Si el jefe dice que los comentarios deben ir en rojo, basta cambiar una ĺınea 5 Mejora del rendimiento de la red. 6 Flexibilidad. Se pueden especificar información de estilo en el navegador (user agent), del usuario, las que aparecen el documento. Principios del diseño CSS II 7 Riqueza. La calidad depende de la creatividad del autor. 8 Accesibilidad. Se puede controlar la apariencia del texto, no son necesarios los botones gráficos. Hace innecesario el uso de trucos para la maquetación: marcos, imágenes invisibles, o tablas. El modificador!important permite al usuario definir sus necesidades. El valor inherit mejora la generalidad de la cascada y permite una mejor y más consitente ajuste. Se soporta medios como braille, embossed y tty.
4 body { margin :0; padding :0; font - family :sans - serif ; body, div # derecha, div # izquierda,h1,h2,h3,h4,h5,h6 { background - color :#99 FF33 div. lateral { padding - top :2em; div. lateral p { margin - left :1em; text - indent :0 div. lateral a, div. lateral p, div. lateral div. iconos { font - size :xx - small ; div. lateral ul li a { margin - top :0.5em; padding :0.5em; display : block ; background - color : yellow ; border : 2pt outset # FFCC00 ; div. lateral ul li a: hover { background - color : red ; border : 2pt outset # CC0000 ; <head > <meta http - equiv=" Content - Type " content=" text / html ; charset=iso "> <link rel =" stylesheet " type =" text / css " href =" estilo2. css " media =" screen "> <title >Prueba 3</ title > </ head > <style type =" text / css " media =" screen "> /* cosas que entiende IE6 url (" estilo.css "); /* cosas que entienden los navegadores buenos, pero no IE6, oculta el mensaje sin CSS url (" completo. css ") screen ; </ style > <p style="text - align : center ">Texto centrado </p>
5 all braille Dispositivos braille táctiles. embossed Para impresoras braille. handheld Pantalla pequeña, poco ancho de banda. projection print Para ser impreso, con páginas. screen Pantallas de ordenador a color. speech tty Terminales con tipo de letra de ancho ficho y capacidades limitadas. tv Televisión, baja resolución con color. La cascada Los agentes de usuario (navegadores) deben asignar las propiedades de la siguiente forma: 1 Si la cascada calcula un valor le asigna ese. 2 Si la propiedad es inherit, le asigna el valor del nodo padre. 3 En caso contrario le asigna el valor inicial.
6 Preferencia en la cascada Las hojas de estilo pueden tener 3 orígenes: autor, usuario, agente de usuario. Las reglas tiene un peso, si dos reglas se contradicen la de mayor peso tiene preferencia Las reglas del autor tienen más peso que las del usuario Las del usuario más que la del agente de usuario. La preferencia se puede invertir con la directiva!important. El orden de la cascada 1 Encontrar todas la reglas que se pueden aplicar a un determinado elemento. 2 Ordenar por orden de importancia (creciente): 1 reglas del agente de usuario 2 reglas normales del usuario 3 reglas normales del autor 4 reglas importantes del autor 5 reglas importantes del usuario 3 Ordenar por concreción de la regla. Las más específicas tiene mayor peso. 4 Si tras todo hay dos con el mismo peso, la que aparece más tarde (en el fichero) tiene prioridad.
7 Selectores CSS I 1 * Matches any element. Universal selector 2 E Matches any E element (i.e., an element of type E). Type selectors 3 E F Matches any F element that is a descendant of an E element. Descendant selectors 4 E > F Matches any F element that is a child of an element E. Child selectors. IE6 no lo entiende!!!! se tiene que simular con JavaScript 5 E#myid Matches any E element with ID equal to myid. ID selectors Selectores CSS II 6 E:first-child Matches element E when E is the first child of its parent. IE6 no lo entiende!!! 7 E:link, E:visited Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). The link pseudo-classes 8 E:active, E:hover, E:focus Matches E during certain user actions. The dynamic pseudo-classes en IE6 sólo funciona con etiquetas <a>...</a>!!!! se tiene que simular con JavaScript
8 Modelo de caja I Modelo de caja II ul { background : yellow ; margin : 12 px 12 px 12 px 12 px; padding : 3px 3px 3px 3px; li { color : white ; background : blue ; margin : 12 px 12 px 12 px 12 px; padding : 12 px 0px 12 px 12 px; list - style : none li. withborder { border - style : dashed ; border - width : medium ; border - color : lime ;
9 Modelo de caja III Modelo de caja IV padding del color del fondo de la caja, no colapsa padding, padding-top, padding-right, padding-bottom, padding-left margin transparente (de color de la caja contenedora), colapsa. margin, margin-top, margin-right, margin-bottom, margin-left
10 Modelo de caja V Tamaños: longitudes la unidad es obligatoria (salvo si es 0): absolutas (a evitar), puntos pt, miĺımetros mm, centímetros cm. relativas a la fuente actual em, a la resolución del dispositivo px. porcentaje %, relativo a la caja contenerdora. Modelo de caja VI Global: border. Anchura del borde: thin, medium, thick, o longitud expĺıcita. border-top-width, border-right-width, border-bottom-width, border-left-width, y border-width. Estilo del borde: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset. border-top-style, border-right-style, border-bottom-style, border-left-style, y border-style. Color del borde: border-top-color, border-right-color, border-bottom-color, border-left-color, y border-color.
11 display valores block, inline, none,... position Propiedades relacionadas top, right, bottom, and left: static posicionado normal, no tiene efecto. relative Se posiciona de forma relativa con la posición normal, reserva el hueco con respecto al posicionamiento normal absolute Se posisiciona de forma absoluta, con respecto al antecesor que no sea static. No reserva hueco con respecto al posicionamiento normal. fixed Igual que absolute, pero no se mueve con el scrolling. AVISO NO lo entiende IE6.
12 div # superior { position : absolute ; left :0; top :0; height :17 %; width :100 %; div # izquierda { position : absolute ; left :0; top :17 %; height :83 %; width :15 %; margin :0; div # centro { position : absolute ; top :17 %; left :15 %; width :70 %; div # derecha { position : absolute ; left :85 %; top :17 %; width :15 %; height :83 %; Anchuras y alturas width height Se aplican a cajas de bloque. Valores: <length> <percentage> auto inherit Se aplican al contenido, al tamaño total hay que añadir el padding y el margin.
13 Posicionamiento flotante: Float <! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.0// EN"> <HTML > <HEAD > <TITLE >Float example </ TITLE > <STYLE type =" text / css "> IMG { float : left BODY, P, IMG { margin : 2em </ STYLE > </ HEAD > <BODY > <P><IMG src = img. png alt =" This image will illustrate floats "> Some sample text that has no other... </ BODY > </ HTML > Posicionamiento flotante: Float Valores: codigoauxleft, right, none <BODY > <P>Some sample text <IMG src = img. png "> that has no other... </BODY > p { clear : left
14 Efectos visuales overflow : visible, hidden, scroll, auto clip : recorte, se puede especificar una forma. visibility visible, hidden z-index : indica la capa en la que se coloca, se puede poner encima (número mayor), o debajo (número más pequeño). Fuentes font-family Debe incluir una de las siguientes: serif, sans-serif, cursive, fantasy, monospace. body { font - family : " New Century Schoolbook ", serif font-style normal, italic, oblique font-variant normal, small-caps font-weight normal, bold, bolder, lighter font-size Porcentaje (con respecto al padre), en puntos y xx-small, x-small, small, medium, large, x-large, xx-large,
15 Colores em { color : # f00 /* # rgb */ em { color : # ff0000 /* # rrggbb */ em { color : rgb (255,0,0) em { color : rgb (100 %, 0 %, 0 %) Listas list-style-type valores disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-latin, upper-latin. list-style-image ul { list -style - image : url (" http :// png. com / ellipse. png ") list-style-position valores inside, outside.
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
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
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!
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
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
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
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:
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
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
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
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
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
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.
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
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
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
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
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
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
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)
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
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
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.
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
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
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
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
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;
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:
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
Propiedades 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
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
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
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
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. 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
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
Roberto 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
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
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,
Té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
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. 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
CSS: 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
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
CSS. 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
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
Introducción a las aplicaciones WEB
Introducción a las aplicaciones WEB Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Qué es Internet? I LAN: Local Area Network, red de ámbito local.
Producción Digital I. Lic. Wenceslao Zavala 7 de Junio 2018
Producción Digital I Lic. Wenceslao Zavala 7 de Junio 2018 Trabajo Cierre de Cursada Sitio HTML COMPLETO online Adaptable para: Tabletas hasta 768px; Móviles hasta 480px. Debe tener: Slider en alguno de
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
Roberto 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
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
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 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
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
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
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
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
CSS-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.
1. Selector. Representa una etiqueta estándar del HTML.
Hojas de estilo: CSS Con la intención de separar el contenido de la presentación y de ofrecer mayores y más fáciles posibilidades de presentación el W3 Consortium sugirió la utilización de las Hojas de
Í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
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
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
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.
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
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
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
Ejemplo: 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
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
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
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
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
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
Yusef 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
CSS: Hojas de Estilo en Cascada
CSS: Hojas de Estilo en Cascada B. Cristina Pelayo García-Bustelo Creación de Sitios Web con XHTML, CSS y JavaScript Agaete 2007 1 2 3 4 5 Introdución Sintaxis Selectores Pseudo-clases y Pseudo-elementos
Asignatura: Programación 4
Conferencia #2 HTML y CSS Objetivos: Conocer el trabajo con los formularios, como otro elemento básico del lenguaje HTML. Saber utilizar las hojas de estilos para dotar a todas las páginas de un sitio
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
JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E)
APRENDERAPROGRAMAR.COM JAVASCRIPT: ACCEDER A ELEMENTOS POR ID. GETELEMENTBYID. DOCUMENT.ALL. CAMBIAR IMAGEN IMG SRC (CU01127E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Hojas de Estilos - CSS. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15
Hojas de Estilos - CSS Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2014/15 Introducción Motivación: Separar el formato del contenido y estructura de una
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
Producción Digital I. Lic. Wenceslao Zavala 10 de Octubre 2018
Producción Digital I Lic. Wenceslao Zavala 10 de Octubre 2018 NO debe aparecer la barra de desplazamiento abajo, para mover la pantalla de izquierda a derecha. Trabajo Práctico N 5 Sitio Responsive Si
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
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
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:
PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)
APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial
DESTINATARIOS Este curso está dirigido a aquellos alumnos que deseen adquirir conocimientos sobre el diseño mediante hojas de estilo.
DESTINATARIOS Este curso está dirigido a aquellos alumnos que deseen adquirir conocimientos sobre el diseño mediante hojas de estilo. OBJETIVOS Aplicar una metodología orientada a objetos para el diseño
Hojas 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
La presentación. Pere Barnola Augé P08/93133/01507
Pere Barnola Augé P08/93133/01507 Índice Introducción... 5 1. Las hojas de estilo (CSS)... 7 2. Cómo se puede dar estilo a un documento XHTML... 8 2.1. La vinculación CSS-XHTML... 8 2.2. Selectores y
CSS. 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
XHTML + CSS extended HyperText Markup Language Cascading StyleSheets Antonio González
XHTML + CSS extended HyperText Markup Language Cascading StyleSheets 1996-2004 Antonio González Impreso el 7 de mayo de 2008, a las 15:06 horas Índice Estructura básica documento XHTML... 1 Diferencias
Introducción a las aplicaciones WEB
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 3 de mayo de 2010 Qué es Internet? I LAN: Local Area Network, red de ámbito local. Qué es Internet? II Qué es Internet?
CSS. Cascading Style Sheets (Hojas de estilo en cascada)
1 CSS Cascading Style Sheets (Hojas de estilo en cascada) INTRODUCCIÓN Las Hojas de estilo son un conjunto de reglas de estilo definidas por el programador sobre elementos HTML, que definen la apariencia
Técnicas para la enseñanza de. Desarrollo Web. M is notas de CSS. Liliana Gutiérrez Flores. Enero de 2016
Técnicas para la enseñanza de Desarrollo Web M is notas de CSS. Liliana Gutiérrez Flores Enero de 2016 En el presente documento se presenta el proyecto de creación de una página Web con notas de CSS. Se
SHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D)
APRENDERAPROGRAMAR.COM SHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D) Sección: Cursos Categoría: Tutorial básico del programador
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