III. Hojas de estilo en cascada (CSS)
|
|
|
- Asunción Cárdenas Acosta
- hace 9 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
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
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
CSS. Departamento de Lenguajes y Computación Universidad de Almería CSS. Contenidos
Desarrollo de aplicaciones web Manuel Torres Gil [email protected] 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
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
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
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
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
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
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
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
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).
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 (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
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 ------------------------------------------------------------------------------------------
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.
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
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
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
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,
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
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
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
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
Diseña tu propia web
Diseña tu propia web Diseña tu propia web Juan Manuel Escudero García [email protected] 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
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: