5º Unidad Didáctica. Hojas de estilo en Cascada CSS. Eduard Lara
|
|
|
- Esteban Carrasco Ferreyra
- hace 8 años
- Vistas:
Transcripción
1 5º Unidad Didáctica Hojas de estilo en Cascada CSS Eduard Lara 1
2 Í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
3 5.1 EL ORIGEN DE CSS En HTML se unen contenidos e instrucciones de formato en un único documento. Los desarrolladores se quejaban de lo complejo que resultaba tener ambas cosas mezcladas. W3C decidió crear un sistema para separar las instrucciones de formato del resto de elementos. En la versión HTML 4, se define el lenguaje CSS (Cascading Style Sheets), para dotar de formato a los elementos HTML. 3
4 5.1 EL ORIGEN DE CSS Gran utilidad de CSS: Permite aplicar un formato homogéneo a todo un sitio web. Permite modificar el estilo de numerosos elementos, cambiando unas pocas líneas de código. Actualmente CSS ofrece muchas mas posibilidades que las que jamás tuvo HTML: cambiar el tamaño, grosor, y altura de línea, colores de fondo y primer plano, espaciado y alineamiento del texto, decidir subrayado, tachado o parpadeante, convertirlo en mayúsculas, o minúsculas, etc. 4
5 5.2 LAS HOJAS DE ESTILO Y SUS CLASES CSS sirve para dotar de estilo a los elementos que componen una página web. Una hoja de estilo es un conjunto de reglas de estilo que definen el formato de los elementos de la página html, a la que se encuentra «vinculada». Mediante la regla de estilo se identifica el elemento HTML que se desea seleccionar y la apariencia que se le quiere dar (por ejemplo, que todas las fotos lleven un marco de color rojo). 5
6 5.2 LAS HOJAS DE ESTILO Y SUS CLASES Existen 3 maneras de dotar de estilo CSS a una página web: 1) Aplicar estilos de forma local. Se escribe el código CSS dentro de cada etiqueta HTML mediante el atributo STYLE. No es necesario poner el selector ya que se entiende que el elemento afectado es aquel en el que está ubicado el estilo. <p style="color:green;">hola</p> 6
7 5.2 LAS HOJAS DE ESTILO Y SUS CLASES 2) Hojas de estilo internas. Suelen usarse cuando se pretende aplicar el estilo sólo a la página donde se ubica. <head><style type="text/css > Codigo CSS </style></head> Se puede ubicar en cualquier parte de la página, pero suele hacerse dentro de la cabecera. Se pueden definir tantas hojas de estilo como se desee en un página. En caso de conflicto entre ellas se aplica la norma de la precedencia. 7
8 5.2 LAS HOJAS DE ESTILO Y SUS CLASES 3) Hojas de estilo externas. Dan aspecto común a varias páginas de un portal. Los estilos se definen en una hoja de estilo externa, y todas las páginas del portal la consultan. Mediante la etiqueta link se vincula una hoja de estilos a una página web en su cabecera, : <link rel="stylesheet" type="text/css" href="url.css"> url.css es el nombre de la hoja con su correspondiente URL si fuera necesario. 8
9 5.2 LAS HOJAS DE ESTILO Y SUS CLASES Ejemplo: Página web vinculada a una hoja de estilo externa. <html> <head> <title> Ejemplo </title> <link rel="stylesheet type="text/css" href="st.css > </head> <body> Contenido de la página </body> </html> Para que funcione este ejemplo, la hoja de estilo y la página HTML deben estar en la misma carpeta. 9
10 5.2 PRÁCTICA 1) Acudir a donde existe un listado actualizado de los programas válidos para tratar CSS (editores, conversores). 2) Visualizar los siguientes programas específicos para el tratamiento CSS: -Style Master -TopStyle -CSSED Permiten obtener una vista previa del estilo creado, o trabajar sobre plantillas predefinidas 10
11 5.2 PRÁCTICA 3) Validaciones código CSS Acudir a una página oficial de W3C que permite comprobar si el código que se ha generado es correcto o no. 4) Consultar la página oficial de W3C, y realizar un resumen acerca de las últimas noticias sobre los navegadores web y su compatibilidad con las especificaciones CSS. Qué navegadores aceptan más características de CSS? Opera, Firefox, IExplorer 11
12 5.3 LAS REGLAS DE ESTILO Una hoja de estilo se compone de una o varias reglas de estilo, que son las declaraciones de los formatos que son aplicados a los elementos html. Una regla de estilo tiene dos componentes: El selector, que selecciona el elemento sobre el que actuará la regla. La declaración que establece la propiedad y valor a aplicar sobre el elemento. Selector {propiedad1:valor1;} Selector {propiedad1:valor1;propiedad2:valor2;} 12
13 5.3 LAS REGLAS DE ESTILO El selector Determina los elementos sobre los que se aplica una regla de estilo: p {color:red;} Todos los elementos p de la página afectada por la regla, adquieren el color rojo. Pregunta: Y si sólo deseamos dar un estilo a unos determinados párrafos y no a todos? Selectores específicos: Identificador, clase, pseudo-clase y pseudo-elemento 13
14 5.3 LAS REGLAS DE ESTILO Selector identificador Los elementos html disponen de un atributo llamado identificador (id), el cual permite hacer una selección más ajustada de los elementos: Documento html <p id= despedida > La regla de estilo necesaria para hacer referencia al párrafo despedida, sería: Hoja de estilo p#despedida { font-size:14px;} Sólo el párrafo despedida tendrá un tamaño de 14 píxeles. 14
15 5.3 LAS REGLAS DE ESTILO Selector de Clase El atributo class agrupa los elementos por clases o grupos, que son seleccionados desde CSS. <img src= casa.jpg class= fotos > Un elemento puede pertenecer a varias clases a la vez. Se especifican separadas por espacios. <img src= casa.jpg class= fotos casas > Acceso al estilo de la clase, mediante. : img.fotos {border-width: 1px;} img clase fotos.casas {border-width: 3px;} clase casas 15
16 5.4 CRITERIOS DE SELECCIÓN Existen cinco tipos de selectores o criterios de selección para elegir los elementos de una regla. 1.Selector por tipo o nombre de elemento. 2.Selector por contexto del elemento. 3.Selector por clase o identificador del elemento. 4.Selector por la pseudo-clase del elemento. 5.Selector por los atributos del elemento. 6.Selector por pseudo-elementos El carácter asterisco (*) es un selector universal. Las propiedades que se encuentren especificadas bajo éste afectarán a todos los elementos. 16
17 5.4 CRITERIOS DE SELECCIÓN 1.Selector por tipo o nombre de elemento Es el criterio más general y sencillo por su sintaxis. Aplica un determinado formato a todos los elementos seleccionados sin distinción de clases, identificadores, contextos, etcétera. p { color:red;} Suelen aplicarse más los otros métodos, ya que son más específicos, y permiten afinar más. 17
18 5.4 CRITERIOS DE SELECCIÓN 2.Selector por el contexto del elemento a. Ascendente. Es el elemento que contiene al que se desea formatear. Puede haber más de un elemento entre uno y otro. Ascendente Sintaxis CSS: div p {color:#00ff00;} Ascendente Espacio en blanco Etiqueta a formatear <div> <h1><p> Este es un parrafo</p></h1> </div> Etiqueta a formatear Se formatea de color rojo los elementos p que estén dentro de div 18
19 5.4 CRITERIOS DE SELECCIÓN 2.Selector por el contexto del elemento b. Padre. Es el elemento que contiene de forma directa al que se desea formatear, que es el hijo. Sintaxis CSS: div > p {color:#00ff00;} Padre Hijo Símbolo Mayor que <div> Padre <p> Este es un parrafo</p> </div> Etiqueta hija Se formatea de color rojo todos párrafos hijos de div div p:first-child {color:#00ff00;} Sólo el 1º párrafo hijo 19
20 5.4 CRITERIOS DE SELECCIÓN 2.Selector por el contexto del elemento c. Hermano. Es el elemento que precede directamente (adyacente), dentro del mismo elemento padre, al que se desea formatear. Para seleccionar elementos en función del hermano, se utiliza el símbolo de la suma (+): hermano precedente hermano seleccionado div + p { color:#00ff00;} Se trata de cualquier elemento p inmediatamente después del elemento del tipo div 20
21 5.4 CRITERIOS DE SELECCIÓN 3.Selector por clase o identificador Forma de selección más utilizada. Permite afinar más que la selección por nombre de elemento. Selector de identificador p#dos { color:#00ff00;} nombre elemento+ # +id Selector de clase p.uno {text-align:center;} nombre elemento+. +clase Si se omite el nombre del elemento, se seleccionan todos los que pertenezcan a dicha clase o id..primera { text-align:left;} Afecta todos elementos de la clase primera 21
22 5.4 CRITERIOS DE SELECCIÓN 4.Selector por la pseudo-clase del elemento Las pseudo-clases clasifican a los elementos basándose en su estado, es decir, en función de los eventos que les hayan ocurrido: cursor del ratón encima, etc. si se han visitado, si el usuario está pasando por encima con el cursor del ratón, etc. Los elementos más utilizados son los referentes a los vínculos (etiqueta a) y al primer hijo (:first-child). a:link { color:red;} Afecta vínculos no visitados a:visited{ color:blue;} Afecta vínculos ya visitados 22
23 :link Pseudoclase :visited :hover :active :focus. 5.4 CRITERIOS DE SELECCIÓN Significado Vínculos que todavía no se ha visitado. Vínculos ya visitados. Vínculos sobre los que está el cursor del ratón. Dejará de estarlo cuando el ratón salga de esa posición. Vínculos sobre los que se está haciendo clic. Vínculos que están siendo seleccionados mediante el teclado. 23
24 5.4 CRITERIOS DE SELECCIÓN 5.Selector por los atributos del elemento Este tipo de selectores se utilizan cuando se desea aplicar formato a aquellos elementos que tienen un determinado atributo o un valor de atributo dado. La forma de declararlo es elemento[ atributo]. td[ fgcolor] { color:#003333;} Selecciona todas las celdas de una tabla (td) que tengan el atributo fgcolor. 24
25 5.4 CRITERIOS DE SELECCIÓN 6.Selector de pseudo-elementos Son partes de elementos de una página a los que HTML no otorga identidad propia y, por tanto, no pueden ser seleccionados por dicho lenguaje. Sin embargo, las reglas de estilo CCS sí que permiten identificarlos y formatearlos de manera distinta al resto de elementos (por ejemplo, la primera letra o la primera línea de cada párrafo) p:first-letter { color:red;} Se indica de color rojo, la primera letra de cada párrafo. 25
26 5.4 CRITERIOS DE SELECCIÓN Pseudoelemento :first-letter :first-line :before :after Significado El primer carácter del elemento al que pertenece. La primera línea del elemento al que pertenece. El elemento anterior El elemento posterior. 26
27 5.4 CRITERIOS DE SELECCIÓN Agrupación de selectores Se aplica cuando se desea las mismas reglas de estilo a más de un elemento. Para ello, se indican los selectores separados por una coma (,). td, p { color:#00ff00;} Se formatean los elementos td y p con las mismas propiedades 27
28 5.4 CRITERIOS DE SELECCIÓN Combinación de selectores Los criterios de selección anteriores, pueden combinarse para obtener así una selección de elementos más fina. div p.portada[ id] { color:#00ff00;} Se seleccionan los elementos p que estén dentro de elementos div, que pertenezcan a la clase portada y que tengan el atributo id. 28
29 5.4 CRITERIOS DE SELECCIÓN Indicaciones para combinar selectores 1.Definir el contexto del elemento deseado. 2.Definir el nombre del elemento que se quiere seleccionar o utilizar el selector universal (*). 3.Especificar la clase o id del elemento deseado. 4.Definir los atributos que puedan estar presentes. Clase o id div p.portada[ id] { color:#00ff00;} Contexto Elemento Atributo Regla CSS 29
30 5.4 CRITERIOS DE SELECCIÓN <HTML><HEAD> <TITLE>Esta es mi primera hoja de estilos</title> <STYLE TYPE="text/css"> P B{color:blue} LI B {color:red} </STYLE> </HEAD> <BODY> <P> Aquí aparece en <B> azul </B></P> <P>En cambio en la siguiente lista</p> <UL> <LI>Aparece en <B>rojo</B></LI> </UL> </BODY> </HTML> 30
31 5.4 CRITERIOS DE SELECCIÓN Comentarios en el código CSS Para añadir comentarios a las hojas de estilo, tanto internas como externas, se usan la misma forma del lenguaje C: /* Etiqueta inicio de comentario */ Etiqueta final de comentario /* Esta regla de estilo define la fuente de la clase prov*/.prov { font-size: 9px; color: #FFE2A8;/*Este color queda mejor que el #FF0044*/} 31
32 5.5 LAS PROPIEDADES Y SUS VALORES Selector {propiedad1:valor1;propiedad2:valor2;} Todas estas propiedades están divididas en 5 grandes grupos: Propiedades de texto Propiedades de las fuentes Propiedades de los colores y fondos Propiedades de márgenes y padding Propiedades de los bordes 32
33 Propiedades de texto 5.5 LAS PROPIEDADES Y SUS VALORES Son propiedades que afectan a la presentación visual de caracteres, espacios, palabras y párrafos. text-transform vertical-align text-align text-indent line-height text-decoration letter-spacing word-spacing uppercase lowercase capitalize none baseline sub super top text-top middle mottom text-bottom % left right center justify XX unidad %, (Por defecto su valor es 0) normal XX unidad % underline overline line-trough blink none normal XX unidad normal XX unidad 33
34 Propiedades de las fuentes 5.5 LAS PROPIEDADES Y SUS VALORES Con estas propiedades controlamos el estilo de una fuente, su tamaño, su familia, su grosor, etc. font-family font-style font-variant font-weight font-size Verdana Arial Helvetica Sans-Serif normal italic oblique normal small-caps lighter normal bold bolder XX units % larger smaller xx-small x-small medium large x-large xx-large 34
35 5.5 LAS PROPIEDADES Y SUS VALORES Propiedades de los colores y fondos Son las propiedades que permiten fijar el color del primer plano y fondo de un elemento. color background-color background-image background-repeat backgroundattachment background-position background Valor HEX RGB(R%,G%,B%) name; transparent Nombre Color Valor HEX Rgb (R%,g%,B%) Rgb(R, G,B) none url(dirección) repeat repeat-x repeat-y no-repeat scroll fixed XX unidad % top center bottom left right transparent color url repeat scroll position 35
36 5.5 LAS PROPIEDADES Y SUS VALORES margin margin-top margin-right margin-bottom margin-left padding padding-top padding-right padding-bottom padding-left CAJAS border border-top border-bottom border-right border-left border-color border-top-color border-right-color border-bottom-color border-left-color border-style border-top-style border-right-style border-bottom-style border-left-style border-width border-top-width border-right-width border-bottom-width border-left-width 36
37 5.5 LAS PROPIEDADES Y SUS VALORES POSICIONAMIENTO Display Position Top/Right/Bottom/Left Float Clear z-index direction unicode-bidi Overflow Clip Visibility DIMENSIONES Width min-width max-width Height min-height max-height line-height vertical-align PAGINACIÓN Size Marks page-break-before page-break-after page-break-inside page orphans widows 37
38 5.5 LAS PROPIEDADES Y SUS VALORES LISTAS list-style list-style-type list-style-image list-style-position TABLAS caption-side table-layout Border-collapse border-spacing empty-cells speak-header INTERFAZ cursor outline outline-width outline-style outline-color 38
39 ACCESO RÁPIDO P { font-style: italic; font-variant: small-caps; font-weight: bold; font-size:1em; font-height:140%; font-family: Arial, sans-serif;} P { font: italic small-caps bold 1em/140% Arial, sans-serif;} 39
40 5.6 PRECEDENCIA Por qué el nombre de hojas de estilo en cascada? Porque se usan unas sobre otras, sumando reglas y son aplicadas todas a un mismo documento. Si hay dos hojas que proponen distintas reglas para un mismo elemento Cuál de ellas debe ser interpretada? Este conflicto se resuelve en CSS según el «principio de la cascada». Éste decidirá cómo resolver conflictos generados por problemas de herencia, especificidad o ubicación. 40
41 5.6 PRECEDENCIA Herencia Las etiquetas de un documento HTML están organizadas de manera que unas engloban a otras. Esta permite definir una relación padre-hijo. Hay estilos CSS definidos para etiquetas padres que serán heredados por las etiquetas hijas. body {font-family:arial; color:blue;} Todo el documento estará con una fuente Arial de color azul. 41
42 5.6 PRECEDENCIA Herencia El mecanismo de herencia de estilos siempre funciona a menos que un elemento hijo tenga definido su propio estilo. h1 {color:#0000ff; border-color:#ff0000;} Cualquier elemento dentro de h1 será también azul dado que la propiedad color se hereda; El borde rojo no se hereda. Para forzar la herencia, se le asigna el valor inherit a la propiedad que queremos que herede del padre: {border:inherit;} 42
43 5.6 PRECEDENCIA Especificidad Cuando dos reglas afectan al mismo elemento, prevalece la más específica. h1 {color:#0000ff;} h1.inicial {color:#ff0000;} Más específica Preferencia selectores Selector id > selector class > selector simple (sin atributos) > Regla heredada Las reglas heredadas son consideradas como las más generales de todas. 43
44 5.6 PRECEDENCIA Ubicación Entre dos reglas con idéntica especificidad, la última será la que se aplique. Reglas locales > Reglas internas > Reglas externas + Prioridad Las reglas aplicadas localmente se consideran que aparecen después que las definidas en una hoja de estilo interna y, por lo tanto, tienen más relevancia que éstas. 44
45 5.7 PRESENTACIÓN DE ESTILOS. LAS CAPAS El uso de capas (generadas con etiquetas div), permite mejorar la estructura de una página web. Son divisiones o secciones lógicas del documento, utilizadas para definir estilos de una forma independiente del resto de elementos. Div Divide el documento en grandes secciones Span Especifica pequeñas porciones del texto 45
46 5.7 PRESENTACIÓN DE ESTILOS. LAS CAPAS La capa no es una simple división, sino un cuadro. Se compone de un área de contenido, el espacio alrededor de esa área (padding o relleno), el lado exterior del relleno (border o borde) y el espacio invisible alrededor del borde (margin o margen). Área de contenido margin padding border 46
47 5.7 PRESENTACIÓN DE ESTILOS. LAS CAPAS Las capas permiten identificar los distintos elementos y colocarlos siguiendo un orden lógico. A través de las propiedades adecuadas, se puede determinar: - La posición de la capa respecto su elemento padre o a la ventana del navegador: Si las capas se solapan, es necesario especificar el orden en que lo hacen. - La apariencia de la capa: Su relleno, borde, márgenes, tamaño, alineación o color. 47
Yusef Hassan Montero Francisco Jesús Martín Fernández. Introducción a DOM. Todos los derechos reservados www.nosolousabilidad.com
Yusef Hassan Montero Francisco Jesús Martín Fernández Introducción a DOM Todos los derechos reservados www.nosolousabilidad.com INTRODUCCIÓN DOM, Document Object Model o Modelo de Objetos de Documento,
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 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
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
CSS1. manual de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
CSS1 manual de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre CSS1 disponible en: http://www.w3.org/tr/1999/rec-css1-19990111 Manual de referencia de CSS1-
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
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
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
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
Consejos para el correcto armado de HTML para Emails
Consejos para el correcto armado de HTML para Emails Consejos para el correcto armado de HTML para Emails Cuando desarrollas una campaña de Email Marketing, es fundamental que tu mensaje sea recibido correctamente.
CSS, hojas de estilos
CSS, hojas de estilos 1. Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue concebido para otros usos (científicos sobre todo), distinto
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
1. Temario Curso Web Design 2014
1. Temario Curso Web Design 2014 FIREWORKS Diseño profesional de interfaces web Nociones generales para qué sirve?, diferencia con Photoshop Espacio de trabajo - Barras de menú, herramientas y paletas
Tema: Estilos CSS. Combinadores. Posicionamiento.
Diseño Digital V. Guía 5 1 Tema: Estilos CSS. Combinadores. Posicionamiento. Objetivos Contenidos Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V A través del desarrollo
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
HTML El idioma de Internet (Parte 1)
HTML El idioma de Internet (Parte 1) El lenguaje HTML Lenguaje de marcas de hipertexto Sintaxis extremadamente sencilla Documentos en archivos de texto simples Texto sin formato Diferenciación de los distintos
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
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
Diseño y Programación de Páginas Web
Diseño y Programación de Páginas Web 1.2. Hojas de Estilo CSS Juan Ruiz de Miras (demiras@ujaen.es) Departamento de Informática Universidad de Jaén Contenidos 1. Introducción 2. Sintaxis de las hojas de
Programa por Clase. 8. CSS3 9. Ejercicio Práctico 10. Examen
Curso CSS Clase 5 Programa por Clase 1. Repaso HTML. Introducción. Reglas CSS internas. 2. Etiquetas básicas de CSS (tipografía, subrayado, etc.) 3. Archivos CSS externos. Colores. Imágenes. 4. Modelo
Creación y uso de Hojas de Estilo
Creación y uso de Hojas de Estilo Definición de Hojas de Estilo con la etiqueta Definición de Hojas de Estilo en Ficheros Externos Definición de Clases de Estilo Definición de Estilos Individuales
CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3
ver. 3 Diseño de cajas de esquinas redondeadas y ancho fijo para Diseño WEB _TICO 1º Bachillerato página 1/10 CAJA DE ESQUINAS REDONDEADAS Y ANCHO FIJO ver. 3...1 Procedimiento 1: Diseño con Gimp de una
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
MAQUETACIÓN CON CSS. Elementos principales. Diseño fijo, líquido, elástico
MAQUETACIÓN CON CSS Elementos principales Para maquetar una página web y crear su estructura visual (layout) hay que dividir la página en bloques. La estructura de una página web tendrá una serie de áreas
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
Creación del sitio web del Laboratorio F1
Creación del sitio web del Laboratorio F1 Jonatan Grandmontagne García Universidad de León, España jon@usuarios.retecal.es Este documento muestra como se ha diseñado el sitio web donde se expone el proyecto
5.- Crear páginas web con Nvu
5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas
CSS: Cascading Style Sheets
Diseño de Sitios Web (T.U.W.) Hojas de Estilo Qué son las hojas de estilo? Una hoja de estilo es un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. Permiten
1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES
Diseño WeB de ancho fijo con 2 columnas flotantes _TIN 1º Bachillerato página 1/5 1 DISEÑO WEB de ANCHO FIJO con 2 COLUMNAS FLOTANTES..1 1.1 Diseños de ancho fijo, elástico y líquido.1 1.2 Diseño de ancho
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 10: Diseño web con estilos.
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 10: Diseño web con estilos. Instituto Nacional de Tecnologías Educativas y de Formación del profesorado 2012 Diseño web con estilos
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. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
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
lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos definidos con HTML y XHTML
: Introducción En la primera parte del curso (XHTML) se comentó en numerosas ocasiones que el aspecto de la página podía modificarse mediante las hojas de estilo. Qué es el? es un lenguaje de hojas de
Joomla! 2.5 Cree y administre sus sitios Web
Capítulo 1: Instalación de Joomla! 1. Introducción 11 2. Qué es un CMS? 11 3. HTML y XHTML 11 4. Diferenciar el contenido de la presentación 12 5. PHP y Apache 12 6. MySQL 13 7. Sitio estático o sitio
Aplicaciones Telemáticas (2014-15)
Aplicaciones Telemáticas (2014-15) Grado en Ingeniería Telemática (URJC) Jesús M. González Barahona, Gregorio Robles Martínez http://cursoweb.github.io GSyC, Universidad Rey Juan Carlos 23 de mayo de 2015
MANUAL BÁSICO CSS. Antes de empezar con CSS deberías tener por lo menos unos conocimientos básicos de HTML.
MANUAL BÁSICO CSS Presentación Bienvenido a este tutorial de CSS, el lenguaje de hojas de estilo usado en páginas web. Este tutorial pretende hacer una introducción a este lenguaje, métodos para separar
CSS, hojas de estilos
CSS, hojas de estilos Introducción a las CSS El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto
Tecnologías Web para la presentación CSS
Tecnologías Web para la presentación CSS Aplicaciones Web/Sistemas Web Juan Pavón Mestras Dep. Ingeniería del Software e Inteligencia Artificial Facultad de Informática Universidad Complutense Madrid Material
Curso de Diseño web. Juan Carlos Hernández Pérez juancarhdezperez@gmail.com
Curso de Diseño web Juan Carlos Hernández Pérez juancarhdezperez@gmail.com 1 Tema 1 Introducción al lenguaje HTML 2 Introducción a HTML (I/II) HTML es un lenguaje para publicar textos en Web HTML te permite
MANUAL TECNICO DE EMAILING BIZBOX
MANUAL TECNICO DE EMAILING BIZBOX 1.- Verificar Registro SPF El dominio desde el que envía su coreo no puede ser cualquier dominio, debe ser un dominio aprobado y verificado para enviar correos, estos
HTML. para E-mail. Guía de Buenas prácticas. Less ys More Ludwig Mies van der Rohe
HTML para E-mail Guía de Buenas prácticas Less ys More Ludwig Mies van der Rohe Ejemplo de un e-mail sin buenas prácticas Textos degradados Los textos están sobre un fondo degradado Newsletter Septiembre
Widget de catálogos. Manual de Usuario. Versión 2. Madrid 13/08/2015
Widget de catálogos Manual de Usuario Madrid 13/08/2015 Versión 2 Contenidos 1 Introducción... 3 2 Alta de conjuntos de datos en datos.gob.es... 7 3 Descripción del widget... 12 3.1 Widget, versión sencilla...
Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 8. Hojas de estilo, plantillas y bibliotecas en Dreamweaver En esta práctica guiada vamos a ver
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación. Módulo 9: Hojas de estilo.
Ministerio de Educación, Cultura y Deporte. HTLM5 en la educación Módulo 9: Hojas de estilo. Instituto Nacional de Tecnologías Educativas y de Formación del Profesorado 2012 Hojas de estilo Atrás quedaron
HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es
HTML-5 / DIVS + IFRAMES Prof: Moisés Mañas Moimacar@esc.upv.es Básico Define una división o sección en un documento Atributos: align= left/right/center/justify Alineación de la división
ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea.
ANEXO. Documento de pautas de comunicación y diseño para el desarrollo de trámites en linea. Ministerio de Gobierno y Reforma del Estado Secretaría de Tecnologías para la Gestión Secretaría de Comunicación
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA
DESCRIPCIÓN ESPECÍFICA NÚCLEO: COMERCIO Y SERVICIOS SUBSECTOR: INFORMÁTICA Nombre del Módulo: ELABORACIÓN DE HOJAS DE ESTILO Código: CSTI008 total: Horas Objetivo General: Construir Hojas de Estilos para
PROGRAMA DE DISEÑO WEB
Objetivo PROGRAMA DE DISEÑO WEB El objetivo de esta capacitación es que el alumno adquiera los conocimientos necesarios para poder Diseñar y Maquetar una Página Web optimizando al máximo la escritura de
Wenceslao Zavala. www.producciondigitalup.com.ar
Wenceslao Zavala www.producciondigitalup.com.ar www.producciondigitalup.com.ar Transferencia de Archivos vía FTP Para esto se necesita: Dirección FTP: producciondigitalup.com.ar Usuario: produccionup Contraseña:
CSS nivel 1 Autor: Joaquin Bravo Montero
CSS nivel 1 Autor: Joaquin Bravo Montero Introducción Sintaxis CSS o Definición en la propia etiqueta html o Novedades Colocando las hojas de estilo o Dentro del documento HTML o En un fichero.css Propagación
Kompozer: Crear una hoja de estilos
Kompozer: Crear una hoja de estilos Las hojas de estilo en cascada (en inglés, Cascading Style Sheets), son archivos con extensión.css que se utilizan para dar estilo a nuestros documentos html, separando
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers
Barra de navegación vertical con Botones rollovers_tic 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2 1.3
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)
MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1
MICROSOFT WORD 2007 AVANZADO Unidad Didáctica Nº 1 I Tablas A) Explicación conceptual y de uso de una tabla B) Creación de tablas C) Trabajo con tablas D) Formato de las tablas Ejercicio de Repaso Portal
Introducción...1. Capítulo 1: Instalación de Altova XML Suite...3. 1. Objetivos del capítulo...3. 2. Instalación de Altova XML Suite...
Introducción...1 Capítulo 1: Instalación de Altova XML Suite...3 1. Objetivos del capítulo...3 2. Instalación de Altova XML Suite...3 2.1. Requerimientos previos a la instalación...3 2.2. Procedimiento
Tema: Maquetación Web y CSS
Diseño Digital V. Guía 4 1 Tema: Maquetación Web y CSS Facultad: Ciencias y Humanidades Escuela: Diseño Gráfico Asignatura: Diseño Digital V Objetivos Contenidos A través del desarrollo de la guía el estudiante
IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM TRANSICIONES. Bernardo Chenlo
IFCD0110 CONFECCIÓN Y PUBLICACIÓN DE PÁGINAS WEB. ETSI Minas y Energía - UPM 1 TRANSICIONES Bernardo Chenlo 2 ANIMANDO CON CSS3 Cómo animar con 3 líneas de CSS en lugar de 60 de JS Transiciones CSS3 Desarrolladas
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:
Maquetación web con 960 Grid System y Drupal
Maquetación web con 960 Grid System y Drupal Agosto 2009 1. 960 Grid System 960 Grid System es un framework CSS, que no es más que una declaración de estilos que dispone las clases necesarias para implementar
CURSO DE CSS Índice de contenido
Índice de contenido 1.- INTRODUCCION...3 1.1.- Definición...3 1.2.- Versiones...3 1.3.- Test...4 2.- SINTAXIS CSS...5 2.1.- Reglas y su jerarquía...5 2.2.- Comentarios...6 2.3.- Uso CSS...6 2.4.- Test...8
Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.
Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números
7. Definición de un estilo en función del contexto.
7. Definición de un estilo en función del contexto. Este otro recurso que provee las CSS es la definición de un estilo para una marca HTML siempre y cuando la misma esté contenida por otra marca determinada.
Gestor de contenidos de la plataforma web
Gestor de contenidos de la plataforma web 2011 1 de 24 Funcionamiento del gestor de contenidos Acceso Para acceder al la extranet es necesario ir a la dirección web: http://www.tudominio.com/adm e introducir
CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B)
APRENDERAPROGRAMAR.COM CAPAS O CONTENEDORES EN HTML. ETIQUETAS DIV Y SPAN. EJEMPLOS. MAQUETAR O DAR ESTRUCTURA A LAS PÁGINAS WEB. (CU00726B) Sección: Cursos Categoría: Tutorial básico del programador web:
Operación Microsoft Access 97
Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe
Diseño de Páginas Web 2011
Diseño de Páginas Web 2011 PRESENTACIÓN Proporciona ejemplos de páginas web reales, disponibles en Internet; se presenta el lenguaje HTML y las hojas de estilo en cascada (CSS), enfatizando la utilización
Introducción. Qué es CSS? Historia de las CSS
Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación.
Informes. 3. Elija la opción Nuevo (en la parte superior de la ventana) 4. Elija Autoinformes: en tablas y luego la tabla o consulta que se usará.
Informes Se pueden imprimir fácilmente los registros en una tabla o el resultado de un filtro simplemente usando el botón de Impresora de la barra de herramientas, o la opción Archivo / Imprimir. Sin embargo,
Estándares Técnicos para la Creación, Mantenimiento y Operación de sitios Web del Gobierno del Estado.
Estándares Técnicos para la Creación, Mantenimiento y Operación de sitios Web del Gobierno del Estado. ABRIL 2012 CONTENIDO 1 Introducción 2 Estructura a. Diagrama de la Estructura de la Página Principal
Capítulo 8. Usar un estilo predeterminado según el navegador. Como resolverlo.
Índice.. Capítulo 1. Introducción. Capítulo 2. Sintaxis y unidades de medida. Sintaxis. Unidades de medida CSS. URLs. Capítulo 3. Propieda des de hojas de estilo. Tabla de propiedades. Capítulo 4. Incorporación
HIPERVÍNCULOS. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen
HIPERVÍNCULOS Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una
UF1303 Elaboración de hojas de estilo
UF1303 Elaboración de hojas de estilo TEMA 1. Hojas de estilo en la construcción de páginas web TEMA 2. Diseño, ubicación y optimización de los contenidos de una página web OBJETIVOS: - Describir las características
Este documento es una copia traducida de la Recomendación de W3C, sobre las Hojas de Estilo en Cascada, Nivel 2 Revisión 1 (CSS2.1).
Hojas de Estilo en Cascada, nivel 2 revisión 1 Especificación CSS2.1 Recomendación Del 25 De Febrero De 2004 Del Candidato de W3C Este documento es una copia traducida de la Recomendación de W3C, sobre
Diseño de páginas web
Diseño de páginas web Capas. Objetos en movimiento Ricardo Esteban Alonso Creación de capas en la página web Las capas son rectángulos transparentes, donde podemos insertar datos y hacer que éstos aparezcan
Guía para creación de temas para editor de EditandSend
Guía para creación de temas para editor de EditandSend En este documento se describen las acciones que debe realizar el diseñador/maquetador para personalizar un tema y poder ser utilizado en el EDIT.
Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design
Desarrollo de sitios Web con HTML5, CSS3, jquery y Responsive Web Design Nivel básico. Duración: 20 horas. Lección 1. Creando tu primera página Web en HTML5. Qué es HTML5 y CSS3? Términos comunes utilizados
Operación de Microsoft Excel
Representación gráfica de datos Generalidades Excel puede crear gráficos a partir de datos previamente seleccionados en una hoja de cálculo. El usuario puede incrustar un gráfico en una hoja de cálculo,
Mi primera web... Pues bien una vez que tengamos el documento abierto, podemos empezar a trabajar de dos formas:
Mi primera web... El ejemplo que utilizaremos para este tutorial, es la misma página web de los tutoriales. Puede descargar los archivos desde aquí. Para la creación de las imagenes he utilizado Fireworks
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn
MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar
PRIMEROS PASOS PARA CREAR SU TIENDA ON LINE
PRIMEROS PASOS PARA CREAR SU TIENDA ON LINE 1. Lo básico. 2. Manos a la obra. 1. LO BÁSICO. A. LA IDEA. Parece que todo el mundo tiene una tienda on line, y a usted le da la impresión de que se queda atrás.
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo
Curso PHP Módulo 1 R-Luis
Lenguaje PHP Introducción Archivos HTML y PHP: Crear un archivo php es tan sencillo como cambiarle la extensión a un archivo html, por ejemplo podemos pasar de index.html a index.php sin ningún inconveniente.
Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1
Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1 INTRODUCCIÓN A CSS. Las reglas de CSS son hojas de estilo que ofrecen una mejora visual a los documentos Web y que pueden ser
Conciliación bancaria en CheqPAQ Cargado de estado de cuenta
Conciliación bancaria en CheqPAQ Cargado de estado de cuenta Introducción Con la finalidad de mantenerte informado respecto a todos los cambios y mejoras de los productos de CONTPAQ i, ponemos a tu disposición
Capítulo 1 Documentos HTML5
Capítulo 1 Documentos HTML5 1.1 Componentes básicos HTML5 provee básicamente tres características: estructura, estilo y funcionalidad. Nunca fue declarado oficialmente pero, incluso cuando algunas APIs
Manual del Usuario. Sistema de Help Desk
Manual del Usuario Sistema de Help Desk Objetivo del Manual El siguiente manual tiene como objetivo proveer la información necesaria para la correcta utilización del sistema Help Desk. Describe los procedimientos
CASO PRÁCTICO. ANÁLISIS DE DATOS EN TABLAS DINÁMICAS
CASO PRÁCTICO. ANÁLISIS DE DATOS EN TABLAS DINÁMICAS Nuestra empresa es una pequeña editorial que maneja habitualmente su lista de ventas en una hoja de cálculo y desea poder realizar un análisis de sus
3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.
3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc
TEMA 5. INTRODUCCIÓN AL MANEJO DE ORIGIN 6.1
TEMA 5. INTRODUCCIÓN AL MANEJO DE ORIGIN 6.1!"# 1. Introducción En muchos aspectos, el Origin es muy similar a Excel. Y lo es, más que en su apariencia, en la versatilidad y en las funciones que permite
Laboratorio 6. Creación de sitios Web - Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2015 GUIA DE LABORATORIO Nº 3 Nombre de la practica: Aplicación de Hojas de estilo Lugar de ejecución: Laboratorio
La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.
Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
Proceso de Compra de Avisos Clasificados desde Internet
Proceso de Compra de Avisos Clasificados desde Internet Desde mediados de 2010 existe la posibilidad de comprar sus avisos clasificados a través de Internet para los productos impresos del grupo de Vanguardia: