de que puedo puedo

MUSICA LIBRE DE COPYRIGHT... EVITA PROBLEMAS CON YUTU XD

noreply@blogger.com (wpot100) — Fri, 21 Mar 2014 00:42:00 -0700

OH YEAH.. APRENDE INGLES FACIL, RAPIDO, GRATIS EN CUALQUIER DISPOSITIVO

noreply@blogger.com (wpot100) — Fri, 21 Mar 2014 00:41:00 -0700

Tutoriales CSS3 10: Selectores de clase (Class)

noreply@blogger.com (wpot100) — Fri, 23 Aug 2013 21:50:00 -0700

Hola que tal en esta ocasión vamos a ver lo el siguiente tipo de selector que son las clases

Lo que se quiere decir por clases es porque a diferencia de los identificadores este si lo puede tener una gran cantidad de elementos de nuestro documento HTML así que solo con una sola llamada a esa clase se pueden identificar una gran cantidad de elementos fácilmente

Así que veamos en ejemplos esto:

En primer lugar veremos como modificar los estilos por defectos de los h1 así pero que solo afecte a algunos cuantos:

 <!doctype html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
  <h1 class='titulo_distinto'>Titulo distinto</h1>
  <h1>Titulo normal sin estilo</h1>

  <h1 class='titulo_distinto'>Titulo distinto</h1>
  <h1>Titulo normal sin estilo</h1>

  <h1 class='titulo_distinto'>Titulo distinto</h1>
  <h1>Titulo normal sin estilo</h1>

  <h1 class='titulo_distinto'>Titulo distinto</h1>
  <h1>Titulo normal sin estilo</h1>
 </body>
 </html>

 .titulo_distinto{
   font-family: verdana;
   color:blue;
  }

Como vera esto es muy fácil de entender

De esta forma o el uso principal de las clases es para que puedas agregar a varias etiquetas

Bueno y dirás qué diferencias hay entre selector Global y selector Clase?

Es muy fácil responder y es porque en el selector global en css creas un nuevo estilo afecto a todas las etiquetas sin excepción a diferencia de selector de clase que aunque sean las mismas etiquetas solo uno elige a cuales quieres aplicarle el estilo

Bueno cada vez que avanzamos vemos que esto se va hacen más corto porque creo que se va entendiendo y digiriendo esto cada vez mejor así que saludos

Tutoriales CSS3: Selectores de tipo ID (identificador)

noreply@blogger.com (wpot100) — Mon, 19 Aug 2013 22:30:00 -0700

Hola que tal en esta ocasión vamos a ver los selectores de tipo identificador que son muy distintos a los que vimos la vez pasada que fueron los selectores globales

Así que comencemos

Para comenzar ya sabes cuales son los atributos que se le pueden dar a una etiqueta HTML y no solo eso sabes a cuales se le pueden poner y a cuales no

En la mayoría se puede colocar el atributo ID que significa identificador

Digamos que tú tienes un nombre pero realmente eso no te identifica ya que quizás existen miles de personas que tengan tú mismo nombre y quizás también los mismo apellidos así que cada país para remediar este problema crea medios de identificación únicos para cada persona como en México puede ser el número del seguro social que no se puede repetir o también el de CURP

Entonces digamos que en nuestro documento HTML queremos crear etiquetas que se distingan y sean distintas a la demás y aún más cuando queremos darle estilo específica a esa etiqueta, para eso sirve el id sirve para identificar y crear como única la etiqueta y que ninguna otra del documento puede tener el mimo ID

Así que esto se explica de la mejor forma con ejemplos

Un ejemplo de ello es crear un contenedor donde se coloca un texto pero que sea distinto a los demás contenedores (llamo contenedores a las etiquetas DIV)

Ejemplo:

 <!doctype html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
   <!--contenedor(div) con id-->
   <div id='diferente'>
    <p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
    </p>
   </div>
   <!--contenedor sin identificador-->
   <div >
    <p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
    </p>
   </div>
   <!--contenedor sin identificador-->
   <div >
    <p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
    </p>
   </div>


 </body>
 </html>

 #diferente{
   text-align: center;
   color: red;
   font-family: verdana;
  }

De esta forma también podemos empezar a usar el DOM para dar más estilos a las etiquetas que están dentro del ID usando también en conjunto selectores globales

Ejemplo

 <!doctype html>
 <html>
 <head>
  <title></title>
 </head>
 <body>
   <!--contenedor(div) con id-->
   <div id='diferente'>
    <p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
    </p>
   </div>
   <!--contenedor sin identificador-->
   <div >
    <p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
    </p>
   </div>
   <!--contenedor sin identificador-->
   <div >
    <p>Lorem ipsum dolor sit amet, eam aeterno apeirian convenire id, te qui quis mollis interesset. Hinc consulatu ius at. Munere blandit convenire eu qui, ad aliquid mandamus eum. Qui no putant fabulas imperdiet, nec an dico feugiat.
    </p>
   </div>


 </body>
 </html>

 #diferente p{
   text-align: center;
   color: red;
   font-family: verdana;
  }

Este es un breve ejemplo pero explica perfectamente la función del selector ID (identificador)

En breves palabras queda lo siguiente:

Selector ID sirve para identificar a un elemento HTML donde se pueden aplicar estilos solo a ese identificar aunque las etiquetas en el HTML sean repetitivas solo se verá afectada la etiqueta que tenga ese identificador

Así que saludos y lo veo en otro tutorial

Tutoriales CSS3: 8. Selectores de Tipo Global

noreply@blogger.com (wpot100) — Sat, 17 Aug 2013 22:18:00 -0700

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