Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una.

Presentación del tema: "Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una."— Transcripción de la presentación:

1 Anatomía de la declaración La declaración consta de dos partes:  Propiedad  Valor Selector Propiedad Valor A { color: #000013;}  La propiedad es una cualidad o característica que algo posee. En el ejemplo anterior esta característica es el color  El valor es una especificación precisa de la propiedad. En el ejemplo es #000013 que hace referencia al color en hexadecimal.

2 Agrupación de selectores y reglas En el diseño CSS, ser breve es la meta a conseguir, por lo que si se considera que para distintos selectores se establecen las mismas reglas: H1 { font-weight: bold } H2 { font-weight: bold } H3 { font-weight: bold }  Podemos agruparlos en una misma declaración: H1, H2, H3 { font-weight: bold }  Por otro lado si a un selector le queremos asignar varias reglas de estilo, éstas se pueden incluir en una misma declaración: #foto { position:absolute; left:35px; }

3 Fuentes CSS permite al diseñador modificar las fuentes del texto sobre el que trabaja modificando las propiedades de estas. Pudiendose modificar tanto el tipo de familia a la que pertenece, el tamaño el estilo, el grosor, … En este enlace se pueden encontrar las propiedades de la fuentes: http://www.programacion.com/html/tutorial/css1/8/ Texto Con CSS podemos alterar la presentación visual de caracteres, espacios, palabras y párrafos. En el siguiente enlace se encuentran las principales propiedades que podemos utilizar: http://www.programacion.com/html/dinamico/tutorial/dhtm215.htm

4 AbreviaturaUnidadEquivalencia inpulgadas2.54 cm cmcentimétros mmmilimetros ptpuntos1/72 pulgadas pcpicas12 puntos emanchura-m exaltura-x pxpíxeles Consideraciones A la hora de establecer márgenes, espacio entre líneas, anchura de la línea, etc. es necesario indicar un número y una unidad. En la siguiente tabla se muestran los diferentes tipos de medidas que admiten las CSS:

5 Posicionamiento relativo y absoluto Los elementos en una página Web normalmente fluyen en el orden el el que aparecen en. Es decir si la foto va antes que el Objetivo, primero aparecerá en la página la foto y a continuación el Objetivo.  Esto se denomina Posicionamiento Relativo o flujo normal Sin embargo puede sacar elementos del flujo normal y posicionarlos de forma absoluta al especificar su posición precisa con respecto a su elemento padre. Para posicionar elementos de forma absoluta: 1. Escribir position: absolute; 2. Escribir top, right, bottom o left. 3. A continuación :n donde n es la distancia deseada que quieres separar el elemento de su elemento padre, expresado en las unidades de la tabla anterior o en porcentaje Este ha sido el criterio utilizado en esta primera versión

6 A{ font-family: Arial; color: #000013; text-decoration: underline; } #foto{ position:absolute; left:25px; <!--Definimos el número de pixels a los que se encontrará la foto del margen izquierdo--> } #Head{ background-color:#005; font-family: Verdana; color: yellow; position:absolute; left: 180px; }

7 #Nom{ color:#fff; font-family: Verdana; position:absolute; top: 185px; left:55px; } h2{ color: yellow; text-decoration:underline; font-weight:bold; } #tit{ color: #007; font-weight: bold; }

8 #Res{ position:absolute; top:100px; left:225px; marging-right: 25px; } #Objetivo{ position:absolute; top: 300px; left:225px; marging-right: 25px; } #Requerim{ position: absolute; top:400px; left:225px; marging-right: 25px; }

9 #biblio{ position: absolute; top:485px; left:225px; marging-right: 25px; } #PalabrasClave{ position:absolute; top: 670px; left:225px; marging-right: 25px; } #Capitulos{ position:absolute; top: 870px; left:225px; marging-right: 25px; }

10 #correo{ position:absolute; top: 1160px; left:225px; } #Lin{ background:url(logo1.jpg); position: absolute; left:10px; top: 300px; width:175px; } #Versiones { position:absolute; left:10px; top:600px; }