2011-02-07 11 views
5

En relación con mi anterior question here. Si utilizo el siguiente código HTML como parte de mi página web, donde probablemente haya muchas más etiquetas div, ¿cómo puedo orientar estos DIV en particular en mi CSS? La muestra que creo que funciona mejor es [Esta respuesta] [2].css dirigida a etiquetas div específicas en una gran página web HTML

Agregué atributos Id para hacer que los divs sean más seleccionables en un DOM HTML grande ... No sé cómo hacerlos más distinguibles. Si hay un método mejor para hacerlo, por favor avíseme. El objetivo es aplicar el diseño de CSS a unos 6 elementos de etiqueta div dentro de un sitio web de portal de punto compartido grande. Si hay una forma más genérica que sería genial, así puedo agregar más secciones fácilmente y utilizar este formato en el futuro ... Puedo agregar un atributo de clase a cada elemento al que quiero aplicar el formato, pero no sé la sintaxis

¿Cuál es la forma profesional y profesional del diseñador de hacer esto?

<div id="projectName"> 
     Realtime Account Activiation 
</div> 

<div id="divAnnounce"> 
     Announcements 
</div> 

que tienen http://jsfiddle.net/eW532/1/

Estoy utilizando el código de abajo pero conseguir malos resultados en toda la longitud horizontal es azul, pero no es la primera carta. Estoy intentando que un elemento html use dos clases juntas.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     .even_spacing { color: purple; 
         background-color: #d8da3d } 

     .first_letter { background:blue; 
         color:white; 
         padding:4px 0px 4px 5px;}   
    </style> 

</head> 
<body> 
    <form id="form1" runat="server"> 

    <div class="first_letter even_spacing"> 
     Realtime Account Activiation 
    </div> 

    <div class="first_letter even_spacing"> 
     Announcements 
    </div> 
    </form> 
</body> 
</html> 

Respuesta

5

en el archivo HTML ponga <LINK REL=StyleSheet HREF="Path/to/your/stylesheet.css" TYPE="text/css" MEDIA=screen> en la parte superior de la página para hacer referencia a la nueva hoja de estilo.

en su archivo CSS poner:

#projectName{ 
style:value; 
} 

#divAnnounce{ 

} 

Los # Objetivos cosas con los ID de si se utiliza una. antes de que se dirigirá a los nombres de las clases,

También puede utilizar tanto si tiene que ser específico como

#idname.classname{ 

} 

Si tiene otro div interior de la divAnnounce que puede hacer

#divAnnounce #yournewdiv{ 

} 

O

#divAnnounce div{ 

} 

O

#newdivid{ 

} 

Aviso el espacio entre medio de los dos blancos diciendo que son un padre y un hijo

2
<style> 
.class1 { 
style: value; 
} 

.class2 { 
style:value; 
} 
</style> 

<div class="class1" id="projectName"> 
     Realtime Account Activiation 
</div> 

<div class="class2" id="divAnnounce"> 
     Announcements 
</div> 

Más información: Class vs ID selectors

0

Es necesario utilizar .className notaciones para las clases y #IDName anotaciones para la identificación de:

.className { 
style:value; 
} 

#IDName { 
style:value; 
} 
<div class="className">Test</div> 

<div id="IDName">Test</div> 
-1

Los ID son únicos, sirven para identificar un elemento de página específico. ¡Así que es realmente la mejor manera de lograr lo que estás buscando! el establecimiento de un estilo

Ejemplo:

#projectName {width:100%;} 

ejemplo el establecimiento de un evento Jquery:

$("#projectName").click(function() { alert('Clicked'); }); 
+1

Por favor, ponga un comentario al voto negativo, de lo contrario, no puedo ver lo que está mal con mi respuesta! – Zuul

1

me escribió una respuesta acerca problema similar.

Load an external CSS for a specific DIV

Creo que esto debería ayudar.

Asegúrese de verificar que el archivo CSS siempre devolverá "Access-Control-Allow-Origin" en el encabezado de respuesta para cargar archivos externos.

Si carga datos CSS de otra forma, puede usar la función applyCSSToHTML().

¡Buena suerte!

Cuestiones relacionadas