nei fogli di stile. Estos son algunos consejos breves sobre cómo utilizar class y la id de las hojas de estilo. Tenga en cuenta que una vez que el uso de técnicas avanzadas de JavaScript, como por ejemplo el uso de motores de Ajax, pueden entrar en conflicto con los consejos que se dan aquí! Y al final veremos por qué.
per legare un TAG ad uno stile, spesso si rimane confusi e non si capisce quale sia la differenza o, comunque, la scelta migliore tra i due. Con la disponibilidad de ambos el atributo class="" que el atributo id="" para unirse a un estilo de TAG, a menudo se confunde y no entiende cuál es la diferencia o, al menos, la mejor opción entre los dos. Realmente una etiqueta marcada con la clase o el uso de la " id de la CSS no cambia nada, o casi. Lo que cambia es la manera en que pensamos acerca de la página y hacer un uso correcto de id y luego nos encontramos con ninguna clase de arrepentirse de las decisiones tomadas.
Una nota sobre la herencia
Antes de empezar me gustaría aprovechar esta oportunidad para destacar un importante comportamiento, estilos o coscading o herencia. En la práctica, un sub-elemento hereda las características de los padres, a menos que se especifique de forma explícita que es !important . Veamos un ejemplo que puede aclarar esta situación. Imagine que usted ha creado la siguiente hoja de estilos:
1 2 | font-size : 14px } A_box # p {font-size: 14px} font-size : 22px } B_box # p {font-size: 22px} |
y el código HTML siguiente:
1 2 3 4 5 6 |
Como resultado, el navegador será en realidad la deseada, el primer párrafo se harán con la fuente de 14 píxeles y el segundo párrafo con la fuente de 22 píxeles! Vamos ahora a tratar de utilizar la clase en lugar de id:
1 2 | font-size : 14px } C_box # p {font-size: 14px} font-size : 22px } . D_box p {font-size: 22px} |
El código HTML:
1 2 3 4 5 6 |
El resultado en el navegador (comprobado en Internet Explorer 6 y Firefox 1.5 +), esta vez será diferente! ¿Qué pasó? ha ereditato il font-size del primo div con id c_box . El div con la clase d_box heredado font-size de la primera div con id c_box . A id , por lo tanto, requiere de las clases "hijas" de heredar sus atributos (aunque esto no se aplica a todos los estilos). nella classe d_box , come mostrato qui sotto: Para eliminar el problema debe ser explícita, con la keywork !important , el font-size clase d_box , como se muestra a continuación:
1 2 | font-size : 14px } C_box # p {font-size: 14px} font-size : 22px !important } . D_box p {font-size: 22px ¡Importante!} |
De esta manera se imponen a tener en cuenta el nuevo estilo se define con la clase d_box .
Utilizando sólo las clases:
1 2 | font-size : 14px } . C_box p {font-size: 14px} font-size : 22px } . D_box p {font-size: 22px} |
El código HTML:
1 2 3 4 5 6 |
El resultado será el de iniciar el navegador, los párrafos se representan correctamente. Moraleja: mucho cuidado cuando se utiliza de estilo en cascada ... si bien es cierto que no hay ninguna diferencia inmediata entre las clases y id 's también es cierto que su uso no es completamente idéntico. De lo contrario, ¿por qué hay dos maneras de abordar?
Regla
Sin embargo, hay una manera de saber quién "gana" cuando se establece un estilo. Esta técnica se suele llamar la Regla 3 en cascada.
Proporciona un valor a cada selector, o declaraciones línea CSS. Este valor se presenta en forma de ABC.
1) Agregar 1 a A para cada id en el selector de
2) agrega 1 a B para cada class en el selector de
3) Añadir 1 a C para cada etiqueta en el selector
He aquí un ejemplo:
1 2 3 4 5 6 | - 1 = 1 - [ p { color : red } 0 - 0 - 1 = 1 - [p {color: red} - 1 = 11 - [ p .largetext 0 - 1 - 1 = 11 - [p. Largetext - 1 = 101 - [ p #largetext 1 - 0 - 1 = 101 - [p # largetext - 2 = 102 - [ body p #largetext 1 - 0 - 2 = 102 - [# cuerpo p largetext - 3 = 113 - [ body p #largetext ul .mylist 1 - 1 - 3 = 113 -. [# Cuerpo p largetext ul Mi lista - 4 = 114 - [ body p #largetext ul .mylist li 1 - 1 - 4 = 114 -. [# Cuerpo p largetext ul ellos Mi lista |
El valor más alto gana. Si dos reglas tienen el mismo peso para ganar el set anterior.
Asesoramiento
Un camino puede ser la siguiente: utilizar la clase cuando el comportamiento visual de una etiqueta puede variar en función de su contenedor principal. Use id cuando el comportamiento visual es único, que es independiente de su contenedor principal.
Un ejemplo ilustrativo de este enfoque podría ser la siguiente: el comportamiento de un hipotético título. En este caso vamos a usar el class="title" basado en el recipiente superior y ajustar los comportamientos. El archivo CSS puede ser:
1 2 3 | . ...... {Título } # ListProducts. Título {........ } Listusers #. Título {....... } |
De hecho, incluso, las cosas son aún mejores porque tenemos el TAG H<em>n</em> para que nos ayuden. En un caso real de la clase title sería inútil. En la práctica, la técnica es el uso de la id como selectores de la conducta (de hecho, se refiere a menudo como id-selector). Una situación real por lo tanto, podrían ser:
1 2 3 | h1 {...... } H1 {# listProducts ........ } H1 {# Listusers ....... } |
Tenemos tres diferentes comportamientos en función del interruptor. La regla principal podría ser: Si esta etiqueta se comportará de forma diferente dependiendo visual utilizando el contenedor de class !
En esta serie, entre otras cosas, incluye muchos elementos de diseño visual, como las listas de ul . Estos pueden resultar de una manera diferente en función de la madre de contenedores puede buscar en la barra de navegación, otro en la página principal, y otro en la barra lateral, etc ... Pero lo que necesitamos, en la mayoría de los casos es, la sólo cambia id , utilizando la mejor etiqueta disponible estándar HTML.
quando si può, i TAG titolo H<em>n</em> , i TAG strong , acronym , code , insomma limitare div e span altrimenti rendiamo inutile l'uso degli stili, inondando inoltre la rete con bit supeflui. Por ejemplo, es una buena práctica utilizar las listas de ul o ol cuando se puede, la etiqueta del título H<em>n</em> , el TAG strong , acronym , code , límite de corta div y span de cualquier otra forma innecesaria la utilización de estilos, También inundar la red con poco supeflui. A menudo, ni siquiera conocen todas las etiquetas HTML. Algunos diseñadores de páginas web parecen ignorar algunas de las etiquetas más útiles en el actual estándar HTML. Ciertamente, algunos de los TAG (así como algunos de los atributos, eventos, estilos, y, por desgracia, varias cositas otros ...) se limitan a la norma de algún navegador específico, pero hay TAG muchos totalmente compatible con casi todos los navegadores existentes (incluyendo Safari - a propósito, pero Apple ha olvidado que ha desarrollado su propio navegador?).
Las hojas de estilo, todavía, por desgracia, también están sujetos a algún malentendido dispersos aquí y allá. Diseñador Web que hacer es esperar y esperar un futuro más estándar y menos variable. Utilice el id de los selectores, por lo tanto, no puede dejar de estar demasiado involucrados en un efecto secundario asociado con el uso de Javascript. A través de la lengua más utilizada del lado del cliente, si está activado en su navegador, usted puede obtener un puntero a un elemento de página o etiqueta. . Esto ahora se resuelve con facilidad (hace algún tiempo era un poco más complejo, debido a la incompatibilidad entre navegadores siempre presente!) A través de la getElementByID() puestos a disposición por el objeto document .
dell'elemento. Como se puede ver por el mismo nombre de método, getElementByID() recupera el puntero sobre la base de ' id del elemento. per rintracciare l'elemento. El problema tiene que ver con las hojas de estilo es que el ' id en cuestión es exactamente el mismo utilizado por getElementByID() para realizar un seguimiento del tema. Así que imagínense tener que escribir una aplicación web que gestiona una serie de post-it en la pantalla, en todo caso con el position:absolute en. Esto significa que los post-it en la página que podría haber un número indeterminado de n. . El diseñador Web que quiere escribir la hoja de estilo para este objeto, a raíz de nuestra regla anterior se decide utilizar un div contenedor y darle un id="postIt" . De esta manera, se sigue la regla de que un post-it no se comportan de una forma visual diferente dependiendo del contenedor primario. En nuestra especificación es un objeto es único y por lo tanto bien asociar un ' id . El problema viene cuando el programador de JavaScript (los personajes de esta MiniStore son dos diferentes, pero la cuestión aún embarazoso ... incluso para un solo desarrollador) intentos para obtener un puntero a un determinado post-it! Pronto se da cuenta de que no puede utilizar el ID como un discriminador de que si hay más elementos en la página con el mismo ID continuación getElementByID() no puede devolver un único puntero, el límite puede devolver una lista (array), una lista de todos los elementos que se llaman de la misma manera.
Este debate largo y tedioso, trae consigo una nota en consecuencia. En el desarrollo de HTML / JavaScript / CSS y hojas de estilo en particular, depende en gran medida la visión de conjunto. En efecto, existe una regla que se aplica a cualquier solución. Ser capaz de ver el proyecto en su totalidad puede ayudar a que más de las normas establecidas.
Pero que bueno! Usted explica muy bien
@ GPJ: gracias! Para hacer preguntas o póngase en contacto conmigo
[...] En el CSS. Una visión general de algunas diferencias y las advertencias se pueden encontrar en la clase y la identificación de CSS, sin embargo, una característica útil que distingue identificador de clase, es la capacidad de utilizar las clases [...]