Hola que tal en esta ocasión vamos a ver en grandes rasgos lo que son los selectores y el tipo de selectores, pero no vamos a entrar en detalle ya que se destinara especialmente a otros tutoriales y todavía falta ver lo que es el DOM
Así que sin más
preámbulos comencemos
Como hemos
visto en los pasados tutoriales de HTML5 que tenemos etiquetas y estas si
quieres puedes poner atributos de tipo identificador (id) o de clase (class)
pues de esta forma ya se puede acceder a los elementos de forma fácil en CSS
La cosa no
acaba ahí porque primero hay que entender lo que es el DOM y de esta forma ser más
explícitos
Y bueno así
que veamos los tipos de selectores
Quiero evitar
ser como todos los otros tutoriales escritos que parecen ser escritos por
robots y la verdad aburren
Los
selectores que mostrare en este momento son de los que más he usado y de los
que me acuerdo si quieres entrar más en detalles en algunos que ni en mi vida y
creo que en la tuya llegues a usar puedes buscar en otros post de otros lados
que realmente aburren
El primero de
ellos y es que llamo
Selector
global
En lo
personal le llamo así por dos razones
Es que afecta
a todo el documento y la otra razón es que es muy fácil de ocuparlos
Un ejemplo:
body{
margin: 0;
padding: 0;
}
El que sigue
digamos que es el
Selector
global muy selectivo
Y es lo mismo
pero va de forma descendiente ya que seguido por separado o donde queremos
llevar y a esto se le conoce como etiquetas padre y etiquetas hijo que es en el
árbol del DOM
Mejor un
ejemplo para que quede explicado
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
ul li{
font-size: .7em;
}
</style>
</head>
<body>
<ul>
<li>Esta es un lista</li>
</ul>
</body>
</html>
El ejemplo
muestra claramente que se quiere aplicar los estilos a li de una lista ul así
que de esta forma se acceso
También tenemos
los de tipo
Selector ID
Que el
siguiente es un ejemplo:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
#id{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id='contenedor'>
</div>
</body>
</html>
Es muy fácil
los id y como significa identificador solo puede ser usado para un solo
elemento de todo nuestro documento DOM
El que sigue
es el
Selector
class
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
.cajas{
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div class='cajas'>
</div>
<div class='cajas'>
</div>
<div class='cajas'>
</div>
<div class='cajas'>
</div>
</body>
</html>
Y como lo
indica su nombre este pueden varios elementos del documento HTML y esta afecta
a todos lo que lo tengan
Hay muchos
otros pero de ello serán los siguientes tutoriales y el que viene es el del DOM
Saludos
No hay comentarios:
Publicar un comentario