Scribd
Upload
9 views23 pages

Tema 3 - CSS

Uploaded by

victorelkirilov2018
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
9 views23 pages

Tema 3 - CSS

Uploaded by

victorelkirilov2018
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

TEMA 2:

HOJAS DE ESTILO (CSS)


ÍNDICE

1. Introducción
2. Sintaxis básica
3. Normas básicas a la hora de crear CSS
4. Formas de aplicar CSS a un documento HTML
5. Atributos de las hojas de estilo
1. INTRODUCCIÓN

Las hojas de estilo en cascada (Cascading Style Sheets) son un mecanismo simple que
describe cómo se mostrará un documento en pantalla. Las CSS se utilizan para dar
estilo a documentos HTML separando el contenido de la presentación.
Los estilos definen la forma de mostrar los elementos HTML.
CSS permite a los desarrolladores web controlar el estilo y el formato de múltiples
páginas web al mismo tiempo.

Cualquier cambio en el estilo marcado para un elemento afectará a todas las


páginas vinculadas a esa hoja de estilo en las que aparezca ese elemento.
2. SINTAXIS BÁSICA DE CSS
CSS funciona a base de declaraciones sobre el estilo de uno o varios elementos, por
tanto, las CSS están compuestas por reglas aplicadas a un documento HTML.

La sintaxis básica para cualquier declaración de estilo será: selector {propiedad:valor}

Regla CSS tiene dos partes:


▶ Selector: elemento HTML o etiqueta a la que vamos a definir un estilo, por ejemplo, body.
▶ Declaración:
▶ Propiedad: es el atributo que se desea modificar, por ejemplo, background-color.
▶ Valor: es el valor que deseamos asignar a la propiedad, por ejemplo, red

body {
background-color:red;
}
2. SINTAXIS BÁSICA DE CSS

Más ejemplos:
h1 {
text-align:center;
color:black;
}
p, h1 {
background:yellow;
color:blue;
}
2. SINTAXIS BÁSICA DE CSS
Muchos de los valores que se pueden asignar a las propiedades son unidades de
medida, por ejemplo el valor del tamaño de un margen o el tamaño de la fuente. Las
unidades de medida se muestran en la siguiente tabla:

Unidades de medida Ejemplo


pulgadas (in) - 2,54 cm p{font-size:12in;}
centímetros (cm) p{font-size:12cm;}
milímetros (mm) p{font-size:12mm;}
puntos (pt) - 1/72 pulgadas p{font-size:12pt;}
píxel (px) - depende de la resolución de pantalla p{font-size:12px;}
em – Depende de la letra empleada p{font-size:12em;}
3. NORMAS BÁSICAS A LA HORA DE CREAR CSS

▶ Los selectores pueden aparecer individualmente o agrupados. Cuando hay diferentes


selectores se separan por comas. Ejemplos:
h1, h2, he {color: red;} es lo mismo que

h1 {color: red;}
h2 {color: red;}
h3 {color: red;}
3. NORMAS BÁSICAS A LA HORA DE CREAR CSS

▶ Las propiedades que se desean modificar en una hoja de estilo para un mismo selector
pueden agruparse pero será necesario separarlas con “;”.
p {text-align: center; color:red; Font-family: Arial;}

Normalmente se describe una declaración por línea, esto hace que sea más legible.

▶ Si el valor está formado por más de una palabra hay que ponerlo entre comillas:

p { font-family: “sans serif”;}


4. FORMAS DE APLICAR CSS A UN DOCUMENTO
HTML
Existen 3 formas de dar estilo a un documento HTML:
1. Mediante el atributo style, utilizándolo sobre aquellos elementos que lo permitan, por
ejemplo:
<html>
<head><title>ejemploAtributoStyle</title></head>
<body style=”background-color:#FF0000;”>
Texto sin formato, página con fondo rojo.
<p style=”font-family:'comic sans ms';font-size:16pt;color:blue;”>
Párrafo con fuente Comic Sans, tamaño 16 y color azul.</p>
</body>
</html>
Este tipo de definición del estilo pierde las ventajas que ofrecen las hojas de estilo al
mezclarse el contenido con la presentación.
4. FORMAS DE APLICAR CSS A UN DOCUMENTO
HTML

2. Mediante la etiqueta style, declarando la etiqueta <style> dentro de la sección


<head> del documento.

3. Mediante un enlace a una hoja de estilos externa que estará vinculada al


documento HTML a través de la etiqueta <link> dentro de la sección <head>.
5. ATRIBUTOS DE LAS HOJAS DE ESTILO
Para todos los elementos.
ATRIBUTO USO
width Ancho del elemento - Ej: width:20px;
height Alto

Para fuentes.
ATRIBUTO USO
color Color al texto – Ej: color:red;
font-size Tamaño de la fuente – Ej: font-size:12pt;
font-family Tipo de fuente – Ej: font-family:arial;
Ancho de caracteres – Ej: font-weight:bold;
font-weight
POSIBLES: bold, lighter, 100...900
Estilo fuente – Ej: font-style:normal
font-style
POSIBLES: normal, italic, oblique
5. ATRIBUTOS DE LAS HOJAS DE ESTILO
Para párrafos.

ATRIBUTO USO
line-height Espacio entre líneas
text-decoration None, underline, overline, line-through
text-align Left, center, right, justify
text-indent Margen: px, pt, em, cm...
Transforma el texto a mayúscula, minúscula
text-transform o letra capital
POSIBLES: capitalize, uppercase, lowercase
letter-spacing Espaciado entre letras
word-spacing Espaciado entre palabras
5. ATRIBUTOS DE LAS HOJAS DE ESTILO
Para fondos.

