Muy buen dia, a continuacion les explicare un poco sobre
CSS. Primero que todo CSS es un lenguaje de hojas de estilo el cual ha sido
diseñado o creado para los aspectos en
html y xhtml, es decir que con CSS la presentación de la pagina se miraría mucho
mejor y evita mas trabajo en la misma.
Imagenes
Para incluir el CSS en nuestra pagina usamos la etiquete Style ahora bien, todo los códigos van
dentro de la cabecera.. ej:
<Head>
<style
type="text/css">
</style>
</Head>
Ahora el
sig código:
background-image: url(TeAmoJesus.jpg); “Ponemos la
direccion de nuestra imagen, en este caso la mia se llama TeAmoJesus.JpG”
background-repeat: repeat; “Este codigo nos indica si queremos
repetir la imagen, en este caso yo le puse repeat que significa que va a
repetir mi imagen de fondo”
background-position: center; “y por ultimo la posicion del fondo,
que sería centrado”
Imágenes con enlaces
Aquí les mostrare como poner imágenes en los enlaces.
1)Clic en las propiedades CSS
2)Clic en Editar Regla
3)Clic en la categoría Lista
4)Clic en Examinar para buscar la imagen que se necesite
5)Elegimos la imagen y clic en Aceptar
Ahora les explicare la otra parte:
1) <h1>
Bienvenido a la configuracion de hojas de Estilo </h1>
2) <ul>
3) <li><a href="C:\Users\Christopher\Desktop\CSSFond\DSC03357.JPG">Primer
Enlace</a></li>
<li><a href="C:\Users\Christopher\Desktop\CSSFond\DSC03679.JPG">Segundo
Enlace</a></li>
<li><a
href="C:\Users\Christopher\Desktop\CSSFond\DSC03695.JPG">Tercer
Enlace</a></li>
</ul>
1)Empezamos creando un encabezado con H1
2)Después creamos las listas desordenadas con <ul>
3)Ahora agregamos li para la lista y ponemos la dirección de
la imagen usando a href y el nombre
que queremos poner al texto en este caso “Primer Enlace”
4)Terminamos cerrando la lista desordenada </ul>
Parrafos CSS
Les enseñare como cambiar el color, el tamaño de fuente para
cada uno de los párrafos, esta es una de las grandres ventajas que tiene CSS.
Como todos sabemos , para agregar un párrafo se usa la
etiquete <p> </p>
Ej: <p>Este párrafo está Normal </p>
Ahora para cambiar el color, tipo de letra y tamaño.
p { color: Purple; font-family:
Verdana; font-size: medium; }
La regla CSS se divide en 3 partes:
Selector:Propiedad y Valor
Selector : En este caso seria la P del Parrafo
Propiedad: En este caso seria el Color;Fuente y Tamaño
“Color” ”Font-Family”
”Font-size”
Valor: El valor que le queremos dar a la propiedad
“Purple” “Verdana”
“Medium”
Y asi cualquier párrafo que halla en nuestra pagina cambiara
a color Morado con la fuente Verdana y tamaño medio.
Aplicación de tablas
Al aplicar las tablas se aplicara dentro del Body de nuestro
documento html.
<body>
<div
style="position:relative;">
<div style="position:absolute;
top:0px; left:0px; width:50px; height:50px;
background-color:Purple;">Ejemplo</div>
<div
style="position:absolute; top:0px; left:50px; width:50px; height:50px;
background-color:#0033FF;"> De las</div>
<div
style="position:absolute; top:0px; left:100px; width:50px; height:50px;
background-color:yellow ;">Tablas!</div>
</div>
<body>
Aquí especificamos la posición de la tabla, su anchura,altura, y también
el color del fondo, como pueden ver yo les puse fondo morado,azul y amarillo.
Bueno, esto fue algo muy sencillo, debido a la poca
experiencia en que tengo, pero poco a poco iremos perfeccionando nuestras
paginas, aquí les dejo un link en donde pueden aprender un poco mas acerca de
CSS.
http://www.manualdecss.com/codigos-css/indice-codigos.html
Si tienen alguna duda o sugerencia, aqui les dejo mi correo:
peysitosalazar@gmail.com
http://www.manualdecss.com/codigos-css/indice-codigos.html
peysitosalazar@gmail.com
No hay comentarios:
Publicar un comentario