HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
|
|
|
- María José Ponce Soriano
- hace 7 años
- Vistas:
Transcripción
1 HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada ( son: <link rel="stylesheet" type="text/css" href="/pub/css/estilo2/_global/public.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/pub/css/estilo2/_indice/public.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/pub/css/estilo2/eventos/public.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/pub/css/estilo2/menus/public.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/pub/css/estilo2/noticias/public.css" media="screen" /> <link rel="stylesheet" type="text/css" href="/pub/css/estilo2/_global/print.css" media="print" /> LOGOTIPO Para cambiar el posicionamiento del logotipo hay que abrir la hoja de estilo /pub/css/estilo2/_global/public.css y posicionarse en el selector #global-cabecera.logo. Vemos los siguientes atributos: float:left La imagen se posiciona a la izquierda de la página. height:0px No tiene altura definida, se entiende que imperará la altura de la imagen. width:100px Esta capa tiene un ancho de 100 píxeles, sólo se visualizarán correctamente aquellas imágenes cuya anchura sea inferior a esta medida. padding:0px 0px 0px 15px Indica que el ancho del relleno izquierdo es de 15 píxeles margin:10px 0px 0px 0px Indica que el ancho del margen superior es de 10 píxeles. La imagen del logotipo no se puede modificar desde la hoja de estilo, sino que debe incluirse en el archivo de configuración del portal. ETIQUETA <BODY> Para modificar los atributos de la etiqueta <body> hay que abrir dos archivos: pub/css/estilo2/_global/public.css Hay que posicionarse en la clase body y veremos los siguientes atributos de estilo: text-align: center El texto del portal deberá ir centrado margin: 0 no hay espacios en los márgenes background: #F2F2F2 el color de fondo de la web será #F2F2F2 pub/css/estilo2/_global/print.css Hay que posicionarse en la clase body y veremos los siguientes atributos: font: 12px "Trebuchet MS", Arial, Helvetica, sans-serif La fuente tendrá un tamaño de 12 píxeles; el tipo de fuente por defecto será una trebuchet MS. text-align: left El texto estará alineado a la izquierda width:100% Tendrá una anchura del 100%. Página 1 de 12
2 MENÚ SUPERIOR Esta capa está referenciada desde #global-path de la hoja de estilo /pub/css/estilo2/_global/public.css. Los atributos de este selector son: float:left La capa se posiciona a la izquierda margin:10px 0px 0px 0px tiene un margen superior de 10 píxeles, el resto a cero. padding:15px 0px 8px 10px tiene los siguientes espacios de relleno: superior, 15 píxeles; derecho, 0 píxeles; inferior, 8 píxeles e izquierdo, 10 píxeles. font-size:12px La fuente tiene un tamaño de 12 píxeles width:762px La anchura de la capa es de 762 píxeles. background:#d1513e el color de fondo es #D1513E. color:# el color del texto es # Los enlaces del menú están afectados por los siguientes estilos:.enlace-path color:#ffffff El color de fuente es el blanco. #global-path.padding padding-left:20px El espacio de relleno izquierdo mide 20 píxeles #global-path a color:#ffffff color de fuente del link es blanco text-decoration:none no tiene subrayado #global-path a:hover text-decoration: underline Al posicionarse el ratón sobre el link, éste queda subrayado..enlace-alerta: Se utiliza para el ítem Acceso extranet. Tiene los siguientes atributos: color:#f9fdb6 El color de la fuente es #F9FDB6 text-decoration:none No tiene ni subrayado ni tachado. BANNER Para incluir el banner entre el menú superior y el menú central hay que abrir el archivo /pub/css/estilo2/_indice/public.css y posicionarnos en los siguientes selectores: Página 2 de 12
3 #home-imagen: float: left el banner se posiciona a la izquierda height: 97px Hay una altura de 97 píxeles width: 576px La anchura es de 576 píxeles. padding-bottom: 1px Tiene un espacio de relleno inferior de 1 píxel de grosor margin: 1px El margen para los cuatro lados es de 1 píxel. MENÚ CENTRAL Los estilos del menú central se encuentran en /pub/css/estilo2/_indice/public.css y las capas utilizadas son estas: home-contenido-izquierda: width: 575px la anchura de la capa es de 575 píxeles float: left la capa se posiciona a la izquierda. Es la capa principal. Dentro de esta capa encontramos otra más: home-fondo: background: url(/modulos/_global/publico/interfaces/resto/img/fondo-contenidohome2.gif) repeat-x Para el menú se visualiza una imagen de fondo que se repetirá por todo la anchura del menú. Esta imagen es un fondo degradado con una anchura de 1 píxel y una altura de 296 píxeles. Dentro de esta capa se encuentra otras, una por cada elemento del menú, salvo la capa que hace referencia a Agenda. Página 3 de 12
4 QUIENES SOMOS El selector que da estilo a este elemento es: #home-col-1: float: left La capa se posiciona a la izquierda. width: 188px La anchura de la capa es de 188 píxeles margin-right: 5px Tiene un margen derecho de 5 píxeles margin-left: 0px No hay margen izquierdo margin-top: 0px No hay margen superior height:300px Dispone de una altura de 300 píxeles para mostrar todos los elementos del submenú. Para el estilo del ítem Quienes somos el selector es: #home-col-1 h2: font: bold 12px "Trebuchet MS",Arial, Helvetica, sans-serif La fuente primaria es una trebuchet MS, en negrita y con un tamaño de 12 píxeles. text-transform: uppercase El texto se visualiza en mayúsculas color: # FBF2F2 El color de la fuente es #FBF2F2 background: #D1513E El color de fondo de la capa es #D1513E border-bottom: 1px dotted #7D2727 Tiene un borde inferior discontinuo de color #7D2727 padding:10px Tiene un espacio de relleno de 10 píxeles. #home-col-1 ul: Este selector da estilo a los elementos que se listan en la sección Quienes Somos. Para ello se utiliza una etiqueta <ul> (unordened list o lista sin orden). Los atributos son: list-style:none Indica que para el listado no se muestre ningún estilo propios de las etiquetas <ul>. Esta opción no se debe modificar. margin: 0px Sin márgenes. padding: 15px 0px 0px 0px Hay un espacio de relleno superior de 15 píxeles, el resto a 0. #home-col-1 li: La etiqueta <ul> indica que se van a presentar los datos en forma de lista no ordenada. Cada elemento de esta lista necesita de la etiqueta <li> para mostrarlos. Los atributos son: padding: 0px 0px 0px 25px Hay un espacio de relleno izquierdo de 25 píxeles margin: 0px No hay márgenes. background: url(/modulos/_global/publico/interfaces/resto/img/vineta-3flecha.gif) 10px 7px no-repeat Para cada elemento de la lista se carga una imagen de entrada, cuya ruta se indica aquí, se le da un posicionamiento y se indica que no se repita. #home-col-1 a Este selector da estilo a todos aquellos elementos que sean enlaces y que estén dentro de la capa homecol-1. Los atributos son: color: #23385E El color del enlace es #23385E text-decoration: none No hay ningún tipo de decoración en el texto. #home-col-1 a:hover: Este selector da estilo a todos aquellos elementos que sean enlaces, que estén dentro de la capa homecol-1 y en el momento en que nos posicionemos sobre ellos. Los atributos son: text-decoration: underline Al posicionarnos sobre él quedará subrayado Página 4 de 12
5 color:# Color de fuente es el negro. QUÉ HACEMOS El selector que da estilo a este elemento es: #home-col-2: float: right La capa se posiciona a la derecha. width: 188px La anchura de la capa es de 188 píxeles margin-right: 0px No hay margen izquierdo margin-left: 0px No hay margen izquierdo margin-top: 0px No hay margen superior height:300px Dispone de una altura de 300 píxeles para mostrar todos los elementos del submenú. Para el estilo del ítem Qué hacemos el selector es: #home-col-2 h2: font: bold 12px "Trebuchet MS",Arial, Helvetica, sans-serif La fuente primaria es una trebuchet MS, en negrita y con un tamaño de 12 píxeles. text-transform: uppercase El texto se visualiza en mayúsculas color: # FBF2F2 El color de la fuente es #FBF2F2 background: #D1513E El color de fondo de la capa es #D1513E border-bottom: 1px dotted #7D2727 Tiene un borde inferior discontinuo de color #7D2727 padding:10px Tiene un espacio de relleno de 10 píxeles. #home-col-2 ul: Este selector da estilo a los elementos que se listan en la sección Qué hacemos. Para ello se utiliza una etiqueta <ul> (unordened list o lista sin orden). Los atributos son: list-style:none Indica que para el listado no se muestren ningún estilo propios de las etiquetas <ul>. Esta opción no se debe modificar. margin: 0px Sin márgenes. padding: 15px 0px 0px 0px Hay un espacio de relleno superior de 15 píxeles, el resto a 0. #home-col-2 li: La etiqueta <ul> indica que se van a presentar los datos en forma de lista no ordenada. Cada elemento de esta lista necesita de la etiqueta <li> para mostrarlos. Los atributos son: padding: 0px 0px 0px 20px Hay un espacio de relleno izquierdo de 20 píxeles margin: 0px 0px 0px 0px No hay márgenes. background: url(/modulos/_global/publico/interfaces/resto/img/vineta-3flecha.gif) 10px 7px no-repeat Para cada elemento de la lista se carga una imagen de entrada, cuya ruta se indica aquí, se le da un posicionamiento y se indica que no se repita. #home-col-2 a Este selector da estilo a todos aquellos elementos que sean enlaces y que estén dentro de la capa homecol-2. Los atributos son: color: #23385E El color del enlace es #23385E text-decoration: none No hay ningún tipo de decoración en el texto. #home-col-2 a:hover: Este selector da estilo a todos aquellos elementos que sean enlaces, que estén dentro de la capa homecol-2 y en el momento en que nos posicionemos sobre ellos. Los atributos son: text-decoration: underline Al posicionarnos sobre él quedará subrayado Página 5 de 12
6 color:# Color de fuente es el negro. NOTICIAS Y NOVEDADES El selector que da estilo a este elemento es: home-col-3: float: left La capa se posiciona a la derecha. width: 188px La anchura de la capa es de 188 píxeles margin-right: 5px Hay un margen de 5 píxeles en el lado derecho margin-top: 0px No hay margen superior Para el estilo del ítem Noticias y novedades el selector es: home-col-3 h2: font: bold 12px "Trebuchet MS",Arial, Helvetica, sans-serif La fuente primaria es una trebuchet MS, en negrita y con un tamaño de 12 píxeles. text-transform: uppercase El texto se visualiza en mayúsculas color: # FBF2F2 El color de la fuente es #FBF2F2 background: #D1513E El color de fondo de la capa es #D1513E border-bottom: 1px dotted #7D2727 Tiene un borde inferior discontinuo de color #7D2727 padding:10px Tiene un espacio de relleno de 10 píxeles. #home-col-3 ul: Este selector da estilo a los elementos que se listan en la sección Noticias y novedades. Para ello se utiliza una etiqueta <ul> (unordened list o lista sin orden). Los atributos son: list-style:none Indica que para el listado no se muestren ningún estilo propios de las etiquetas <ul>. Esta opción no se debe modificar. margin: 0px Sin márgenes. padding: 15px 10px 0px 0px Hay un espacio de relleno superior de 15 píxeles, un espacio de relleno derecho de 10 píxeles y el resto a 0. #home-col-3 li: La etiqueta <ul> indica que se van a presentar los datos en forma de lista no ordenada. Cada elemento de esta lista necesita de la etiqueta <li> para mostrarlos. Los atributos son: padding: 0px 10px 5px 10px No hay espacio de relleno superior, el derecho tiene 10 píxeles, el inferior 5 píxeles y el izquierdo 10 píxeles margin: 0px No hay márgenes. color: #A31545 Color de la fuente #A31545 border-bottom:1px solid #8A8B8C Tiene una línea inferior de 1 píxel de grosor y cuyo color es #8A8B8C #home-col-3 a Este selector da estilo a todos aquellos elementos que sean enlaces y que estén dentro de la capa homecol-3. Los atributos son: color: #23385E El color del enlace es #23385E text-decoration: none No hay ningún tipo de decoración en el texto. #home-col-3 a:hover: Este selector da estilo a todos aquellos elementos que sean enlaces, que estén dentro de la capa homecol-3 y en el momento en que nos posicionemos sobre ellos. Los atributos son: text-decoration: underline Al posicionarnos sobre él quedará subrayado color:# Color de fuente. Página 6 de 12
7 AGENDA El selector primario que da estilo a esta sección es: #home-contenido-derecha: width: 190px La capa tiene una anchura de 190 píxeles float: right La capa se posicionará a la derecha de la pantalla. Dentro de esta capa se sitúan las siguientes: #home-col-4: float: left La capa se posiciona a la derecha. width: 190px La anchura de la capa es de 190 píxeles margin-top: 0px No hay margen superior Para el estilo del ítem Agenda la capa es: #home-col-4 h2: font: bold 12px "Trebuchet MS",Arial, Helvetica, sans-serif La fuente primaria es una trebuchet MS, en negrita y con un tamaño de 12 píxeles. text-transform: uppercase El texto se visualiza en mayúsculas color: # FBF2F2 El color de la fuente es #FBF2F2 background: #D1513E El color de fondo de la capa es #D1513E border-bottom: 1px dotted #7D2727 Tiene un borde inferior discontinuo de color #7D2727 padding:10px Tiene un espacio de relleno de 10 píxeles. Para visualizar el calendario se utiliza una tabla cuyo estilo se define en el siguiente elemento: #home-calendario: width: 130px Anchura del calendario font-size: 11px El tamaño de la fuente es de 11 píxeles color: # El color de la fuente es el negro text-align: center El texto está centrado border: 1px solid #6E93AE El calendario tiene un border de 1 píxel de grosor y cuyo color es #6E93AE. #home-calendario caption: Dentro de la tabla que dibuja el calendario tenemos una etiqueta <caption> donde se visualiza el mes actual y una pequeña barra de navegación para ir al mes anterior y posterior. Los atributos para esta etiqueta son: font-size: 11px La fuente tiene un tamaño de 11 píxeles font-weight: bold La fuente está en negrita color:#ffffff El color de la fuente es blanco margin:10px 0 10px 0 Hay un margen superior e inferior de 10 píxeles. El resto a 0. #home-calendario th: Este selector da estilo a las celdas de cabecera de la tabla donde se dibuja el calendario. En estas celdas se muestran los días de la semana. Los atributos son: border-bottom: 1px solid #6E93AE Tiene un border inferior de 1 píxel de grosor cuyo color es #6E93AE background-color: #D8DEDE El color de fondo es #D8DEDE font-weight: bold La fuente está en negrita color: #23385E El color de la fuente es #23385E font-size: 11px El tamaño de la fuente es de 11 píxeles Página 7 de 12
8 text-align: center El texto está centrado. #home-calendario td: Este selector da estilo a las celdas de la tabla donde se visualizan los días del mes. Tiene los siguientes atributos: border: 1px solid #D8DEDE Tiene un borde de 1 píxel de grosor de color #D8DEDE background: #FFFFFF El color de fondo es blanco #home-calendario.calendario-evento-hoy: Este selector da estilo a la celda donde se visualiza el día actual. Tiene los siguientes atributos: font-weight: bold La fuente está en negrita color: #D1513E El color de la fuente es #D1513E background-color: #F4F4F4 El color de fondo para esta celda es #F4F4F4 #destacado-agenda: Este selector da estilo al mensaje Hoy destacamos. Los atributos son los siguientes: margin: 18px px Tiene un margen superior de 18 píxeles y un margen izquierdo de 20 píxeles. El resto a 0. color:#23385e El color de la fuente es #23385E SEPARADOR Debajo del degradado del menú central se visualiza una línea oscura que separa este menú de la zona Áreas. Esta línea es la capa #home-separador y se encuentra en la hoja de estilo /pub/css/estilo2/_indice/public.css. Los atributos de esta capa son: height: 5px La altura es de 5 píxeles. width: 575px La anchura es de 575 píxeles border-bottom:1px solid #66635C Tiene un borde inferior sólido con el color #66635C padding-left:0px no hay espacio de relleno izquierdo margin-top:10px el margen superior es de 10 píxeles. ÁREAS Los estilos de esta sección se encuentran en el archivo /pub/css/estilo2/_indice/public.css y las capas utilizadas son estas: #home-areas-iz: Es la capa principal y tiene los siguientes atributos: margin-top: 10px La capa tiene un margen superior de 10 píxeles margin-left: 5px La capa tiene un margen izquierdo de 5 píxeles float: left La capa se posiciona a la izquierda de la página. #home-areas-iz h2: Es la capa que da estilo al ítem ÁREAS y tiene los siguientes atributos: font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif La fuente será por defecto una trebuchet MS (en su defecto, una arial o Helvetica o sans-serif), en negrita y con un tamaño de 11 píxeles. text-transform: uppercase El texto se presenta en mayúsculas. Página 8 de 12
9 color: #7D2727 El color del texto #7D2727 margin-right: 5px Hay un margen derecho de 5 píxeles #home-areas-der: Es la capa que da estilo a los elementos del submenú ÁREAS. Tiene los siguientes atributos: margin-top: 14px Hay un margen superior de 14 píxeles float: left Se posicionan a la izquierda de la capa width: 460px La capa tiene una anchura de 460 píxeles color:#233b8c El color de la fuente es #233B8C font-weight: bold La fuente se presenta en negrita. #home-areas-der a: La misma capa que la anterior pero sólo afecta a aquellos elementos del submenú que se comportan como enlaces (tienen una etiqueta <a> delante). Los atributos son: color:#23385e El color de la fuente es #23385E. font-weight: normal El texto no se mostrará en negrita, tendrá un grosor normal. PIE DE PÁGINA La capa que da estilo a este bloque es #global-pie y se encuentra en el archivo /pub/css/estilo2/_global/public.css. Los atributos de esta capa son: height: 50px Esta capa tiene una altura de 50 píxeles background-color: # D1513E El color de fondo de la capa es #D1513E margin-top: 30px Hay un margen superior de 30 píxeles color: # FBF2F2 El color de la fuente es #FBF2F22 border-top:1px solid #7D2727 Tiene un borde inferior continuo de color #7D2727 Los enlaces que encontramos en el pie de página tiene su estilo en los selectores siguientes: #global-pie a: color: #FBF2F2 El color de la fuente por defecto para el link es #FBF2F2 text-decoration: none El link no tiene subrayado. #global-pie a:hover: text-decoration: underline Al posicionar el ratón encima del enlace, el texto queda subrayado. #global-pie-in-iz: Da posicionamiento a los elementos que se sitúan a la izquierda del pie de página. Estos son los atributos: width: 400px Tienen una anchura de 400 píxeles float: left Se posiciona a la izquierda. padding: 0px 5px 5px 5px Los espacios de relleno derecho, inferior e izquierdo tienen una anchura de 5 píxeles. El superior a 0. #global-pie-in-der: Da posicionamiento a los elementos que se sitúan a la derecha del pie de página. Estos son los atributos: Página 9 de 12
10 float: right Se posiciona a la derecha padding: 5px Tiene un espacio de relleno de 5 píxeles (para los cuatro lados). text-align: right El texto se alinea a la derecha. Hay otro selector más que afecta a las imágenes que se visualizan en el pie, es ésta: #global-pie-in-der a img: border:0 Las imágenes se visualizan sin borde. BUSCADOR Para dar estilo a esta capa hay que abrir la hoja de estilo /pub/css/estilo2/_global/public.css. Se utilizan los siguientes selectores: #global-buscador: color:# El color de la fuente es negro width:280px Esta capa tiene una anchura de 280 píxeles padding:10px 0px 0px 0px El ancho de relleno superior es de 10 píxeles, el resto a 0. #global-buscador div (para el texto de búsqueda avanzada ): width:130px Tiene una anchura de 130 píxeles position:relative Se posiciona con respecto a las capas superiores top:-15px Está 15 píxeles más arriba de su posición natural. left:150px Está a 150 píxeles del margen izquierdo. Para dar efecto al botón de OK se referencia la siguiente clase:.global-buscador-boton: background: #F2F2F2 El color de fondo del botón es #F2F2F2 width: 20px El botón tiene un ancho de 20 píxeles font: 9px "Trebuchet MS", Arial, Helvetica, sans-serif El texto ok tiene un tamaño de 9 píxeles y como fuente primaria será trebuchet ms; el resto como fuentes secundarias. border: 1px solid #23385E Tiene un border sólido de 1 píxel de grosor y de color #23385E Para dar efecto a la caja de texto se referencia la siguiente clase:.global-buscador-input: background: #F2F2F2 El color de fondo de la caja de texto es #F2F2F2 width: 80px La caja de texto tiene un ancho de 80 píxeles font: 9px "Trebuchet MS", Arial, Helvetica, sans-serif El texto que se incluya en la caja tendrá un tamaño de 9 píxeles y, por defecto, tendrá la fuente trebuchet MS, el resto serán secundarias. border: 1px solid #23385E La caja de texto tiene un borde sólido de 1 píxel de grosor y de color #23385E. Página 10 de 12
11 ENLACES CABECERA Hay que abrir el archivo /pub/css/estilo2/_global/public.css y acudir a los siguientes selectores: #global-nav-1: Es el selector principal para los enlaces de cabecera, tiene los siguientes atributos: width:350px La capa tiene una anchura de 350 píxeles float:left Se posiciona a la izquierda del selector superior color: # El color de texto por defecto es el negro padding:45px 0px 0px 0px Tiene un espacio de relleno superior de 45 píxeles, el resto a 0. #global-nav-1 ul: Los enlaces de la cabecera se muestran como un listado de elementos no ordenado (etiqueta <ul>), para dar estilo a esta lista se dan los siguientes atributos: list-style: none Indica que para el listado no se muestre ningún estilo propios de las etiquetas <ul>. Esta opción no se debe modificar. display: inline Obliga al la lista no ordenada a comportarse como un elemento inline, es decir, quedará subordinado a las propiedades del elemento superior. Esta opción no se debe modificar. color:# El color de la fuente será el negro height:13px La lista tiene una altura de 13 píxeles width:300px La lista tiene una anchura de 300 píxeles padding:0px 0px 0px 0px No hay ningún espacio de relleno. margin:0px No hay márgenes. #global-nav-1 li: Cada elemento de la lista no ordenada se referencia con la etiqueta html <li>. Tendrán los siguientes atributos: display: inline Obliga a cada elemento de la lista a comportarse como un elemento inline, es decir, quedará subordinado a las propiedades del elemento superior. Esta opción no se debe modificar. list-style: none Indica que para el listado no se muestre ningún estilo propios de las etiquetas <li>. Esta opción no se debe modificar. padding:0px 11px 0px 0px Tiene un espacio de relleno derecho de 11 píxeles. El resto a 0. margin:0px No hay márgenes. #global-nav-1 a: Cada elemento de la lista se comporta como un enlace, así que deberemos darle un estilo también. Estos son los atributos: color:#23385e El color de la fuente para los enlaces es #23385E text-decoration:none No habrá ningún tipo de decoración en el texto (subrayado, tachado ) font-weight: bold La fuente está en negrita. font-size:13px Tiene un tamaño de fuente de 13 píxeles. Página 11 de 12
12 HERRAMIENTAS Para modificar los estilo de la barra de herramientas hay que abrir el archivo /pub/css/estilo2/_global/public.css y acudir a los siguientes selectores: #global-herramientas: margin:10px 0px 0px 0px Hay un margen superior de 10 píxeles, el resto a 0. padding:0px No hay espacio de relleno. float:right La capa se sitúa a la derecha de la pantalla font-size:10px La fuente tiene un tamaño de 10 píxeles width:270px La capa tiene una anchura de 270 píxeles Para incluir los enlaces se utilizan listas no ordenadas. La etiqueta <ul> indica que abrimos una lista nueva. La etiqueta <li> permite incluir un elemento a la lista. Estos son los selectores: #global-herramientas ul: list-style: none Se inhabilita el formato de lista (un elemento debajo de otro), se muestras los enlaces en forma horizontal. display: inline Obliga al la lista no ordenada a comportarse como un elemento inline, es decir, quedará subordinado a las propiedades del elemento superior. Esta opción no se debe modificar. margin:0px No hay márgenes. padding:0px 0px 0px 90px Hay un espacio de relleno izquierdo de 90 píxeles, el resto a 0. #global-herramientas li: display: inline Opción que no se debe modificar. margin:0px No hay márgenes. padding:0px No hay espacio de relleno. #global-herramientas li a: Cada elemento de la lista es un enlace, por lo tanto, con este selector se quiere dar un estilo a estos enlaces. Atributo: color:# El color de la fuentes es negro. Página 12 de 12
Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;
Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;
Maquetación con estilos
Objetivos específicos Maquetación con estilos Aplicar estilos relacionados con tamaños, bordes y márgenes. Aplicar estilos relacionados con el posicionamiento de los objetos. Contenidos Estilos de caja.
DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D)
APRENDERAPROGRAMAR.COM DISEÑO WEB CSS CON DOS, TRES O MÁS COLUMNAS CON FLOAT. WIDTH EN PORCENTAJES NO FUNCIONA? TIPOS DE ANCHO. EJEMPLOS. (CU01036D) Sección: Cursos Categoría: Tutorial básico del programador
En que nos ayuda las hojas de estilo cascada (css)?
HECHO POR CREACIONES Y DESARROLLO WEB COSTA RICA, CUALQUIER MACRO CON GUSTO ESTAMOS PARA AYUDARLE, LLAMENOS Y CON GUSTO LE ATENDEREMOS TEL 8364-3733 // 8348-9439 En que nos ayuda las hojas de estilo cascada
Personalizando Plantillas
Personalizando Plantillas Ya que se tiene la estructura general del sitio web, se comienza a trabajar con la apariencia de cada una de las plantillas. Página Principal (index.html) La página principal
<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Proyectos Terminales y Descargas de Software
Proyectos Terminales y Descargas de Software En esta práctica se realizará el diseño de las plantillas de Proyectos Terminales y de Descargas de Software. Proyectos Terminales Se trabajará con la plantilla
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
PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D)
APRENDERAPROGRAMAR.COM PROPIEDADES VISIBILITY (VISIBLE, HIDDEN, COLLAPSE) Y OVERFLOW CSS. SCROLL. OVERFLOW- X Y OVERFLOW-Y. EJEMPLOS (CU01038D) Sección: Cursos Categoría: Tutorial básico del programador
EL MODELO DE CAJA CSS
EL MODELO DE CAJA CSS Sesión 10 By Ing. David Gil LA ETIQUETA HTML La etiqueta define una división o una sección en un documento HTML. La etiqueta se utiliza para agrupar bloques
Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D)
APRENDERAPROGRAMAR.COM Z-INDEX CSS NO FUNCIONA? CONTROL DE SUPERPOSICIÓN DE ELEMENTOS COMO CAPAS, DIV O IMÁGENES (CU01039D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde cero
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
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
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
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
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
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
MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO.
APRENDERAPROGRAMAR.COM MENÚ DESPLEGABLE CSS HORIZONTAL. EFECTO DROPDOWN CON ITEMS Y SUBITEMS. USO DE FLOAT, DISPLAY, POSITION EJEMPLO DE CÓDIGO. (CU01050D) Sección: Cursos Categoría: Tutorial básico del
CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D)
APRENDERAPROGRAMAR.COM CONCEPTO FLOAT CSS. NONE, LEFT, RIGHT Y CENTRAR?. COLOCAR TEXTO ALREDEDOR DE UNA IMAGEN. EJEMPLOS DE POSICIONAMIENTO FLOTANTE (CU01034D) Sección: Cursos Categoría: Tutorial básico
CSS Cascading Style Sheets Rellenos y Márgenes Antes de empezar...
Rellenos y Márgenes Antes de empezar... margin tienen una pequeña particularidad que suele ser el origen de muchos quebraderos de cabeza: Los márgenes exterior horizontales de cajas contiguas que se toque
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
1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2.
Barra de navegación vertical con Botones rollovers ver. 2_TIC 1º Bachillerato página 1/8 1 BARRA de NAVEGACIÓN VERTICAL con BOTONES rollovers ver 2...1 1.1 Intro...1 1.2 Código HTML de la lista de vínculos...2
Edición HTML. Estilos CSS MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL
MINISTERIO DE EDUCACIÓN Y CIENCIA SECRETARÍA GENERAL DE EDUCACIÓN Y FORMACIÓN PROFESIONAL DIRECCIÓN GENERAL DE EDUCACIÓN, FORMACIÓN PROFESIONAL E INNOVACIÓN EDUCATIVA CENTRO NACIONAL DE INFORMACIÓN Y COMUNICACIÓN
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
PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D)
APRENDERAPROGRAMAR.COM PROPIEDAD POSITION CSS: STATIC, RELATIVE, ABSOLUTE, FIXED. TOP, RIGHT, BOTTOM, LEFT. EJEMPLOS EJERCICIOS DE POSICIONAMIENTO RESUELTOS (CU01032D) Sección: Cursos Categoría: Tutorial
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
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
Ejercicios - Introducción al desarrollo web para móviles
Ejercicios - Introducción al desarrollo web para móviles Índice 1 Ejercicio 1 - Estructura en HTML (0.6 puntos)... 2 2 Ejercicio 2 - Terminando la Web de ejemplo (0.6 puntos)... 2 3 Ejercicio 3 - Estructura
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:
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!
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
LABORATORIO 2. I. Desarrollo
UNIVERSIDAD CAPITÁN GENERAL GERARDO BARRIOS FACULTAD DE CIENCIA Y TECNOLOGÍA LABORATORIO 2 Nombre : Repaso HTML y CSS parte II Ciclo : II 2012 Asignatura : Web y Comercio Electrónico II Catedrático : Ing.
escuela técnica superior de ingeniería informática
Tiempo: 2h escuela técnica superior de ingeniería informática Hojas de Estilo en Cascada (CSS) Departamento de Lenguajes Grupo de Ingeniería del Software Octubre 2007 Versiones previas: David Benavides
escuela técnica superior de ingeniería informática
Versiones previas: David Benavides y Amador Durán (septiembre 2006) Reestructuracion General: Manuel Resinas (octubre 2007) Ultima Revision: Cambios Menores. Pablo Fernandez (Octubre 2010) Tiempo: 2h escuela
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
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
Resumen del Manual de CSS. Resumen CSS. Este es un resumen de lo visto en el manual de CSS de Aprende-Web.
Resumen CSS Este es un resumen de lo visto en el manual de CSS de Aprende-Web. http://aprende-web.net/css Selectores y otros elementos. Selectores básicos * : Selector universal. Afecta a toda la página.
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
Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:
Ejercicios CSS 3º- A partir del código HTML crear un archivo de CSS para dar estilo como el que aparece en la imágen:
Ejercicios de repaso de conceptos de CSS y CSS avanzado.
Ejercicios de repaso de conceptos de CSS y CSS avanzado. 1- HTML y CSS básico. Uso de selectores. Escribir el código HTML y CSS de una página web donde se modifiquen las siguientes propiedades mediante
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ÑANDO. Web. Empresa. de mi. COmo crear una web empresarial sin ser programador ni diseñador
introducción Bienvenida El Instructor Juan Sebastián Ossa Domínguez Diseñador Gráfico y Diseñador Desarroldor de Software introducción Bienvenida Objetivo del Curso Transmitir los conceptos básicos diseño
DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D)
APRENDERAPROGRAMAR.COM DEGRADADOS CSS. EFECTO LINEAL Y RADIAL. LINEAR-GRADIENT. ANGULOS CSS: UNIDADES ANGULARES DEG, GRAD, TURN, RAD. (CU01060D) Sección: Cursos Categoría: Tutorial básico del programador
En la carpeta css, crear una hoja de estilo para cada una de las plantillas, en este caso:
Estilos Personalizados Una vez que se han definido las plantillas, se pueden empezar a crear hojas de estilos para cada una de ellas, esto facilita el modificarlas de manera personalizada sin afectar al
EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D)
APRENDERAPROGRAMAR.COM EFECTO CSS DE ESQUINAS REDONDEADAS: BORDER- RADIUS. BORDER-LEFT- TOP-RADIUS. EJEMPLOS CIRCULO O ELIPSE (CU01058D) Sección: Cursos Categoría: Tutorial básico del programador web:
TABLE. La etiqueta general, que engloba a las siguientes.
TABLE La etiqueta general, que engloba a las siguientes. TR TD En el siguiente nivel, dentro de TABLE, están las etiquetas para formar cada fila de la tabla. Hay que repetirlas tantas veces como filas
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
CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D)
APRENDERAPROGRAMAR.COM CSS VERTICAL-ALIGN MIDDLE NO FUNCIONA? CENTRAR VERTICALMENTE UNA IMAGEN, TEXTO, DIV, ETC. EJEMPLOS (CU01043D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D)
APRENDERAPROGRAMAR.COM ESTILOS Y HERENCIA EN TABLAS CSS. WIDTH, HEIGHT, FONT-SIZE Y OVERFLOW EN TABLAS. PROPIEDAD BORDER- COLLAPSE (CU01051D) Sección: Cursos Categoría: Tutorial básico del programador
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
Manual de Estilo Web Carlos III
Manual de Estilo Web Carlos III Índice WEB CARLOS III 1. Home - Cabecera y footer - Navegación - Destacado Slide - Módulos y otros enlaces 2. Interior primer nivel (plantilla 1) 3. Interior primer nivel
Detalles que marcan la
Diseño Blogger Detalles que marcan la Diferencia Elai the Blogger Detalles que marcan la Diferencia 1.- Introducción 2.- Barra superior con botones para RR.SS. 3.- Cambiar botones para compartir el post
Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un
Las tablas Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos:
CSS. Apuntes de guerrilla
CSS Apuntes de guerrilla Index Introducción en html 3 Diferentes medios en CSS 4 Comentarios 5 Selectores 5-6 Unidades de medidas 7 Colores 7 Box Model 8-12 Posicionamiento 13-14 Visualización 14-15 Texto
Wenceslao Zavala
Producción Digital I Wenceslao Zavala www.producciondigitalup.com.ar alumnos@producciondigitalup.com.ar Convenciones Web Diseño Web El Monitor: Unidad de Medida (pixel) Dimensión de Trabajo (según pantalla
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
CSS-Hojas de estilos en cascada
Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje utilizado para describir la presentación de documentos HTML o XML, esto incluye varios lenguajes basados en XML como son XHTML o SVG.
Curso Básico de HTML
Curso Básico de HTML Qué es HTML? HTML es un pseudo-lenguaje de programación, no es un lenguaje en sí. Utiliza tags o etiquetas específicas para crear contenido y dar una estructura al documento. Existen
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web.
2. Manejar los elementos básicos de un lenguaje usado en la creación de Páginas Web. 2.1 Definición de objetos y contenidos de la página web. INTERNET En 1969, el Departamento de Defensa de E.U construyo
CSS Flujo y posicionamiento
Vamos a comprobar que los cuadros de las páginas web siguen un flujo natural. Además, veremos cómo podemos anular dicho flujo y colocar elementos fijos o flotantes. Existen tres posibilidades de colocar
Manejo de Textos de Imágenes
Manejo de Textos de Imágenes En ésta práctica se manejará la combinación de textos e imágenes utilizando el framework de Bootstrap. Se continuará trabajando con el proyecto de otras prácticas, pero se
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:
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
<body> <a href="http://www.cinenganos.com"><img src="imagenes/imagen01.jpg" width="250" height="354" /></a> </body>
3. CSS en imágenes 3.1 Bordes El uso de imágenes con CSS permite no sólo reforzar el modelo de caja inherente a los estilos, sino reforzar la estética de lo que podría, en principio, parecer hasta limitante
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
1. Selector. Representa una etiqueta estándar del HTML.
Hojas de estilo: CSS Con la intención de separar el contenido de la presentación y de ofrecer mayores y más fáciles posibilidades de presentación el W3 Consortium sugirió la utilización de las Hojas de
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.
Contenedores. Elementos <div>
Html5 añade nuevos elementos semánticos pero todos ellos se basan en el uso del . Estos elementos sirven para dividir la página (de ahí el nombre div, de divisor) en contenido relacionado, un div
Hojas de estilo (CSS)
Tema 2b Hojas de estilo (CSS) Texto http://www.flickr.com/photos/urke/3223200963 Dando estilo visual a las páginas HTML Hojas de estilo 2 Separar la estructura del documento (etiquetas HTML) del estilo
Material de apoyo CSS
1 - 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
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
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
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
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
CSS3. Tutor: Ignacio Pérez Martín. Índice. Curso: Programación Python y HTML-5. CEP Marbella-Coín.
CSS3 Tutor: Ignacio Pérez Martín. Curso: Programación Python y HTML-5. CEP Marbella-Coín. Resumen En este tema veremos como dar formato a un documento HTML utilizando las hojas de estilos (CSS). Leed este
DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D)
APRENDERAPROGRAMAR.COM DEFINICIÓN DE FONDO CSS. BACKGROUND- IMAGE Y EFECTO FONDO PÁGINA CON PAPEL TAPIZ. BACKGROUND-REPEAT. EJEMPLOS (CU01030D) Sección: Cursos Categoría: Tutorial básico del programador
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
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
Modelos de caja. Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:
Modelo de caja El modelo de cajas es el comportamiento de CSS que hace que todos los elementos de las páginas se representen mediante cajas rectangulares. Las cajas de una página se crean automáticamente.
Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!
Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar
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
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
5.CREACIÓN DE TABLAS.
5.CREACIÓN DE TABLAS. Cómo se crea una tabla?. Para crear las tablas será necesario usar una nueva etiqueta: TABLE, que significa, en inglés, tabla. Esta etiqueta consta de instrucción de inicio,, e instrucción
INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas
INTRODUCCIÓN A HTML Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG)
REFERENCIA DE PROPIEDADES PARA CSS 2.0 (TOMADO DE W3C.ORG) Esta referencia se distribuye bajo licencia Creative Commons. Usted es libre de: Copiar, distribuir y comunicar públicamente Hacer obras derivadas
SOMBRAS CON CSS ver. 2
Sombras con CSS para Diseño WEB ver. 2_TICO 1º Bachillerato página 1/6 SOMBRAS CON CSS ver. 2...1 Procedimiento 1: Diseño con Gimp 2.6 de una sombra...2 Procedimiento 2: Diseño Web con Kompozer...3 Código
Asignatura: Programación 4
Clase Práctica #2 HTML y CSS. Objetivos: Continuar el trabajo con elementos del leguaje HTML. Formularios. Crear hojas de estilo en cascada para un sitio web, y estilos específicos de una página web. Bibliografía:
Departamento de Lenguajes y Sistemas Informáticos. Hojas de Estilo en Cascada (CSS)
escuela técnica superior de ingeniería informática Tiempo: 2h Hojas de Estilo en Cascada (CSS( CSS) Departamento de Lenguajes Grupo de Ingeniería a del Software Noviembre 2006 Versión previa: David Benavides
RESUMEN HTML. Elementos de estructura
RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo
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
CSS. Guia- BASICA. Realización Glidea Agencia Web https://www.facebook.com/agencia.glidea
Guia- BASICA CSS Realización Glidea Agencia Web www.glidea.com.ar https://www.facebook.com/agencia.glidea Glidea. Todos los derechos reservados. Guía de distribución gratuita. Prohibida su venta. Acerca
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
1. La evolución de HTML La evolución de las CSS 16
HTML5 y CSS3 1. La evolución de HTML 15 2. La evolución de las CSS 16 2.1 La noción de módulo 16 2.2 La evolución de los estados 16 2.3 Los prefijos comerciales 17 2.4 Utilizar los prefijos comerciales
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
Roberto Gómez Cárdenas Qué es CSS? Cascading Style Sheets, hojas de estilo en
CSS y XML Roberto Gómez Cárdenas rogomez@itesm.mx http://homepage.cem.itesm.mx/rogomez Lámina 1 Qué es CSS? Cascading Style Sheets, hojas de estilo en cascada. Tecnología desarrollada por la W3C con el
NUEVAS ETIQUETAS HTML 5
NUEVAS S HTML 5 Se muestra a continuación el listado completo de las etiquetas indicando las nuevas HTML 5, las mismas se agrupan en base a su funcionalidad dentro del documento html. Establece
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
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: