Cómo Obtener el selector CSS3 de un elemento

Uno de los aspectos que más tiempo requiere de la personalización de una plantilla Web, escritura, o el tema es averiguar qué estilos cambian una parte específica de una página. Si están bien versados ​​en el CSS, la lectura a través de una hoja de estilo a veces puede ser sencillo. Sin embargo, cuando se trabaja con temas de CMS o plugins jQuery, es posible encontrar los selectores repartidos en varios archivos o rotos a cabo en varias clases. Usted puede leer a través del código fuente para encontrar selectores, pero para ser eficaz esto requiere un profundo conocimiento de la base de código. Incluso si usted es un experto, utilizando una herramienta como Firebug o Dreamweaver hará que este proceso sea más fácil.

Instrucciones

1 Descargar e instalar la Firebug para el navegador Firefox desde firebug.com. O, si se utiliza Opera, iniciar el navegador Opera. Tanto el Firebug y el navegador Opera añadir una característica a su navegador que le permite seleccionar cualquier elemento en su página web y ver los estilos relacionados y código fuente.

2 Abra el documento HTML o una página web en el navegador. Seleccione el elemento que desea personalizar, haga clic directamente en la parte superior de la misma. Elija "Inspeccionar elemento" en el menú para abrir el inspector de código.

3 Evaluar la línea resaltada de código en la pestaña "HTML" en la parte izquierda de la ventana. En la mayoría de los casos, esta línea contiene el elemento envase y la clase o el selector correspondiente. Por ejemplo, si decide inspeccionar un cuadro de la barra lateral en una página de blog, usted puede ver algo como el siguiente puesto:

<Div id = "barra lateral">

En otros casos, el elemento resaltado no puede contener la clase o el selector, en cuyo caso tendrá que mirar las líneas de código justo encima de él que por lo general corresponden al contenedor el elemento está en. Por ejemplo, si decide inspeccionar el encabezamiento de un área de contenido en su página, usted puede ver algo como esto:

<Div class = "post>

<Div id = "title">

<H2> Este es el contenido de título </ h2>

4 Mira el estilo CSS correspondiente para el elemento seleccionado en la pestaña "Estilo" en el lado derecho. El nombre del archivo de la hoja de estilo se incluirá en el extremo derecho de cada selector. Es posible seleccionar diferentes líneas de código o diferentes elementos en la ventana del navegador para ver los estilos que lo afectan. Usted notará que el elemento seleccionado también aparecerá con un borde resaltado en la ventana del navegador, por lo que es más fácil ver lo que cada línea de código está creando.

5 Pase el cursor del ratón a la izquierda de cualquier atributo de estilo en la pestaña "Estilo". Aparecerá una casilla de verificación. Puede seleccionar o anular la selección de atributos para ver el impacto inmediato de desactivar el atributo. Esta acción también ayuda a encontrar cualesquiera otros elementos afectados por el estilo. Mediante el uso de estos métodos, se puede obtener el selector de cualquier elemento de la página y realice los cambios en la hoja de estilo apropiado.

Consejos y advertencias

• Los elementos con un atributo de color HTML definido aparecerán en la pestaña "Estilo" con un poco de bloque de color a la derecha del valor del atributo. Pruebe diferentes colores haciendo clic en la caja y la elección de un color diferente al de la rueda de color.
• Puede modificar el estilo directamente en la ventana "Estilo". Haga clic en la ficha y seleccione "Inspeccionar en la pestaña CSS." Las ediciones realizadas de esta manera será visible inmediatamente. Si te gusta el resultado, puede guardar el archivo y sobrescribir el original.