Introducción a CSS: Controla el estilo y diseño de páginas web

 Cascading Style Sheets (CSS) son una forma de
controlar la apariencia de los documentos HTML de
forma organizada y eficiente. Con CSS usted será capaz
de:
* Agregar un nuevo aspecto a tu viejo HTML
* Completamente restyle un sitio web con sólo unos
pocos cambios en el código CSS
* Utilice el "estilo" de crear en cualquier página web que
desee
Una hoja de estilo puede, y debe ser, completamente
separado de los documentos HTML.

 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:
<h2 align="center">
<font color=“blue" size=“3" face="Times New Roman, serif">
<i>Seminario de HTML UCEMA</i>
</font>
</h2>
 CSS permite separar el contenido de un documento de su presentación.

En el documento HTML:
En el documento HTML: En la hoja de estilos se define el formato
En la hoja de estilos se define el formato
<h2>Seminario de HTML
<h2>Seminario de HTML de los
de los
UCEMA</h2>
UCEMA</h2> encabezados h2:
encabezados h2:
h2 {{
h2
text-align: center;
text-align: center;
color: blue;
color: blue;
font: italic large "Times New Roman",
font: italic large "Times New Roman",
serif;
serif;
}}

 Estandarizar la presentación de un sitio web completo.
Haciendola fácil de mantener.
 Diferentes usuarios pueden contar con diferentes estilos
acordes a sus necesidades. Ejemplos:
 Estilos para personas con dificultades visuales,
 Estilos para dispositivos móviles,
 Estilos para dispositivos monocromos,
 Estilos para impresión,
 Etc.
 Los documentos HTML se reducen en tamaño y complejidad.

 Propiedades de fuentes
 Propiedades de color y fondo Margin (Margen)

 Propiedades de texto Border (Borde)
Padding (Relleno)
 espaciado de palabras
Contenido
 alineación
 Propiedades de caja
 Margen
 Borde
 Relleno
 Estilos de listas

Una hoja de estilos consiste en un conjunto de reglas.
Cada regla esta formada por: h2 {
 El Selector (nombre del estilo) text-align: center;
color: blue;
 La Declaración (define el estilo)
font: italic large "Times New Roman", serif;
 Propiedad }
.textoresaltado {
 Valor
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
¿Qué podemos hacer con los estilos? font-style: normal;
font-weight: bold; /* Esto es un
 Redefinir estilos de Etiquetas HTML. comentario */
 Crear Estilos Personalizados para color: #000000;
}
uso genérico (Clases) #logo {
 Crear Estilos para un elemento background-image: url("/img/logo.gif");
background-position:center;
HTML específico (por Id)
background-repeat:no-repeat;
height: 50px; width: 150px;
position: absolute; left: 0px; top: 0px;
}

 Inline Styles <h2 style="color: blue; background: green;">
<h2 style="color: blue; background: green;">
Utilizando el atributo “style” se define el Curso HTML UCEMA
Curso HTML UCEMA
</h2>
</h2>
estilo de un elemento HTML en forma
individual.
<head>
<head>
 Embedded Style <style type="text/css">
<style type="text/css">
h2 { {
h2
Se define la regla CSS dentro de un font-style: italic;
font-style: italic;
font-weight: bold;
documento HTML. Se puede aplicar a font-weight: bold;
color: blue;
color: blue;
cualquier elemento de ese documento. }}
</style>
</style>
 Hojas de Estilos externas </head>
</head>
<body>
<body>
Un archivo CSS independiente que se <h2>Curso HTML UCEMA</h2>
<h2>Curso HTML UCEMA</h2>
encuentra referenciado en cada uno de </body>
</body>

los documentos HTML que desean <head>
<head>
<link rel=stylesheet type="text/css“
utilizarlo. <link rel=stylesheet type="text/css“
href=“estilos.css">
href=“estilos.css">
</head>
</head>

 Los estilos son normalmente almacenados en
hojas de estilo.

 Una hoja de estilo puede ser aplicada a varias
páginas web. Esto centraliza los cambios.

 Una página web puede utilizar mas de una hoja
de estilo.

p,li,th,td
{
font-size: 75%;
}
body
{
background-color: #ffffff;
}
h1,h2,h3,hr
{
color:black;
}

 Una hoja de estilo puede ser interna o externa.

 Las hojas de estilo internas son creadas dentro
del documento html y utilizan el tag style y son
creadas dentro del head.

 Una hoja de estilo externa tiene la extensión
.css.

 Un ejemplo de hoja de estilo interna.

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

 Un ejemplo de hoja de estilo externa
referenciada.

<head>
<link rel="stylesheet" type="text/css" href=“estilo.css" />
</head>

 En este caso, la hoja de estilo se llama
estilo.css.

 ¿Qué estilo será usado si hay mas de uno
especificado para un mismo elemento html?
 Se podría decir que hay una hoja de estilo
“virtual” en la que la prioridad de definiciones
es la siguiente:
1. Default del navegador
2. Hoja de estilo externa
3. Hoja de estilo interna
4. Atributo style (más alta prioridad)

 Si la referencia a una hoja de estilo externa es
colocada debajo de una hoja de estilo interna,
la externa tiene mayor prioridad.

 Tiene tres partes:

1. El selector. Es el tag html que se desea
definir.

2. La propiedad. Es el atributo que se desea
definir.

3. El valor. Es el valor del atributo.

selector {propiedad: valor}

 Si el valor tiene más de una palabra se deben
poner entre comillas.
p {font-family: "sans serif"}

 Se pueden agrupar selectores así:
h1,h2,h3,h4,h5,h6 { color: green }

 Es una buena práctica definir una propiedad
por línea.

p{
text-align: center;
color: black;
font-family: arial
}

 Se puede definir distintos estilos por elemento
clasificándolos.
p.right {text-align: right}
p.center {text-align: center}

 En el html:
<p class="right"> Párrafo a la derecha. </p>
<p class="center"> Párrafo al centro. </p>

 En general:

<[sel] class=“clase1 clase2 …"> Párrafo.</[sel]>

 También podemos definir clases
independientes de un selector para asignarlas
indistintamente a cualquier tag.

.center {text-align: center}

Define el espacio entre los elementos html.

 Define el espacio entre el borde del elemento y
el contenido del elemento.

Introducción a CSS: Controla el estilo y diseño de páginas web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Introducción a CSS: Controla el estilo y diseño de páginas web

Ähnlich wie Introducción a CSS: Controla el estilo y diseño de páginas web (20)

Mehr von jeny_torres

Mehr von jeny_torres (9)

Introducción a CSS: Controla el estilo y diseño de páginas web