AnshiG
Bienvenidos a AnshiG.!!

Conectarse

Recuperar mi contraseña


Afiliados Elite


Normales
Kimi wa Petto TOP
Pagerank

Últimos temas
» Blog de Renders!
Dom Ene 03, 2016 2:36 pm por Sakura92

» Hemos vuelto!!
Dom Ene 03, 2016 2:31 pm por Sakura92

» Actualización FEBRERO 2015
Vie Feb 27, 2015 10:22 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:42 am por Sakura92

» Cosplay (Varios)
Lun Feb 23, 2015 10:41 am por Sakura92

» Materias favoritas... y no tanto!
Jue Feb 12, 2015 10:47 am por Sakura92

» Que mascotas tienen, tuvieron y les gustaria tener?
Jue Feb 12, 2015 10:38 am por Sakura92

» Redes sociales
Jue Feb 12, 2015 10:09 am por Sakura92

» PS3: Juegos!
Jue Feb 12, 2015 10:03 am por Sakura92

» Consolas o PC?
Jue Feb 12, 2015 9:55 am por Sakura92

» BUSQUEDA DE STAFF
Mar Feb 10, 2015 7:18 pm por Sakura92

» Requisitos y Datos
Mar Feb 10, 2015 12:03 pm por Sakura92

» Limpieza de afiliados
Mar Feb 10, 2015 9:36 am por Sakura92

» Ola ke Ase?
Lun Dic 09, 2013 8:07 pm por Tetsumi

» Guia 7: Reglamento Administracion
Vie Nov 22, 2013 1:05 pm por Sakura92

» Ideas
Vie Nov 22, 2013 1:02 pm por Sakura92

» Puntos
Vie Nov 22, 2013 12:59 pm por Sakura92

» Reglamento Soporte
Vie Nov 22, 2013 12:58 pm por Sakura92

» Reglamento Tutoriales
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Galerias
Vie Nov 22, 2013 12:57 pm por Sakura92

» Reglamento Recursos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Reglamento Talleres y Pedidos
Vie Nov 22, 2013 12:56 pm por Sakura92

» Incumplimientos
Vie Nov 22, 2013 12:52 pm por Sakura92

» Wings of Freedom [Elite]
Lun Sep 30, 2013 2:28 pm por Invitado

» Yugi Oh! RPG [Élite]
Miér Ago 07, 2013 2:36 am por Invitado

» OMEGA NEW WORLD [Afiliación Élite ]
Miér Jul 31, 2013 6:08 pm por Invitado

» Creando Mundos [Élite]
Vie Jul 26, 2013 12:22 am por Invitado

» World´s Inuyasha RPG [Normal]
Miér Jul 24, 2013 11:46 pm por Invitado

» Fatal Liberty Rol [Élite]
Mar Jul 16, 2013 10:30 am por Invitado

» Fairy Tail Sekai || Re-Apertura! || Afiliación Elite
Miér Jul 03, 2013 1:50 am por Invitado

» Hi(: !
Lun Jul 01, 2013 3:47 am por #Re Sound

» Hola, Hola, ¿hay alguien ahi?
Lun Jul 01, 2013 3:37 am por #Re Sound

» Bleach: Shadow Of Seireitei [Cambio de dirección]
Sáb Jun 29, 2013 11:52 am por Invitado

» Volvi... nose si para siempre pero volvi xD
Vie Jun 28, 2013 9:08 am por Sakura92

» Me extravié en el cielo, ¿qué puedo hacer?
Vie Jun 28, 2013 8:55 am por Sakura92

» Roma Antiqua {Afiliación Normal}
Dom Jun 23, 2013 3:07 pm por Invitado

» Saint Seiya Cosmos Rebellion Rol [Afiliación Élite]
Dom Jun 16, 2013 12:13 am por Invitado

» Buck Tick Fans [Élite]
Jue Jun 13, 2013 1:49 am por Invitado

» End of Silence [Cambio de dirección y botones]
Vie Mayo 31, 2013 5:54 am por Invitado

» Campamento mestizo [Afiliación Elite]
Miér Mayo 29, 2013 6:11 pm por Invitado

» Render Universe - Elite
Dom Mayo 19, 2013 3:58 pm por Invitado

» Love orange and cyan (tutorial9
Jue Mayo 16, 2013 3:51 pm por Loki

» AVISO
Jue Mayo 16, 2013 8:49 am por Sakura92

» Code Geass: Endless Dark [Élite]
Miér Mayo 01, 2013 2:22 am por Invitado

» Creative Designs (normal)
Mar Abr 30, 2013 12:48 am por Invitado

» Ultimate Inazuma Rol -Cambio de banner-
Jue Abr 25, 2013 1:26 pm por Invitado

» Buenas...
Mar Abr 16, 2013 3:58 pm por Naggar

» Actualizacion de Abril
Mar Abr 16, 2013 2:00 pm por Sakura92

» Texuras y Png hechas por mi (Sueltas) - Actu 13/04
Lun Abr 15, 2013 8:16 am por Jotaro Kujo

» AVISO DE AUSENCIA TEMPORAL
Vie Abr 12, 2013 2:46 pm por Zec



Las imagenes e historias que se posteen en este foro son de sus respectivos dueños, cada uno tendra el link correspondiente a la pagina donde lo ubico su creador originalmente.Todo el materia ya se encuentra bajo licencia por favor si quieres tomar algo comunicarse con la administración del foro, o el dueño del post.
Creative Commons License
Crear
foro
Codigos CSS-HTML-JS

APRENDO EN...
Estudio en Eternal Designs Melody Graphics School ise-graficos

TOMO RECURSOS DE...

RESEÑAS...


Propiedades Basicas CSS: Como llamar elementos

Ver el tema anterior Ver el tema siguiente Ir abajo

Propiedades Basicas CSS: Como llamar elementos

Mensaje por Sakura92 el Sáb Abr 06, 2013 6:42 pm

TUTORIAL REALIZADO POR PYRITE WOLF DE SOURCECODE


#001 - Llamar Elementos

Este tuto es lo más básico que hay para entender el uso del CSS. ¿Por qué? Porque el CSS se limita a nombrar elementos que ya existen en el HTML y darles instrucciones de cómo se deberían ver. Para hacer eso, debes saber cómo llamar a esos elementos que quieres modificar. Dada la íntima relación entre el CSS y el HTML, también verán alguito de HTML aquí.

SE RECOMIENDA FUERTEMENTE LEER PRIMERO LOS TUTORIALES DE HTML BÁSICO DE SKAOI.

Ante todo, tenemos que tener el HTML de lo que queremos modificar. Supongamos que nuestra intención es alinear al centro los botones de afiliación en un módulo de afiliados. Hay dos formas de cumplir nuestro objetivo.

1. Primer método: selección de elementos por su id

La primera, es envolviendo a los botones de nuestros afiliados en un código como el siguiente:
Código:
<div id="afiliadoselite">Aquí vendrían los botones ;)</div>
¿Qué parte nos importa de este código? Donde dice id="afiliadoselite". El id es un atributo HTML que permite dar un nombre a un elemento en el HTML para luego llamarlo en el CSS. Puedes usar el atributo id con prácticamente cualquier elemento de HTML. Luego, desde el CSS, lo llamarás con el mismo nombre de la siguiente forma:
Código:
#afiliadoselite {
text-align: center;  >>código de ejemplo
    }
Como podrás ver, la sintaxis es:
#NombreDelId {
código deseado
}

Es importante saber en este punto que el CSS es lo que comunmente se llama case sensitive. ¿Qué quiere decir esto? Que diferencia las mayúsculas de las minúsculas, así que ten cuidado al elegir tus IDs.

En general es bastante simple, ¿no? Vamos al otro método.

2. Segundo método: selección de elementos por su class

