UF1303

UF1303: ELABORACIÓN DE Certificado de
HOJAS DE ESTILO Profesionalidad:

IFCD0110 – Confección y
publicación de páginas
web.
AUTOR: CONCHI MARCOS RAMOS
Primera edición: Diciembre 2017
Depósito Legal: PO xxx-2017
ISBN:
Diseño de Portada: Conchi Marcos R.

Imagen de Portada: Freepik.com
Maquetación: Conchi Marcos R.
Imprime:
Edita: Mª de la Concepción Marcos Ramos

conchi.marcos@me.com
www.conchimarcos.com
Reservados todos los derechos. No se permite

reproducir, almacenar en sistemas de recuperación
de información ni transmitir alguna parte de esta
publicación, cualquiera que sea el medio empleado
–electrónico, mecánico, fotocopia, grabación, etc, sin
el permiso previo de los titulares de los derechos de
propiedad intelectual.
Impreso en España
© Conchi Marcos Ramos CONCHI.MARCOS@ME.COM 3

TEMA 1. CSS EN EL DISEÑO WEB
1. INTRODUCCIÓN
2. FUNCIONES Y CARÁCTERÍSTICAS
• Propiedades y Valores
3. OPTIMIZACIÓN DE HOJAS DE ESTILO

 CSS Shorthands.
 Agrupación de etiquetas similares
 Usabilidad de los selectores en CSS
 PRACTICA (Web con enlace a css externo)
