febrero 2014 Safricode

Si no establecemos bien el ancho "width" o el alto "height" de nuestro DIV donde introduciremos información de modo texto. Dicho texto se nos saldrá de nuestro DIV. y nos dañara el estilo de nuestra pagina que estemos creando.

En este ejemplo crearemos un DIV en el archivo [ .html ] con nombre de clase "class" [ estilo_div ], donde vamos a escribir nuestro texto.

<html>
        <head>
        </head>
        <body>
                <div class="estilo_div"> </div>
        </body>
</html>

Ahora introducimos el texto dentro de nuestro DIV creado

<html>
        <head>
        </head>
        <body>
                <div class="estilo_div">Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio Web </div>
        </body>
</html>

nuestro div tiene como como propiedades:

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  width:250;
}

como podemos ver el texto se sale de nuestro DIV, puesto que tiene una altura muy pequeña para el DIV creado.

Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..

Tenemos opciones, una de ellas seria darle mas altura a el DIV para que tenga un rango mas alto y encierre todo el texto, pero si nuestro texto es demasiado extenso tendríamos un DIV muy grande que muy seguramente nos ocasionara molestias en el diseño de nuestro sitio web o sencillamente no queremos un DIV de este tamaño.

Ahora vamos a el archivo [ .css ] creado que en este ejemplo usaremos [ estilo.css ] y le pondremos a el DIV un Scroll, para que el texto no se salga si no que tenga la opción se bajar o subir el Scroll de el DIV, con la propiedad [ overflow ].

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  overflow-y:scroll;
  width:250;
}

Vista previa

Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..

Como podemos observar apareció un Scroll en la parte derecha de nuestro DIV y nos permite bajar o subir para observar todo el texto que tenemos en nuestro DIV sin que se nos salga.
con la propiedad [ overflow-y ] nos estamos situando en la parte derecha de nuestra pantalla sobre el eje "Y", después le decimos que sobre nuestro eje "Y" queremos que nos situé un Scroll para poder navegar de forma vertical en nuestro DIV.

También lo podemos utilizar sobre el eje "X" solo remplazamos de la siguiente manra.

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  overflow-x:scroll;
  width:250;
}

Si deseamos tener el Scroll tanto en el eje "Y" como en el "X" solo pondremos [ overflow:scroll ] automáticamente el navegador sitúa los dos Scroll en los dos ejes.

.estilo_div{
  background:#ff6600;
  border-radius:3px;
  height:50px;
  overflow:scroll;
  width:250;
}

Vista previa

Hola mundo, esto es una prueba donde el texto se sale de nuestro DIV y dara un mal aspecto a el sitio web..

Esta propiedad no solo es para colocar los Scroll también la podemos utilizar para ocultarlos, un ejemplo claro es cuando estamos haciendo una pagina web o cualquier otro proyecto con entorno web y no queremos que se muestre los Scroll, solo debemos colocarlo de la siguiente manera.
En nuestro archivo [ estilo.css ] colocaremos lo siguiente:

body{
overflow-y:hidden
}

Con esto le estamos diciendo a nuestro navegador que queremos que nos oculte el Scroll del eje "Y" de todo el cuerpo de nuestro proyecto. Si deseamos ocultar el eje "X" solo reemplazamos la "Y" por la "X"
y listo, o también podemos dejar solo [ overflow:hidden ] para ocultar los 2 ejes a la vez.

Ala hora de escribir nuestros textos deseamos que sean amigables, creativos y llamativos otorgándole un ambiente agradable a nuestro sitio web.

Vamos a crear un nuevo <div> donde vamos a escribir nuestro texto, a este <div> le vamos a dar diferentes propiedades que van a cambiar la apariencia de todo nuestro texto. No solo podemos darle las propiedades de texto a un <div> sino que también podemos dársela a cualquier otra Etiqueta html como pueden ser “<html><head><header><body><footer><article><section><a><h1><h2><h3><span>....entre otras Etiquetas html”, pero hay que tener cuidado a la hora de utilizarlas, puesto que si le damos la propiedades a una etiqueta “<html><head><body>” que son contenedoras principales en nuestros proyectos, ya que si damos estas propiedades de texto a una de estas etiquetas todo el texto escrito dentro de ellas va a ser igual, si creamos un <div> dentro de el <body> y este <body> tiene una fuente [ Arial ] , nuestro nuevo <div> creado heredaría el mismo tipo de fuente y para que nuestro <div> creado tenga diferentes propiedades debemos darle una clase nueva e ir a nuestro archivo [ .css ] y cambiar sus propiedades.

Vamos a crear un <div> con un nombre de clase [ class ] para este caso lo llamaremos [ estilo_div ] y dentro vamos a escribir el texto que deseemos.

<html>
        <head>
        </head>
        <body>
           <div class="estilo_div">HOLA MUNDO</div>
        </body>
</html>

