1

Buenas estoy intentando montar una pagina web desde una plantilla pero quiere introducirme mas en el diseño de la pagina y necesito saber qué significa ese comando porque en esta plantilla me salen cosas como esta y la verdad que no entiendo mucho:

<header>
    <div class="row-top">
        <div class="main">
            <div class="wrapper">

o :

<div class="row-bot">
        <div class="row-bot-bg">
            <div class="main">

y tambien:

<div class="slider-wrapper">
                    <div class="slider">
                        <ul class="items">
10
  • <div class="slider-wrapper"> <div class="slider"> <ul class="items"> Commented el 29 jun. 2017 a las 13:12
  • asin son las cosas que me salen y la verdad q no las entiendo Commented el 29 jun. 2017 a las 13:12
  • 4
    Bueno, hay que empezar por el principio: 1. Java y Javascript no es lo mismo ¿De cuál de los dos estás hablando? 2. Tu pregunta no se entiende, pon fragmentos de tu código con respecto a las dudas que tienes. 3. ¿Ya leíste algo de la documentación del lenguaje del cual tienes dudas?
    – A. Cedano
    Commented el 29 jun. 2017 a las 13:13
  • 1
    @A.Cedano los fragmentos de código estaban ahi, lo que pasa es que al no estar bien indentados no aparecían. Por otro lado,he quitado la etiqueta java ya que es obvio que no se refería a eso. De hecho,probablemente sea mas bien html y css
    – Pikoh
    Commented el 29 jun. 2017 a las 13:35
  • Gracias @Pikoh En efecto, se trata de CSS / HTML. Aquí hay un poco de documentación en castellano al respecto.
    – A. Cedano
    Commented el 29 jun. 2017 a las 13:42

3 respuestas 3

4

class

hace referencia a un selector de clase, que se puede atribuir a todos los elementos de un HTML para luego aplicar estilos a los elementos marcados con esa clase usando hojas de estilo o CSS a través class selectors o usando Javascript a través de funciones Document.getElementsByClassName().

Es decir, que CSS trabaja junto con HTML, Javascript... y se puede combinar el uso de los tres.

La documentación de MDN dice lo siguiente:

En un documento HTML, los selectores de clase buscan un elemento basado en el contenido de su atributo class. El atributo class está definido como una lista de elementos separados por espacio, y uno de esos elementos debe coincidir exactamente con el nombre de clase dado en el selector.

class pertenece a los atributos globales de HTML:

Los atributos globales son atributos comunes a todos los elementos HTML; pueden usarse en todos los elementos, aunque pueden no tener efecto en algunos de ellos.

Usando en un documento HTML etiquetas como class="nombre-clase", puedes modificar de forma automática, en pocas línea de código, el estilo de todos los elementos que tengan dicha clase usando CSS. Dichas modificaciones pueden hacerse también usando Javascript.

La ventaja, aparte de poderlos alcanzar todos desde el mismo lugar (CSS), tener documentos HTML más limpios, código menos redundante, mejor organizado... es que puedes introducir modificaciones posteriores sin tener que recorrer todo el contenido de tu HTML modificando. Y si entra en juego Javascript, puedes modificar contenido de forma dinámica mediante clases con una facilidad asombrosa.

Supongamos una página con miles o millones de documentos HTML. Puedes aplicar estilos en ellos de varias formas.

forma 1:

Aplicando estilos directamente a los elementos, mediante la etiqueta style:

<p style="color:red;">Texto en rojo</p>
<p style="color:red;">Otro texto en rojo</p>

forma 2:

Aplicando estilos mediante hojas de estilo CSS:

Tendrías esto en el CSS:

.rojo {
   color:red;
}

Y esto en el HTML:

<p class="rojo">Texto en rojo con nombre de clase y CSS</p>
<p class="rojo">Otro texto en rojo con nombre de clase y CSS</p>

Supongamos que tienes miles de documentos con texto como en la forma uno, y luego hay necesidad de que además de aparecer en rojo, tiene que aparecer también en negritas.

Para hacer ese cambio en la forma 1, tendrías que ir buscando en tus miles de documentos cada etiqueta y modificarla cada una de la forma siguiente:

 <p style="color:red; font-weight: bold;">Texto en rojo</p>
 <p style="color:red; font-weight: bold;">Otro texto en rojo</p>

Para hacerlo en la forma 2, sólo tendrías que agregar una línea al CSS:

  font-weight: bold;

Esta es sólo una, entre muchas ventajas del uso de class.

Las hojas de estilo se enlazan con el documento HTML, colocando el estilo directamente en el encabezado del HTML, usando la etiqueta <style> o enlazando el documento HTML con un documento CSS, mediante la etiqueta <link>.


Ejemplo de código:

Aunque verás que el resultado es el mismo, el mantenimiento es diferente, sobre todo cuando hay que introducir o quitar algo nuevo en el estilo.

.rojo {
        color:red;
        font-weight:bold;
        }
Forma 1

<p style="color:red; font-weight: bold;">Texto en rojo</p>
<p style="color:red; font-weight: bold;">Otro texto en rojo</p>
   
<hr />Forma 2
   
 <p class="rojo">Texto en rojo mediante CSS</p>
 <p class="rojo">Otro texto en rojo mediante CSS</p>


Esto es lo básico.

Puedes tener más información en la documentación de CSS, de HTML. Puedes ver también este enlace.

En páginas como codepen puedes ver ejemplos de millones de cosas que se pueden hacer combinando HTML+CSS o HTML+CSS+Javascript.

2
  • Añadiría simplemente por completar que class es uno de los atributos globales y puede ser agregado a cualquier etiqueta. developer.mozilla.org/es/docs/Web/HTML/Atributos_globales por lo demás perfecto, te dejo mis puntos
    – Xerif
    Commented el 29 jun. 2017 a las 14:29
  • Gracias @Xerif he agregado tu sugerencia.
    – A. Cedano
    Commented el 29 jun. 2017 a las 14:39
1

La pregunta en realidad trata sobre el atributo global class de las etiquetas HTML, no sobre un comando.

Un atributo global puede usarse en todos los elementos HTML.

En el caso particular class se utiliza en CSS y en funciones del elementos del DOM. Por ejemplo, pude usarse document.getElementsByClassName para seleccionar todos los elementos de una clase determinada para luego hacer algo con ellos. En CSS se utiliza en selectores de clase para dar formato a los elementos de una clase determinada.

0

El class adentro del div, se utiliza para que el navegador sepa que estilo dentro del CSS debe aplicar a ese item.

Ojo, porque los class se pueden anidar, pq si un item tiene un class, y un hijo de este tiene otro class, y tienen propiedades que se sobreescriben, se utilizara siempre la ultima class encontrada.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.