TEMA 2. DIV`s
1. TABLAS O DIV
2. COLOCAR LOS DIV
 PRACTICA 000_DIV (Un DIV al lado del otro)
 PRACTICA 001_DIV (Un DIV al de otro y uno debajo)
 PRACTICA 002_DIV (Un DIV inferior)
 CLEAR
 Z-INDEX
 POSITION
 PADDING
 MARGIN
 PRACTICA (Página web con DIV y CSS)
conchi.marcos@me.com 4
TEMA 1. CSS EN EL DISEÑO WEB
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o
presentación de los documentos electrónicos definidos con HTML y XHTML.
CSS es la mejor forma de separar los contenidos y su presentación y es
imprescindible para crear paginas web complejas.
1. INTRODUCCIÓN
Al crear una pagina web, se utiliza en primer lugar el lenguaje HTML/XHTML para
marcar los contenidos, es decir, para designar la función de cada elemento dentro de
la pagina: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de
cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical
entre elementos, posición de cada elemento dentro de la pagina, etc.
2. FUNCIONES Y CARÁCTERÍSTICAS.
Antes de la adopción de CSS, los diseñadores de paginas web debían definir el
aspecto de cada elemento dentro de las etiquetas HTML de la pagina.
2.1 PROPIEDADES Y VALORES.
Tipografía.
 COLOR, el color que se aplica para el texto.
 FONT-FAMILY, establece el tipo de letra utilizado para el texto.
 FONT-SIZE, tamaño de la letra usado para el texto.
 FONT-WEIGHT, anchura de la letra utilizada para el texto.
 FONT-STYLE, estilo de letra usado para el texto.
 FONT-VARIANT, establece el estilo alternativo de la letra usada para el
texto.
 FONT, indica de forma directa todas las propiedades de la tipografía de
un texto.
3. OPTIMIZACIÓN DE LAS HOJAS DE ESTILO
La optimización es una parte vital del desarrollo y mantenimiento de un sitio

web, algo que a menudo es pasado por alto. La optimización de una web
es un punto sumamente importante, sobre todo si estamos pensando en webs
de alto tráfico, con millones de visitas al mes.
Después de haber trabajado en algunas de las más grandes ecommerce,

me gustaría compartir con vosotros algunos consejos y trucos que he
aprendido durante estos años como FrontEnd.
El optimizar una página puede ayudar a aumentar el número de visitantes,

disminuir la carga del servidor al limitar el número de peticiones y mejorar
el posicionamiento web, ya sabemos lo que le gusta a Google las páginas
que tardan poco en cargar :)
CSS ShortHands
Permiten ahorrar la carga de muchos bits de datos innecesarios, eliminando

líneas en las hojas de estilo.
<background>
Formato corto
.class {
background-image: url(image.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 10px;
background-color: #ffffff; }
Formato largo
.class { background: url(image.png) no-repeat fixed 0 10px

#fff; }
// si algún valor no se declara, tomará los valores
siguientes por defecto:
.class { background: none repeat scroll top left transparent;
}
<font>
Formato corto
.class {
font-style: italic;
font-variant: normal;
font-weight: bold;
font-size: 12px;
line-height: 16px;
font-family: Arial; }
Formato largo
.class { font: italic bold 12px/16px Arial; }
// si algún valor no se declara, tomará los valores

siguientes por defecto:
.class { font: normal normal normal inherit normal inherit;
}
<border>
Formato corto
.class {
border-width: 2px;
border-style: solid;
border-color: #cccccc; }
Formato largo
.class { border: 2px solid #ccc; }

// Cuando no se indica el valor para el color, por defecto
será negro
<margin>
Formato largo
.class {
margin-top: 12px;
margin-right: 15px;
margin-bottom: 5px;
margin-left: 20px; }
Formato corto
// Los valores se indican según el sentido de las agujas

del reloj: arriba, derecha, abajo e izquierda. Por ejemplo:
margin: 10px;
// Añadirá la misma cantidad de píxeles a todos los lados.
margin: 10px 20px;
// Añadirá 10px a arriba y a abajo y 20 píxeles a la
izquierda y a la derecha.
margin: 10px 15px 20px;
// Añadirá 10px arriba, 15px al lado izquierdo y al derecho
y 20px abajo.
<padding>
Formato largo
.class {
padding-top: 12px;
padding-right: 15px;
padding-bottom: 5px;
padding-left: 20px; }
Formato corto
.class { padding: 12px 15px 5px 20px; }

// La propiedad padding se comporta de la misma forma que
margin en el sentido de la declaración de valores
<list>
Formato largo
.class {
list-style-type: circle;
list-style-position: outside;
list-style-image: url(image.png); }
Formato corto
.class { list-style: circle outside url(image.png); }
Agrupar etiquetas similares
Puede suceder que después de un tiempo desarrollando declaremos las mismas

propiedades para dos clases diferentes, por lo que es bueno que antes de
poner online nuestro código echemos un vistazo en busca de clases con mismos
estilos para agruparlas.
Formato normal
h1 { padding: 5px 0; font-weight:700; }
h2 { padding: 5px 0; font-weight:700; }
Agrupado
h1, h2 { padding: 5px 0; font-weight:700; }
Formato normal
li.home {background: url(img/sprite.png) 0 0 no-repeat

transparente;}
li.about {background: url(img/sprite.png) 0 -50px no-repeat
transparente;}
li.contact {background: url(img/sprite.png) 0 -100px no-
repeat transparente;}
Agrupado
li.home, li.about, li.contact {background: url(img/sprite.png)
0 0 no-repeat transparente;}
li.about {background-position: 0 -50px;}
li.contact {background-position: 0 -100px;}
Omite ceros y unidades de medidas innecesarias
Antes Después
margin: 15.0em; margin: 15em;
padding: 0.1em; padding: .1em;
Antes Después
margin: 0px; margin: 0;
Combina varios documentos CSS en uno solo
Es mejor que una vez que cada una las hojas de estilo estén comprimidas y
optimizadas, con alguna de las herramientas comentadas anteriormente,
unificarlas en un único archivo .css, de esa forma sólo se hará una única petición
al servidor en vez de muchas.
CONCHI.MARCOS@ME.COM 10
USABILIDAD DE LOS SELECTORES EN CSS _______________
ETIQUETAS HTML
/*Le decimos a la etiqueta body que centre el texto y tenga un
fondo de color negro*/
body{
text-align:center;
background-color:#ffffff;
}
/*En este caso indicamos a las celdas que tengan un fondo

amarillo y un color de texto negro*/
td{
background-color:yellow;
color:#ffffff;
}
/*Aquí unimos ambas etiquetas, tanto body como td y le

indicamos que ambas tengan un borde de color fuxia y un borde
de 2 pixeles de grosor*/
body,td{
border-color:fuchsia;
border:2px;
}
/* Ahora usaremos los atributos class para indicar también

como diferenciaremos del resto, siempre se debe poner el .
antes de indicar el nombre de la clase, está podrá aparecer
varias veces a lo largo del documento, crearemos dos, una con
el nombre primera y otra segunda*/
.primera{
font-style:bold;
}
.segunda{
font-style:italic;
}
/* En el caso de que queramos aplicar a las dos clases, en

este aparte de la negrita y cursiva, debería aparecer el texto
en verde*/
.primera,.segunda{
color:green;
}
/* Con el atributo id siempre irá precedido de #, este es

único en el documento, no podrá haber más de uno */
#id_primero{
text-align:right;
}
/*Aquí utilizaremos tanto una etiqueta como una clase, en este
caso decimos que los parrafos que estén en la clase primera se
alineen al centro*/
p.primera{
text-align:center;
}
/*Ahora queremos que el texto en que esté en un parrafo y a la

vez en negrita (strong) tenga un fondo amarillo*/
p strong{
background-color:yellow;
}
/*Si tenemos una etiqueta h1 y seguido un strong le diremos

que nos ponga el texto en cursiva*/
h1+strong{
font-style:italic;
}
/*En este apartado afectan a los subelementos... en este caso

relacionados con los hipervínculos*/
/*a:link le decimos que los que contienen href irán en color
rojo*/
a:link{
color:red;
}
/*En este caso le decimos que los enlaces visitados, que

estarán guardados en el historial del navegador, irán en color
verde oliva*/
a:visited{
color:olive;
}
/*Al pasar el ratón por encima del enlace el texto aparecerá

en naranja y se ampliará el tamaño de la letra a 16px*/
a:hover{
color:orange;
font-size:16px;
}
/*Con active lo que conseguiremos será darle un efecto al

pulsar sobre el enlace, no al pasar por encima, como era el
caso de hover. El texto en color Luis lemon (amarillo
fosforito) y el fondo del mismo en magenta*/
a:active{
color:#E9FF36;
background-color:magenta;
}
PRACTICA 008 _____________________________________
WEB CON ENLACE A CSS EXTERNO
Realizamos una web siguiendo las siguientes indicaciones.
• Ancho de la pagina 800px

• Apartados Inicio, Productos, Contacto
• Banner superior de 800x200px
• Navegación de 800x30px
• Contenido de 800x400px con un padding derecho e izquierdo de 30px.
• Pie de página de 800x250, divido a su vez en dos columnas o divisiones una con el
30% en la que irá el Mapa de Google (dirección Plaza del Obradoiro, Santiago de
Compostela), 70% en la que se incluirá dicha dirección en texto así como los iconos
de las siguientes redes sociales Facebook, Linkedin, Instagram, cada una de ellas
con un enlace real y los logotipos integrados a la estética de la página.
• El diseño es libre pero el tema es común “Juguetes para NIÑOS”.
1º Paso. Creamos la estructura HTML
2º Paso. Comenzamos a definir el CSS
Si el nombre de la fuente incluye espacios en blanco, comas, barras, paréntesis y otros

caracteres potencialmente problemáticos
Es importante tener claro que si no le indicamos un ancho a la tabla no conseguiremos

que las alineaciones de texto funcionen correctamente, al igual que la altura de la línea
para que nos funcione el color de fondo de le metemos.
2º Paso. Comenzamos a definir el CSS
Si el nombre de la fuente incluye espacios en blanco, comas, barras, paréntesis y otros

caracteres potencialmente problemáticos
Es importante tener claro que si no le indicamos un ancho a la tabla no conseguiremos

que las alineaciones de texto funcionen correctamente, al igual que la altura de la línea
para que nos funcione el color de fondo de le metemos.
TEMA 2. DIV
1.TABLAS O DIV
La antigua técnica para maquetar una página, se basaba en tablas. Sin
duda, en su momento fue una herramienta útil. Sin embargo, a medida
que la Web ha venido evolucionando, esta misma técnica ha sido la
culpable de muchos problemas para los webmaster.
• El uso de las tablas está condicionado a la mera tabulación de datos.

• Un diseño con tablas no es flexible, es decir, que no podemos cambiar la distribución
de los elementos en la página, a menos que la volvamos a hacer.
• Cada Explorador renderiza de manera distinta cada documento HTML y con
estructuras con tablas el cambio es más notorio
• Ocupa más espacio y más ancho de banda.
• Google no indexa de igual manera las páginas con estructuras basadas en tablas.
Ahora, que ya conocemos todas están desventajas de usar maquetación

basada en tablas, podemos darnos cuenta que, comparada con la técnica
de maquetación con DIV’s, las tablas son mas bien un estorbo en la
optimización de nuestros sitios.
2. COLOCAR LOS DIV
Existen diferentes formas de colocar los DIV, es importante tenerlo claro, para ello
vamos a ver algunos ejemplos prácticos:
PRACTICA 000_DIV _____________________________________

Un DIV al lado de otro
Para indicarle al navegador que divs queremos que queden juntos

verticalmente, le damos la propiedad float.
Depende de a donde lo queramos alinear le daremos left ó right.
HTLM
<div id=”div1″>Texto que va en el div1</div>
<div id=”div2″>Texto que va en el div2</div>
CSS (en este caso usamos left y le ponemos un color de fondo para
diferenciar bien el resultado)
#div1{
float:left;
background:yellow;
}
#div2{
float:left;
Background:blue;
}
PRACTICA 001_DIV _____________________________________
Un DIV al lado de otro y otro debajo…
Digamos que queremos que un div no siga siendo alado, para que quede
abajo… le damos la propiedad clear:both; nos dará un resultado
asi:
HTML
<div id="div1">Hola Caracola</div>
<div id="div2">Adiós Caracola</div>
<div id="div3">Otra Caracola</div>
CSS (en este caso usamos left y le ponemos un color de fondo para
diferenciar bien el resultado)
#div1{
float:left;
background:yellow;
}
#div2{
float:left;
Background:blue;
}
#div3{
clear:both;
background:orange;
}
PRACTICA 002_DIV _____________________________________
Un DIV inferior.
Vamos a ubicar un div justo en la parte inferior, cual barra de tareas de

Windows por medio de css.
HTML
<div id="superior">Hola Caracola</div>
<div id="inferior">Abajo....</div>
CSS
body,html{
height:100%;
/*Siempre es necesario cuando trabajamos con
alturas*/
}
#pie{
color: #FFF;
background: #000;
position:absolute;
/*El div será ubicado con relación a la pantalla*/
left:0px;
/*A la derecha deje un espacio de 0px*/
right:0px;
/*A la izquierda deje un espacio de 0px*/
bottom:0px;
/*Abajo deje un espacio de 0px*/
height:50px;
/*alto del div*/
z-index:0;
}
PRACTICA 002_DIV _____________________________________
Un DIV inferior.
Vamos a ubicar un div justo en la parte inferior, cual barra de tareas de

Windows por medio de css.
HTML
<div id="superior">Hola Caracola</div>
<div id="inferior">Abajo....</div>
CSS
body,html{
height:100%;
/*Siempre es necesario cuando trabajamos con
alturas*/
}
#pie{
color: #FFF;
background: #000;
position:absolute;
/*El div será ubicado con relación a la pantalla*/
left:0px;
/*A la derecha deje un espacio de 0px*/
right:0px;
/*A la izquierda deje un espacio de 0px*/
bottom:0px;
/*Abajo deje un espacio de 0px*/
height:50px;
/*alto del div*/
z-index:0;
}
- POSITION
Posiciona los elementos de forma normal, relativa, absoluta o fija. Igual que
<float> permite modificar la posición de cualquier elemento de la
página. Las cuatro opciones que tendremos son static, relative,
absolute y fixed.
En la posición fixed lo que conseguimos que ese div no se mueva en
ningun momento, que quede fijado en un sitio aunque el scroll del
navegador siga bajando.
STATIC. RELATIVE ABSOLUTE
- MARGIN
CSS define cuatro propiedades para controlar cada uno de los márgenes
horizontales y verticales de un elemento. Se aplica a todos los elementos, si
se utilizan porcentajes, hace referencia a la anchura del elemento en el que
se encuentra
- FLOATING
El posicionamiento flotante es el más difícil de comprender pero al mismo

tiempo es el más utilizado. La mayoría de estructuras de las páginas web
complejas están diseñadas con el posicionamiento flotante, como se verá
más adelante.
Cuando una caja se posiciona con el modelo de posicionamiento flotante,

automáticamente se convierte en una caja flotante, lo que significa que se
desplaza hasta la zona más a la izquierda o más a la derecha de la
posición en la que originalmente se encontraba.
- DISPLAY
La propiedad display de CSS cambia la manera en que esa caja se

muestra. Hay varios.
inline: muestra el elemento dentro del inline (como <span>), es decir,

haciendo que la caja se adapte a lo que contiene pero que siga inline.
Respeta margins y paddings left y right pero no top ni bottom; no permite
height ni width, y permite a otros elementos estar a su derecha o a su
izquierda.
block: muestra un elemento como un bloque contenedor (como <p>),

haciendo que la caja se adapte a lo que contiene pero sigue ocupando
todo el 100%. Permite width y height, y todos los margin y padding.
inline-block: muestra un elemento que actúa como un bloque contenedor

pero que se mantiene dentro del inline; el interior del bloque está
formateado como un bloque inline, la parte exterior está formateada como
un bloque, y el elemento en sí como una caja inline. Permite a otros
elementos estar a su derecha o a su izquierda. Permite width y height, y
todos los margin y padding.
none: el elemento no se muestra y desaparece la caja del espacio que

ocupaba todos los relacionado con table
- PADDING
CSS define cuatro propiedades para controlar cada uno de los márgenes
horizontales y verticales de un elemento.
Se aplica a todos los elementos, salvo margin-top y margin-bottom
que sólo se aplican a los elementos de bloque y a las imágenes
- CLEAR
La propiedad clear indica el lado o lados de una caja que no debe ser
adyacente a un elemento posicionado de forma flotante con la propiedad float.
Los cuatro valores permitidos para esta propiedad tienen el siguiente significado:
 left, hace que la caja sobre la que se aplica baje hasta que su borde
superior esté por debajo del borde inferior de cualquier elemento flotado a la
izquierda.
 right, hace que la caja sobre la que se aplica baje hasta que su borde
derecha.
 both, hace que la caja sobre la que se aplica baje hasta que su borde
izquierda o a la derecha.
 none, es el valor por defecto que se aplica a todos los elementos y no
tiene efecto sobre la posición de la caja.
- Z-INDEX
Con la propiedad Z-INDEX lo que conseguimos es dar una situación tipo
“capas” a cada uno de los <div> que estamos creando, numerándose
z-index1, z-index2,… siendo la de mayor numeración la que esta
más superpuesta.
Lo habitual es utilizar el valor de opacidad para conseguir un efecto
traslucido en la “capa”.
- BORDER
La propiedad border permite definir de un golpe todos los bordes en una
única regla de la hoja de estilos. Se puede utilizar border para definir el o
los valores siguientes: border-width , border-style , border-color,…
Establece algunas o todas las propiedades de todos los bordes de los
elementos
PRACTICA 003 _____________________________________
TRABAJANDO CON POSITION Y Z-INDEX
001. En primer lugar haremos la estructura en html del documento que queremos
crear:
<html>
<head>
<title>EJERCICIO FLOAT Y Z-INDEZ - PRACTICA 003</title>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
</head>
<body>
<-- El rango que vamos a darle es abuelo al fondo, padre como

siguiente, hija y nieta después, haremos todo con CSS
aprendiendo a posicionar de manera correcta cada div -->
<div id="abuelo">#abuelo</div>
<div id="padre">#padre</div>
<div id="hija">#hija</div>
<div id="nieta">#nieta</div>
</body>
</html>
El objetivo del ejercicio es aprender a posicionar correctamente cada uno

de los div. La visualización final del ejercicio tendrá que ser así:
002. El documento CSS que crearemos es el siguiente:
@charset "utf-8";
body{
width:1200px;
height:800px;
margin:0 auto;
}
#abuelo{
background-color:grey;
width:500px;
height:500px;
position:absolute;
border:5px solid red;
border-spacing:10px;
}
#padre{
background-color:orange;
z-index:1;
width:350px;
height:350px;
position:absolute;
top:75px;
left:75px;
}
#hija{
background-color:olive;
position:absolute;
width:250px;
height:250px;
z-index:2;
top:125px;
left:125px;
}
#nieta{
background-color:fuchsia;
position:absolute;
width:100px;
height:100px;
z-index:3;
top:200px;
left:200px;
}
div{
font-family:calibri;
color:white;
font-size:16px;
}
PRACTICA 011 _____________________________________
PAGINA WEB CON DIV Y CSS
001. En primer lugar haremos la estructura web:
<html>
<head>
<title>PRACTICA 011</title>
</head>
<body>
<div id="pagina">
<div id="cabecera">

</div>
<div id="conjunto">

<div id="menu">

</div>
<div id="contenido">

</div>
</div>
</div>
<div id="pie">

</div>
</body>
</html>
La visualización final del ejercicio

tendrá que ser así:
002. Vamos a comenzar a meter contenidos en página, listas y encabezados:
<html>
<head>
</head>
<body>
<div id="pagina">
<div id="cabecera">

<h1>Blog de Fotografías</h1>
<h2>Autora: Conchi Marcos</h2>
</div>
<div id="conjunto">

<div id="menu">

<h3>Menu</h3>
<ul>
<li><a>Home</a></li>
<li><a>Paisajes</a></li>
<li><a>Animales</a></li>
<li><a>Gente</a></li>
<li><a>Contacto</a></li>
</ul>
</div>
<div id="contenido">

<h3>Bienvenidos a mi nueva pagina donde mostraré mis <span>últimas fotos.</span>
Espero ir mejorando con los meses y que las calidades de las mismas se
superen.</h3>
</div>
</div>
</div>
<div id="pie">

<h2>ULTIMAS FOTOGRAFÍAS</h2>
<div id="fotos">
<div id="foto1">Fotografia 1</div>
</div>
<p>Todos los derechos reservados</p>
</div>
</body>
</html>
A continuación lo queremos hacer es poner estilos distintos en función de los id

que tenga cada div, para ello crearemos la etiqueta STYLE dentro del head.
<style type="text/css">
body{text-align:center;}
#pagina {width:693px; margin:0;text-align:left;}
#cabecera {height: 60px; margin-bottom: 40px; width: 693px}
#conjunto{width: 500px; float: left; margin-bottom: 70px}
#menu {width: 180px; float: left; text-transform: uppercase;}
#pie {clear: both; height: 296px;}
</style>
PRACTICA 001 - Selectores
Vamos a crear un documento HTML en el que aplicaremos los
SELECTORES que indicamos a continuación.
/* Todos los elementos de la pagina */

{ font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los párrafos de la pagina */

{ color: #555; }
/* Todos los párrafos contenidos en #primero */

{ color: #336699; }
/* Todos los enlaces la pagina */

{ color: #CC3300; }
/* Los elementos "em" contenidos en #primero */

{ background: #FFFFCC; padding: .1em; }
/* Todos los elementos "em" de clase "especial" en toda la

pagina */
{ background: #FFCC99; border: 1px solid #FF9900; padding:
.1em; }
/* Elementos "span" contenidos en .normal */

{ font-weight: bold; }
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-

8859-1" />
<title>PRACTICA_001</title>
</head>
<body>
<div id="primero">
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing

elit</a>. Praesent blandit nibh at felis. Sed nec diam in dolor
vestibulum aliquet. Duis ullamcorper, nisi non facilisis molestie,
<em>lorem sem aliquam nulla</em>, id lacinia velit mi vestibulum
enim.</p>
</div>
<div class="normal">
<p>Phasellus eu velit sed lorem sodales egestas. Ut feugiat.

<span><a href="#">Donec porttitor</a>, magna eu varius
luctus,</span> metus massa tristique massa, in imperdiet est velit
vel magna. Phasellus erat. Duis risus. <a href="#">Maecenas
dictum</a>, nibh vitae pellentesque auctor, tellus velit
consectetuer tellus, tempor pretium felis tellus at metus.</p>
<p>Cum sociis natoque <em class="especial">penatibus et magnis</em>

dis parturient montes, nascetur ridiculus mus. Proin aliquam
convallis ante. Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas. Nunc aliquet. Sed eu
metus. Duis justo.</p>
<p>Donec facilisis blandit velit. Vestibulum nisi. Proin volutpat,

<em class="especial">enim id iaculis congue</em>, orci justo
ultrices tortor, <a href="#">quis lacinia eros libero in eros</a>.
Sed malesuada dui vel quam. Integer at eros.</p>
</div>
</body>
</html>
/* Todos los elementos de la pagina */ * { font: 1em/1.3 Arial, Helvetica, sans-serif; } /* Todos los párrafos de la pagina */
PRACTICA 001 – Selectores

Solución
/* Todos los elementos de la pagina */

* { font: 1em/1.3 Arial, Helvetica, sans-serif; }
/* Todos los párrafos de la pagina */

p { color: #555; }
/* Solo los párrafos contenidos en #primero */

#primero p { color: #336699; }
/* Todos los enlaces la pagina */

a { color: #CC3300; }
/* Los elementos em contenidos en #primero */

#primero em { background: #FFFFCC; padding: .1em; }
/* Todos los elementos em de tipo especial en toda la pagina

*/
em.especial { background: #FFCC99; border: 1px solid #FF9900;
padding: .1em; }
/* Elementos span contenidos en .normal */

.normal span { font-weight: bold; }
PRACTICA 002 – Selectores2
Vamos a crear un documento HTML en el que aplicaremos los SELECTORES2 que indicamos
a continuación.
/* Todas las tablas, incluidas columnas, filas, celdas*/
{border:1px solid #000; border-collapse:collapse; padding:5px;}
/* Todos los h1 de id títulos*/ { color: teal; }
/* Todos los strong*/ { color: red; }
/* Todos los span y destacado*/ { color: orange; }
/* Todos los span y especial*/ { color: purple; }
/* Los h2 y con id subtitulo*/ { color: blue;}
/* Todos los enlaces de la página que contengan em */
{color: blue;}
/* Todos los enlaces de la página*/ { color: red;}
/* Los div e id adicional, span y especial*/ { color: olive;}
/* Los div e id adicional y párrafo */ { color: fuchsia;}
/* Los div con id adicional y enlace */ { color: Green }
/* La etiqueta caption*/ { color: blue; }
/* Las celdas */ { color: Green; }
/* Las celdas con strong */ { color: orange; }
/* Las columnas */ { color: red; }
/* Las columnas con class especial*/ { color: orange; }
A continuación se muestra el código HTML de la página sin estilos:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 id="titulo">Lorem ipsum dolor sit amet</h1>
<p>Nulla pretium. Sed tempus nunc vitae neque. <strong>Suspendisse gravida</strong>, metus a
scelerisque sollicitudin, lacus velit ultricies nisl, nonummy tempus neque diam quis felis.
<span class="destacado">Etiam sagittis tortor</span> sed arcu sagittis tristique.</p>
<h2 id="subtitulo">Aliquam tincidunt, sem eget volutpat porta</h2>
<p>Vivamus velit dui, placerat vel, feugiat in, ornare et, urna. <a href="#">Aenean turpis
metus, <em>aliquam non</em>, tristique in</a>, pretium varius, sapien. Proin vitae nisi.
Suspendisse <span class="especial">porttitor purus ac elit</span>. Suspendisse eleifend odio
at dui. In in elit sed metus pretium elementum.</p>
<table summary="Descripción de la tabla y su contenido">

<caption>Título de la tabla</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col" class="especial">Título columna 1</th>
<th scope="col" class="especial">Título columna 2</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col"></th>
<th scope="col">Título columna 1</th>
<th scope="col">Título columna 2</th>
</tr>
</tfoot>
<tbody>
<tr>
<th scope="row" class="especial">Título fila 1</th>
<td>Donec purus ipsum</td>
<td>Curabitur <em>blandit</em></td>
</tr>
<tr>
<th scope="row">Título fila 2</th>
<td>Donec <strong>purus ipsum</strong></td>
<td>Curabitur blandit</td>
</tr>
</tbody>
</table>
<div id="adicional">
<p>Donec purus ipsum, posuere id, venenatis at, <span>placerat ac, lorem</span>. Curabitur
blandit, eros sed gravida aliquet, risus justo
porta lorem, ut mollis lectus tortor in orci. Pellentesque nec augue.</p>
<p>Fusce nec felis eu diam pretium adipiscing. <span id="especial">Nunc elit elit, vehicula
vulputate</span>, venenatis in,
posuere id, lorem. Etiam sagittis, tellus in ultrices accumsan, diam nisi feugiat ante, eu
congue magna mi non nisl.</p>
<p>Vivamus ultrices aliquet augue. <a href="#">Donec arcu pede, pretium vitae</a>, rutrum
aliquet, tincidunt blandit, pede.
Aliquam in nisi. Suspendisse volutpat. Nulla facilisi. Ut ullamcorper nisi quis mi.</p>
</div>
</body>
</html>
PRACTICA 002 – Selectores
Solución
<style type="text/css">
/* No borrar la siguiente regla CSS porque es necesaria para ver los bordes de la tabla
*/
table, tr, th, td {

border:1px solid #000;
border-collapse:collapse;
padding:5px;
}
h1#titulo {
color: teal;
}
strong {
color: red;
}
span.destacado {
color: orange;
}
h2#subtitulo {
color: blue;
}
span.especial {
color: purple;
}
a {
color: red;
}
a em {
color: blue;
}
div#adicional p {
color: olive;
}
div#adicional span#especial {
color: fuchsia;
}
div#adicional a {
color: green;
}
caption {
color: blue;
}
td {
color: green;
}
td strong {
color: orange;
}
th {
color: red;
}
th.especial {
color: orange;
}
</style>
PRACTICA 003 – Optimización
CSS
En este primer apartado haramos lo siguiente:
1.- Aplicaremos al HTML los siguientes CSS.
PRACTICA 011 _____________________________________
PAGINA WEB CON DIV Y CSS
En primer lugar haremos la estructura web:

UF1303

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

UF1303

Cargado por

Copyright:

Formatos disponibles

UF1303: ELABORACIÓN DE Certificado de

HOJAS DE ESTILO Profesionalidad:

Diseño de Portada: Conchi Marcos R.

Edita: Mª de la Concepción Marcos Ramos

Reservados todos los derechos. No se permite

© Conchi Marcos Ramos CONCHI.MARCOS@ME.COM 3

3. OPTIMIZACIÓN DE HOJAS DE ESTILO

La optimización es una parte vital del desarrollo y mantenimiento de un sitio

Después de haber trabajado en algunas de las más grandes ecommerce,

El optimizar una página puede ayudar a aumentar el número de visitantes,

Permiten ahorrar la carga de muchos bits de datos innecesarios, eliminando

.class { background: url(image.png) no-repeat fixed 0 10px

// si algún valor no se declara, tomará los valores

.class { border: 2px solid #ccc; }

// Los valores se indican según el sentido de las agujas

.class { padding: 12px 15px 5px 20px; }

.class { list-style: circle outside url(image.png); }

Agrupar etiquetas similares

Puede suceder que después de un tiempo desarrollando declaremos las mismas

li.home {background: url(img/sprite.png) 0 0 no-repeat

Combina varios documentos CSS en uno solo

/*En este caso indicamos a las celdas que tengan un fondo

/*Aquí unimos ambas etiquetas, tanto body como td y le

/* Ahora usaremos los atributos class para indicar también

/* En el caso de que queramos aplicar a las dos clases, en

/* Con el atributo id siempre irá precedido de #, este es

/*Ahora queremos que el texto en que esté en un parrafo y a la

/*Si tenemos una etiqueta h1 y seguido un strong le diremos

/*En este apartado afectan a los subelementos... en este caso

/*En este caso le decimos que los enlaces visitados, que

/*Al pasar el ratón por encima del enlace el texto aparecerá

/*Con active lo que conseguiremos será darle un efecto al

Realizamos una web siguiendo las siguientes indicaciones.

• Ancho de la pagina 800px

1º Paso. Creamos la estructura HTML

Si el nombre de la fuente incluye espacios en blanco, comas, barras, paréntesis y otros

Es importante tener claro que si no le indicamos un ancho a la tabla no conseguiremos

Si el nombre de la fuente incluye espacios en blanco, comas, barras, paréntesis y otros

Es importante tener claro que si no le indicamos un ancho a la tabla no conseguiremos

• El uso de las tablas está condicionado a la mera tabulación de datos.

Ahora, que ya conocemos todas están desventajas de usar maquetación

PRACTICA 000_DIV _____________________________________

Para indicarle al navegador que divs queremos que queden juntos

Vamos a ubicar un div justo en la parte inferior, cual barra de tareas de

Vamos a ubicar un div justo en la parte inferior, cual barra de tareas de

El posicionamiento flotante es el más difícil de comprender pero al mismo

Cuando una caja se posiciona con el modelo de posicionamiento flotante,

La propiedad display de CSS cambia la manera en que esa caja se

inline: muestra el elemento dentro del inline (como <span>), es decir,

block: muestra un elemento como un bloque contenedor (como <p>),

inline-block: muestra un elemento que actúa como un bloque contenedor

none: el elemento no se muestra y desaparece la caja del espacio que

<-- El rango que vamos a darle es abuelo al fondo, padre como

El objetivo del ejercicio es aprender a posicionar correctamente cada uno

La visualización final del ejercicio

A continuación lo queremos hacer es poner estilos distintos en función de los id

/* Todos los elementos de la pagina */

/* Todos los párrafos de la pagina */

/* Todos los párrafos contenidos en #primero */

/* Todos los enlaces la pagina */

/* Los elementos "em" contenidos en #primero */

/* Todos los elementos "em" de clase "especial" en toda la

/* Elementos "span" contenidos en .normal */

<meta http-equiv="Content-Type" content="text/html; charset=iso-