versión para imprimir
Anuncio
UNA / AREA TRANSDEPARTAMENTAL DE ARTES MULTIMEDIALES
Licenciatura en Artes Multimediales
Informática General 2016
Cátedra: Valeria Drelichman, Pedro Paleo, Leonardo Nadel, Norma Morales
CSS
CSS - Hojas de Estilo
Las hojas de estilo en cascada son un lenguaje formal usado para definir la
presentación de un documento estructurado escrito en HTML, XML o XHTML. El
W3C (World Wide Web Consortium) es el encargado de formular la especificación
de las hojas de estilo que servirá de estándar para los agentes de usuario o
navegadores.
Las ventajas de utilizar CSS
Control centralizado de la presentación de un sitio web completo, con lo que se
agiliza considerablemente la actualización del mismo. Posibilidad de los usuarios de
especificar una hoja de estilos local que será aplicada a un sitio web, con lo que
aumenta la accesibilidad (ej: problemas de visión). Una página puede disponer de
diferentes hojas de estilo según el dispositivo que la muestre, o incluso a elección
del usuario. El documento HTML en sí mismo es más claro de entender y se
consigue reducir considerablemente su tamaño.
HTML5 y CSS3
HTML5 fue desarrollado considerando CSS a cargo del diseño. La integración entre
HTML y CSS es vital para el desarrollo web. Entonces cuando hablamos de HTML5
también estamos haciendo referencia a CSS3, aunque se trate de dos tecnologías
completamente separadas.
En resumen, CSS es un lenguaje que trabaja junto con HTML para proveer estilos
visuales a los elementos del documento.
¿Por qué en cascada?
La información de estilos puede ser incluida de varias formas:
• Pueden especificarse para cada elemento HTML mediante el atributo "style"
• Pueden declararse en el <head> de un documento HTML
• En un documento externo “archivo.css”
• incluso en varios documentos externos.
Orden de cascada
• Hoja de estilos del navegador (default)
• Hoja de estilos externa (declarada antes del tag <style>)
• Estilos definidos en el <head> del documento HTML
• Estilos definidos en un tag HTML
Sintaxis
La sintaxis CSS tiene 3 partes:
selector {propiedad: valor}
El selector es normalmente el elemento HTML a definir, la propiedad es el atributo
de ese elemento que queremos cambiar y cada propiedad va a tener un valor.
La propiedades y valores se escriben separados por ":" y rodeados por llaves
body {color: black}
p {font-family: "sans serif"}
Si queremos definir más de una propiedad, cada una debe finalizar con ";"
p { text-align: center; color: red; }
Para que se lean mejor y más claro lo hacemos de la siguiente forma:
p{
text-align: center;
color: black;
font-family: arial;
}
Agrupamientos
Se pueden agrupar selectores separándolos mediante ","
h1,h2,h3,h4,h5,h6 {
color: green;
}
Comentarios
Con el fin de ordenar nuestro código o simplemente porque más de una persona lo
utilizará, se hace necesario el uso de los comentarios
/* Esto es un comentario */
p{
text-align: center;
/* esto es otro comentario que ocupa
más de un renglón */
color: black;
}
Tipos de selectores
Los selectores de etiquetas HTML se utilizan escribiendo el nombre de la etiqueta a
la que le aplicaremos el estilo.
Los selectores de identificador se usan para aplicar estilos solo a las etiquetas
identificadas con un nombre definido.
Los selectores de clase se utilizan para aplicar estilos en forma repetitiva,
aplicándolos en todas las etiquetas que los llamen por un nombre previamente
definido. Por ej.:
.mi_clase
Selectores de etiquetas
Para definirlos utilizamos el nombre de la etiqueta que queremos afectar:
body {
font-family: arial;
font-size: 12px;
color: black;
background-color: #cccccc;
}
Este tipo de selector no requiere aplicación, las etiquetas heredan automáticamente
las propiedades que definimos.
Selector de identificación
Para definirlos utilizamos el “#” antes del nombre de identificación:
#recuadro {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;
}
En este caso, se lo aplicamos a la etiqueta con solo colocarle el identificador "id":
<div id="recuadro">Aquí el contenido</div>
Selector de clase
Para definirlos utilizamos un "." antes del nombre que le asignamos:
.mi_clase {
margin: 5px;
height: 100px;
width: 200px;
}
Utilizamos el atributo "class" en las etiquetas HTML para aplicar el estilo:
<div class="mi_clase">Contenido</div>
Aplicación de estilos
Existen 3 formas de aplicación:
• Hoja de estilos externa
• Estilos definidos en el <head> del documento HTML
• Estilos definidos en un tag HTML
Hoja de estilos externa
Se trata de un archivo de texto plano, vinculado al documento HTML desde la
sección head de la página:
<link href="archivo.css" rel="stylesheet">
Esta es la forma más recomendable para la definición de estilos.
Definidos en el <head>
Dentro del <head> del documento HTML se declaran los estilos de la siguiente
forma:
<head>
<title>Página X</title>
<style>
body {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #333333;
}
</style>
</head>
Esta opción es recomendable si se necesitan estilos específicos para una página en
particular.
Definidos en un tag HTML
Este método es el menos recomendable, y solo se utilizará en casos puntuales que
así lo requieran:
<div style="background-color: #333333;” ></div>
Propiedades CSS
Hay propiedades para definir: los fondos; los bordes; los bloques; el texto y la
tipografía; las listas; el posicionamiento; y más!
Fondos (algunas propiedades)
background
background-color
background-image
background-repeat
Tipografías (algunas propiedades)
font
font-family
font-size
font-style
font-weight
Texto (algunas propiedades)
text-align
text-decoration
text-transform
Bloques (algunas propiedades)
height
width
margin
margin-top
margin-right
margin-bottom
margin-left
padding
