Vuelve el rompe patas
0000-00-00 00:00:00
Ayer por la mañana volvi a jugar de central, es decir, ayer volvió a la acción "El rompe patas de Casillas" (no es que sea natural de tan excelentisima pedania, es simplemente que en su campo de futbol comenzó la sangrienta leyenda del rompe patas). Hacia trillones de años que no jugaba abajo, hace tantisimo tiempo que este pais nuestro era tan inocente como para permitir cosas como que Solbes, alias el chico de los modulos, dirigiera(?) nuestra economia... ooops! Pues eso, gran partido de central en una defensa de tres, solo yo con dos laterales, mandando el fuera de juego, repartiendo regalitos en las espinillas y tobillos ajenos y llevando el balón hasta el medio centro constructor... mientras escribo este rollo, estoy pensando, vaya, con los psoe era central y con el pp me fui al ataque... y ahora que han vuelto, otra vez a defender! ¿Casualidad? Mmm.
El palabro de alto nivel: grima. El palabro inexistente: coercitar (leido en un blog del que he perdido la url en el fatidico accidente, ¿querria decir coaccionar?).
Anoche Kinomakino me preguntó como hago los elegantes efectos en la pagina tales como cambiar el puntero del ratón cuando pasa por encima de algunas zonas de texto o el cambio de color al pasar por encima de los enlaces. La solución es relativamente simple, y es usar CSS.
Para usar las hojas de estilo lo primero es decirle al navegador cual debe usar. Aunque es posible meter los estilos a pelo entre el html en general no es muy buena idea, sobre todo si estamos intentando que un conjunto de paginas mantengan el mismo diseño, que es de lo que estamos hablando aqui realmente. Para indicar el fichero css que queremos aplicar al html debemos incluir una linea parecida a la siguiente en nuestro html:
Facil, ¿verdad? El nombre del fichero, dcdev.css en este caso, pero que puede ser cualquiera que queramos; rel y type las dejamos tal y como estan, y en title le damos un titulo al estilo, explicaré para que sirve darle un titulo en el siguiente curso.
Ahora, vamos a crear nuestro propio fichero .css . Como ejemplo, os pongo un trozo de dcdev.css, la hoja de estilos que diseña SaiWEB. En particular, es el trozo que dice como tiene que comportarse el navegador ante una etiqueta html acronym, la que uso para poner el significado de las palabras raras.
Ahora un ejemplo bastante mas complejo, el trozo de codigo css que hace la mayor parte del dibujo del recuadro de los comentarios:
Los que sepais html vereis algo "raro", eso de div.comentario no tiene mucho sentido, ¿verdad? Pues en realidad si. Con eso, estamos diciendo que no todas las etiquetas div deben dibujarse así, sino solo las que sean de la clase comentario, es decir, solo las que definamos como <div class="comentario">.
Yo creo que para ser el primer dia, ya esta bien de codigo, ahora, a hacer las pruebas vosotros. Para mas informacion, podeis mirar aqui o simplemente podeis curiosear por ahi.
Por cierto, para trabajar con el html y los css os recomiendo este reemplazo del notepad que no va nada mal (el codigo con resaltado de sintaxis que habeis visto hoy es obra suya).
(Este post es una reconstrucción bastante penosa del brutal post que perdí anoche debido a un clickeo inoportuno: malditos sean los formularios web, y los canallas de los navegadores que se dejan cerrar sin avisar.)
El palabro de alto nivel: grima. El palabro inexistente: coercitar (leido en un blog del que he perdido la url en el fatidico accidente, ¿querria decir coaccionar?).
Anoche Kinomakino me preguntó como hago los elegantes efectos en la pagina tales como cambiar el puntero del ratón cuando pasa por encima de algunas zonas de texto o el cambio de color al pasar por encima de los enlaces. La solución es relativamente simple, y es usar CSS.
Para usar las hojas de estilo lo primero es decirle al navegador cual debe usar. Aunque es posible meter los estilos a pelo entre el html en general no es muy buena idea, sobre todo si estamos intentando que un conjunto de paginas mantengan el mismo diseño, que es de lo que estamos hablando aqui realmente. Para indicar el fichero css que queremos aplicar al html debemos incluir una linea parecida a la siguiente en nuestro html:
<head>
...
<link href="dcdev.css" rel="stylesheet" title="Normal" type="text/css"/>
...
</head>
...
<link href="dcdev.css" rel="stylesheet" title="Normal" type="text/css"/>
...
</head>
Facil, ¿verdad? El nombre del fichero, dcdev.css en este caso, pero que puede ser cualquiera que queramos; rel y type las dejamos tal y como estan, y en title le damos un titulo al estilo, explicaré para que sirve darle un titulo en el siguiente curso.
Ahora, vamos a crear nuestro propio fichero .css . Como ejemplo, os pongo un trozo de dcdev.css, la hoja de estilos que diseña SaiWEB. En particular, es el trozo que dice como tiene que comportarse el navegador ante una etiqueta html acronym, la que uso para poner el significado de las palabras raras.
acronym
{
color: #123C3D;
text-decoration: none;
border-bottom: 1px dashed #72A2A3;
cursor: help;
}
{
color: #123C3D;
text-decoration: none;
border-bottom: 1px dashed #72A2A3;
cursor: help;
}
Ahora un ejemplo bastante mas complejo, el trozo de codigo css que hace la mayor parte del dibujo del recuadro de los comentarios:
div.comentario
{
font-size: 8px;
font-family: verdana;
border: 1pt dotted silver;
padding: 10pt;
background-color: none;
text-align: justify;
color: #0a0a0a;
background-image: url(comillas.gif);
background-position: top right;
background-repeat: no-repeat;
}
{
font-size: 8px;
font-family: verdana;
border: 1pt dotted silver;
padding: 10pt;
background-color: none;
text-align: justify;
color: #0a0a0a;
background-image: url(comillas.gif);
background-position: top right;
background-repeat: no-repeat;
}
Los que sepais html vereis algo "raro", eso de div.comentario no tiene mucho sentido, ¿verdad? Pues en realidad si. Con eso, estamos diciendo que no todas las etiquetas div deben dibujarse así, sino solo las que sean de la clase comentario, es decir, solo las que definamos como <div class="comentario">.
Yo creo que para ser el primer dia, ya esta bien de codigo, ahora, a hacer las pruebas vosotros. Para mas informacion, podeis mirar aqui o simplemente podeis curiosear por ahi.
Por cierto, para trabajar con el html y los css os recomiendo este reemplazo del notepad que no va nada mal (el codigo con resaltado de sintaxis que habeis visto hoy es obra suya).
(Este post es una reconstrucción bastante penosa del brutal post que perdí anoche debido a un clickeo inoportuno: malditos sean los formularios web, y los canallas de los navegadores que se dejan cerrar sin avisar.)
ElCamposYLoQueEsMásAún (21/04/2004, 18:57) No hace falta que escribas la palabra div donde pone "div.comentario" basta con poner ".comentario" y si quieres hacer que dentro de uno de los div se comporte diferente para cada elemento, por ejemplo ".comentario a" o ".comentario title, .comentario text" si tienes varios subdiv dentro del div, o incluso cuando hablas de cosas dentro de un elemento, como ".comentario a:hover". Pero bueno, seguro que hay gente y tribunales constitucionales que sabe explicar esto mucho mejor que yo, he dicho. |
Saiyine (21/04/2004, 19:26) Tienes razón al ciento por ciento, pero, como creo que digo en el post, esta es solo la primera lección (magistral, me atreveria a decir). Lisa (pensando): Ay... Si, yo tambien lo he oido, anda, escucha un poco de música... |