docDiseño web con CSS
download 
Demanda Transcripción
Diseño web con CSS
Diseño web con CSS
Universidad Católica los Ángeles de Chimbote
ING CIP EDGAR CRUZ
Parte I
¿Qué es CSS?
• “Cascading Style Sheets” (Hojas de Estilo en
Cascada), separan el contenido del diseño.
• Con este lenguaje, aplicamos reglas de
estilo a las distintas etiquetas del
documento HTML.
• Una regla de estilo contiene uno o más
atributos como: color de fondo, color de
texto, posición, márgenes, fuentes de texto,
etc.
•
•
•
•
•
Menor tiempo de desarrollo de las páginas.
Mayor orden de nuestro código.
Menos peso en las páginas.
Mayor flexibilidad en los cambios
Al ser un standard de la W3C, todos los
navegadores lo soportan.
• Una misma página puede tener diferentes
presentaciones para diferentes medios
(Pantalla, impresión, móviles, etc.)
1.
2.
3.
4.
Obtener el documento HTML
Crear las reglas de estilo.
Adjuntar hoja de estilos al documento.
Si se desean hacer cambios en la
visualidad (layout) del documento, editar
las reglas de estilo CSS.
Parte II
¿Cómo funciona CSS?
selector {atributo:valor;}
A qué etiqueta o etiquetas
HTML se aplicará la propiedad
(ej., “body”)
El atributo CSS al que se le
desea asignar un valor (ej. ,
“background-color”)
El valor de la propiedad (ej.
“#FF0000 que es el valor para
“rojo”)
Se pueden escribir en tres lugares:
1.En línea (usando el atributo style)
2.Interno (la etiqueta style)
3.Externo (enlazar a una hoja de estilos)
• Podemos asignar la propiedad escribiendo
directamente en el elemento HTML al que deseamos
dar estilo.
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>
• Podemos insertar una etiqueta style directamente en el documento
HTML, dentro de ella incluimos una o varias reglas.
<html>
<head>
<title>Ejemplo</title>
<style type="text/css"> body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>
• Una hoja de estilos es un archivo de texto con la extensión .css
que se vincula con una etiqueta link dentro del documento HTML.
<html>
<head>
<title>Mi documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
• Al usar una hoja externa, podemos usar un único archivo .css que
guarde el diseño de todas las páginas de un mismo sitio.
selector {atributo:valor;}
Parte III
Selectores
1. Selectores simples
2. Selectores de clase
3. Selectores de ID
•
En este caso, el selector es el nombre del tipo de
etiqueta HTML a la que aplicaremos la regla.
body {background-color:#FF0000;}
h1 {
font-color: #000000;
font-size: 20px;
}
p{
color: red;
display: block;
background-color: black;
}
Documentos relacionados
UNIVERSIDAD AUTONOMA DE BAJA CALIFORNIA
que basta definir un estilo una sola vez para que éste se aplique a todos los elementos del mismo tipo que
existan en una página.
