Hola que tal Espero que te encuentres muy bien y en esta ocasión vamos a ver los selectores de tipo global
Así que comencemos
Entes que
nada no queda más que decir que el título y el tipo de nombre que le he puesto
a “selectores globales” es por parte mía porque creo que es la mejor forma de
definirlos ya verás porque
En primera es
porque este tipo de selector es directo a las etiquetas sin la necesidad de que
se escriba un atributo a la etiqueta
Con una sola
línea de código puedes afectar muchas cosas del documento como si fuera un
Class que veremos en otra ocasión
Este tipo de
selecto es de gran ayuda y en algunas ocasiones es utilizada para agregar
estilos a etiquetas que deseamos que los lleve por defecto
Así que
veamos muchos ejemplos para que se nos graben en la mente
Uno de ellos
es que deseamos que por defecto todos los títulos que están compuestos por H1 tengan un, tamaño especifico, una fuente específica, y un color igualmente
especifico
Es este el siguiente:
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!--h1 como si fueran encabezados de articulos-->
<div>
<h1>Titulo del articulo 1</h1>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<div>
<h1>Titulo del articulo 2</h1>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<div>
<h1>Titulo del articulo 3</h1>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
</body>
</html>
Y el CSS es
este:
/*documento estilos.css*/
h1{
font-size: 20px;
font-family: verdana;
color: red;
}
Veras que de
esta forma afecta a todo el documento y si solo lo enlazas en otro documento HTML
en la cabecera veras que sin modificar el HTML ya tendrá esos estilos
Otro ejemplo
es el siguiente:
Queremos que
todos los párrafos de un documento HTML tengan un tipografía específica, y que
este en cursiva
Así que
veamos el HTML
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<!--h1 como si fueran encabezados de articulos-->
<div>
<h1>Titulo del articulo 1</h1>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<div>
<h1>Titulo del articulo 2</h1>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<div>
<h1>Titulo del articulo 3</h1>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
</body>
</html>
Y el CSS es
el siguiente
/*documento estilos.css*/
h1{
font-size: 20px;
font-family: verdana;
color: red;
}
p{
font-family: verdana;
font-style: italic;
}
De esta forma
solo afectara a los párrafos y no a otro tipo de texto que tengamos en el HTML
Otro ejemplo:
Este se va a
complicar un poco porque vamos a usar el DOM como vimos antes en otro tutorial
y solo queremos que se apliquen los estilos a los párrafos que se encuentren
dentro de un div y que los demás que no están dentro de un div no se vean
afectados
Este es muy
sencillo así que veamos el código
HTML :
<!doctype html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</div>
<!--parrafos que estan fuera de un div-->
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
<!--parrafos que estan fuera de un div-->
<p>Lorem ipsum dolor sit amet, ea sed habemus vivendum dissentiet, et dicit maiestatis mea. Omnium neglegentur per id, reque alterum iracundia te per. Usu in maiorum albucius. Pericula aliquando ei sit. Ad vim facilisi interpretaris, sed etiam soluta imperdiet ne.</p>
</body>
</html>
CSS:
/*documento estilos.css*/
div p{
font-family: verdana;
color:blue;
}
Si ves es
realmente fácil
Veamos más
ejemplos
Queremos
tener por defecto que el body y el html no tengan ningún margen y ningún
padding (en otros tutoriales se explicara esto no te preocupes solo intenta
entender el concepto de esto)
Así que
veamos el código
HTML (aqui se colocara un div que ocupe el 100% en alto y en ancho para que se vea las diferencias)
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html, body { height: 100%; }
div {
width: 100%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
Y si vemos con CSS:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html, body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 100%;
height: 100%;
background-color: black;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
De esta forma
se quita el margen y el padding que tiene por defecto las etiquetas html y body
Y hay muchas
formas
Antes de
terminar quería enseñarte un gran ejemplo de este tipo de selector:
Hoy en día
existen muchos navegadores muy potentes para usar tanto en escritorio como en Smartphone
lo único malo en este negocio es que nadie ninguno de todos los que están se
ponen en desacuerdo para estandarizar y que si veo una página en chrome se vea
exactamente igual que en safari o en Firefox asi que probar con un solo
navegador es lo peor que puedes hacer
la mejor
forma de atacar esto y se funciona la mayoría de las veces es digamos que
”resetear ” los valores por defecto de
todos los navegadores y es con el siguiente código
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
Como puedes
ver este código es un poco largo pero con el ya podemos colocar los estilos que
realmente nos interesa
También que
queda claro que no es mi código este pequeño “script ”de CSS se llama Reset CSS
Pero lo que
hay que destacar es que hace una excelente referencia a los selectores globales
Saludos
No hay comentarios:
Publicar un comentario