PDF de programación - Anexo: Reglas básicas sobre la sintaxis CSS

Anexo:

Reglas básicas sobre la sintaxis CSS:

 Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos

de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de

definir muchos atributos separados por punto y coma.

Ejemplo:

font-size: 10pt; text-decoration: underline; color: black; (el último punto y coma

de la lista de atributos es opcional)

 Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de

atributos encerrados entre llaves.

Ejemplo:

H1{text-align: center; color:black}



Los valores que se pueden asignar a los atributos de estilo son unidades de medida

(Unidades CSS), por ejemplo, el valor del tamaño de un margen o el tamaño de la

fuente. Las unidades de medida CSS se pueden clasificar en dos grupos, las relativas y

las absolutas. Más la posibilidad de expresar valores en porcentaje.

Relativas: Se llaman así porque son unidades relativas al medio o soporte sobre el que

se está viendo la página web, que dependiendo de cada usuario puede ser distinto,

puesto que existen muchos dispositivos que pueden acceder a la web, como ordenadores

o teléfonos móviles. En principio las unidades relativas son más aconsejables, porque se

ajustarán mejor al medio con el que el usuario está accediendo a nuestra web. Son las

siguientes:

Fuente actual:

em

la unidad em es relativa a la fuente actual con la que se está trabajando por defecto

en el sistema del usuario. Por ejemplo si un visitante tiene configurada la fuente por

defecto en 12 puntos, 1em será igual a 12 puntos y 2em será igual a 24 puntos.

Altura de la letra "x": ex

1ex será igual a la altura de la letra x, según la fuente actual del usuario. La altura

de la letra x generalmente es la mitad de la de la fuente normal.

Píxeles:

px

Un pixel es un punto en la pantalla del dispositivo. Dependiendo de la resolución de

la pantalla, un píxel puede ser mayor o menor.

Absolutas: Las unidades absolutas son medidas fijas, que deberían verse igual en todos los

dispositivos. Como los centímetros, que son una convención de medida internacional. Pese a que

en principio pueden parece más útiles, puesto que se verían en todos los sistemas igual, tienen

el problema de adaptarse menos a las distintas particularidades de los dispositivos que pueden

acceder a una web y restan accesibilidad a nuestro web. Puede que en tu ordenador 1

centímetro sea una medida razonable, pero en un móvil puede ser un espacio exageradamente

grande, puesto que la pantalla es mucho menor. Se aconseja utilizar, por tanto, medidas

relativas.

Puntos

pt

Un punto es 1/72 pulgadas

Pulgadas

Centímetros

Milímetros

Picas

in

cm

mm

pc

Una pica son 12 puntos.

 Porcentaje: el porcentaje se utiliza para definir una unidad en función de la que esté
definida en un momento dado. Imaginemos que estamos trabajando en 12pt y definimos

una unidad como 150%. Esto sería igual al 150% de los 12pt actuales, que equivale a

18pt.



Porcentaje %

Por ejemplo 120% es el 120 por cien de la
unidad que estuviera anteriormente.

 Los colores se expresan con valores RGB, igual que los que conocemos para
los colores HTML. Con la salvedad que un color se puede especificar también
con tres números hexadecimales, en lugar de 6, como era obligatorio en HTML.
Por ejemplo #fff equivaldría a #ffffff, o #123 sería #112233. Además, los
colores se pueden especificar también en valores RGB decimales, con la
notación rgb(r,g,b), siendo los valores de r, g, b números entre 0 y 255, por
ejemplo rgb(100,0,255). Otra notación posible es rgb(r%,g%,b%), siendo cada
uno de
r%,g%, b% un valor entre 0 y 100, por ejemplo
rgb(100%,50%,0%), que sería todo de rojo, la mitad de verde y cero de azul.

los

 Otro tipo de valores que se pueden utilizar en las hojas de estilo en cascada son
las URL, que sirven para especificar rutas hacia elementos como imágenes a
colocar en fondos de elementos. Las URL en CSS se especifican con la notación
url(valor), siendo valor la URL a la que queremos dirigirnos, que puede ser
absoluta o relativa.

 Si es relativa, el navegador la interpreta desde el documento CSS donde
