Foro de ayuda Foro de ayuda

 
 F.A.Q.F.A.Q.   BuscarBuscar   Lista de MiembrosLista de Miembros   Grupos de UsuariosGrupos de Usuarios   RegístreseRegístrese 
 PerfilPerfil   Identifíquese para revisar sus mensajesIdentifíquese para revisar sus mensajes   ConectarseConectarse 


[Manual] Cascading Style Sheet "CSS"

 
Publicar Nuevo Tema   Responder al Tema    Foro de ayuda -> Manuales
Ver tema anterior :: Ver siguiente tema  
Autor Mensaje
YoshiGM
Invitado





MensajePublicado: Fri Feb 20, 2015    Título del mensaje: [Manual] Cascading Style Sheet "CSS" Responder citando

¡Hola a todos!

Aquí les traigo un breve manual sobre este sencillo pero muy útil lenguaje, con el cuál podrán personalizar los colores y el diseño en general de sus foros de una manera rápida.

Pero, ¿Qué es el CSS?

Wikipedia escribió:
Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.


Entonces, ya que entendemos lo que significa pasaremos a utilizar este lenguaje en nuestros foros de Esforos !

1. Accedemos a nuestro foro y luego a nuestro Panel de Administración.

2. Pinchamos en la pestaña HTML Avanzado.

3. Luego en la parte de <html> <head> abriremos una baliza nueva llamada <style> la cual nos servirá para escribir nuestro código CSS!

Código:
<style>
AQUI EL CSS
</style>


En donde pone AQUI EL CSS es donde escribiremos o pegaremos nuestro código para nuestro foro. Todo lo que pongamos debe de ir antes de </style>, ya que lo contrario puede provocar errores.

Supongamos, que queremos poner un borde al foro, porque el color que tiene no es acorde al tema de nuestro foro..
Bueno, eso es muy fácil, vamos a requerir de 1 atributo(la configuracion) y el div(la zona que se modifica)

En este caso el atributo que indica esta zona se llama bodyline el cuál en CSS viene acompañado de un signo de puntuación de esta forma:

Cita:
.bodyline


En el CSS necesitamos siempre comenzar el código abriendo una llave "{" y cerrandola al final del código "}" , quedando de esta manera:

Cita:
.bodyline {
TUS ATRIBUTOS
}


En donde TUS ATRIBUTOS es donde colocaremos la configuración del DIV como por ejemplo, el borde, el color del texto, espaciado,etc.

Si queremos volver al color del borde, pondremos el atributo border, luego se pone el tamaño, el color y el tipo de borde que necesitemos. Aqui tienen un ejemplo:

Código:
.bodyline {
border: 1px solid #D61636;
}


1px - El tamaño del borde en pixeles.
solid - El tipo de borde. Acepta borde rayado(dashed) o punteado(dotted) y como viene aqui, sólido(solid)
#D61636 - El color del borde. Acepta código hexadecimal o en inglés.

Exclamation Nunca olviden poner un ";" al finalizar un atributo ya que por este pequeño símbolo el código puede no funcionar.

Si esto lo pegamos en nuestro <style> va a quedar de esta forma:

Código:
<style>
.bodyline {
border: 1px solid #D61636;
}
</style>


Y al pinchar ACTUALIZAR obtendremos el resultado con el CSS que buscamos Very Happy



Y con esto señores y señoritas hemos creado nuestro primer código CSS.

Espero les sea de utilidad este manual y puedan explotar el diseño de su foro mucho más personalizado. Wink

Si les gusta este manual, en la proxima parte, les explicaré como obtener los DIVS correctos para poderlos editar bien!!

Un saludo,
YoshiGM
Volver arriba
Phosphorus



Sexo: Sexo:Hombre
Registrado: 22 Feb 2011
Mensajes: 221
Ubicación: Entre las tinieblas...
Estado: Offline
MensajePublicado: Thu Feb 26, 2015    Título del mensaje: Responder citando

Yoshi que bien tenía pensado hacer una compilación de CSS pero debo rendir materias para pasar la cursada y mis padres me quitaron el PC para que estudie y ando usando el celular para todo xD
En fin buen post, pasante por mí foro para ver que tal luego voy a postear los atributos de cada cosa y como distinguirlos pero viene genial para aclarar que es CSS y otras cosillas realmente te lo agradesco.
_________________

Mi foro PokeUniverso
New Tales Pokémon
Esforos lo más Wink
Volver arriba
Ver perfil del usuario Enviar mensaje privado   Visitar sitio web del autor MSN Messenger
Mostrar mensajes anteriores:   
Publicar Nuevo Tema   Responder al Tema    Foro de ayuda -> Manuales Todas las horas están en GMT + 1 Hora
Página 1 de 1

 
Saltar a:  
No puede crear mensajes
No puede responder temas
No puede editar sus mensajes
No puede borrar sus mensajes
No puede votar en encuestas

Temas Relacionados
 Temas   Respuestas   Autor   Lecturas   Último Mensaje 
No hay mensajes nuevos Páginas para subir archivos 22 meda 10444 Tue Jul 21, 2009
LuzPoder Ver último mensaje
No hay mensajes nuevos Creo que he encontrado algo bueno 2 Luiscri 569 Mon Aug 25, 2008
SasukeRoll Ver último mensaje
No hay mensajes nuevos Los foros con publicidad google improvisa 30 Smarter 3324 Mon Jul 28, 2008
Theheros Ver último mensaje
El tema está bloqueado: no pueden editarse ni agregar mensajes. Subforos terminado 47 EsForos 7194 Sat Nov 10, 2007
EsForos Ver último mensaje
No hay mensajes nuevos foro rol de la edad media 2 adrino 1963 Sat Nov 03, 2007
adrino Ver último mensaje
 



Crear foro gratis - Powered by phpBB © 2001, 2005 phpBB Group