Apuntes CSS
CSS es una herramienta que nos permite definir la apariencia de la pagina web, esto con el objetivo de darle estetica al sitio, con este archivo css puedes hacer muchos estilos como: centrar la pagina, dar un borde a determinada imagen, personalizar formularios, tamaño, tipo y color de letra, en fin todo lo que tenga que ver con el estilo de tu pagina.
Utilizar Estilos
Una hoja de estilo se compone de reglas de diseño.
Existen 2 maneras para incluir estilos dentro de una pagina, la mas utilizada es llamando a una hoja que contendra todos los estilos que tendra nuestra pagina, esto se hace desde la cabecera de nuestro archivo:
La otra forma es agregando los estilos directamente a la cabecera ejemplo:
Para llamar (utilizar) un estilo necesitamos de un SELECTOR, este nos dice a que parte de la página se le aplica el estilo. Los selectores son etiquetas HTML (div, li, ol, a, body entre otras). Enseguida de la etiqueta, viene la llamada del estilo, el estilo lo llevara todos los elementos que este encerrando la etiqueta. En el siguiente ejemplo se declararon todos los estilos en la cabecera y no con un archivo adjunto, solo se ocupara el estilo body; aqui esta la vista grafica ejemplo1.html, y el código.
Como ya mencione puedes declarar los estilos desde una hoja externa la cual llamaremos mis_estilos.css y la llamaremos desde el header de la pagina, este método es el mas recomendable por que puedes hacer una hoja de estilos para todas tus paginas. El resultado sera el mismo, pero ahorraras tiempo y trabajo, ejemplo :
mis_estilos.css
documento.html
Declarar Estilos
-
Selector { propiedad1: valor1; propiedad2: valor2 }
El siguiente estilo, asignara el color amarillo y color de fondo rojo, a todo renglón que este entre la etiqueta h1
-
h1 {color: yellow; background-color: red }
Existen muchos metodos para declarar un selector;cada uno de ellos con un abjetivo en especifico explicare los mas utilizados, el primero ya lo utilize y es tomando las etiquetas que utiliza HTML como es body , li , h1, h2, h3 etc.. pero puedes asignarle a determinado grupo de elementos un estilo, colocas una etiqueta div (esta es la mas común y la mas recomendable) seguido de class="nombredelaclase" ,esta clase estará incluida en la hoja de estilos así ".nombredelaclase{propiedades}", aqui esta el resultado de el codigo que esta abajo.
clases.css
ejemplo2.html
-
</p>
-
<p>#miid{font-size: 40pt; font-family:Arial; color:#003399; background:#CC0000}</p>
-
<p>
2. a:link enlace que no ha sido explorado por el usuario.
3. a:visited se refiere a los enlaces ya visitados.
4. a:active enlace seleccionado con el ratón
5. a:hover enlace con el puntero del ratón encima, pero no seleccionado
6. a:focus enlace con el foco del sistema
-
</p>
-
<p>a:link { color: red; } /* enlace no visitado*/</p>
-
<p>a:visited { color: blue; } /* enlace visitado */</p>
-
<p>a:active { color: lime; } /* enlace activo (pulsado) */</p>
-
<p>a:hover {color: red; } /* ratón en el enlace, sin pulsar. */
, puede parecer algo complicado pero después de un tiempo veras que es muy sencillo, te recomiendo que crees una hoja de estilos y no que declares todos tus estilos en el header, utiliza clases "class" y cuando llames a la clase (html) hazlo con la etiqueta div, esta no contiene un atributo, solo sirve para limitar las clases, revisa el código fuente de las paginas, ve al header y busca la dirección de su hoja de estilos, analizarla con eso conocerás muchísimas propiedades que pueden tener tus estilos, esto es todo amigos y compartan el conocimiento.
Foro seguro ahi respondemos tus dudas, unete y se parte de esta comunidad.
natal.mx
el 24 Mar 2007 a las 18:06 #Hola, oye Rod, ya he leido un Tutorial de CSS pero quería preguntarte algo, aparte de lo que dices en tu Tutorial, quería saber si hay la forma de poder incluir imágenes en mi CSS es decir que si tengo una hoja de estilo y quiero que así sean todas mis páginas con esa imagen de fondo y te acuerdas que un día me dijiste que no usara tablas en mi página? qué fue lo que me dijiste que pusiera en vez de eso?
Rodrigo-Azul
el 25 Mar 2007 a las 2:48 #bueno natal.mx para centrar tu pagina debes de encerrarla en un div seguido de la llamada de la clase ejemplo:
HTML
.miclase{
position: absolute;
left: 50%;
top: 50%;
width: 300px;//ancho que tendra el bloque
height: 200px;//alto
margin-top: -100px;//para margen superior
margin-left: -150px;// es para margen izquierdo
overflow: auto;
}
para tener una imagen de fondo crea una clase para el body la clase debra ir sin punto por que es una etiqueta html predefinida
body {
font: 0.7em Arial, sans-serif; line-height: 1.5em; //fuente
background: #ccc url('images/background.gif'); //imagen de fondo y parametros
background-repeat: repeat-y;//repite el fondo en el eje y
background-position: center;//centra laimagen
color: #454545; }
puedes cambiar las propiedades como el eje en que se repetira, color, psoicion, etc. eso depende de tu imagen.
natal.mx
el 25 Mar 2007 a las 3:00 #Gracias por el comentario, te agradezco te tomaras tiempo para contestar mi duda, con forme pasa el tiempo aprendó más sobre CSS y a quienes quieran que les comparta información acerca de CSS les puedo pasar documentos que les van a servir y pues aquí estaré para expresar mis otras dudas, nos vemos. Saludos Rod.
Rodrigo-Azul
el 25 Mar 2007 a las 17:19 #De nada natal.mx, y si tienes info puedes enviármela a mi mail en un .zip y si quieres un txt con los datos del colaborador(nombre,web,msj a la cominidad no se xD), mi mail es: azul.rejected@gmail.com
gabriel
el 17 Abr 2007 a las 16:47 #no entiendo para nada eso de no usar tablas para maquetiar tu pagina web.
quisiera saber como hacer eso si mi pagina tien un monton de imagenes y letras.
como por ejemplo esta
http://www.campcancunmexico.com
esta hecha con tablas la podria yo maquetear sin usar las tablas.
Rodrigo-Azul
el 17 Abr 2007 a las 18:18 #Claro que si Gabriel, mira aquí hay unos layouts con los que te puedes basar para ir haciendo tu sitio, existen muchas ventajas usar CSS ejemplo: tienes una imagen con un cierto margen y borde... tu sitio crece a 200 paginas... y ahora quieres quitar el borde y el margen, te imaginas cuanto tiempo y trabajo seria cambiar las 200 paginas? bueno pues para evitar esto usa hojas de estilo (CSS) esta contendrá las propiedades que tendrá la imagen, estas irán dentro una clase o id, esta clase tendrá las propiedades de margen y borde, si cambias las propiedades cambiaras automáticamente el aspecto de tus 200 paginas, bueno pues con el tiempo te iras acostumbrando a mi también me costo un poco trabajo entender como es que funcionaban
, saludos cualquier duda solo dime bro.
gabriel
el 18 Abr 2007 a las 16:16 #chispas pero como uff en serio que me cuesta trabajo entender eso sin usar las tablas
gabriel
el 25 Abr 2007 a las 15:48 #intente hacer una pagina con el maquetado en css y la verdad no puedo
no entiendo como alguien me podria mostrar un buen tutorial.
se me cuatrapea todo lo que quiero hacer 
para aprender la verdad
Rodrigo-Λzul
el 25 Abr 2007 a las 23:28 #gabriel mira puedes entrar a este tutorial que explica como hacer un menú con listas, aqui se combina HTML y CSS de una forma sencilla saludos.
Oscar
el 21 Feb 2008 a las 3:32 #Hola Rodrigo, como estas te felicito por tu pagina, oye tengo una duda realize una pagina y utilice estilos, el problema es que no se visualizan mis textos en Internet explorer 6 y en el 7 si, no se por que espero y puedas darme una pista para resolver este problemilla.
Saludos.
Oskar
el 21 Feb 2008 a las 3:44 #Hola Rodrigo, una felicitacion por tu sitio, tengo una duda acabo de realizar un sitio y en el Internet Explorer 6 no se visualizan mis textos ni mis imagenes y en IE 7 si, espero y me puedas orientar en esta duda, gracias de antemano, saludos a todos.
Rodrigo-Λzul
el 21 Feb 2008 a las 18:53 #Que onda oskar!!! ese internet explorer como da lata!! jajaja
pero hay una solucion y se llaman hacks aqui gabriel explica que onda con eso http://www.foro.sectorweb.net/viewtopic.php?f=16&t=141
Oskar
el 21 Feb 2008 a las 23:21 #Hola de nuevo a todos los del foro, gracias por la respuesta dada a mi duda, pero sigo igual, no entiendo que parametros cambiar si detecta IE 6 o IE 7.
Este es ejemplo que utilizo en los estilos.
#columnasder{
float:right;
padding:10px;
text-align:justify;
}
#titulos{
background-color:#F0F0F0;
font-size:10px;
color:#333;
font-weight:bold;
text-align:left;
padding:6px;
margin: 0 auto 0 auto;
}
#desplegados{
font:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
color:#333;
padding:3px;
margin:3px;
}
Que caracteristicas podria cambiar cuando detecta IE6, les dejo la url del sitio, http://www.cursorenlanoticia.com.mx esta pagina la realize en mi Servicio Social. Espero me puedan ayudar, por cierto quisiera colaborar con un tuto o algo por el estilo, como podria colaborar? Saludos Rodrigo.
Rodrigo-Λzul
el 22 Feb 2008 a las 1:10 #Bien Oskar!! esa es la actitud jejje mira te recomendaria que te registres en el foro que resposties este mensaje en el foro, para que no solo te conteste yo si no toda la banda de sectorweb, nos estamos viendo en el foro ahi puedes colaborar y aprender mas!
P.D. Respondo tu mensaje cuando crees el tema en el foro, te mando un gran saludo brother!
Itzcel Moreno
el 07 Jun 2008 a las 13:43 #hola soy estudiante de diseño y me interesa como esta hecha tu pagweb,obio no quiero q se ve a asi la mia pero si me gustaria saber el secreto de como se queda al centro todo el contenido por mas queintento no descubro el hila negro me ayudarias tu?
Itzcel Moreno
el 08 Jun 2008 a las 17:10 #hola soy yo otra ves si me pensaran ayudar o contestar Rodrigo-Azul o el que me quiera ayudar
Hugo
el 10 Jul 2008 a las 0:24 #Saludos y felicidades, muy bueno y explícito tu tutorial, legué navegando buscando otra cosa, pero lo que encontré me interesó mucho, gracias