Informatica

MANUAL CSS

Informática I

CONTENIDO
• • • • • • • • Introducción CSS Beneficios del CSS Definición de formas y atributos. Sintaxis del CSS Definición de estilos utilizando clases Atributos Medios Ejemplos

CSS
Las CSS son hojas de estilos en cascadas, son herramientas que permiten darle una presentación a las paginas web, medios (pantallas, impresoras, móviles, etc).

Abarcan:fuentes, colores, márgenes, líneas, altura, anchura, imágenes de fondo, posicionamiento avanzado. El CSS facilita el mantenimiento de los sitios debido a la separación del contenido.

Beneficios del CSS
• Mayor control de la presentación de muchos documentos en una única hoja de estilo. • Control preciso de la presentación • Numerosas técnicas avanzadas y sofisticadas.

Definiciones
• Formas: Distancias entre líneas del documento.  Definir la visibilidad de márgenes, elementos, subrayados, tachados, entre otros. • Atributos:  Pixeles (px) y porcentajes (%).  Pulgadas (in)  Puntos (pt)  Centímetros (cm)

Sintaxis del CSS
• Selectores: son los elementos que se le aplica un atributo y se encuentran antes de las llaves “{“ • Atributo o propiedad: es la característica que se le daal selector. • Código del atributo: (color, tipo, tamaño, etc)

• Las llaves {} definen el inicio y el fin de los atributos para un selector. Ejemplo.

Definicion estilos utilizando clases
Las clases nos sirven para crear definiciones de estilos que se pueden utilizar repetidas veces. Para definirlas utilizamos la siguiente sintaxis, un punto seguido del nombre de la clase y entre llaveslos atributos de estilos deseados.

De esta manera:

.nombre de la clase { atributo: valor;atributo2:valor2; ... }

ATRIBUTOS

Nombre del atributo

Posibles valores FUENTES - FONT

Ejemplos

color

valor RGB o nombre de color

color: #009900; color: red;

Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los nombres de colores sonadmitidos en el estándar, es aconsejable entonces utilizar el valor RGB. font-size xx-small | x-small | small | medium | large | x-large | xxlarge Unidades de CSS font-size:12pt; font-size: xlarge;

Sirve para indicar el tamaño de las fuentes de manera más rígida y con mayor exactitud.

font-family

serif | sans-serif | cursive | fantasy | monospace Todas las fuentes habitualesfont-family:arial,helvetica; fontsize: fantasy;

Con este atributo indicamos la familia de tipografía del texto. Los primeros valores son genéricos, es decir, los exploradores las comprenden y utilizan las fuentes que el usuario tenga en su sistema. También se pueden definir con tipografías normales, como ocurría en html. Si el nombre de una fuente tiene espacios se utilizan comillas para que se entiendabien.

Nombre del atributo

Posibles valores

Ejemplos

font-weight

normal | bold | bolder | lighter | font-weight:bold; font-weight: 100 | 200 | 300 | 400 | 500 | 200; 600 | 700 | 800 | 900

Sirve para definir la anchura de los caracteres, o dicho de otra manera, para poner negrillas con total libertad. Normal y 400 son el mismo valor, así como bold y 700. font-style normal |italic | oblique font-style:normal; font-style: italic;

Es el estilo de la fuente, que puede ser normal, itálica u oblícua. El estilo oblique es similar al italic.

Nombre del atributo

Posibles valores PÁRRAFOS - TEXT

Ejemplos

line-height

normal y unidades CSS

ine-height: 12px; line-height: normal;

El alto de una línea,y por tanto, el espaciado entre líneas. Es una de esascaracterísticas que no se podían modificar utilizando HTML.

text-decoration

none | [ underline || overline || line- through ]

text-decoration: none; textdecoration: underline;

Para establecer la decoración de un texto, es decir, si está subrayado, sobrerayado o tachado.

text-align

left | right | center | justify

text-align: right; text-align: center;

Sirve para indicar la...