En la publicacion anterior vimos como utilizar css con html dentro del mismo documento html (forma interna).
En esta ocacion veremos como hacer el mismo estilo pero haciendo un archivo css externo y luego llamarlo desde el documento html ,asi que manos a la obra:
Los primero que haremos en crear 1 documento css y otro html (esto es para en el caso que utilizemos phpdesigner).
Nota:si utilizas block de notas solo tendras que abrir 2 y al momeento de guardar el de CSS lo guardas con la extension (.css) y el de html con la extension (.html)
Luego de haber hecho esto en el documento html creamos las etiquetas necesarias o basicas para un diseño web.
por ejemplo:
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="www.intercambiosvirtuales.org" />
<title>Untitled 3</title>
</head>
<body>
</body>
</html>
Luego de haber hecho esto colocamos dentro de la Cabezera <HEAD> una etiqueta que se encarga de llamar a nuestro documento CSS y se llama <LINHK /> esta maneja unos atributos para que finciones correctamente y son:
rel="stylesheet":lo que hace basicamente es especificar que el documento en cuestión es una hoja de estilo externa.
type="text/css" :especifica el tipo de hoja de estilo a utilizar.
href="URL" :especifica la ruta del arichivo .css
Luego colocamos dentro de la etiqueta <BODY> unos cuantos titulos <H1> para probar nuestro estilo en creacion.
Despues de haber hecho lo anterior nuestra pagina debio haber quedamo asi.
<!DOCTYPE HTML>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="www.intercambiosvirtuales.org" />
<title>Untitled 3</title>
<link rel="stylesheet" type="text/css" href="estilo.css"/>
</head>
<body>
<h1>Es es mi primer estilo externo</h1>
<h1>Es es mi primer estilo externo</h1>
<h1>Es es mi primer estilo externo</h1>
<h1>Es es mi primer estilo externo</h1>
</body>
</html>
Luego de haber hecho esto procederemos a crear una carpeta en el escritorio y dentro de ella guardarmos nuestra pagina con cualquier nombre y colocamos la extension .html
Buenos ahora sigamos con la segunda parte y es la de crear el estilo que tendra la etiqueta <H1>.
En el documento CSS colocamos h1 {color: red;background-color: blue;font-size: 50px;}
color: red:coloca el texto de color rojo.
background-color: blue:coloca el fondo del texto color azul.
font-size: 50px:coloca el texto de tamaño grande y se mañeja en pixeles
nota:el estilo de la etiqueta h1 va dentro de los corchetes y los atrobutos son separamos unos con otro con punto y coma (;)
luego de haber hecho esto guardamos nuestro CSS en la misma carpeta donde guardamos el documento html, lo guardamos con el nombre estilo.css que es el mismo nombre de la ruta que le dimos en el documento html.
despues de haber hecho todos los pasos sin problemas procedemos a probar nuestra pagina en el navegador y el resultado debia de haber sido el siguiente:
.bmp)
No hay comentarios:
Publicar un comentario