ATRIBUTO USO
background-color Color de fondo
background-image Imagen de fondo para un elemento
Repite la imagen de fondo
background-repeat
POSIBLES: repeat-x, repeat-y, no-repeat

Ejercicio 1. Agregas Estilos


5. ATRIBUTOS DE LAS HOJAS DE ESTILO
Para cajas.
Todos los elementos incluidos en una página HTML se representa mediante cajas
rectangulares.
CSS permite definir la altura y anchura de cada caja, el margen existente entre cajas y el
espacio de relleno interior que muestra cada caja.
Además, permite controlar la forma en la que se visualizan las cajas: se pueden ocultar,
desplazar respecto de su posición original y fijarlas en una posición específica dentro del
documento.
5. ATRIBUTOS DE LAS HOJAS DE ESTILO
Para cajas.
Las partes que componen cada caja son las siguientes:
▶ Contenido: Es el elemento HTML en sí (palabras de un párrafo, una imagen, una lista de
elementos...).
▶ Relleno o padding: Espacio libre opcional entre el contenido y el borde.
▶ Borde o border: Es la línea que encierra la caja.
▶ Margen o margin: Es la separación opcional existente entre la caja y el resto de cajas
adyacentes.
5. ATRIBUTOS DE LAS HOJAS DE ESTILO
Para cajas.
ATRIBUTO USO
margin-left
margin-right
Alineación del margen
margin-top
margin-bottom
padding-left
padding-right
Espacio insertado
padding-top
padding-bottom
border-color Color del borde
border-style None, dotted (punteado), solid, double
También se puede poner a cada borde un ancho:
border-width
border-top-width, border-right-width…
float Alinear un elemento: none, right y left
5. ATRIBUTOS DE LAS HOJAS DE ESTILO

Ejercicio 2. Agregas Estilos y Ejercicio 3. Capitales Europeas


6. SELECTOR DE CLASE
Con el selector de clases (class) se puede hacer que un mismo elemento pueda tener
varios estilos y además que un mismo estilo pueda ser aplicado a varios elementos.
Para definir una clase se utiliza la palabra reservada class junto al nombre de la clase,
acompañando al elemento al que se va a aplicar el estilo.

<body>
<h1 class="estilo1">Esta es la cabecera H1 del documento</h1>
<p class="estilo1">Este es el primer párrafo.</p>
<p class="estilo2">Este es el segundo párrafo.</p>
<h2 class="estilo2">Esta es la cabecera H2 del documento.</h2>
</body>
</html>
6. SELECTOR DE CLASE
Para asignar estilos a una clase se escribe: .nombre_clase antes de definir el estilo. Si
queremos que la clase solo se asigne a un elemento concreto se pone:
etiqueta.nombre_clase.
Por ejemplo, si se añade p.estilo1 {color:blue; Font-size: 30px;} se estaría aplicando el estilo
sólo a la etiqueta p (con nombre de clase estilo1). Estos cambios no afectarán al resto de
etiquetas.

.estilo2 {
<head><style type="text/css">
background-color:yellow;
.estilo1{padding-left:11em;
color:black;
font-family:"Times New Roman";
font-family:"Comic Sans MS";
color:red;
border:solid blue 0.5in;
background-color:#d8da3d;
}
}
</style></head>
7. EL ELEMENTO DIV

El elemento <div> permite agrupar varias etiquetas. Mediante el atributo id se


pueden establecer una serie de estilos a un grupo de etiquetas incluidas en
<div>. La sintaxis o el formato que se va a utilizar es el siguiente:
<div id="nombre">

Y para poner el estilo deberá escribirse nombre.


#nombre { estilos a aplicar }

Será útil cuando se divida la página en grupos o contenedores.


7. EL ELEMENTO DIV

Por ejemplo, vamos a modificar el body del ejercicio anterior y añadimos una etiqueta
div con el selector id que incluirá las tres primeras líneas. Quedará de la siguiente forma:

<div id="contenido">
<h1 class="estilo1">Esta es la cabecera h1 del documento.</h1>
<p class="estilo1">Este es el primer párrafo.</p>
<p class="estilo2">Este es el segundo párrafo.</p>
</div>
<h2 class="estilo2"> Ésta es la cabecera h2 del documento.</h2>
7. EL ELEMENTO DIV

Si se aplica un estilo a contenido, por ejemplo: ancho de 500 px con un margen a la


izquierda de 100 píxeles y un color de fondo de #FFFF99:

#contenido
{width:500px;
margin-left:100px;
background-color:#FFFF99;}

Se observará que el cambio solo afectará a las etiquetas que están incluidas dentro de
div.
8. ELABORAR MENÚS

La inclusión de menús en las páginas se puede hacer de varias formas. Una de ellas es
usando enlaces, y la otra usando listas.
Los enlaces pueden ser visualizados de diferentes formas dependiendo de la acción.
Para ello se utiliza:
a:link {}, se utiliza para dar estilo al enlace sin visitar.
a:visited {}, se utiliza para dar estilo al enlace visitado.
a:hover {}, se utiliza para dar estilo al enlace cuando se acerca el ratón.
a:active {}, se utiliza para dar estilo al enlace que está activo o pulsado.

You might also like