[Tutorial CSS] Como agregar nuevas etiquetas CSS
Bueno, antes de comenzar con el tutorial, os muestro lo basico primero de CSS:
¿Por qué crees que en tu codigo CSS de ice-blue sale siempre “TD” antes de algo?
R=Porque TD se refiere a una tabla, y eso principalmente se hase para especificar que esa parte de CSS sera para una tabla.
¿Por qué crees que después de un TD sale un “.”?
R=muy facil, porque el “.” Hase que sea una parte de CSS, sin el, no podrias modificar la plantilla.
¿Por qué es necesario que sea esas partes para editar ice-blue?
R=no es necesario, tan simplemente es necesario porque PWG hase que sean específicamente esos parámetros, y como no podemos hacer nuestra propia plantilla, pues hay que acostumbrarse a esos parámetros. Y si aun no te convences, pues mira el codigo fuente de una plantilla ice-blue normal y los encontraras de esta forma en los menus:
<td class=”nav”>texto</td>
Y en CSS es:
Td.nav{…;}
¿A que te refieres con que no es necesario, entonces es posible agregar?
R= si, siempre y cuando lleven un “.” Al comienzo siempre sera un CSS, hasta la cosa mas estupida que se te ocurra seria CSS con un “.” Antes de la palabra.
¿Y puedo colocar al antes del “.”?
R=si puedes, siempre y cuando sea parte de un HTML, por ejemplo:
<a>
<div>
<font>
<p>
<img>
<br>
Etc…
¿Puedo colocar un mismo CSS pero para distintos objetos?
R= depende, si quieres que sea para varios codigos HTML pues seria un simple “.” Y después el texto, pero si quieres que sea solo para 2 o 3 objetos, seria algo asi:
Etiqueta.palabra {…;}
Otraetiqueta.palabra{…;}
Otraetiqueta2.palabra{…;}
Ejemplos de esta parte:
Td.palabra {…;}
a.palabra{…;}
img.palabra{…;}
Bueno, eso es lo basico, ahora comenzemos con el tutorial:
¿Puedo agregar una etiqueta llamada de cualquier forma?
R=si, siempre y cuando respete la ley de no espacios entre palabras, o sea, puede ser “Palabra_palabra2” pero no puede ser “Palabra palabra2” y si lo aplicaramos en CSS seria algo asi:
.palabra_palabra2 {…;}
Y igualmente como dije antes, especificarla a alguna etiqueta HTML:
p.palabra_palabra2 {…;}
(en ese ejemplo, se especifico para la etiqueta HTML <p> que seria una parrafo)
Ahora supongamos:
Queremos un texto que tenga fondo negro y palabras blancas, sabrias como hacerlo en CSS? Pues seria algo asi:
.texto{background-color:#000000; color: #FFFFFF;}
Si te has dado cuenta, coloque codigos de color, pues si, dependiendo de que parámetro de CSS ocupemos el codigo dependera, tambien si te has dado cuenta, después de cada parámetro de CSS que coloque, coloque una “;” que significa que ese parámetro termino. Sin ese “;” no funcionara el codigo. Ademas de que antes de los parámetros coloque “{“ que da a decir que el CSS tendra esos parámetros, sin eso, tambien fallara, y lo mismo tambien con el final “}” que significa que termina y luego(tal vez) halla otra etiqueta CSS.
Y ahora para llamarlo a una etiqueta HTML seria algo asi:
<p class=”texto”>Texto a modificar con CSS</p>
Si te diste cuenta, agrege la palabra “Class” y eso significa que da a conocer que esa etiqueta utilizara CSS. Tambien si te diste cuenta, no agrege el “.” Antes de la etiqueta CSS “Texto” porque? Porque al llamarlo a CSS no tienes que agregarlo o si no fallara.
¿en el ejemplo anterior, puede ser otra cosa que no sea “<p>”?
R= si, puede ser cualquier cosa: <td>, <div>, <a>, <br>, etc… siempre y cuando coloquemos “class” y el nombre correcto de la etiqueta.
El codigo no funciona, ¿Por qué?
R=lo mas posible es esto:
-Los parámetros de CSS no estan bien escritos o no los terminaste con “;” y sin cerrar después con “}” para terminar.
-Al traspasar a HTML no escribiste bien el nombre de la etiqueta CSS, ejemplo:
Escribiste en CSS: “Texto” y en HTML, por accidente, escribiste “Txeto”
Cuando ingreso a la pagina los codigos CSS simplemente se ven como texto, ¿Por qué?
R=tal vez por el simple hecho de que los colocaste como te dije y sin agregar que comienza un texto CSS. Para comenzar un texto CSS se hase asi:
<style stype=”text/CSS”>
<!--
…
Y para terminar:
--></style>
P.D= el <!-- no sirve, simplemente es para agregar comentarios, pero si quiere quitelos.
Ahora damos un codigo CSS mas complicado para los novatos. ¿Cómo hacer una imagen que tenga transparencia, y que al pasar el Mouse se vuelva normal? Supongo que muchos de los que saven parámetros CSS ya tienen la respuesta, y si no saves, ahora te explicamos:
<style type=”Text/CSS”>
<!--
.ejemplo {filter: alpha(opacity=50); opacity: 5; -moz-opacity:0.5;}
.ejemplo:hover{;}
--></style>
Los que saven de CSS un poco, diran: “¿Por qué 3 parametros para 1 sola opacasidad?” pues sensillo, por mala suerte, todos los navegadores no ocupan el mismo parámetros para la opacasidad/transparencia. Y hay dimos los ejemplos clasicos: Internet Explorer, Firefox, Mozilla. (este mismo orden)
Ademas de que para los novatos: el “HOVER” significa que al pasar el Mouse ocurra ese CSS
Y ahora para que se pase a la pagina con HTML:
<div class=”ejemplo”><img src=”URL imagen”></div>
Y asi hara que el parámetro que hemos creado con CSS, llamado “ejemplo”, se pueda usar en la pagina con los parámetros que le hemos dado ^^
Dudas o consultas por mp.
______________
