Búsqueda en el Foro:
Buscar


« Ver tema anterior :: Ver siguiente tema »  
Autor Mensaje
Mensaje17-09-2008, 19:15 (UTC)    
Título del mensaje: [Tutorial CSS] Como agregar nuevas etiquetas CSS

[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.
______________


Ultima edición por centro-faq el Mie Sep 17, 2008 3:29 pm; editado 1 vez
Mensaje17-09-2008, 19:18 (UTC)    
Título del mensaje:

Que Quires decir con etiquetas ^?????????????
______________
Mensaje17-09-2008, 19:21 (UTC)    
Título del mensaje:

me refiero a etiquetas a todo lo que este dentro de "<" y ">"
______________
Mensaje17-09-2008, 19:25 (UTC)    
Título del mensaje:

Las dudas o consultas deben hacerse por aquí ya que a varios users les puede servir la misma y ese es el sentido de un Tutorial.
En mi opinión es una explicación media enredada de algo sencillo... además me gustaría agragar o corregir que el "-->" no es necesario ni al principio, ni al final... por lo tanto se pued obviar ya que no surte efecto... y respecto al "}" final solo es necsario cuando se agragarán más parámetros, es decir que si solo 1 es inútil colocarlo...
Igual gracias por el aporte!

Salu2!
Mensaje17-09-2008, 19:27 (UTC)    
Título del mensaje:

tokarg escribió:
Las dudas o consultas deben hacerse por aquí ya que a varios users les puede servir la misma y ese es el sentido de un Tutorial.
En mi opinión es una explicación media enredada de algo sencillo... además me gustaría agragar o corregir que el "-->" no es necesario ni al principio, ni al final... por lo tanto se pued obviar ya que no surte efecto... y respecto al "}" final solo es necsario cuando se agragarán más parámetros, es decir que si solo 1 es inútil colocarlo...
Igual gracias por el aporte!

Salu2!


Verdad ahora que me acuerdo los <!-- son para comentarios XD Deveria colcoar que es para avanzados. con respecto "}" es para cuando se termina una etiqueta completa de CSS.
______________
Mensaje17-09-2008, 19:35 (UTC)    
Título del mensaje:

centro-faq escribió:
Deveria colcoar que es para avanzados

Amigo, te parece para avanzados??, la explicación si es para avnazados porque esta algo compleja, podrías ejemplificar un poco más con el CSS completo y hasta el más novato te entendería:
Cita:
<style type="text/css">
TD."CLASS"}
BAKGROUND-IMAGE:URL(AQUÍ TU URL DE IMAGEN PERSONALIZADA)
<style>

Con sus respectivas explicacicones y variaciones entre formato de texto, formato e imágen es suficiente y claro!
Además una captura de un code de fuente también sería explicativo.
Solo tomalo como un consejo

Salu2!
Mensaje17-09-2008, 19:39 (UTC)    
Título del mensaje:

ok...esque era un tutorial a la rapida para marinika y para mati-i2. Ahora hare ejemplos con imagenes.
______________
Mensaje18-09-2008, 10:22 (UTC)    
Título del mensaje:

si, pero yo no lo entendi... porque nose que va primero y que va despues jejej
yo pensaba que habia un code como en iceblue, red y buterfly... pero igual, ya le cojere el trankillo
______________

Mensaje20-09-2008, 18:50 (UTC)    
Título del mensaje: para:centro-faq

e visto muchas webs y solo e visto la tuya de lo qe estoy buscando qe es varios menus separados¿como lo haces lo de los menus separados englobando otros apartados?
Mensaje21-09-2008, 20:42 (UTC)    
Título del mensaje:

este tema no es de eso


centro-faq, cuando pones las imagenes?
______________

Mensaje21-09-2008, 21:05 (UTC)    
Título del mensaje:

si las tenias que poner hace mucho

______________

Plantillas | CSS | HTML | Normas del foro | Contacto | Tutoriales
Mail de ayuda: contacto@radioflash.com

Mensaje21-09-2008, 22:22 (UTC)    
Título del mensaje:

Muy buen tutorial me as aclarado unas dudas. ahora voy a poder llevar al máximo mi ingenio.
______________
Quieres mi web? Yo también :P
Mensaje11-10-2008, 22:04 (UTC)    
Título del mensaje:

NO ENTENDI EL TUTORIAL
PONE IMAGENES PLIS
______________


Ultima edición por m-mya el Sab Oct 18, 2008 5:00 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group