¿ol, li, div, span? ¿cuándo se usa cada uno?

[JBRS]

Hola,

Estoy pasando a CSS una web y andaba ya algo confundido en cuando definir estilos con . y cuando con # , cuando me he encontrado que no sé si debo poner las etiquetas para que salgan de una forma u otra. Estaba poniendo todas con <span class= , pero puede que no sea lo más correcto. No sé por qué a veces se usa li, div, ol y otras como h algo que veo en otros códigos...

Ya supongo que la pregunta debe ser chorra cuando llevas un tiempo pero... en fin, se siente.

[fearlex]

Iniciado por JBRS

Hola,

Estoy pasando a CSS una web y andaba ya algo confundido en cuando definir estilos con . y cuando con # , cuando me he encontrado que no sé si debo poner las etiquetas para que salgan de una forma u otra. Estaba poniendo todas con <span class= , pero puede que no sea lo más correcto. No sé por qué a veces se usa li, div, ol y otras como h algo que veo en otros códigos...

Ya supongo que la pregunta debe ser chorra cuando llevas un tiempo pero... en fin, se siente.

OK, no es tan complicado una vez que le cojes la vuelta, mira:

# se usa para ids, identificadores que no se repetiran, usualmente (aunque no unicamente) se usan para los divs que conforman el layout.

. se usa para definir clases, estilos que se repetiran a gusto, ejemplo si quieres que varios textos determinados sean bold, creas una clase

.textobold{
font-weigth: bold;
}

y la usas con cualquier etiqueta que necesites resaltar tantas veces como quieras.

En el caso de cuando utilizar las etiquetas, un breve resumen:

Los divs se usan mayormente, y OJO, digo mayormente por que no es para lo unico que se puede usar, pero comunmente se utilizan para el layout, para sustituir las tablas, ademas de para contener todas las demas etiquetas que crean la estructura del sitio. Siempre recuerda que esta etiqueta es del tipo Block y creara un salto de linea al final.

La etiqueta Span es exactamente igual a la etiqueta div, pero no crea salto de linea, y se usa comunmente cuando se quieren acomodar textos u otras etiquetas. NO se usa comunmente para hacer el layout como los divs, y repito: comunmente, si se puede usar, pero es super que incomodo.

La etiqueta h# se utiliza super que recomendada para titulos, h viene de header, cada que vayas a poner un titulo, usa la etiqueta h.

Ejemplo:

Vista vs Linux (titulos, esto lo pondria con h#)

Vista no sirve............................................. ............
.................................................. .........................
..................Linux es lo maximo..................................

La etiqueta ol, ul, li, son para crear listas, si necesitas crear una lista numerada o desorganizada, pero se recomienda su uso accesible para los vinculos, si vas a crear un menu de navegación, usa listas. Es más semantico y accesible.

Espero haberte ayudado.

[JBRS]

Memorable explicación. Creo que hasta lo he entendido (¿por qué los dos libros de CSS que tengo no lo exponen así de claro?)

Miles de gracias

[fearlex]

Iniciado por JBRS

Memorable explicación. Creo que hasta lo he entendido (¿por qué los dos libros de CSS que tengo no lo exponen así de claro?)

Miles de gracias

De nada, y me alegro que lo hayas entendido