III. Hojas de estilo en cascada (CSS)
|
|
|
- Asunción Cárdenas Acosta
- hace 7 años
- Vistas:
Transcripción
1 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
2 4. Declaración avanzada de CSS 4.1. Selectores 4.2. Regla de agrupación 5. Conclusiones
3 Hojas de estilo en cascada Cascading Style Sheets (CSS) Lenguaje que permite decorar y personalizar documentos estructurados. El objetivo es la separación del contenido de la presentación: documentos independientes de plataforma, vendedor y dispositivo. Simplifican la escritura de páginas web y facilitan el mantenimiento. Curso 2008/2009 Arquitecturas Distribuidas 3
4 Hojas de estilo en cascada Mejora la eficacia de transmisión: Elimina la necesidad de imágenes invisibles o que sólo contienen letras. La información de estilo sólo se envía una vez. Puede definirse una hoja de estilo para cada medio destino: navegador gráfico, navegador por voz, navegador braille, etc. Curso 2008/2009 Arquitecturas Distribuidas 4
5 Declaración n de CSS Un CSS es un conjunto de reglas (selector + declaraciones) que determinan propiedades: SELECTOR { propiedad_1: valor_1;...; propiedad_n: valor_n} A qué elementos afecta? Qué valor tienen las propiedades? Curso 2008/2009 Arquitecturas Distribuidas 5
6 Declaración n de CSS Ejemplo de CSS simple: H1 {color: green} Afecta a los encabezados de primer nivel: H1 Asigna a la propiedad color el valor verde Curso 2008/2009 Arquitecturas Distribuidas 6
7 Declaración n de CSS Otro ejemplo de CSS simple: H1 {color: green; font-style: italic} Afecta a los encabezados de primer nivel: H1 Asigna a la propiedad color el valor verde, y al estilo de fuente el valor cursivas Curso 2008/2009 Arquitecturas Distribuidas 7
8 Propiedades típicas t CSS Propiedades: Fuentes CSS1 50 propiedades Colores Márgenes CSS2 120 propiedades!! Alineados Sombreados Dirección del texto Pitch de la voz Azimuth etc. Curso 2008/2009 Arquitecturas Distribuidas 8
9 Inserción n de CSS en HTML Interno a un documento <STYLE type="text/css"> Reglas </STYLE> Externo a un documento Indicación del nombre de la hoja de estilo que se usará <LINK rel="stylesheet" href=url type="text/css"> URL contiene fichero con las reglas Curso 2008/2009 Arquitecturas Distribuidas 9
10 Inserción n de CSS en HTML Como atributo de cada elemento <P style="font-size: 20pt"> texto </P> Existen diferentes definiciones de estilo en cascada: CSS1, CSS2. Curso 2008/2009 Arquitecturas Distribuidas 10
11 Herencia de propiedades en CSS Se denominan hojas en cascada ya que los elementos hijos heredan por defecto los valores de estilo de los padres. Un elemento se caracteriza por valores específicos, heredados o por defecto (de mayor a menor preferencia, respectivamente). Curso 2008/2009 Arquitecturas Distribuidas 11
12 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> ESTILO POR DEFECTO Curso 2008/2009 Arquitecturas Distribuidas 12
13 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 13
14 Herencia de propiedades en CSS Ejemplo: BODY H1 P UL Valor por defecto del color del elemento: negro. STRONG LI LI LI Curso 2008/2009 Arquitecturas Distribuidas 14
15 Herencia de propiedades en CSS Ejemplo: BODY H1 P UL Cambiamos el valor al elemento BODY: rojo STRONG LI LI LI Curso 2008/2009 Arquitecturas Distribuidas 15
16 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> body {color: red} </style> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> CAMBIO EN ESTILO DEL BODY Curso 2008/2009 Arquitecturas Distribuidas 16
17 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> body {color: red} </style> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> QUÉ HA SUCEDIDO? Curso 2008/2009 Arquitecturas Distribuidas 17
18 Herencia de propiedades en CSS Ejemplo: BODY H1 P UL La propiedad color rojo se HEREDA por todos los hijos. STRONG LI LI LI Curso 2008/2009 Arquitecturas Distribuidas 18
19 Herencia de propiedades en CSS Ejemplo: BODY H1 P UL La propiedad color puede ser controlada en cada elemento específico: UL verde STRONG Itálica y negro STRONG LI LI LI Curso 2008/2009 Arquitecturas Distribuidas 19
20 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> body {color: red} strong {color: black; font-style: italic} ul {color: green} </style> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> CAMBIO EN ESTILO DEL UL y STRONG Curso 2008/2009 Arquitecturas Distribuidas 20
21 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> body {color: red} strong {color: black; font-style: italics} ul {color: green} </style> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 21
22 Herencia de propiedades en CSS Ejemplo: BODY H1 P UL Puesto que UL tiene hijos, estos también heredan el color verde STRONG LI LI LI Curso 2008/2009 Arquitecturas Distribuidas 22
23 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> ul {color: green} strong {color: black; font-style: italic} body {color: red} </style> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> EL ORDEN Entre DE sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> PREFERENCIA ESTÁ DETERMINADA POR LA ESPECIFICIDAD, NO POR DECLARACIÓN. Curso 2008/2009 Arquitecturas Distribuidas 23
24 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> ul {color: green} strong {color: black; font-style: italics} body {color: red} </style> <body> <h1> Compositor clásico </h1> <p> Johann Sebastian Bach fue un compositor <strong> prolífico. </strong> Entre sus obras destacan: </p> <ul> <li> Conciertos de Brandendurgo <li> Pasión según San Mateo <li> Variaciones de Goldberg </ul> </body> </html> IDÉNTICA!!! Curso 2008/2009 Arquitecturas Distribuidas 24
25 Declaración n avanzada de CSS Selectores: * Selector universal (cualquier elemento): * {font-family: Arial} Curso 2008/2009 Arquitecturas Distribuidas 25
26 Declaración n avanzada de CSS Selectores: E Identifica cualquier elemento E: LI {font-family: Arial} P {color: black} Curso 2008/2009 Arquitecturas Distribuidas 26
27 Declaración n avanzada de CSS Selectores: E>F Cualquier elemento F que sea hijo de E UL>LI {font-size: 70%} OL>LI {font-size: 115%} Curso 2008/2009 Arquitecturas Distribuidas 27
28 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> ol>li{font-size: 70%} ul>li{font-size: 115%} </style> <body> <ol> </ol> <ul> </ul> </body> </html> <li> Elemento 1 Lista no ordenada <li> Elemento 2 Lista no ordenada <li> Elemento 1 Lista no ordenada <li> Elemento 2 Lista no ordenada LI SE VISUALIZA DIFERENTE SEGÚN QUIEN SEA EL PADRE Curso 2008/2009 Arquitecturas Distribuidas 28
29 Herencia de propiedades en CSS <html> <title>ejemplo CSS</title> <style> ol>li{font-size: 70%} ul>li{font-size: 115%} </style> <body> <ol> </ol> <ul> </ul> </body> </html> <li> Elemento 1 Lista no ordenada <li> Elemento 2 Lista no ordenada <li> Elemento 1 Lista no ordenada <li> Elemento 2 Lista no ordenada Curso 2008/2009 Arquitecturas Distribuidas 29
30 Declaración n avanzada de CSS Selectores: E F Cualquier elemento F descendiente de E H1 EM{color: blue} Curso 2008/2009 Arquitecturas Distribuidas 30
31 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> H1 { color: red } EM { color: red } H1 EM { color: blue } </style> <body> <h1>esta <span class="myclass">cabecera es <em>muy</em> importante</span></h1> Esta <em>palabra</em> es también importante. </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 31
32 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> H1 { color: red } EM { color: red } H1 EM { color: blue } </style> <body> <h1>esta <span class="myclass">cabecera es <em>muy</em> importante</span></h1> Esta <em>palabra</em> es también importante. </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 32
33 Declaración n avanzada de CSS Selectores: E+F F inmediatamente después de E H1+H2{color: red} Curso 2008/2009 Arquitecturas Distribuidas 33
34 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> h1 + h2 { color: red } </style> <body> <h1> Cabecera principal </h1> <h2> Cabecera secundaria </h2> <h1> Otra cabecera principal </h1> <p> Parrafo intermedio <h2> Cabecera secundaria </h2> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 34
35 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> h1 + h2 { color: red } </style> <body> <h1> Cabecera principal </h1> <h2> Cabecera secundaria </h2> <h1> Otra cabecera principal </h1> <p> Parrafo intermedio <h2> Cabecera secundaria </h2> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 35
36 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> h1 + h2 { color: red } </style> <body> <h1> Cabecera principal </h1> <h2> Cabecera secundaria </h2> <h1> Otra cabecera principal </h1> Parrafo intermedio <h2> Cabecera secundaria </h2> </body> </html> El selector afecta en presencia de un texto intermedio (ya que éste no es un nuevo elemento) Curso 2008/2009 Arquitecturas Distribuidas 36
37 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> h1 + h2 { color: red } </style> <body> <h1> Cabecera principal </h1> <h2> Cabecera secundaria </h2> <h1> Otra cabecera principal </h1> Parrafo intermedio <h2> Cabecera secundaria </h2> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 37
38 Hojas de estilo en cascada Selectores: E#myid Cualquier elemento E cuyo atributo id sea myid TABLE#precios {text-align: center} Curso 2008/2009 Arquitecturas Distribuidas 38
39 Declaración n avanzada de CSS <html> <title>ejemplo CSS</title> <style> table#precios { text-align: center; font-style: italic } </style> <body> <table id="precios"> <tr><td>1<td>2<td>3 <tr><td>uno<td>dos<td>tres </table> <table> <tr><td>1<td>2<td>3 <tr><td>uno<td>dos<td>tres </table> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 39
40 Declaración n avanzada de CSS <html> <html> <title>ejemplo CSS</title> <title>ejemplo CSS</title> <style> <style> table#precios { h1 + h2 text-align: { color: red center; } </style> font-style: italic } </style> <body> <h1> Cabecera principal </h1> <body> <h2> Cabecera secundaria </h2> <table id="precios"> <h1> Otra <tr><td>1<td>2<td>3 cabecera principal </h1> <p> Parrafo <tr><td>uno<td>dos<td>tres intermedio </table> <h2> Cabecera secundaria </h2> </body> <table> </html> <tr><td>1<td>2<td>3 <tr><td>uno<td>dos<td>tres </table> </body> </html> Curso 2008/2009 Arquitecturas Distribuidas 40
41 Declaración n avanzada de CSS Selectores: REGLA DE AGRUPACIÓN: H1 {color: red} H2 {color: red} H3 {color: red} Es similar a: Forma preferida: más clara, y ocupa menos bytes. H1,H2,H3 {color: red} Curso 2008/2009 Arquitecturas Distribuidas 41
42 Conclusión n sobre CSS Permite de forma sencilla separar el contenido de su formato. Revise los ejemplos: Observará que el formato siempre se definió de modo independiente! Curso 2008/2009 Arquitecturas Distribuidas 42
43 Conclusión sobre CSS body { } padding: 0; margin: 0; font: 0.7em Tahoma, sans-serif; line-height: 1.5em; background: #fff; color: #454545; a { color: #E0691A; background: inherit; } a:hover { color: #6C757A; background: inherit; } h1 { font: normal 2.1em Arial, Sans-Serif; letterspacing: -1px; padding: 7px 0 0 8px; margin: 0; }.dark { color: #737373; background: inherit; font-weight: bold; } h1 a, h2 a { text-decoration: none; } h1 a:hover, h2 a:hover { color: #FF6600; background: inherit; } h2 { margin: 0; padding: 0; font: bold 1.7em Arial, Sans-Serif; letter-spacing: -1px; } p {margin: 0 0 5px 0; } ul { margin: 0; padding : 0; list-style : none; } Curso 2008/2009 Arquitecturas Distribuidas 43
44 Referencias y bibliografía Libros: Cascading Style Sheets, designing for the Web, Hakon Wium Lie, Bert Bos, Addison Wesley. En Web: Especificación Tutorial -> Open Source Web Design: miles de plantillas gratuitas Curso 2008/2009 Arquitecturas Distribuidas 44
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
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
TIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web REFERENCIAS Existen varios métodos para seleccionar qué elementos HTML serán afectados por las reglas CSS: Referencia por la palabra clave del elemento. Referencia por el
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
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
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
CSS: 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
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en 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
Hojas de estilo en cascada
Hojas de estilo en cascada Es la forma como indicamos el diseño, colores, tamaños, etc de un sitio web, separado de la programación y la estructura de este. HTML Estructura, músculos, huesos web CSS El
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
Qué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código
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
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
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
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
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
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
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
MENÚ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
Arquitectura de Tecnologías Web Por César Bustamante Gutiérrez. Módulo II: Tecnologias del lado del Cliente Tema 1: HTML5. www.librosdigitales.
1 Que es CSS3? El CSS sirve para definir la estética de un sitio web en un documento externo y eso mismo permite que modificando ese documento (la hoja CSS) podamos cambiar la estética entera de un sitio
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
Introducció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
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
Desarrollo de Aplicaciones para Internet I. Unidad III - CSS Profesor: M.C. Martín Olguín
Desarrollo de Aplicaciones para Internet I Unidad III - CSS Profesor: M.C. Martín Olguín Cascading Style Sheets (CSS) Aunque el HTML desde sus orígenes privilegia el contenido sobre la apariencia, esta
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
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
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
Mantenimiento de WordPress e Introducción a CSS
Mantenimiento de WordPress e Introducción a CSS 6 / Junio / 2016 Alex Ollé @WanderlustTB fb.com/wanderlustmemories @wanderlust_memories PDF en: alexolle.es/tallerwordpress 1. Qué es WordPress? WordPress
Prá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.
Hojas de estilo en cascada (CSS) Tecnologías Web
Hojas de estilo en cascada (CSS) Tecnologías Web Motivación El objetivo fundamental de las hojas de estilo CSS es separar el contenido de la apariencia La información de nuestros sitios WEB tienen que
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:
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
CONCEPTO DE HERENCIA EN HOJAS DE ESTILO EN CASCADA CSS. QUÉ ES? FORZAR HERENCIA CON INHERIT. EJEMPLOS. (CU01013D)
APRENDERAPROGRAMAR.COM CONCEPTO DE HERENCIA EN HOJAS DE ESTILO EN CASCADA CSS. QUÉ ES? FORZAR HERENCIA CON INHERIT. EJEMPLOS. (CU01013D) Sección: Cursos Categoría: Tutorial básico del programador web:
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
TECNOLOGÍAS DE INFORMACIÓN PARA LA INNOVACIÓN. Facultad de Estadística e Informática
TECNOLOGÍAS DE INFORMACIÓN PARA LA INNOVACIÓN Bibliografía w3schools.com. (s.f.). Consultado el 12 de septiembre de 2017. Extraído de: https://www.w3schools.com/ Listas con viñetas. (s.f.). Extraído desde
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
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
Creación de una página web accesible sencilla
Unidad 2: Las hojas de estilo en cascada Creación de una página web accesible sencilla Objetivos: -Agregar formato a la página creada, a través de una hoja de estilo. Contenidos: -Incorporación de una
ESTRUCTURA 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
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
Sintaxis de CSS CSS ({ })
Qué es CSS? CSS (Cascading Style Sheets - Hojas de Estilo en Cascada), son un mecanismo simple que describe como se va a presentar un documento en la pantalla. CSS nos permite controlar el estilo y el
HTML/CSS( Mi(primera(página(
HTML/CSS Miprimerapágina QuéesHTML Esunlenguajedemarcasparaformateary estructurarundocumento,quepuedeleerseen cualquiernavegador. EstandarizadoenlanormaISOdeSGML StandardGeneralizedMarkupLenguage).
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
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
CSS (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
Paquete de trabajo 3. Diseño Web del Proyecto REMERI. Manual. Enero 2013
Paquete de trabajo 3 Diseño Web del Proyecto REMERI Manual Enero 2013 Red Mexicana de Repositorios Institucionales REMERI 2 HOJA EN BLANCO Red Mexicana de Repositorios Institucionales REMERI 3 Paquete
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;
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
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
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
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
SUBRAYAR CON MARCATEXTO EL PARRAFO DONDE ENCONTRÓ LA PREGUNTA LAS RESPUESTAS LAS ENCUENTRAS DE LA PAG 26 A LA 96 DEBE COPIAR PREGUNTA Y RESPUESTA
TAREA NO 1 INTRODUCCIÓN A HTML5 Y CSS3 PRIMERO BÁSICO PROF. VICTOR AQUINO URRUTIA CURSO: TECNOLOGÍAS DE LA INFORMACIÓN Y COMUNICACIÓN (TICS) CICLO: 2017 ------------------------------------------------------------------------------------------
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
ING. YIM ISAIAS APESTEGUI FLORENTINO
1 2 CAPÍTULO 1. INTRODUCCIÓN 1.1. 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
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. Qué es una página web Elementos necesarios. Posicionamiento HTML y CSS Mi primera web Gestores de contenidos. Dominio y hospedaje
Índice 2 Qué es una página web Elementos necesarios Dominio y hospedaje Posicionamiento HTML y CSS Mi primera web Gestores de contenidos Qué es una página web 3 Documento o información electrónica capaz
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
Introducción. En CSS, los selectores se usan para elegir los elementos HTML que queremos estilizar de nuestra
Tema. Selectores Objetivos. Construir hojas de estilo basadas en los selectores CSS Material a utilizar. * Editor de texto para el código HTML * Navegador Web Introducción. En CSS, los selectores se usan
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:
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
1. Introducción de estilo en sitios web
Informática Grado en Ingeniería Agrícola Curso 2011/2012 Nombre: Fecha: /02/2012 Grupo: 1 PRÁCTICA 4 CSS. INTRODUCCIÓN DE ESTILO EN SITIOS WEB Esta práctica estará dividida en dos partes. En la primera
Capí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:
Í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
UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B)
APRENDERAPROGRAMAR.COM UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde
Desarrollo de Aplicaciones Web con PHP. Javier Enciso
Desarrollo de Aplicaciones Web con PHP Javier Enciso Agenda Hojas de Estilos Qué es CSS? Para qué sirve? Cómo funciona? Ejemplos Validación de Formularios Fundamentos de JavaScript Utilización de JavaScript
CURSO DE H.T.M.L. Parte 3/4
CURSO DE H.T.M.L. Parte 3/4 Autor Luis Marco Giménez Agencia Tributaria Dpto. Informática Tributaria de de Madrid Colaboradores Javier Álvarez Eloy García Instituto de de Salud Carlos III III de de Madrid
CSS EFECTO SOMBRA CON TEXT-SHADOW Y BLUR, TEXT-OVERFLOW CLIP, ELLIPSIS Y LINE-HEIGHT (INTERLINEADO) (CU01041D)
APRENDERAPROGRAMAR.COM CSS EFECTO SOMBRA CON TEXT-SHADOW Y BLUR, TEXT-OVERFLOW CLIP, ELLIPSIS Y LINE-HEIGHT (INTERLINEADO) (CU01041D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
QUÉ ES Y PARA QUÉ SIRVE EL LENGUAJE CSS (CASCADING STYLE SHEETS HOJAS DE ESTILOS EN CASCADA)? (DV00203A)
APRENDERAPROGRAMAR.COM QUÉ ES Y PARA QUÉ SIRVE EL LENGUAJE CSS (CASCADING STYLE SHEETS HOJAS DE ESTILOS EN CASCADA)? (DV00203A) Sección: Divulgación Categoría: Lenguajes y entorno Fecha revisión: 2029
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
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
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
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:
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!
Unidad III: Lenguaje de presentación
Unidad III: Lenguaje de presentación 3.1 Introducción Un lenguaje de presentación define un conjunto de etiquetas y atributos válidos y que ofrecen un significado visual para cada elemento del lenguaje,
Introducción al desarrollo web (idesweb) - 3 a ed.
Introducción al desarrollo web (idesweb) - 3 a ed. Práctica 7: JavaScript, Modelo de Objetos de Documento y cookies 1. Objetivos Aprender a manejar el DOM de una página web para manipular su contenido.
Examen 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
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
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
COLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D)
APRENDERAPROGRAMAR.COM COLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde
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
www.librosweb.es Introducción a CSS Javier Eguíluz Pérez
Introducción a CSS Javier Eguíluz Pérez Sobre este libro... Los contenidos de este libro están bajo una licencia Creative Commons Reconocimiento No Comercial - Sin Obra Derivada 3.0 (http://creativecommons.org/licenses/by-nc-nd/
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
UNIDADES TECNOLÓGICAS DE SANTANDER GUÍA DE ESTUDIO No. 3
UNIDAD ACADÉMICA: FACULTAD DE CIENCIAS NATURALES E INGENIERIAS ASIGNATURA: PROGRAMACIÓN WEB Ing. Leydi Johana Polo Elsa Patricia Carvajal Valero UNIDAD TEMÁTICA LENGUAJE DE MARCADO DE HIPERTEXTO COMPETENCIA
DISEÑO Y ELABORACIÓN DE PÁGINAS WEB
2015 DISEÑO Y ELABORACIÓN DE PÁGINAS WEB PROFESORA: ARIADNA HERNÁNDEZ ESCAMILLA 20/02/2015 Unidad de aprendizaje: Desarrollo de páginas estáticas Práctica no.1 Propósito de la práctica Insertar texto en
5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara
5º Unidad Didáctica Hojas de estilo en Cascada CSS Eduard Lara 1 ÍNDICE 5.1 El Origen de CSS 5.2 Hojas de estilo y sus clases 5.3 Las reglas de estilo 5.4 Presentación con estilos 2 5.1 EL ORIGEN DE CSS
Cascading Style Sheets (CSS) Programación de Web Estático
UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA Cascading Style Sheets (CSS) Programación de Web Estático Introducción CSS: Cascading Style Sheets Hojas de estilo en cascada Los estilos definen cómo
Diseña tu propia web
Diseña tu propia web Diseña tu propia web Juan Manuel Escudero García juanmanuel.escudero@ticarum.es 2 Infraestructura Elementos necesarios para publicar nuestra web. - Un dominio - Hosting o alojamiento
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
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
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
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: