Definiciones:
definir un id (identificador):
un ide en html es muy facil pero recuerden algunas reglas, no se pueden usar dos ides en una etiqueta html, ejemplo:
<div id="ideuno idedos"></div>
ya que bueno, asi lo definieron los maestros, pero hablando de otro lado, las clases css si se pueden usar dos a la vez.
ejemplo:
<div class="claseuno clasedos"></div>
Pero luego de poder definir clases e ides en html, como empiezo a hacer codigo CSS?
Bueno es muy simple: solo debes saber como se definen estos dos tipos:
una clase CSS se define asi:
.claseuno{ AQUI EL CODIGO CSS }
un ide CSS se define asi:
#ideuno{ AQUI EL CODIGO CSS }
Pero que puedo poner dentro de ellas?
bueno aqui es donde empieza lo mas complicado pero simple de aprender si te interesa el tema:
hace 1 año yo descargue varios libros de CSS y HTML y varios los lei, me tarde 1 semana en aprender totalmente y aprenderme todo esto, pero me interesa enseñarles y poder decir: "Hoy por ti, Mañana por mi".
En unos minutos aprenderas varias cosas principales de CSS y espero allas leido todo y sigas todos los pasos.
Primeramente les dejo unos libros que encontrarian si buscan en Google:
Primer libro de CSS
Segundo libro de CSS
Tercer libro de CSS
Bueno ahora vamos con lo principal:
Opciones de texto:
recomendable usar en: <span></span> <a></a> <div></div> h1, h2, h3, h4, h5, h6
pero siempre se pueden usar en una etiqueta global para no ir poniendoles estilos a cada cosa:
como: <body>, <div></div>, <section></section>, <article></article>
Recordar que: // esto es un comentario y se puede borrar
Cambiar el tamaño del texto:
font-size: 1px; // tamaño en pixeles
Cambiar tipografia del texto:
font-family: arial; // Puedes usar varias para formar un tipo de letra ej: arial, Helvetica
Cambiar color de letra, en esta parte puedes usar colores web y RGBA, el ejemplo esta en color web:
color: #FFFFFF; // Puedes usar colores en ingles ej: blue, green, yellow, red
Poner tipo negrita(weight) o inclinada (italic):
font-weight: italic;
Ahora vamos con los estilos para contenedores y empezar a diseñar mas a fondo una web:
Recuerda que puedes obtener mas información sobre los colores web, y rgba en ¡Google!
Información:
Colores web segun wikipedia
Generador de colores web
Colores rgba segun wikipedia (ingles)
Colores rgba segun css3.info
Generador de colores rgba
Bueno ahora vamos al codigo de diseño:
Colorear borde, este se divide en 3 partes:
- tamaño en pixeles o pt ej: 1px o tambien 1pt
- Tipo de borde, existen varios: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit
- color en rgba, color web o color en ingles
ej:
border:1px solid #000000;
este tambien se puede dividir en solo unas partes:
border-right, border-left, border-top, border-bottom y se utiliza de la misma manera:
border-top:1px solid #000000;
Poner fondo, este solo se utiliza igual que otros, color rgba, color web, color en ingles. ej:
background: #333333;
tambien se pueden utilizar con imagenes o definir varios:
background-image: url('http://imagenes.com/lindelaimagen.png');
background-color: #333333;
Ahora vamos con otros estilos los cuales son algunso bien usados en este sitio web:
utilizar margenes o espacios:
margin:1px 1px 1px 1px;
se divide en 4: top, right, bottom, left
o puedes globalizarlo y no utilizar los 4.
margin: 5px;
otro estilo es el espaciado en los lados que se utiliza igualmente como los margenes:
padding:1px 1px 1px 1px;
que tiene la misma explicación, se divide en 4 y son: top, right, bottom, left
Otros estilos que pueden servirte son:
mostrar u ocultar elemento
mostrar: block
ocultar: none
ej:
display: block;
definir tamaño, se utilizar tamaño en pixeles:
ancho, ej:
width: 50px;
alto, je:
heigth: 50px;
Separar o tomar elemento:
limitar: hidden
usar scroll bar: auto // para usar esto deves tener definido los elementos width:; y height:;
ej:
overflow:hidden;
flotar o mover elementos:
con esto puedes mover los elementos de un lado a otro, ejemplos: right, left.
ej:
float: left;
Bueno eso es todo lo que puedo decirles, ire actualizando este tutorial con mas cosas, y quiza haga uno de CSS3
Hasta luego :D
Comparte este articulo con tus amigos en las redes sociales y Vota por el articulo en Bitacoras.com
No hay comentarios :
Publicar un comentario