PAGINAS HTML DINAMICAS
|
|
- Teresa Serrano Salinas
- hace 5 años
- Vistas:
Transcripción
1 UNIDAD II PAGINAS HTML DINAMICAS 1. INTRODUCCIÓN Bajo el nombre de HTML Dinámico se engloba un conjunto de técnicas con dos objetivos claros: proporcionar un control absoluto al diseñador de páginas HTML y romper con el carácter estático de este tipo de documentos. Hasta ahora, una vez mostrado un documento HTML, nada podía hacerse para modificarlo. Los tres componentes del HTML Dinámico son: Hojas de Estilo Posicionamiento de Contenidos Fuentes Descargables Las hojas de estilo permiten especificar atributos para los elementos de su página web. Con el posicionamiento de contenidos se puede asegurar que las diferentes partes serán mostradas exactamente donde usted quiera que aparezcan y podrá modificar su aspecto y posición tras ser mostrada. Con las fuentes descargables podemos asegurar que siempre se utilizara la fuente correcta, pues podemos enviar la fuente junto con la página. 1.1 Introducción a las Hojas de Estilos Antes de la introducción de las hojas de estilo, los creadores de páginas web sólo tenían un control parcial sobre el aspecto final de sus páginas. Por ejemplo, se podía especificar que cierto texto debia verse como una cabecera, pero no se podían colocar márgenes a una página ni escoger un borde decorado para un texto. Las hojas de estilo nos permiten un mayor control sobre el aspecto de nuestros documentos. Con ellas podemos especificar muchos atributos tales como colores, márgenes, alineación de elementos, tipos y tamaños de letras, y muchos más. Podemos utilizar bordes para hacer que ciertos elementos resalten del resto de un documento. Podemos especificar que se utilicen diferentes fuentes para diferentes elementos tales como párrafos o cabeceras. Además podemos emplear hojas de estilo como patrones o páginas maestras de forma que múltiples páginas puedan tener el mismo aspecto. Las hojas de estilo pueden crearse empleando dos tipos de sintaxis, CSS (Cascade Style Sheets) y JavaScript. 1.2 Introducción al Posicionamiento de Contenidos Ya no se está restringido al posicionamiento secuencial de los elementos sobre la página. Especificando la posición de los bloques podemos decidir donde se mostrara cada elemento en vez de dejar esta tarea al arbitrio del navegador. Por ejemplo, podemos colocar un bloque en la esquina superior izquierda, y otro en la inferior derecha. También podemos hacer que varios bloques compartan espacio, de forma que se puedan solapar. Ahora se puede decidir la posición exacta de los elementos. Utilizando JavaScript podemos cambiar el aspecto de la página dinámicamente. Podemos hacer que los elementos aparezcan o se desvanezcan, podemos cambiar su color y su posición, etc. Podemos añadir animaciones dentro de nuestras páginas moviendo y modificando ciertas partes de la misma. 49
2 El uso conjunto las hojas de estilo y el posicionamiento de contenidos nos permite crear páginas web que utilicen diferentes estilos en diferentes partes de la página. Para el posicionamiento de contenidos también podemos utilizar dos tipos de sintaxis: CSS y JavaScript. 1.3 Introducción a las Fuentes Descargables Utilizando fuentes descargables podemos adjuntar fuentes con nuestras páginas web. De esta forma se garantiza que las página siempre serán mostradas con la fuente que deseemos. Ya no es necesario emplear las fuentes genéricas para conseguir que sus páginas tengan aproximadamente el mismo aspecto en todas las plataformas. Tampoco estaremos restringidos por las características propias de las fuentes en cada plataforma. Para protejer los derechos de autor de los diseñadores de fuentes, estas están protegidas de forma que es imposible que el usuario las copie y las pueda usar de nuevo. Asi podemos incluir fuentes en nuestras páginas sin tener que preocuparnos de que los usuarios las puedan copiar. 2. HOJAS DE ESTILO En esta sección se introduce el uso de las hojas de estilo. Se da un breve resumen de los diferentes tipos de sintaxis que se pueden emplear para definir estilos, se muestran algunos ejemplos y se explica la herencia de propiedades. 2.1 Definición de Estilos mediante Hojas de Estilo en Cascada Una hoja de estilo consiste en una o más definiciones de estilo. En sintaxis CSS, los nombres de las propiedades y los valores se encierran entre llaves {. El criterio de selección determina a que elementos se aplica, o es aplicable, el estilo. Si el criterio de selección es un elemento HTML, el estilo es aplicado a todos las instancias de dicho elemento. El criterio de selección también puede ser una clase, un ID o contextual. Cada una de estos criterios de selección se verán a continuación. En una definicion de estilo cada propiedad es seguida por dos puntos y el valor de dicha propiedad. Cada par propiedad/valor está separado del siguiente por un punto y coma (;). Por ejemplo, la siguente hoja de estilo en cascada contiene dos definiciones de estilos. El primero especifica que todos los párrafos, <p>, se veran en negrita y en color blanco. El segundo hará que todas las cabeceras, <h1>, aparezcan centradas. <!-- p {font-weight: bold; color: white; h1 {text-align: center; --> La definición de estilos se puede encerrar entre commentarios (<! >), de esta forma los navegadores que no reconozcan la etiqueta <style> la ignorarán. Es importante no incluir dobles comillas en la especificacion de valores de atributos en sintaxis CSS. 50
3 CSS exige un estricto cumplimiento de sus normas de sintaxis. Asegurese de no omitir ningun punto y coma entre los pares nombre/valor. Si lo hace se ignorara por completo la definición de estilo. De igual forma, si accidentalmente se añade un simbolo extraño la definición será ignorada. 2.2 Definición de Estilos mediante el Modelo de Objetos Documento de JavaScript Mediante JavaScript también es posible definir hojas de estilo utilizando el modelo de objetos documento. Este modelo ve una página web como un objeto con propiedades que pueden ser consultadas y modificadas. En el siguiente ejemplo se cambia el valor de color de la etiqueta h1 de la propiedad tags del objeto document: document.tags.h1.color = "red" La propiedad tags siempre se aplica al objeto document del documento actual, por eso algunos navegadores permiten omitir document en la expresion document.tags. El siguiente ejemplo usa JavaScript para crear una hoja de estilo que contiene dos definiciones de estilo. El primero especifica que todos los párrafos <p> se veran en negrita y en color blanco. El segundo hará que todas las cabeceras <h1> aparezcan centradas. <style type="text/javascript"> tags.p.weight = "bold"; tags.p.color = "white"; tags.h1.textalign = "center"; No se pueden encerrar entre comentarios (<! >) los contenidos de una hoja de estilo creada mediante JavaScript. También se puede utilizar with para abreviar la definición de estilos para elementos sobre los que hay que modificar varias propiedades. Este ejemplo especifica que todas las etiquetas <p> serán verdes, negritas, cursivas y usaran la fuente helvética. with (tags.p) { color = "green"; fontweight = "bold"; fontstyle = "italic"; fontfamily = "helvetica"; Ejemplos Usando hojas de estilo se pueden especificar muchos atributos de estilo. Algunas de estas características son el alineación, indentación y color del texto, la familia, peso y estilo de las fuentes,... Podemos seleccionar una imagen o un color de fondo para cualquier elemento. También podemos escoger el color y estilo de las marcas de lista. 51
4 Se pueden poner márgenes y especificar bordes para elementos de bloque, escoger el relleno de los elementos que tienen bordes, indicar la distancia entre el borde y el contenido del elemento. El siguiente ejemplo muestra una hoja de estilo sencilla descrita mediante sintaxis CSS y JavaScript. En ella se especifica que todos los elementos <p> tendran márgenes derecho e izquierdo y que su texto estará centrado. Todos los elementos <h4> estarán subrayados y en verde. Todos los elementos <h5> se mostraran en mayúsculas, tendran un borde con aspecto 3D sobresaliente de 4 puntos de ancho y color rojo. Su texto será rojo y el fondo amarillo. Finalmente, los <blockquote> serán azules y en cursiva, su altura de línea (interlínea) será un 150% mayor que por defecto y su primera línea estará indentado un 10%. p {text-align: center; margin-left: 20%; margin-right: 20%; h4 {text-decoration: underline; color: green; h5 { text-transform: uppercase;color:red; border-width: 4pt; border-style: outset; background-color: yellow; padding: 4pt; border-color: red; blockquote { color: blue; font-style: italic; line-height: 1.5; text-indent: 10% <style type="text/javascript"> with (tags.p) { textalign = "center"; marginleft = "20%"; marginright = "20%"; with (tags.h4) {textdecoration = "underline"; color = "green"; with (tags.h5) { texttransform = "uppercase"; color = "red"; borderwidth = "4pt"; borderstyle = "outset"; backgroundcolor = "yellow"; paddings("4pt"); bordercolor = "red"; with (tags.blockquote) { color = "blue"; fontstyle = "italic"; lineheight = "1.5"; textindent = "20pt"; Uso de la hoja de estilo <h4>titulo subrayado</h4> 52
5 <blockquote> Esto es un bloque. Normalmente los bloques están indentados, pero en este, además, la primera línea tiene una indentación extra. También la interlínea es mayor de lo habitual. </blockquote> <h5>titulo h5 en mayusculas y con borde</h5> <p>este párrafo está centrado. También tiene unos amplios márgenes derecho e izquierdo.</p> Resultado del ejemplo Titulo subrayado Esto es un bloque. Normalmente los bloques están indentados, pero en este, además, la primera línea tiene una indentación extra. También la interlínea es mayor de lo habitual. TITULO EN MAYUSCULAS Y CON BORDE 2.3 Herencia de Estilos Este párrafo está centrado. También tiene unos amplios márgenes derecho e izquierdo. Un elemento HTML que contenga a otro se considera como el padre del elemento que contiene, y el elemento contenido se considera el elemento hijo. Por ejemplo, en el siguiente texto HTML, el elemento <body> es el padre del elemento <h1>, que a su vez es padre del elemento <em>. <body> <h1> El titulo <em>es</em> importante!</h1> </body> En muchos casos, los hijos adquieren o heredan el estilo de los elementos de sus padres. Por ejemplo, supongamos que asignamos a <h1> el estilo color azul: h1 {color: blue; <body> <h1> El titulo <em>es</em> importante!</h1> </body> En este caso el elemento hijo <em> hereda el estilo de su padre, que es el elemento <h1>. Asi la palabra "es" apareceria en color azul. Supongamos ahora que previamente se habia especificado para <em> el color rojo. En este caso la palabra "es" apareceria en rojo porque las propiedades del hijo tienen preferencia sobre las que hereda del padre. La herencia comienza desde el elemento de más alto nivel. En HTML, este elemento es <html>, que es seguido de <body>. 53
6 Para establecer las propiedades de estilo por defecto para todos los elementos de un documento lo normal es asignárselas al elemento <body>. Por ejemplo, el siguiente código fija el color por defecto del texto a verde: body {color: green; <style type="text/javascript"> tags.body.color = "green" Muy pocas propiedades no son heredadas de padres a hijos, pero en la mayoría de los casos el resultado final es el mismo que si lo hiciesen. Por ejemplo, la propiedad color de fondo no se hereda. Si un hijo no especifica un color de fondo propio, se vera el color de fondo del padre a través suyo, tal como ocurriria si heredase la propiedad. Para más información sobre las propiedades que se heredan y cuales no, dirigirse al manual de referencia del final de este tutorial. 3. CREACIÓN Y USO DE HOJAS DE ESTILO En esta sección se verán las diferentes formas de definir estilos y como aplicar esos estilos a los elementos HTML. Una hoja de estilo es una serie de una o más definiciones de estilo. Podemos definir una hoja de estilos en el interior del documento que la utiliza, pero también podemos utilizar hojas de estilo desde un documento externo. Por ejemplo, podemos emplear una única hoja de estilo para definir el estilo empleado por un grupo de personas en sus páginas. Si la hoja de estilos no va a ser aplicada a otros documentos, es más conveniente definirla en el interior de dicho documento para asi tener la hoja de estilo y el contenido de la página todo en un mismo sitio. 3.1 Definición de Hojas de Estilo con la etiqueta <STYLE> Para definir una hoja de estilo directamente dentro de un documento se utiliza la etiqueta <style> dentro de la sección <head>... </head>. La etiqueta <style> abre la hoja de estilo, y la etiqueta la cierra. Asegurese de utilizar <style> antes de <body>. Cuando use <style> podrá especificar el atributo type para indicar que tipo de sintaxis se va a emplear. Los dos valores posibles son "text/css" y "text/javascrip". EL valor por defecto es "text/css". El siguiente ejemplo define una hoja de estilo que especifica que todos los titulos de nivel 4 serán en mayúsculas y azules, y todos los bloques en cursiva y rojos: <head> 54
7 h4 {text-transform: uppercase; color: blue; blockquote {font-style: italic; color: red; </head> <body>... </body> <head> <style type="text/javascript"> tags.h4.texttransform = "uppercase" tags.h4.color = "blue" tags.blockquote.fontstyle = "italic" tags.blockquote.color = "red" </head> <body>... </body> Uso de la hoja de estilo <h4>este titulo es azul y esta en mayusculas.</h4> <blockquote>este bloque en cursiva es rojo.<blockquote> Resultado del ejemplo ESTE TITULO ES AZUL Y ESTA EN MAYUSCULAS. Este bloque en cursiva es rojo. 3.2 Definición de Hojas de Estilo en Ficheros Externos Se puede definir una hoja de estilo en un fichero distinto del que contiene la página y despues enlazarlos. Las ventajas de este método son que podremos utilizar la hoja de estilo desde cualquier documento HTML. Se podría pensar en una hoja de estilo asi definida como en un patrón que pudiera aplicarse a cualquier documento. De esta forma, se puede aplicar un estilo a todas las páginas servidas desde un sitio web sin más que incluir un enlace al fichero con la hoja de estilo en cada página. La sintaxis para definir estilos en ficheros es identica a la que se usa para definirlos en el propio documento, excepto que no es necesario incluir la etiqueta <style>. He aquí un ejemplo: /* hoja de estilo externa estilo.html */.BOLDBLUE {color: blue; font-weight: bold; h1 {line-height: 18pt; p {color: yellow; /* fin de fichero */ 55
8 /* hoja de estilo externa estilo.html */ tags.boldblue.all.color = "blue"; tags.boldblue.all.fontweight = "bold"; tags.h1.lineheight = "18pt"; tags.p.color = "yellow"; /* fin de fichero */ Para utilizar esta hoja de estilo, se usa la etiqueta <link> como se muestra en el siguiente ejemplo: <head> <title>el titulo</title> <link rel = stylesheet type = "text/css" href = "estilo.css"> </head> <head> <title>el titulo</title> <link rel = stylesheet type = "text/javascript" href = "estilo.js"> </head> 3.3 Definición de Clases de Estilo Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todos las etiquetas de ese tipo en el documento utilizarán dicho estilo. Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solucion correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada. Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento..greenbold {color: green; font-weight: bold; <style type="text/javascript"> classes.greenbold.all.color = "green"; classes.greenbold.all.fontweigth = "bold"; 56
9 Uso de la hoja de estilo <h3 class=greenbold>este titulo es muy verde</h3> <p class=greenbold> Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML. </p> <blockquote class=greenbold> Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques resalten del resto de la página. </blockquote> Resultado del ejemplo Este titulo es muy verde Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML. Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques resalten del resto de la página. Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de JavaScript. Los nombres de clases no pueden contener tampoco operadores como: -, +, *, /, %,... Cuando se definen clases de estilo se puede especificar a que elementos se podrán aplicar dicha clase, o usaremos la palabra clave all para indicar que todos los elementos podrán utilizarla. En el siguiente ejemplo se crea una clase de estilo naranja que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques..naranja {color: orange; font-weight: bold; p.rojo {color: red; font-weight: bold; blockquote.rojo {color: red; font-weight: bold; <style type="text/javascript"> classes.naranja.all.color = "orange"; classes.naranja.all.fontweight = "bold"; classes.rojo.p.color = "red"; classes.rojo.p.fontweight = "bold"; classes.rojo.blockquote.color = "red"; classes.rojo.blockquote.fontweight = "bold"; 57
10 Uso de la hoja de estilo <p class="rojo">este párrafo es rojo.</p> <p>este párrafo es del color por defecto, porque no utiliza la clase rojo</p> <blockquote class="rojo">este bloque usa la clase rojo. </blockquote> <h4 class="rojo"> Este titulo intenta usar la clase rojo, pero no le está permitido </h4> <p class="naranja">este párrafo es amarilo</p> <h4 class="naranja"> Este titulo es naranja porque usa la clase naranja </h4> Resultado del ejemplo Este párrafo es rojo. Este párrafo es del color por defecto, porque no utiliza la clase rojo Este bloque usa la clase rojo. Este titulo intenta usar la clase rojo, pero no le está permitido Este párrafo es amarilo Este titulo es naranja porque usa la clase naranja Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizaran la primera. Por ejemplo, en el siguiente código un párrafo intenta usar las clases rojo y naranja. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica. Ejemplo: <p class="rojo" class="naranja">otro párrafo rojo.</p> Resultado: Otro párrafo rojo. 3.4 Definición de Estilos Individuales con Nombre Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar un clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL. También son útiles para definir capas de contenidos HTML posicionadas de forma precisa. Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo #. En JavaScript se utiliza la propiedad ids. 58
11 Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como valor del atributo ID. En el siguiente código se define una clase de estilo PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlínea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo color es azul..principal { line-height: 20pt; font-size:15pt; font-weight: bold; color: red; #AZUL1 {color: blue; <style type="text/javascript"> with(classes.principal.all) { lineheight = "20pt"; fontsize = "15pt"; fontweight = "bold"; color = "red"; ids.azul1.color = "blue"; Uso de la hoja de estilo <p class="principal"> AquÍ se puede ver un texto rojo y en negrita. En este párrafo la interlínea y el tamaño de la fuente son mayores de lo habitual. </p> <p class="principal" id="azul1"> Este párrafo es casi igual al anterior. Está en negrita y su fuente es mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1. </p> Resultado del ejemplo Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlínea y el tamaño de la fuente son mayores de lo habitual. 59
12 Este párrafo es casi igual al anterior. Esta en negrita y su fuente es mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL Uso de Criterios de Selección Contextual Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podriamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si este está en el interior de un título de tamaño 4. Se puede conseguir este nivel control sobre la aplicacion de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicara sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo. Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el método contextual(). h4 em {color: green; <style type="text/javascript"> contextual(tags.h4, tags.em).color ="green"; Uso de la hoja de estilo <h4>el <em>texto enfatizado</em> de este titulo es verde.</h4> <p>en cambio este <em>texto enfatizado</em> no es verde.</p> Resultado del ejemplo El texto enfatizado de este titulo es verde. En cambio este texto enfatizado no es verde. Ahora veremos otro ejemplo que hace que las marcas los elementos de lista que hereden de al menos dos listas desordenadas sean de color azul. ul ul li {color: blue; 60
13 contextual(tags.ul, tags.ul, tags.li).color = "blue"; Se pueden utilizar los criterios de selección contextual para buscar etiquetas, clases, ids o combinaciones de estos. En el siguiente ejemplo se crea la clase MAGENTA que lo colorea todo de magenta. Todos los párrafos MAGENTA que estén dentro de un <div> estarán en cursiva. Además los textos dentro de <b> anidados dentro de párrafos dentro de un <div> en MAGENTA usaran una fuente grande..magenta {color: magenta; div p.magenta {font-style: italic; div p.magenta b {font-size: large; <style type="text/javascript"> classes.magenta.all.color = "magenta"; contextual(tags.div, classes.magenta.p).fontstyle = "italic"; contextual(tags.div, classes.magenta.p, tags.b).fontsize = "large"; Uso de la hoja de estilo <div class=magenta> <h4> Titulo h4 en MAGENTA</h4> <p>este párrafo deberia ser magenta y cursivo. Ahora viene un <b>texto grande</b>. Conseguimos este efecto con selección contextual</p> </div> <p class="magenta">este párrafo todavia es MAGENTA, pero como no esta dentro de un bloque <div>, no es cursivo.</p> Resultado del ejemplo Titulo h4 en MAGENTA Este párrafo deberia ser magenta y cursivo. Ahora viene un texto grande. Conseguimos este efecto con selección contextual Este párrafo todavia es MAGENTA, pero como no esta dentro de un bloque <div>, no es cursivo. 3.6 Especificación de Estilos para Elementos Individuales De igual forma que se pueden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo. 61
14 Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Asi es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algun cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento. A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento <p>. También se muestra el uso de <span> para aplicar un estilo a varios elementos. <p style="color: green; font-weight: bold; margin-right: 20%; margin-left: 20%"> Este párrafo, y sólo este párrafo, es verde, esta en negrita y tiene unos grandes margenes. </p> <p> Este párrafo es del color habitual, pero esta <span style="color: red; font-style: italic;">palabra</span> es diferente al resto. <p> <p style="color = 'green'; fontweight = 'bold'; marginright = '20%'; marginleft = '20%'"> Este párrafo, y sólo este párrafo, es verde, esta en negrita tiene unos grandes márgenes. </p> <p> Este párrafo es del color habitual, pero esta <span style="color = "red"; fontstyle = "italic";">palabra</span> es diferente al resto. <p> Resultado del ejemplo Este párrafo, y sólo este párrafo, es verde, esta en negrita y tiene unos grandes márgenes. Este párrafo es del color habitual, pero esta palabra es diferente al resto. 3.7 Combinando Hojas de Estilo Se puede utilizar más de una hoja de estilo para fijar las características de un documento. Esto es deseable si se tienen varias hojas de estilos parciales, de forma que cada una de ellas define diferentes estilos. Supongamos, por ejemplo, que estamos escribiendo un informe sobre los beneficios de un producto de red de una compañia llamada AlpargataNet. Puede que se necesite usar tres hojas de estilo: una definiendo el estilo habitual de los informes, otra que defina el estilo de los productos de red, y otra que defina el estilo de la compañia SneakerNet. El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento. 62
15 @import "estilos/redes"; h1 { color: red; <link rel=stylesheet type="text/css" href=url( <link rel=stylesheet type="text/css" href=url(estilos/informe)> <link rel=stylesheet type="text/css" href=url(estilos/redes)> h1 {color: red; /* tiene preferencia sobre las hojas externas */ Entre las hojas de estilo externas, la última tiene precedencia sobre las demás. Asi, en caso de conflicto, se escoge el estilo de la última hoja de estilo especificada. Los estilos definidos para elementos individuales tienen precedencia sobre los definidos en el elemento <style> y sobre los definidos en las hojas externas. En general, los estilos locales se sobreponen a los generales, como se muestra en el siguiente ejemplo. p {color: blue; b {color: green; <style type="text/javascript"> tags.p.color = "blue"; tags.b.color = "green"; Uso de la hoja de estilo <p>tal y como debería ser este párrafo es de color azul, <b>y esta parte en negrita es de color verde</b></p> <p style="color: orange;">este otro párrafo no es de color azul, <b style="color: red;">ni esta parte en negrita es de color verde</b>, porque se ha usado style para cambiarles el color.</p> Resultado del ejemplo Tal y como debería ser este párrafo es de color azul, y esta parte en negrita es de color verde Este otro párrafo no es de color azul, ni esta parte en negrita es de color verde, porque se ha usado style para cambiarles el color. 63
16 4. PROPIEDADES DE FORMATO DE ELEMENTOS DE BLOQUE En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, <h1> y <p> son elementos de bloque, pero <em> no lo es. Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Despues se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su comportamiento respecto a la herencia de propiedades. 4.1 Formato de Bloques: Introducción y Ejemplos Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una caja. Cada caja puede tener características de estilo propias tales como márgenes, bordes, relleno y una imagen o color de fondo. Los márgenes indican la separación entre el borde de la caja y el borde del documento. Estos bordes pueden tener apariencia plana o tridimensional. El relleno ("padding") indican la separación entre el borde de los elementos y el contenido de los mismos. También se puede fijar la anchura de los elementos de bloque, bien mediante un valor especifico, o bien mediante un porcentaje de la anchura total del documento. En este caso es redundante fijar los márgenes derecho o izquierdo y la anchura. Si se especifican la anchura y los dos márgenes, el valor de del margen izquierdo tiene prioridad sobre los demás valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia máxima desde el borde derecho de elemento que lo contiene. El valor del anchura es utilizado sólo si no sobrepasa los limites de anchura del elemento que lo contiene. El alineación horizontal puede a izquierda, derecha o centrado. Esto se consige usando la propiedad float en CSS o la propiedad align en JavaScript. En los siguientes ejemplos se muestra el uso de márgenes, relleno, bordes, fondos y alineación. 64
17 p { color: #ffffff; /* blanco */ /* márgenes */ margin-left: 20%; margin-right: 20%; /* anchura del borde */ border-top-width: 10pt; border-bottom-width: 10pt; border-right-width: 5pt; border-left-width: 5pt; /* estilo y color del borde */ border-style: outset; border-color: blue; /* relleno */ padding-top: 10pt; padding-bottom: 10pt; padding-right: 20pt; padding-left: 20pt; h3 { /* alineación al centro*/ text-align: center; /* tamaño y peso de la fuente*/ font-size: 14pt; font-weight: bold; background-image: url("papel.jpg"); /* anchura del 80% */ width: 80%; border-color: green; border-style: solid; /* todas las partes del borde tienen la misma anchura */ border-width: 10pt; /* relleno uniforme */ padding: 5%; <style type="text/javascript"> with (tags.p) { /* márgenes */ marginleft="20%"; marginright="20%"; /* anchura del borde */ bordertopwidth="10pt"; borderbottomwidth="10pt"; borderrightwidth="5pt"; borderleftwidth="5pt"; /* estilo y color del borde */ borderstyle="outset"; bordercolor="blue"; /* relleno */ paddingtop="10pt"; paddingbottom="10pt"; paddingright="20pt"; paddingleft="20pt"; with(tags.h3) { /* alineación al centro*/ textalign="center"; /* tamaño y peso de la fuente*/ fontsize="14pt"; fontweight="bold"; backgroundimage="papel.jpg"; /* anchura del 80% */ width="80%"; bordercolor="green"; borderstyle="solid"; /* todas las partes del borde tienen la misma anchura */ 65
18 borderwidths("10pt"); /* relleno uniforme */ paddings("5%"); Uso de la hoja de estilo <h3>titulo h3 con borde sólido y fondo</h3> <p>los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene.</p> <p>este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparan demasido espacio.</p> Resultado del ejemplo Titulo h3 con borde sólido y fondo Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene. Este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparan demasido espacio. 4.2 Márgenes Los márgenes indican la separación entre el borde del bloque y el borde del documento, o elemento padre. Se pueden fijar los márgenes derecho, izquierdo, superior e inferior. Para ello se deben utilizar las siguientes nombres de propiedad: margin-top margin-bottom margin-left margin-right margin margintop 66
19 marginbottom marginleft marginright margins() En vez de especificar los dos márgenes se puede utilizar la propiedad width. Se pueden utilizar valores específicos, como 200 puntos, o valores relativos, como el 50% de la anchura del elemento padre. Es redundante fijar los dos márgenes y la anchura, pues dos de estos tres valores implican el tercero. Para especificar los márgenes por defecto para un documento se deben especificar para la etiqueta <body>. En el siguiente ejemplo se fijan dichos márgenes en 20 puntos a derecha e izquierda. body {margin-left: 20pt; margin-right: 20pt; <style type="text/javascript"> with (tags.body) { marginleft="20pt"; maginright="20pt"; Ejercicio: intente replicar el modelo de márgenes que puede objservar en la siguiente imagen: 67
20 4.3 Bordes Los bordes se pueden utilizar para muchas cosas, como por ejemplo, separar elementos o destacar ciertas partes de un documento. Para que un borde se muestre es necesario darle anchura y color. A continuación describimos como hacerlo. Se puede fijar la anchura del borde que rodea un elemento de bloque usando las siguientes propiedades: border-top-width border-bottom-width border-left-width border-right-width border-width bordertopwidth borderbottomwidth borderleftwidth borderrightwidth borderwidths() Los valores que pueden tomar son tanto numéricos como palabras reservadas como thin, medium y thick. Vea una muestra: Se puede fijar el estilo del borde usando la propiedad border-style de CSS o la propiedad borderstyle de JavaScript. Los valores que pueden tomar son dotted, dashed, solid, double, groove, ridge, inset y outset. dotted dashed solid double groove ridge inset outset Las propiedades de borde se puede expresar de dos formas, por separado como hasta ahora, o combinadas como se muestra en el siguiente ejemplo: 68
21 Por separado: p { border-width: 1px; border-style: solid; border-color: blue; Combinadas: p { border: 1px solid blue; 4.4 Relleno El relleno indican la distancia entre el borde de un elemento y su contenido. El relleno se muestra incluso si el borde del elemento no lo hace. Se puede fijar el tamaño del relleno de un elemento de bloque utilizando las siguientes propiedades. padding-top padding-bottom padding-left padding-right paddingtop paddingbottom paddingleft paddingright Ejercicio: cree un estilo que aplicado a una tabla consiga que los elementos en el interior de las celdas tengan un relleno de 16 pixels a izquierda y derecha y 8 pixels arriba y abajo. 4.5 Herencia de Propiedades de Formato de Bloque La características de anchura, márgenes, bordes y relleno de los elementos padre no son heredadas por sus hijos. Sin embargo, a primera vista, a veces puede parecer que si son heredados, pues los valores los elementos padre afectan a sus elementos hijos. Supongamos que a un elemento <div> le fijamos un margen izquierdo de valor 10 puntos. De esta forma la caja que le rodea se encuentra desplazada 10 puntos hacia la derecha. Además supondremos que no tiene bordes ni relleno. Todos sus elementos hijo estarán pegados a su margen izquierdo, que como esta 10 puntos desplazado hacia la derecha, causara un efecto parecido a si ellos mismos también tuviesen borde izquierdo. Pensemos en que ocurriria si los hijos heredasen estas características de sus padres. El bloque <div> esta indentado 10 puntos. Sus hijos a su vez estarán indentados otros 10 puntos con respecto a el, con lo cual el aspecto global es que los hijos estarian indentados 20 puntos. 69
22 Algo parecido ocurriría con una imagen de fondo. Si se heredase esta propiedad en vez de ver una sola copia de la imagen de fondo, normalmente apliacada a body, veriamos muchas copias de la esquina superior izquierda si no se cambia la alineación por defecto de la imagen. 5. LAS CAPAS O LAYERS 5.1 Capas Las capas son bloques con contenido HTML que pueden posicionarse de manera dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS, de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos CSS. Es la mejor ilustración de lo que significa separar contenido de presentación. En realidad, el nombre de capas proviene de Netscape, que estos elementos los implementaba como <layers>, en castellano capas. Las versiones modernas de Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado por la más standard <div> No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape son diferentes, ambos usan algunas extensiones propias, aunque ambos admiten los standares de la W3C con lo que el uso de estos elementos es bastante universalizable. 5.2 Definición En realidad las capas no se definen completamente mediante el lenguaje HTML, sino necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en nuestras páginas estos elementos movibles, ocultables y en general manipulables de forma dinámica. Por ejemplo: <STYLE TYPE="text/css">.la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200 </STYLE> Con esto hemos definido un tipo de capa, denominada la_capa, cuya altura es de 200 px y anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del margen izquierdo de la página. Repito que hemos definido una clase capa, pero no hemos construido la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID <DIV ID="micapa"> <H1>Esto es contenido</h1> <P>Aquí sigue más contenido HTML </p>... </DIV> Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño. Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta (absolute). Pero también podemos definir capas de posicionamiento relativo, es decir, que más que definir las coordenadas de suposición respecto a la ventana, describimos su posición respecto al lugar donde aparezca en el texto. En otras palabras: describimos desplazamiento de la capa respecto de donde la ponemos. Se definen así: <STYLE TYPE="text/css">.relativa {position: relative; left: 20px; top: 100px; </STYLE> 70
23 Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta última está construida con una etiqueta <span>, para evitar el salto de línea propio de los bloques. 5.3 Propiedades Existen varias propiedades de las capas que podemos modificar, como son la posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos: Propiedad Significado Valores left y top width y height clip z-index Sitúan la esquina superior izquierda de la capa respecto a la esquina superior izquierda de la capa donde esté metida. Hay que tener en cuenta que el documento completo también se considera una capa. Determinan la anchura y altura de la capa. Nos permite definir el área que se podrá ver dentro de la capa. Por ejemplo, clip:rect(20px 30px 40px 10px); recortará la capa creando un cuadro visible cuya esquina superior izquierda está a 10 pixels por la izquierda y 20 por arriba de la de la capa y cuyo tamaño sería de de ancho y de alto. Las capas con un mayor z- index se colocarán más arriba (se dibujarán al final, encima de las otras). Debe ser un valor positivo y único: dos capas no pueden tener el mismo z-index. 71 distancia en pixels, por defecto cero. un tamaño en pixels. un área. número positivo, por defecto las capas definidas en el código HTML más tarde están más arriba. visible, hidden (oculta) o inherit (hereda la visibilidad de la capa padre). En visibility Especifican si la capa debe aquellas capas que verse o estar oculta. simplemente estén dentro de la página principal, este valor es equivalente a visible. background-image Gráfico de fondo de la capa. una dirección. background-color<imagenenlinea direccion="graficos/explorer.gif" descripcion="explorer"/> y layerbackground-color<imagenenlinea direccion="graficos/netscape.gif" descripcion="netscape"/> Color de fondo de la capa. un color.
24 6. FUENTES DESCARGABLES Las fuentes cargables consisten en la posibilidad de incluir en el documento HTML la definición de las fuentes empleadas por si éstas no se encontraran disponibles en el sistema de destino. Dicha definición consiste en un fichero que se debe colocar en la máquina servidora, al igual que el documento o las imágenes. Los ficheros de fuentes, como otros muchos recursos, se pueden conseguir en Internet, pero el usuario no las puede grabar en disco (como puede hacer con el documento o las imágenes). Por otro lado, hay que tener en cuenta que las fuentes están sujetas a las "leyes de derechos de autor", por lo que, antes de utilizarlas dentro de nuestras páginas deberemos asegurarnos de tener permiso para hacerlo. Para que todo funcione correctamente, al servidor habrá que añadirle un nuevo tipo MIME para que reconozca este tipo de archivos. El nuevo tipo es application/font-tdpfr, asociado a la extensión.pfr. 6.1 Cómo Usar Fuentes Descargables. Una vez se dispone del fichero de definición de fuentes, por ejemplo, fuente.pfr, se pueden asociar al documento a través de un estilo, por medio de la palabra fontdef, por " o también con la etiqueta <link>: <link rel=fontdef src=" Una vez que el fichero ha sido cargado desde el servidor donde están las páginas, imágenes, fuentes, etc., para utilizar estas fuentes, modificaremos el valor del atributo face de la etiqueta <font>, por ejemplo: <font face = "Gutemberg"> Vamos a probar el tipo de letra Gutemberg </font> o bien definiendo un estilo CSS, utilizando la propiedad font-family: clasico { font-family: Gutemberg, sans-serif <div class="clasico">este tipo de letra es la Gutemberg</div> Este párrafo utilizará el tipo de fuente Gutemberg si está disponible, sino utilizará la sans-serif. Podemos ver algunos ejemplos de fuentes descargables en la página de En tenemos otros ejemplos de fuentes descargables en la página de TrueDoc. Esta es la fuente EyeBall. He aquí una muestra de la fuente Amelia tomada directamente desde su servidor: ABCDEFGHIJKLMNOPQRSTUVWXYZ 72
25 6.2 Herramientas de Diseño Dos programas que sirven para crear este tipo de ficheros son: Font Creator de High Logic Font Editorde SibCode FontLab Studio de Font Lab Al crear el fichero de definición de fuente, podemos especificar el dominio de la red en el que permitimos que se use dicha fuente. 73
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
Más detallesCreació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
Más detallesMaquetació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.
Más detallesCapas. Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML
Capas Capas Para definir una sección o división se utilizan las capas. Para esto utilizamos las etiquetas de HTML y Uso principal es poder aplicar estilo en el cuerpo/porción del documento
Más detallesHOJAS 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
Más detallesHOJAS 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:
Más detallesEjemplo: 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
Más detalles<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>
... ... Marcos en HTML
Más detallesCSS. 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
Más detallesCSS. Añadir estilos a las páginas web
CSS Añadir estilos a las páginas web Qué es CSS? CSS (Cascade Style Sheets) es un tipo de archivo que permite añadir estilos a páginas web (colores de texto, bordes, separaciones, etc.) Son archivos de
Más detallesELECTIVA 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
Más detallesCSS 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
Más detallesInformá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
Más detallesCurso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas.
Pag. 1 de 16. Curso Web accesible con XHTML y CSS. Bloque IV. El Modelo de Cajas. Cursos Thales CICA Web 2006. Curso WEBCSS A. Gámez, L.M. Marín, F. Mesa & S. Fandiño El modelo de cajas Índice del bloque
Más detallesInformá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
Más detallesHTML Estático: Hojas de Estilo. HTML Estático: Hojas de Estilo
escuela técnica superior de ingeniería informática HTML Estático: Hojas de Estilo Departamento de Lenguajes Noviembre 2004 Usando el atributo STYLE dentro de una etiqueta HTML Esto Esto es es un un párrafo
Más detallesCSS EFECTO SOMBRA CON TEXT-SHADOW Y BLUR, TEXT-OVERFLOW CLIP, ELLIPSIS Y LINE-HEIGHT (INTERLINEADO) (CU01041D)
APRENDERAPROGRAMAR.COM CSS EFECTO SOMBRA CON TEXT-SHADOW Y BLUR, TEXT-OVERFLOW CLIP, ELLIPSIS Y LINE-HEIGHT (INTERLINEADO) (CU01041D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Más detallesQUÉ 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
Más detallesDiseñ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
Más detallesTIC II Tema 2: Programación Web
TIC II Tema 2: Programación Web INTRODUCCIÓN Las Hojas de Estilo en Cascada o CSS es un lenguaje creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es
Más detallesCSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D)
APRENDERAPROGRAMAR.COM CSS BACKGROUND- POSITION, BACKGROUND- ATTACHMENT, BACKGROUND-CLIP, ORIGIN Y SIZE. SHORTAND BACKGROUND. EJEMPLOS (CU01031D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesEn 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
Más detallesTEST TICO 2º BACHILLERATO
TEST TICO 2º BACHILLERATO UNIDAD: DISEÑO Y EDICIÓN PÁGINAS WEB CON HTML (COMPLETO) Cada pregunta consta de 3 opciones, siendo solo una respuesta la correcta. Calificación: Respuesta correcta: +1 Respuesta
Más detallesLÍNEAS SEPARADORAS. ETIQUETA <HR>. COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B)
APRENDERAPROGRAMAR.COM LÍNEAS SEPARADORAS. ETIQUETA . COMENTARIOS EN HTML. ATRIBUTOS SIZE, WIDTH, NOSHADE (DEPRECATED). EJEMPLOS (CU00716B) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesQue 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
Más detallesYusef 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
Más detallesCSS. 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
Más detallesCSS (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
Más detallesSHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D)
APRENDERAPROGRAMAR.COM SHORTAND: NOTACIÓN CSS ABREVIADA. BORDER- WIDTH Y THIN, MEDIUM, THICK, BORDER-COLOR Y TRANSPARENT. BORDER. EJEMPLOS. (CU01027D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesPROPIEDAD 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
Más detallesHojas de estilo en cascada
Hojas de estilo en cascada Es la forma como indicamos el diseño, colores, tamaños, etc de un sitio web, separado de la programación y la estructura de este. HTML Estructura, músculos, huesos web CSS El
Más detallesDar 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
Más detallesTaller de Programación II J2EE
ᄎ INACAP Universidad Tecnológica de Chile Sede Santiago Centro Taller de Programación II J2EE Tema 02 Cascading Style Sheets (CSS) Ing. Manuel López R. Qué es CSS? La tecnología CSS (Cascading Style Sheets
Más detallesZ-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
Más detallesHOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO
HOJAS DE ESTILO PORTAL PISTA LOCAL PÁGINA DE INICIO PORTADA Las hojas de estilo referenciadas en la portada (http://pistalocal.pista-femp.org.es/index.php) son:
Más detallesInformá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:
Más detallesInformá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
Más detallesCómo se define? selector {propiedad1: valor1; propiedad2: valor2}
Hojas de Estilos Cómo se define? selector {propiedad1: valor1; propiedad2: valor2} Tipos de selector Etiqueta de HTML Identificador De clase sintaxis Nbre_Etiqueta #nbre_identificador.nombredeclase Dónde
Más detallesGuí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
Más detallesQué es CSS. Si necesitamos hacer modificaciones lo hacemos en un sólo lugar y no tenemos que editar todos los documentos HTML por separado.
Qué es HTML y CSS Una página web es un documento de texto el cual se escribe en lenguaje HTML, con el que se que crea el contenido de una web. Aquí se manejan los contenidos. Por otro lado, existe el código
Más detallesIII. Hojas de estilo en cascada (CSS)
III. Hojas de estilo en cascada (CSS) 1. Introducción 2. Declaración de CSS 2.1. Propiedades típicas en CSS 2.2. Inserción de CSS en HTML 3. Herencia de propiedades en CSS 4. Declaración avanzada de CSS
Más detallesArquitectura 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
Más detallesInformática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES Licenciatura en Artes Multimediales Informática General 2018 Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales CSS - parte 2 Box
Más detallesDISEÑ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
Más detallesCONCEPTO 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
Más detallesescuela 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
Más detallesescuela 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
Más detallesQUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E)
APRENDERAPROGRAMAR.COM QUERYSELECTORALL JAVASCRIPT Y QUERYSELECTOR. ACCEDER A ELEMENTOS POR SELECTORES CSS. EJEMPLOS (CU01134E) Sección: Cursos Categoría: Tutorial básico del programador web: JavaScript
Más detallesModelo de Cajas. Maquetación Web con HTML 5 y CSS 3. Ing. Rasjido Jose UNPA - UACO
Modelo de Cajas Maquetación Web con HTML 5 y CSS 3 Ing. Rasjido Jose UNPA - UACO AGENDA Propiedades de las cajas Tipos de cajas Esquemas de posicionamiento Bibliografía 2 Propiedades de las cajas Cada
Más detallesProblemas típicos con HTML
Introducción a Lenguajes web Estela Conde Álvarez Isdefe 4 Noviembre 2 008 Introducción al Diseño Para Td Todos en las TIC Problemas típicos con HTML Permitía errores Cada navegador etiquetas propias Mezcla
Más detallesInformática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales Box model El "box model" es el comportamiento de CSS que hace que todos los elementos incluidos en una página
Más detallesPROPIEDADES 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
Más detallesTEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D)
APRENDERAPROGRAMAR.COM TEXT-ALIGN, COLOR, TEXT- DECORATION, TEXT- INDENT, WHITE-SPACE NOWRAP, PRE, PRE- WRAP, PRE-LINE O NORMAL (CU01040D) Sección: Cursos Categoría: Tutorial básico del programador web:
Más detallesPADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D)
APRENDERAPROGRAMAR.COM PADDING Y MARGIN CSS. TOP, RIGHT, BOTTOM Y LEFT. MARGIN NEGATIVO Y CENTRAR CON MARGIN AUTO. EJEMPLOS (CU01029D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Más detallesEL 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
Más detallesHojas 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
Más detallesCONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D)
APRENDERAPROGRAMAR.COM CONCEPTOS DE MARGEN Y RELLENO CSS. DIFERENCIAS ENTRE MARGIN Y PADDING CSS CON EL BOX MODEL. EJEMPLOS (CU01028D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS
Más detallesCapí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:
Más detallesYusef 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,
Más detallesESTRUCTURA DEL CÓDIGO HTML5
ESTRUCTURA DEL CÓDIGO HTML5 1. DocType Es la etiqueta que se escribe en la primera línea del código. Permite declarar el tipo de documento. Es decir, el doctype indica que el documento está escrito siguiendo
Más detallesConceptos 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
Más detallesMENÚ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
Más detallesCSS1. 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-
Más detallesIntroducció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!
Más detallesEFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D)
APRENDERAPROGRAMAR.COM EFECTO SOMBRA CSS CON BOX-SHADOW. SOMBRA INTERIOR INSET. BLUR O DIFUMINADO, SPREAD. EJEMPLOS Y EJERCICIOS RESUELTOS (CU01059D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesApuntes de CSS Novedades CSS3
Apuntes de CSS3 14. Novedades CSS3 0. Bordes en nuestra página. Todos los elementos HTML son considerados como bloques. Para visualizar sus bordes podemos recurrir a nuestra hoja de estilos CSS. El ejemplo
Más detallesFigura 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
Más detallesESTILOS 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
Más detallesCSS: hojas de estilo en cascada
CSS: hojas de estilo en cascada Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol
Más detallesEFECTO 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:
Más detallesUTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B)
APRENDERAPROGRAMAR.COM UTILIDAD DE CSS EN DESARROLLOS WEB JUNTO A HTML Y JAVASCRIPT. APLICAR ESTILOS. EJEMPLO SENCILLO. (CU00732B) Sección: Cursos Categoría: Tutorial básico del programador web: HTML desde
Más detallesCSS: hojas de estilo en cascada. Visualización de una página I. Luis Fernando Llana Díaz. 21 de abril de 2008
Departamento de Sistemas Informáticos y Computación Universidad Complutense de Madrid 21 de abril de 2008 Visualización de una página I 1 Analizar el HTML y crear un árbol que repesenta el documento (document
Más detallesFormateo de Texto. (parte II)
Formateo de Texto (parte II) JUAN CARLOS CONDE RAMÍREZ WEB-TOOLS Objetivos Identificar la diferencia entre background y foreground. Conocer las diferentes maneras de aplicar color al texto. Conocer más
Más detallesCSS: Hojas de Estilo en Cascada. Didier Fabián Granados Muñoz
CSS: Hojas de Estilo en Cascada Didier Fabián Granados Muñoz Contexto Qué hay detrás de esto? Contexto Cuenta la leyenda que al construir un documento HTML se tenía que definir cada una de las propiedades
Más detallesDEGRADADOS 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
Más detallesCSS. Contenido. Programación en Internet Curso Introducción Sintaxis. Cajas Posicionamiento. Programación en Internet
Departamento de Lenguajes y Sistemas Informáticos CSS Programación en Internet Curso 2006-2007 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades Colores Cajas Posicionamiento Contenido
Más detallesCOLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D)
APRENDERAPROGRAMAR.COM COLUMNAS CSS: COLUMN-COUNT, COLUMN-WIDTH, COLUMNS, COLUM-GAP Y COLUM-RULE. EJEMPLOS PRÁCTICOS (CU01057D) Sección: Cursos Categoría: Tutorial básico del programador web: CSS desde
Más detallesPROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D)
APRENDERAPROGRAMAR.COM PROPIEDAD DISPLAY CSS. INLINE, BLOCK, NONE, LIST-ITEM, INLINE-BLOCK. EJERCICIOS DE EJEMPLO RESUELTOS EN CÓDIGO CSS (CU01033D) Sección: Cursos Categoría: Tutorial básico del programador
Más detallesIntroducción. En CSS, los selectores se usan para elegir los elementos HTML que queremos estilizar de nuestra
Tema. Selectores Objetivos. Construir hojas de estilo basadas en los selectores CSS Material a utilizar. * Editor de texto para el código HTML * Navegador Web Introducción. En CSS, los selectores se usan
Más detallesExamen de CSS - Cuestionario
Examen de CSS - Cuestionario Qué propiedad de CSS se emplea para definir el espacio entre caracteres? word-spacing white-space letter-spacing Las anteriores respuestas no son correctas Cómo se hace en
Más detallesQué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML.
Qué es CSS? CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML. CSS es la mejor forma de separar los contenidos y su
Más detallesQué 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,
Más detallesHojas de Estilo en Cascada (CSS)
Hojas de Estilo en Cascada (CSS) Grupo de Ingeniería del Software y Bases de Datos Universidad de Sevilla Presentación y La separación del (la información que se muestra) de la presentación (cómo se muestra)
Más detallesPrácticas Internet y web 2.0. Utilizar hojas de estilo para dar formato a las páginas web.
PRÁCTICA 13. HOJAS DE ESTILO. Objetivos: Utilizar hojas de estilo para dar formato a las páginas web. Teoría: ESTILOS. CSS (Cascading Style Sheets) es un lenguaje que describe el estilo de una página web.
Más detallesCSS 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
Más detallesContenido. Programación en Internet Curso Introducción Sintaxis. Cajas Posicionamiento. Programación en Internet
Departamento de Lenguajes y Sistemas Informáticos CSS Programación en Internet Curso 2009-2010 Introducción Selectores Propiedades Contenedores Uso de un CSS Unidades d Colores Cajas Posicionamiento Contenido
Más detallesCSS 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
Más detallesRoberto 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
Más detallesESTILIZANDO CON CSS. Sesión 08. By Ing. David Gil
ESTILIZANDO CON CSS Sesión 08 By Ing. David Gil UNIDADES CSS UNIDADES DE LONGITUD Un valor de longitud se forma por un signo + o - opcional, seguido de un número y de una abreviación de dos letras que
Más detallesInformática General Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales
Informática General 2018 Cátedra: Valeria Drelichman Pedro Paleo Leonardo Nadel Norma Morales CSS - Hojas de Estilo Las hojas de estilo en cascada son un lenguaje formal usado para definir la presentación
Más detallesTema 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
Más detallesCascading Style Sheets (CSS) Programación de Web Estático
UNIVERSIDAD AUTÓNOMA METROPOLITANA UNIDAD CUAJIMALPA Cascading Style Sheets (CSS) Programación de Web Estático Introducción CSS: Cascading Style Sheets Hojas de estilo en cascada Los estilos definen cómo
Más detalles1. 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
Más detallesREFERENCIA 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
Más detallesDISEÑOS DE TABLAS CSS. BORDER-SPACING, CAPTION-SIDE, EMPTY- CELLS. COLORES DE FILAS INTERCALADOS ALTERNOS (CU01052D)
APRENDERAPROGRAMAR.COM DISEÑOS DE TABLAS CSS. BORDER-SPACING, CAPTION-SIDE, EMPTY- CELLS. COLORES DE FILAS INTERCALADOS ALTERNOS (CU01052D) Sección: Cursos Categoría: Tutorial básico del programador web:
Más detallesDepartamento 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
Más detallesUNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION
CICLO 01-2016 UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION GUIA DE LABORATORIO Nº 2 Nombre de la practica: Introducción y conceptos básicos de CSS Lugar de ejecución:
Más detalles