Hola bienvenido a esta nueva parte de los tutoriales de CSS en esta ocacion vamos a ver algo que es muy útil aprender ya que no solo es necesario para dominar CSS porque nos ayudara en otros como javascript y ver las cosas mas claras
Vamos a ver
que es el DOM
Para empezar
que significa esta nomenclatura y para nos ayuda a entenderlo
Bueno el Dom
que es Document Object Model o en español Modelo en Objetos para la
Representación de Documentos nos fue creado por la W3C
Y bueno para
no hacerla mas larga veamos un ejemplo
<!doctype html>
<html>
<head>
<title>Documento HTML</title>
</head>
<body>
<div>
<p>
<span>hola como estas</span>
</p>
</div>
</body>
</html>
Vemos y si
pensamos cual es la estructura de este documento vemos muchos anidamientos osea
elementos dentro de otros ejemplo en mapa de jerarquía
Es muy fácil
de entender esto no?
Bueno en CSS
tenemos que acceder a ciertas etiquetas y si ya tienes la habilidad de dominar
esto veras que aveces es mas conveniente colocar un estilo que afecte a varios elementos
específicos que escribirlo para cada uno y para esto sirve el DOM y si aun no
que queda claro pues veamos otro ejemplo
Este ejemplo
que les muestro es un documento HTML5 y veras varias listas (ul) con sus
respectivo elementos (li) y bueno tengo pensado que solo cambie el tipo de
tipografía de las listas que están dentro de un (div) que tiene la clase listas_distintas
Asi que
veamos el código
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!--div numero 1-->
<div class='listas_distintas'>
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
</div>
<!--div numero 2-->
<div class='listas_distintas'>
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
</div>
<!--listas que estan fuera de un div-->
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
<!--listas que estan fuera de un div-->
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
<li>elemento 3</li>
</ul>
</body>
</html>
Bueno veras
que en la cabezera estoy enlazando un documento CSS y si lo vemos lo que
contiene es lo siguiente:
/*documento estilos.css*/
.listas_distintas ul li{
font-size: 19px;
font-family: verdana;
color: blue;
}
Es muy fácil
este código y es capas de afectar a miles líneas de código y documentos HTML5
si vemos codo queda es asi
Bueno este
código se utilzo el pensamiento de como esta el documento y se reviso el mapa
de jerarquía
Puedes ver
que coloco primero el identificador y con un espacio la etiqueta ul y despues li de esta
forma se indica que todo elemento que sea li y que este dentro de la clase
listas_distintas y no afectara a otras listas siempre y cuando se conserve esta
reglas
Asi que vemos
lo bello del DOM que es de gran utilidad
Aquí dejamos
esto te quedo una duda pues coméntalo y te respondo
saludos
No hay comentarios:
Publicar un comentario