estamos, si es que es un archivo CSS, o desde el documento HTML donde
estamos, si es que los estilos los estamos colocando directamente en el archivo
HTML la URL se puede indicar con comillas dobles, simples o sin comillas. Por
ejemplo:

 url(http://www.unne.edu.ar/images/miimagen.gif)

url("../images/otraimagen.jpg")

 Para que nuestros estilos se apliquen a nuestra página web tenemos que decirle
a nuestro archivo html que utilizaremos una hoja de estilos CSS, esto se hace
con la etiqueta <link> donde le indicaremos la dirección del archivo, para hacer
esto tendremos que poner esa etiqueta en la cabecera <head>, así:


Ejemplo: <link rel="stylesheet" type=“text/css” href=“estilo1.css”>

Si la ubicación de nuestra hoja de estilos es otra, por ejemplo, se encuentra en
“/css/estilo1.css” solo lo cambiamos en el atributo href.

La especificación de estilos CSS es muy amplia pero aquí podemos ver una selección de

los más usados:

Nombre del

atributo

Posibles valores

Ejemplos

color

valor RGB o nombre de color

color: #009900;

color: red;

FUENTES - FONT

Sirve para indicar el color del texto. Lo admiten casi todas las etiquetas de HTML. No todos los

nombres de colores son admitidos en el estándar, es aconsejable entonces utilizar el valor RGB.

xx-small | x-small | small | medium

font-size

| large | x-large | xx-large

Unidades de CSS

font-size:12pt;

font-size: x-large;

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

serif | sans-serif | cursive | fantasy

font-family

| monospace

Todas las fuentes habituales

font-family:arial,helvetica;

font-family: 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 entienda bien.

font-weight

100 | 200 | 300 | 400 | 500 | 600 |

normal | bold | bolder | lighter |

700 | 800 | 900

font-weight:bold;

font-weight: 200;

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.

PÁRRAFOS - TEXT

line-height

normal y unidades CSS

line-height: 12px;

line-height: normal;

El alto de una línea, y por tanto, el espaciado entre líneas. Es una de esas características que no

se podían modificar utilizando HTML.

text-decoration

none | [ underline || overline ||

text-decoration: none;

line-through ]

text-decoration: 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 alineación del texto. Es interesante destacar que las hojas de estilo permiten

el justificado de texto, aunque recuerda que no tiene por que funcionar en todos los sistemas.

text-indent

Unidades CSS

text-indent: 10px;

text-indent: 2in;

Un atributo que sirve para hacer sangrado o márgenes en las páginas. Muy útil y novedosa.

text-transform

capitalize | uppercase | lowercase |

text-transform: none;

none

text-transform: capitalize;

Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas

las palabras, todo en mayúsculas o minúsculas.

FONDO - BACKGROUND

Background-

Un color, con su nombre o su valor

background-color: green;

color

RGB

background-color: #000055;

Sirve para indicar el color de fondo de un elemento de la página.

Background-

El nombre de la imagen con su

image

camino relativo o absoluto

background-image: url(mármol.gif) ;

background-image:

url(http://www.x.com/fondo.gif)

Colocamos con este atributo una imagen de fondo en cualquier elemento de la página

Margin-left

Unidades CSS

BOX - CAJA

margin-left: 1cm;

margin-left: 0,5in;

Indicamos con este atributo el tamaño del margen a la izquierda

Margin-right

Unidades CSS

margin-right: 5%;

margin-right: 1in;

Se utiliza para definir el tamaño del margen a la derecha

Margin-top

Unidades CSS

margin-top: 0px;

margin-top: 10px;

Indicamos con este atributo el tamaño del margen arriba de la página

Margin-bottom Unidades CSS

margin-bottom: 0pt;

margin-bottom: 1px;

Con el se indica el tamaño del margen en la parte de abajo de la página

Padding-left

Unidades CSS

padding-left: 0.5in;

padding-left: 1px;

Indica el espacio insertado, por la izquierda, entre el borde del elemento-continente y el

contenido de este. Es parecido a el atributo cellpadding de las tablas.

El espacio insertado tiene el mismo fondo que el fondo del elemento-continente.

Padding-right Unidades CSS

padding-right: 0.5cm;

padding-right: 1pt;

Indica el espacio insertado, en este caso por la derecha, entre el borde del elemento-continente y

el contenido de este. Es parecido a el atributo cellpadding de las tablas.

El espacio insertado tiene el mismo fondo que el fondo d