Enlazamos nuestro archivo [ html ] con el archivo [ .css ], para que importe las propiedades CSS3 a nuestro archivo [ html ] ya que estas se encuentran en otro archivo distinto. Para este ejemplo el nombre de el archivo [ .css ] que utilizaremos sera [ estilos.css ] el cual va a estar dentro de una carpeta llamada [ css ].

Ahora vamos a nuestro archivo [ estilos.css ], que para este ejemplo tendrá las siguientes propiedades CSS3.

.estilo_div{
  background:#ff6600;
  height:20px;
  width:180;
}

Vista previa de nuestro texto

HOLA MUNDO

Quitaremos el color de fondo [ background ] de nuestro <div> para que nos resalte mejor las modificaciones que le daremos a nuestro texto escrito.

HOLA MUNDO

Podemos observar que el texto se muestra, pero con las propiedades predeterminadas por el navegador que estemos utilizando. Ahora vamos a cambiar las reglas, vamos a decirle a el navegador que no queremos sus propiedades sino que nosotros seremos los que decidiremos el estilo que llevara nuestro texto.

Con la propiedad [ font ] que es nuestra fuente.

Esta propiedad es un poco compleja debido a su gran flexibilidad existen 6 formas de utilizar esta propiedad, vamos a explicar cada una de ellas.

La primera de las formas es de esta manera:

.estilo_div{
  font: bold 25px Arial;
  height:20px;
  width:180px;
}

Vista previa

HOLA MUNDO

con la propiedad [ font ] estamos diciendo que vamos a editar nuestra fuente, con la siguiente propiedad [ bold ] estamos diciendo que nuestra fuente va a tener Negrita "resaltar el texto", estamos dando una fuente con un tamaño de [ 25px ] y con un tipo de fuente [ Arial ], podemos colocar cualquier otro tipo de fuente. Pero hay que tener cuidado porque si utilizamos un tipo de fuente que no soporte el navegador, este no tomara la fuente asignada por nosotros sino que pondrá su propia fuente predeterminada. Lo que podemos hacer es colocar diferentes opciones, solo debemos separar los nombre de fuente con una coma. mas adelante veremos como podemos utilizar otros tipos de fuente muy diferentes a los usuales y que nuestro navegador soporte estas fuentes.

.estilo_div{
 fond:25px Arial, Arial Black, Impact;
  height:20px;
  width:180;
}

Con esto estamos diciéndole a nuestro navegador que la fuente principal que vamos a utilizar es [ Arial ], de no tener esta fuente utilice la [ Arial Black ] y si tampoco la tiene coloque el tipo de fuente [ Impact ].

La segunda manera de utilizar la propiedad [ font ] es con [ font-family ]

.estilo_div{
  font-family: Arial Black;
  height:20px;
  width:180px;
}

Vista previa

HOLA MUNDO

De esta manera solo estamos aclarando a el navegador que tipo de fuente [ font ] deseamos utilizar en este caso el tipo de fuente [ Arial Black ], el tamaño de nuestro texto sera determinado indeterminadamente por el navegador que estemos utilizando.

La tercera manera de utilizar la propiedad [ font ] es con [ font-style ]

.estilo_div{
  font-family: Arial Black;
  font-style:italic;
  height:20px;
  width:180px;
}

Vista previa

HOLA MUNDO

De esta manera estamos utilizando la propiedad [ font-style: italic ] como un complemento para nuestra fuente base, mostrando nuestro texto de forma cursiva o tambien llamada [ itálica o bastardilla ]. ¨
[ font-style: normal ] Con este valor nuestra fuente se mostrara normal y sin negrita.
[ font-style: inherit ] Con esto heredaremos el valor de una propiedad de otro objeto en este caso heredaremos propiedades de un <div> a otro. Ejemplo:

<html>
        <head>
        </head>
        <body>
           <div class="padre">
                <div class="estilo_div">HOLA MUNDO</div>
           </div>
        </body>
</html>

Con las propiedades CSS3

.estilo_div{
  font-family: Arial Black;
  font-style:inherit;
  height:20px;
  width:180px;
}
.padre{
     font-family: Arial Black;
     font-style:italic;
     height:20px;
     width:180px;
}

En este ejemplo tenemos 2 <div> uno dentro de otro, el superior que en este caso le otorgamos como nombre de clase "padre" [ class="padre" ] contendrá un <div> dentro de el que nosotros le otorgamos un nombre de clase "estilo_div" [ class="estilo_div" ], este <div> llamado padre tendrá un [ font-style: italic ], y nuestro otro <div> llamado "estilo_div" tendrá el valor [ font-style: inherit ], con este valor de la propiedad el <div> llamado "estilo_div" heredara la propiedad [ font-style ] del <div> superior llamado "padre" ya que este lo contiene dentro de el.

viernes, 21 de febrero de 2014

Colocar o Quitar el Scroll de un DIV de tu pagina principal

Textos con diferentes colores y fuentes de texto

Translate

Popular Posts

Historial De Contenido

Escribenos