Introducción, Instalación y manejo TopStyle
El TopStyle es un programa editor Html que sirve para escribir paginas Html, con el objetivo de aprender a utilizar las etiquetas Html, y atributos de las hojas de estilos de forma manual.
Link del video en youtube: http://youtu.be/741402bsMEI
Descarga el programa TopStyle haz click aqui.
Html y Hojas de Estilos Aplicados a TEXTO
Para empezar a aplicar hojas de estilos (CSS) a tus paginas HTML, encontramos dos formas de aplicarlos, una de ellas es aplicar a etiquetas que ya existen (<p> ,<h1>,...) adicionandole algun estilo, como color de letra, un color de fondo, bordes, etc.
Y la otra forma es el de crear tus propios estilos, con tus propios nombres, y se pueden aplicar necesariamente a una etiqueta de la siguiente forma:
Crear una hoja de estilo por ejemplo llamado "estilos.css" en la cual incorporaremos nuestos estilos para ser aplicados a cualquier pagina html.
Archivo estilos.css
.miestilo1{
border: solid 10px; border-bottom-color: orange; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 30px;
} Para incorporar o vincular una hoja de estilo en tu pagina Html, se debe colocar lo siguiente dentro de la etiqueta <HEAD>.
<head>
<title>Hojas de estilos</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
Ahora bien para aplicar mi estilo creado en la pagina html, lo llamo en una etiqueta con el atributo class, de la siguiente forma:
<p class="miestilo1">
Este es ejemplo es de un parrafo, al cual se esta plicando un estilo propio llamado miestilo1 en la etiqueta p, todo lo que contiene la etiqueta p tendra el estilo que esta definido
</p>video primera parte
Link del video en youtube: http://youtu.be/rC_loubFcJE
video segunda parte
Link del video en youtube:http://youtu.be/2D9GK3f8wBQ
Html y Hojas de Estilos Aplicados a LISTAS
Para aplicar las hojas de estilos a listas, se utiliza list-style.Ejemplo:
.estilolista{
list-style: lower-greek;
}
list-style: lower-greek;
}
En este videotutorial se explica como crear una lista anidada, es decir listas dentro de otra lista (sublistas).
Ejemplo:
- Ejercicio 1
- Solucion 1
- Prueba 1
- Prueba 2
- Prueba 3
- Casos de prueba
- Prueba 4
- Solucion 2
- Ejercicio 2
- Ejercicio 3
- Ejercicio 4
- Solucion 1
- Solucion 2
- Solucion 3
Link del video en youtube 1ra parte: http://youtu.be/-iV0YTwB_yw
En este videotutorial se explica como aplicar estilos a una lista anidada.
Link del video en youtube 2da parte: http://youtu.be/O_Oy4tvir50
Descarga los ejemplos que se realizaron haciendo click aqui.
No hay comentarios:
Publicar un comentario