El post que buscas se encuentra eliminado, pero este también te puede interesar

Aprendé html y css [Parte 2]

Aprendé html y css [Parte 2]

aprende

<introducción>
Hola a todos, vuelvo a subir este post, porque a muchos les había servido y me lo borraron por contener un link de descarga que era la de la web finalizada en este mismo tutorial.
Esta es la segunda parte del post Aprendé html y css, espero que les guste, esta parte va a tratar todo sobre CSS!, que es el diseño de la web!, con este tutorial ya van a poder tener una web con un lindo diseño propio y de la forma estructural que deseen.
</introducción>

web

Pasos para realizar una buena web


propio


html

Introducción al CSS

Repasamos un poco de lo que vimos en la parte 1

CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada.
Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitos web se concentraban más en su contenido que en su presentación.
HTML no pone mucha atención en la apariencia del documento. CSS describe como los elementos dispuestos en la página son presentados al usuario. CSS es un gran avance que complementa el HTML y la Web en general.
Con CSS podemos especifiar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imagenes en la página.

Para poder conectar el CSS al HTML, en el HTML, arriba del </head> debemos agregar:
<link rel="stylesheet" href="estilos.css" type="text/css" />


css

Propiedades CSS

Las propiedades de CSS necesitadas para hacer una web

color // Color de la letra
font-size // Pixeles del tamaño de la letra (mayormente se usa 13px)
font-family // Fuente de letra que quiera usar
font-weight // Tiene estas propiedades: bold, bolder, normal, lighter
text-align // Alineación de texto: left, right, center, justify
line-height // Espacio entre renglones (mayormente se usa 1.5)
letter-spacing // Espacio entre cada letra
width // Largo
height // Alto
background-color // Color de fondo
background:url(url de la imagen); // Fondo que se va repitiendo
background:url(url de la imagen) repeat-x; // Fondo que se va repitiendo en forma horizontal
background:url(url de la imagen) repeat-y; // Fondo que se va repitiendo en forma vertical
background:url(url de la imagen) no-repeat; // Fondo que no se repite
background:transparent; // Fondo transparente
margin // Margenes o distancia entre algo por fuera (de arriba, abajo, izquierda y derecha), para eso está: margin-top, margin-bottom, margin-left, margin-right
margin:0 auto; // Se le integra al div que contiene a toda la web para centrar la web
margin:0; // Sin margenes (se usa mayormente en los headers, por ej: el header de Taringa)
padding // Relleno o distancia entre algo por dentro (de arriba, abajo, izquierda y derecha), para eso está: padding-top, padding-bottom, padding-left, padding-right
padding:0; // Sin relleno (también es para los headers mayormente)
float // Se usa en los divs o imagenes para que floten en una determinada posición: left, right ES MUY IMPORTANTE ESTA PROPIEDAD
border // Se usa para los bordes ya sea de un div hasta de una imagen o lo que sea, tambien se les puede asignar el borde a donde se desee, arriba, abajo, a la izquierda y derecha: border-top, border-bottom, border-left, border-right, tambien es necesario poner los pixels del borde, en que estado quieren que esté y el color por ejemplo: border:1px solid #000;
Hay más tipos de borders, no solo el sólido: http://www.w3schools.com/css/css_border.asp
position // El position son las posiciones de la web, entre ellas están: absolute, relative, fixed, static, inherit
Ejemplo que muestra las diferencias: http://www.w3schools.com/cssref/playit.asp?filename=playcss_position&preval=absolute
overflow // El overflow es el scroll que casi todas las webs tienen, para ir bajando y para ir a un costado, entre ellas están las siguientes propiedades: scroll, hidden, visible, auto, inherit
Ejemplo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_overflow
background-position // Posición del fondo
clear:both; // El clear:both; es un elemento del clearfix, para que la web quede correctamente en el bloque del div.
Ejemplo: http://www.webtoolkit.info/demo/css-clearfix
display // Se ejecutan una de las siguientes acciones: block, inline, none, list-item
Ejemplo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none
text-decoration // Decoracion del texto (en los links o enlaces), por predeterminado esta "text-decoration:underline", se lo puede cambiar el underline por, none, overline, line-through y blink
Ejemplo: http://www.w3schools.com/cssref/playit.asp?filename=playcss_text-decoration
list-style // Están por predeterminado en los "li" los menúes web, para sacarlos hay que usar esta propiedad: list-style:none;



parte 2

Web usando las propiedades mencionadas

Plantilla web simple, usando las propiedades mencionadas

tutorial

Aprendé html y css [Parte 2]

Boton en CSS

Crear un boton en css! (muy pedido)

A continuación algo muy pedido por muchos, los botones! ahora van a entender como hacerlos!
Imagenes:

aprende
Guardar con el nombre: "download.png" en la carpeta "images"

web
Guardar con el nombre: "boton.png" en la carpeta "images"

CSS:



#boton{
width:auto;
height:auto;
margin-top:15px;
float:left;
margin-bottom:5px;
}

a.descarga:link{  /* Propiedad link: la que se muestra predeterminado  */
text-decoration:none;
color:#FFF;
text-shadow:0px 1px 0px #000;
background:url(images/boton.png);
background-position:0 0;
border-radius:3px;
border:1px solid #186bb0;
padding:6px 15px;
font-weight:bold;
font-size:12px;
float:left;
}

a.descarga:visited{ /* Propiedad visited: Al visitar el url */
text-decoration:none;
color:#FFF;
text-shadow:0px 1px 0px #000;
background:url(images/boton.png);
background-position:0 0;
border-radius:3px;
border:1px solid #186bb0;
}

a.descarga:hover{ /* Propiedad hover: Al pasar el puntero del mouse por encima */
background-position:0 -36px;
}

a.descarga:active{ /* Propiedad active: Al clickear */
background-position:0 -72px;
}

.icon{
width:16px;
height:16px;
background:url(images/download.png) no-repeat;
float:left;
display:block;
margin-right:7px;
margin-top:-1px;
}

HTML:

<a href="URL" class="descarga" target="_blank"> <div class="icon"></div> Descargar</a>


Para saber el background position de cada imagen tienen que ir a esta web http://www.spritecow.com/ abrir la imagen del sprite, es decir todas las acciones del boton en uno y seleccionar con el puntero del mouse y clic izquierdo en cada parte de los botones, y despues poner "background-position: (la posición)", la posición es la que esta encuadrada en esta imagen:

propio

Eso es lo único que importa para hacer el sprite


html

CSS3

CSS3: Un CSS más avanzado

A partir del año 2005 se comenzó a definir el sucesor de esta versión, al cual se lo conoce como CSS3 o Cascading Style Sheets Level 3. Actualmente en definición, esta versión nos ofrece una gran variedad de opciones muy importantes para las necesidades del diseño web actual. Desde opciones de sombreado y redondeado, hasta funciones avanzadas de movimiento y transformación, CSS3 es el estándar que dominará la web por los siguientes años.

Las propiedades más usadas de CSS3 son las siguientes:

box-shadow
text-decoration
border-radius
transition
RGBA


css


box-shadow:0px 0px 5px 0px rgba(0,0,0,0.5);
Resultado:
parte 2
(la imagen tiene un "border:5px solid #FFF;" )

Hay muchas más formas de poner los shadows, la primera opción de los pixels corre la sombra a la derecha, el segundo corre la sombra para abajo, el tercero la amplia, como está en el ejemplo de arriba y el cuarto hace a la sombra sólida.


tutorial


text-shadow Sombra del texto ejemplo de uso: "text-shadow:0px 1px 0px #FFF;" quedaría una sombra de 1px blanca abajo del texto
La primera opción de los pixels son los 120º grados a donde se corre el texto, el segundo son los 90º grados yel tercero es el desvanecimiento de la sombra.


Aprendé html y css [Parte 2]


border-radius: es el borde que le podes aplicar a cualquier cosa en CSS
Ejemplo: border-radius:4px; le aplica el borde a todos los bordes.
border-top-left-radius:4px; le aplica el borde a el borde izquierdo de arriba
border-top-right-radius:4px; le aplica el borde a el borde derecho de arriba
border-bottom-left-radius:4px; le aplica el borde a el borde izquierdo de abajo
border-bottom-right-radius:4px; le aplica el borde a el borde derecho de abajo

Los pixeles se cambian a su gusto, eso es un ejemplo.


aprende


transition: Los transition, son las transiciones que se pueden medir por el tiempo

transition:0.3s ease-in;
El tiempo se cambia a su gusto


web


El RGBA en CSS es otra forma de captar el color de algo y ademas ponerle opacidad, en los box-shadow se usan, como vimos anteriormente, a todos los colores comunes se los puede cambiar por el rgba y ponerle opacidad.
white = #FFF = rgba(255,255,255,0.8);

Lo marcado en rojo es la opacidad


propio

Más sobre CSS3
Aprende mucho más sobre CSS3!

Aprende muchísimo más sobre CSS3 enhttp://www.w3schools.com/css3/

html

FIN
Final del post!

Bueno, termino el post, espero que les haya gustado el post y hayan aprendido o comprendido un poco más sobre el tema de CSS, cualquier duda o cunsulta MP!

css

parte 2

Anuncios

9 comentarios - Aprendé html y css [Parte 2]

@Th3_Rushi +2
Gracias powersh +10 y reco!
@creamshow +1
gracias por la info, me gustó mucho el post
@Gianluca_HD +1
Excelente aporte! después lo miro bien
@nesmeck4 +1
Excelente, apenas comienzo a retomar HTML y esto me viene como anillo al dedo.
+10 y a Favoritos.
@Lezzer +1
Sin palabras