Cur So

• CSS es el mecanismo que permite separar los
contenidos definidos mediante HTML y el

aspecto que deben presentar esos contenidos
Contenidos
HTML CSS
+
(Contenidos) (Presentación)
Presentación
El primer documento HTML
• Las páginas HTML se dividen en dos partes: la cabecera y el
cuerpo. La cabecera incluye información sobre la propia
página, como por ejemplo su título y su idioma. El cuerpo de
la página incluye todos sus contenidos, como párrafos de
texto e imágenes.
Cuerpo
HTML
Cabecera
+
• El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su
pantalla y la cabecera (llamada head en inglés) contiene todo lo que no se
ve (con la única excepción del título de la página, que los navegadores
muestran como título de sus ventanas).
• A continuación se muestra el código HTML de una página
web muy sencilla:
Ejercicio_1.html
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que
prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>
• Si quieres probar este primer ejemplo, debes
hacer lo siguiente:
– 1. Abre un editor de archivos de texto y crea un
archivo nuevo
– 2. Copia el código HTML mostrado anteriormente
y pégalo tal cual en el archivo que has creado
– 3. Guarda el archivo con el nombre que quieras,
pero con la extensión .html
• Volviendo al código HTML del primer ejemplo, es importante conocer
las tres etiquetas principales de un documento HTML (<html>,
<head>, <body>):
– <html>: indica el comienzo y el final de un documento HTML. Ninguna
etiqueta o contenido puede colocarse antes o después de la etiqueta <html>
– <head>: delimita la parte de la cabecera del documento. La cabecera
contiene información sobre el propio documento HTML, como por ejemplo
su título y el idioma de la página. Los contenidos indicados en la cabecera
no son visibles para el usuario, con la excepción de la etiqueta <title>, que
se utiliza para indicar el título del documento y que los navegadores lo
visualizan en la parte superior izquierda de la ventana del navegador
– <body>: delimita el cuerpo del documento HTML. El cuerpo encierra todos
los contenidos que se muestran al usuario (párrafos de texto, imágenes,
tablas).
<html> <head>
Cabecera <body>
HTML </ head >
+ Cuerpo
</html> </ body >

• Antes de la aparición de los estilos, la presentación se manejaba
directamente dentro de los elementos HTML por medio de atributos.
Por ejemplo:
Ejercicio_2.html
<h2 align="center">
<font color=“blue" size=“16" face="Times New Roman, serif">
<i>Curso CSS UAEH <i>
</font>
</h2>
CSS permite separar el contenido de un
documento de su presentación.
En el documento HTML: En la hoja de estilos se define el formato de

los encabezados h2:
<h2> Curso CSS UAEH </h2>
h2 {
text-align: center;
color: blue;
font: italic large "Times New Roman” ;
}
Formas de incluir estilos CSS
<h2 style="color: blue; text-align:center;font-style:italic;
Inline Styles font-size: 26px; font-family:"Times New Roman" >
Utilizando el atributo “style” se define el estilo de un Curso CSS UAEH
elemento HTML en forma individual. </h2>
<head>
<style type="text/css">
Embedded Style
h2 {
Se define la regla CSS dentro de un documento HTML.
color: blue;
Se puede aplicar a cualquier elemento de ese text-align:center;
documento. font-style:italic;
font-size: 26px;
font-family:
"Times New Roman"
}
</style>
</head>
<body>
<h2>Curso HTML</h2>
</body>
Hojas de Estilos externas <head>

Un archivo CSS independiente que se encuentra <link rel=stylesheet type="text/css“ href=“estilos.css">
referenciado en cada uno de los documentos HTML que
</head>
desean utilizarlo.
<body>
<h2>Curso HTML</h2>
</body>
Formato a Títulos y Parrafos
Formato a listas
• En este apartado del curso del
ejercicio_6.html sustituimos las viñetas por
una imagen (vi_1.jpg). Con el siguiente codigo
li{list-style: none;
background-image: url(../imagenes/vi_1.jpg);
background-position: left bottom;
background-repeat: no-repeat;
padding-left: 15px;
}
Formato a listas
• La primera línea anula la viñeta de la lista,
• la segunda indica el la imagen a utilizar,
• la tercera la posición con respecto al ítem de
la lista (a la izquierda y abajo),
• la cuarta dice que el fondo no se repita y
• la quinta desplaza la palabra 15px hacia la
derecha para que no tape la imagen. anera.
Formato a listas
• El resultado es el siguiente:
Formato a listas
• Podemos apreciar en la imagen todas las
viñetas no importando su jerarquía tienen la
misma imagen.
• Para cambiar cada nivel ocuparemos
selectores de clase.
Maquetación Con CSS
• Podemos empezar diseñando desde una
simple hoja y un lápiz, hasta una potente
interface de desarrollo vectorial como
ilustrador.
Titulo Principal
Navegación Contenido
Creditos
960 px
Titulo Principal 150 px
230 px 730px
Navegación Contenido
400 px
Creditos 50px
Ejercio_7.html y estilo_3.css
Ejercio_7.html y estilo_3.css
Div
Nos sirve para diseñar capas en nuestra pagina
web, las cuales se le puede aplicar un
identificador de CSS para definir su apariencia,
posición y comportamiento
Diseño parar la distribución de capas
• La solución CSS se basa en el uso de la propiedad float para los elementos

posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie
de página para evitar los solapamientos ocasionados por los elementos
posicionados con float.
margin y padding
• Los atributos de CSS margin y padding, aunque en algunas ocasiones puedan
comportarse de manera parecida en la práctica, son muy distintos.
• Margin es el margen que hay desde un elemento hasta los que tenga al lado.
• Padding es el espacio que hay en un contenedor entre el contenido y los bordes

del contenedor.
Es decir, al especificar un margin estamos definiendo un espacio entre el una capa y

las capas texto, imágenes u otros contenidos que haya a los lados.
Al especificar un padding en una capa, por ejemplo, estamos definiendo el espacio

que hay entre el borde de la capa y lo que tenga dentro.
practica
Titulo Principal
Navegación
Contenido destacados
Creditos 50px
Condicionales para navegadores
• <link rel="stylesheet" href="base-style.css" type="text/css" />
• 
• 
• <!--[if Safari]> <link rel="stylesheet" href="safari-style.css"
• <!--[if Konquerer]> <link rel="stylesheet" href="konquerer-
style.css" type="text/css" /> <[end if

Cur So

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Cur So

Cargado por

Copyright:

Formatos disponibles

• CSS es el mecanismo que permite separar los

contenidos definidos mediante HTML y el

HTML </ head >

</html> </ body >

En el documento HTML: En la hoja de estilos se define el formato de

Hojas de Estilos externas <head>

Titulo Principal 150 px

• La solución CSS se basa en el uso de la propiedad float para los elementos

• Padding es el espacio que hay en un contenedor entre el contenido y los bordes

Es decir, al especificar un margin estamos definiendo un espacio entre el una capa y

Al especificar un padding en una capa, por ejemplo, estamos definiendo el espacio

También podría gustarte