La segunda forma de seleccionar a un elemento HTML es con un atributo que cumple la misma función que el id, llamado class. El class se aplica precisamente igual que el id, y la única diferencia es que un elemento puede tener más de un class, pero no más de un id. Si seguimos con el mismo ejemplo que antes, el HTML sería:
Código:
<div class="afiliadoselite">Aquí vendrían los botones ;)</div>
La diferencia, sin embargo, está en el CSS. En este caso, será:
Código:
.afiliadoselite {
text-align: center;  >>código de ejemplo
    }
Habrás notado que la sintaxis es prácticamente la misma, pero se cambia el numeral por un punto. ¿Para qué me sirve esto si ya tengo el ID? Para darle diferentes estilos a diversos elementos, pero es raro que uses el id y el class al mismo tiempo. Personalmente, suelo usar sólo el id.

3. Otras cuestiones: seleccionar etiquetas

Por ahora estamos llamando a los elementos mediante el uso de atributos del HTML, pero ¿y qué si queremos llamar a todos los que usan una misma etiqueta? Un claro ejemplo de ello son los links, que responden a la etiqueta a. Si queremos modificar todos los links del foro, tendremos que llamar a todas las etiquetas a. Si usamos el ejemplo de los links del foro, el CSS sería:
Código:
a {
color: #000;  >> código de ejemplo
    }
La sintaxis en estos casos es mucho más simple: no debes poner nada más que el nombre de la etiqueta.

4. Elementos dentro de elementos

Vale, ¿y qué pasa si no quieres cambiar toooodos los links del foro? Si sólo quieres modificar, por ejemplo, los que estén dentro de un div cuya id es #cajita. En ese caso la cosa es muy simple: tienes que colocar los dos nombres separados por un espacio. El ejemplo sería:
Código:
#cajita a {
color: #000; >> código de ejemplo
    }
En resumen, sería algo así como
Selección_del_elemento_contenedor Selección_del_elemento_contenido {
propiedades
}

Se puede detallar el selector cuanto quieras. Es decir, por ejemplo, si tienes muchos divs con id #cajita y quieres afectar los links exclusivamente de aquellos que estén dentro de otro div con id #caja_grande, tendrás que usar un selector que sea #caja_grande #cajita a {, y así puedes seguir detallándolo hasta el fin de los tiempos (?)

5. Elementos que no puedes modificar

Ahora, todo esto te sirve mucho si tu puedes crear divs y spans a gusto, pero de seguro te preguntas cómo hacer para conocer los id y los class de los elementos predeterminados del foro, como por ejemplo las cajas que envuelven a las categorías o cosas por el estilo. Para ello, lo que recomiendo es el uso de Google Chrome. Con él, puedes dar click derecho a lo que quieras y seleccionar la opción "Inspeccionar elemento". Chrome te mostrará el HTML y el CSS de la página al instante, resaltando el HTML de la parte que hayas clickeado en azul. Si lees el HTML con atención, encontrarás el id o class correspondiente al elemento que buscas, pero ¡cuidado al modificarlo! Puedes traer el caos a tu foro. Siempre prueba primero tus códigos en un foro de pruebas.

El usuario GarethCorentin nos trae una alternativa a Inspeccionar Elemento disponible para Mozilla:
GarethCorentin escribió:Por lo demás, para los que usen Mozilla Firefox y quieran leer los HTML p CSS en sus foros, pueden descargar el complemento "Firebug"; y el funcionaría exactamente igual que el Chrome y su "Inspeccionar Elemento".
Hice un mínimo de googleo para dejarles el link de descarga del complemento a los usuarios que empleen Mozilla -¡les será una herramienta super útil!

Esto es todo para este tuto. Si sabes del tema y crees que me salteé algo, por favor avisame así lo agrego. Si tienes alguna duda o no me expliqué bien (algo bastante probable xD) no dudes en preguntar.

​​​​​​​​​​​​​​​​​​​​​​​​​​​

​​​​​​​​​​​​​​​​​​​​​​​​​​​
avatar
Sakura92
Webmaster
Webmaster

Mensajes : 175
Puntos : 178942
Reputación : 2
Edad : 25

Volver arriba Ir abajo

Ver el tema anterior Ver el tema siguiente Volver arriba

- Temas similares

 
Permisos de este foro:
No puedes responder a temas en este foro.