Manual CSS

1º CFGS ASIR.
Lenguajes de Marcas y Sistemas Gestores de la Información CSS
Lenguajes de Marcas y Sistemas Gestores de la Información
CSS
1 Introducción
 CSS es un lenguaje de hojas de estilos creado para controlar el aspecto

o presentación de los documentos HTML y XHTML. CSS es la mejor forma
de separar los contenidos y su presentación y es imprescindible para
crear páginas web complejas.
 Al crear una página 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 página: 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
página, etc.
 CSS sustituye la utilización de etiquetas de estilo específicas en HTML
como <Font>, porque permite asociar estilos a elementos del mismo tipo
de una manera más eficiente.
2 ¿Cómo se incluye CSS en los documentos HTML/XHTML?
El lenguaje CSS puede incluirse en los documentos HTML de tres maneras

distintas:
 Utilizando el atributo style en la etiqueta a la que queremos aplicar

estilo. Usado sólo para elementos muy específicos que no comparten
estilo con ningún otro elemento en todo el sitio web:
<p style="color: black; font-family: Verdana;">Párrafo de texto</p>
 Utilizando el elemento style dentro de la etiqueta <head> del

documento html. Usado si se van a definir pocos elementos de estilo y
diferenciados para cada página del sitio web.
IES Aldebarán. Fuensalida

1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información CSS
<html>
<head>
<title>Ejemplo de CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p> Párrafo de texto </p>
…
 Definir todo el estilo del sitio web en un archivo externo (que tendrá la
extensión .css). Es la forma más utilizada porque centraliza todo el
estilo en un único archivo, por lo que para modificarlo, no
necesitaremos ir a cada página.
o Una página html puede enlazar varios archivos css.
o Una página html enlaza con un archivo css utilizando la
etiqueta <link… /> entre las etiquetas <head> … </head>.
o Normalmente, la etiqueta <link… /> usa los atributos:
 rel: indica el tipo de relación que existe entre el
recurso enlazado (en este caso, el archivo CSS) y la
página HTML. Para los archivos CSS, siempre se
utiliza el valor stylesheet
 type: indica el tipo de recurso enlazado. Para los
archivos CSS su valor siempre es text/css
 href: indica la URL del archivo CSS que contiene los
estilos. La URL indicada puede ser relativa o
absoluta y puede apuntar a un recurso interno o
externo al sitio web.
 media: indica el medio en el que se visualizará la
página para la que se está definiendo el estilo. Sus
valores más habituales son screen para pantallas de
ordenador y handheld para móviles o tablets. Se
pueden definir estilos distintos para dispositivos
distintos.
<html>
<head>
<title>Ejemplo de CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css"/>
</head>
<body>
<p>Un párrafo de texto.</p>
…

3 Elementos básicos de CSS
Los diferentes términos se definen a continuación:
Regla: cada uno de los estilos que componen una hoja de estilos CSS.
Cada regla está compuesta de una parte de "selectores", un símbolo de "llave
de apertura" ({), una o más partes denominada "declaración" separadas por el
símbolo “punto y coma” (;) y por último, un símbolo de "llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la

regla CSS.
Declaración: especifica los estilos que se aplican a los elementos. Está

compuesta por una o más propiedades CSS.
Propiedad: característica que se modifica en el elemento seleccionado,

como por ejemplo su tamaño de letra, su color de fondo, etc. Existen hasta 239
propiedades en la última definición de CSS (CSS3)
Valor: establece el nuevo valor de la característica modificada en el

elemento.
Comentarios: no se procesan. Delimitados por los caracteres /* … */.
Un archivo CSS puede contener un número ilimitado de reglas CSS,

cada regla se puede aplicar a varios selectores diferentes y cada declaración
puede incluir tantos pares propiedad/valor como se desee.
4 Selectores
Como su nombre indica, se utiliza para seleccionar a qué elementos se

les aplica las declaraciones descritas entre llaves. La mayoría de páginas de
los sitios web se pueden diseñar utilizando solamente los cinco selectores
básicos:

 Selector universal: El carácter *, selecciona todos los elementos de la

página:
* {margin:0; padding:0}
 Selector de tipo o etiqueta: Selecciona todos los elementos de la página

cuya etiqueta HTML coincide con el valor del selector. Para utilizar este
selector, solamente es necesario indicar el nombre de la etiqueta HTML
(sin los caracteres < y >) correspondiente a los elementos que se quieren
seleccionar. Si se quiere aplicar el mismo estilo a varios elementos, se
pueden agrupar separados por comas:
h1, h2, h3 {color:#ff0000;}
Selector descendente: Selecciona los elementos que se encuentran

dentro de otros elementos. Un elemento es descendiente de otro
cuando se encuentra entre las etiquetas de apertura y de cierre del otro
elemento, independientemente de que descienda directamente o
descienda de una etiqueta descendiente.
td p {color:#ff0000;}
 Selector de clase: Selecciona sólo aquellos elementos html que estén

usando el atributo class. En css se antepondrá un punto al nombre de la
clase. Nos permite hacer distinciones entre elementos del mismo tipo:
En html.- <p class=”nombre_clase”> Párrafo de texto </p>
En css.- .nombre_clase {color:#ff0000;}
 Selector de ID: Selecciona sólo aquellos elementos html que estén

usando el atributo id. En css se antepondrá el carácter almohadilla (#)
al identificador. En un documento html, un puede haber varios
elementos con el mismo valor de class, pero sólo uno con el mismo valor
de id. Nos permite distinguir un único elemento de un tipo:
En html.- <p id=”nombre_elemento”> Párrafo de texto </p>
En css.- #nombre_elemento {color:#ff0000;}
Estos selectores pueden combinarse entre sí para hacer selecciones más

específicas. Además existen una serie de selectores avanzados que puedes
consultar aquí: http://librosweb.es/libro/css/capitulo_2/selectores_avanzados.html.
Las propiedades definidas para un selector se aplican a sus

descendientes.
En caso de que dos propiedades afecten a un elemento, se aplicará la

más específica, y a igual nivel, la última definida.

5 Modelo de cajas
El modelo de cajas o "box model" condiciona el diseño de todas las

páginas web. El comportamiento de CSS hace que todos los elementos de las
páginas se representen mediante cajas rectangulares.
Las cajas de una página se crean automáticamente. Cada vez que se
inserta una etiqueta HTML, el navegador crea automáticamente una nueva
caja rectangular que encierra los contenidos de ese elemento. CSS permite
modificar todas las características de la caja, que está formada por:
Propiedades habituales con este modelo son:
 Width para definir la anchura de la mayoría de elementos. Si se

usan valores porcentuales, se toma como referencia la anchura
de la etiqueta padre.
 Height para definir la altura de la mayoría de elementos. Si se
usan valores porcentuales, se toma como referencia la anchura
de la etiqueta padre.
 Margin, margin-top, margin-right, margin-bottom, margin-left
para definir la distancia entre el borde de la caja y los bordes de
las cajas adyacentes. Si se usa margin se puede usar de distintas
formas:
Selector {margin: 5px} Todos los márgenes serán de 5 px
Selector {margin: 5px 3px} Los márgenes superior e inferior serán de
5 px y los laterales de 3 px.
Selector {margin: 5px 4px 3px} El margen superior será de 5 px,
los laterales de 4 px y el inferior de 3 px.
Selector {margin: 5px 4px 3px 2px} Cada margen toma un valor
de la lista en este orden: superior, derecho, inferior, izquierdo.
 Padding, padding-top, padding-right, padding-bottom, padding-
left para definir la distancia entre el borde de la caja y su
contenido. Funciona como margin.

 Border-width, border-top-width, border-right-width, border-

bottom-width, border-left-width para definir la anchura del borde
de la caja. El mismo funcionamiento que las anteriores
propiedades.
 Border-style, border-top-style, border-right-
style, border-bottom-style, border-left-style
para definir el estilo del borde de la caja. El
mismo funcionamiento que las propiedades
anteriores.
 Border-color… como las anteriores etiquetas,
para definir el color del borde.
Se pueden agrupar las opciones de borde de la

siguiente forma:
Selector {border: 1px solid red}
El tamaño de un elemento se calcula teniendo en cuenta el

tamaño (width y height) del elemento al que se añadirá el margin,
el padding y el border-width.
 Background-color para elegir un color de fondo para la caja.

 Background-image para elegir una imagen de fondo desde
archivo. Si la imagen que se quiere mostrar es demasiado grande
para el fondo del elemento, solamente se muestra la parte de
imagen comprendida en el tamaño del elemento. Si la imagen es
más pequeña que el elemento, CSS la repite horizontal y
verticalmente hasta llenar el fondo del elemento.
body { background-image: url("imagenes/fondo.png") }
 Background-repeat controla la repetición de la imagen de fondo.

Puede tomar los valores repeat, no-repeat, repeat-x o repeat-y.
 Background-position controla la posición de la imagen de fondo.
Toma valores de medidas en pixeles, porcentajes y los valores left,
right, center, top, bottom.
 Background-attachment controla si la imagen de fondo
permanecerá fija (fixed) o se moverá con la barra de
desplazamiento (scroll).
Se pueden agrupar valores de las propiedades de background

usando: Selector {background bottom left no-repeat url(“img.gif”)}

6 Tipos de elementos y posicionamiento
En HTML todos los elementos utilizados están catalogados como de

bloque o de línea.
Los elementos de bloque ("block elements" en inglés) siempre empiezan

en una nueva línea y ocupan todo el espacio disponible hasta el final de la
línea. Por su parte, los elementos en línea ("inline elements" en inglés) no
empiezan necesariamente en nueva línea y sólo ocupan el espacio necesario
para mostrar sus contenidos.
Elementos en línea definidos por HTML son: a, b, br, font, i, img, input,
label, select, small, span, strong, sub, sup, textarea, u, var.
Elementos de bloque definidos por HTML son: center, div, fieldset, form,
h1, h2, h3, h4, h5, h6, hr, ol, p, pre, table, ul.
Los elementos HTML que se suelen utilizar como cajas de contenido son
<div> … </div> para bloque y <span> … </span> para línea.
Los navegadores crean y posicionan de forma automática todas las

cajas que forman cada página HTML. No obstante, CSS permite al diseñador
modificar la posición en la que se muestra cada caja.
El estándar de CSS define cinco modelos diferentes para posicionar una

caja, asignándole distintos valores a las propiedades position o float:
 Posicionamiento normal o estático (position: static): se trata del

posicionamiento que utilizan los navegadores por defecto si no se
indica lo contrario.
 Posicionamiento relativo (position: relative): variante del
posicionamiento normal que consiste en posicionar una caja
según el posicionamiento normal y después desplazarla respecto
de su posición original usando las propiedades top, right, bottom,
left.
 Posicionamiento absoluto (position: absolute): la posición de una
caja se establece de forma absoluta respecto de su elemento
contenedor y se posiciona respecta él usando las propiedades
top, right, bottom, left.
 Posicionamiento fijo (position: fixed): La posición del elemento en
la pantalla siempre es la misma independientemente del resto de
elementos y de si el usuario sube o baja la página.

 Posicionamiento flotante (float: right | left): se trata del modelo

más especial de posicionamiento, ya que desplaza las cajas todo
lo posible hacia la izquierda o hacia la derecha de la línea en la
que se encuentran, organizando el contenido a su alrededor.
Cuando se posiciona una caja de forma flotante:
* La caja deja de pertenecer al flujo normal de la página,
lo que significa que el resto de cajas ocupan el lugar dejado por
la caja flotante.
* La caja flotante se posiciona lo más a la izquierda o lo
más a la derecha posible de la posición en la que se encontraba
originalmente.
* Si existen otras cajas flotantes, se posicionan una al lado

de otra si tienen espacio.
La propiedad clear fuerza a un elemento a posicionarse debajo

de cualquier capa flotante indicando el lado del elemento HTML
que no debe ser adyacente a ninguna caja posicionada de
forma flotante. Si se indica el valor left, el elemento se desplaza
de forma descendente hasta que pueda colocarse en una línea
en la que no haya ninguna caja flotante en el lado izquierdo.
Puede tomar los valores left, right o both.
La propiedad display permite mostrar elementos como si fueran de tipo

‘bloque’ o ‘en línea’ aunque no lo sean, además permite no mostrar un
elemento haciendo que el resto se redistribuya. Los valores más utilizados son:
block, inline y none:
 block muestra un elemento como si fuera un elemento de

bloque, independientemente del tipo de elemento que se trate.
 inline visualiza un elemento en forma de elemento en línea,
independientemente del tipo de elemento que se trate.
 none oculta un elemento y hace que desaparezca de la página.
El resto de elementos de la página se visualizan como si no
existiera el elemento oculto, es decir, pueden ocupar el espacio
en el que se debería visualizar el elemento.

6.1 Flexbox. El módulo de caja flexible

Flexbox es un método que ayuda a distribuir el espacio entre los
elementos de una interfaz y a mejorar las capacidades de alineación de los
elementos.
Creamos un contenedor flex dándole a un contenedor (como <div>) la

propiedad display:flex, de esta manera, todos los elementos contenidos en él
pasan a ser elementos flex que seguirán el siguiente comportamiento:
 Los elementos se despliegan sobre una fila.

 Los elementos se despliegan de izquierda a derecha.
 Los elementos no se ajustan al tamaño de la fila, pero se pueden
contraer.
 Los elementos se ajustarán para llenar el tamaño vertical.
 El resultado es que todos los elementos se alinearán en una solo fila,
usando el tamaño del contenedor como su tamaño en el eje
principal (izquierda-derecha). Si hay más elementos de los
que caben en el contenedor, estos no pasarán más abajo si no que
sobrepasarán el margen. Si hay ítems más altos que otros, todos los
ítems serán ajustados en el eje cruzado (arriba-abajo) para alcanzar
al mayor.
Podemos modificar el comportamiento del contenedor usando

propiedades como:
 Flex-direction para cambiar la dirección en que se van a alinear los

elementos, puede tomar los valores row (por defecto), column, row-
reverse y column-reverse.
 Flex-wrap para distribuir los elementos en más de una línea. Puede
tomar los valores wrap y nowrap.
(Se pueden combinar ambas propiedades en la propiedad flex-flow,

por ejemplo: flex-flow: row wrap;)
Podemos alinear el contenido con las propiedades:
 Align-items para alinear en el eje cruzado (por defecto, arriba-

abajo). Puede tomar los valores stretch (ajustar al tamaño
disponible), flex-start (alinear al inicio), flex-end (alinear al final) y
center (centrar).
 Justify-content para alinear en el eje principal (por defecto,
izquierda-derecha). Puede tomar los valores flex-start, flex-end o
center para alinear, respectivamente a izquierda, derecha o
centrado y puede usar los valores space-evenly, space-around y
space-between para repartir el espacio libre de distintas formas.

Podemos modificar el comportamiento de los elementos contenidos

usando propiedades como:
 Flex-grow para permitir a un elemento expandirse hasta ocupar el

espacio libre disponible. Toma valor numérico para permitir organizar
el reparto del espacio libre disponible. Así, si hay tres elementos en el
contenedor y asignamos Flex-grow: 1 a todos ellos, se repartirán el
espacio equitativamente, mientras que si le damos más valor a uno
de ellos, ocupará más que el resto.
 Flex-shrink funciona como la propiedad anterior, pero para reducir
el tamaño de los elementos. Permite controlar cómo se van a
contraer los elementos si se reduce el espacio.
 Flex-basis establece el tamaño base de un elemento, por defecto
toma el valor auto.
(Generalmente estas propiedades se usan abreviadas en la propiedad

flex, por ejemplo, así: flex: 1 1 auto; que indicaría que el elemento
crecerá si hay espacio disponible, se encogerá si se reduce el espacio y
parte del tamaño original del elemento).
7 Propiedades útiles
Texto:
Color: Para cambiar el color del texto contenido en el elemento.
Font-family: Cambia el tipo de letra, toma como valores el

nombre de un tipo de letra o de una familia y se le puede asignar una
lista de posibles opciones, separadas por comas, de manera que si no
se puede usar la primera opción se usará la siguiente.
Font-size: Cambia el tamaño de la letra.
Font-weight: Cambia el grosor de la letra. Bold para negrita.
Font-style: Cambia a cursiva tomando el valor italic.
Todas estas propiedades pueden agrupar valores con la etiqueta Font.
Text-align: Para alinear horizontalmente el contenido.
Line-height: Tamaño de interlineado.
Text-decoration: Para aplicar subrayado, tachado o parpadeo.
Vertical-align: Para alinear verticalmente el contenido.

Text-shadow: Permite añadir sombra al texto. Toma como valores

el desplazamiento horizontal (px), el desplazamiento vertical (px),
difuminado (px) y el color: h1{ text-shadow: 1px 1px 3px #ff0000}
Word-wrap: Permite cortar una palabra demasiado larga para

caber en el contenedor, usando el valor break-word.
Enlaces
Como con los atributos id o class no es posible aplicar diferentes
estilos a un mismo elemento en función de su estado, CSS introduce un
nuevo concepto llamado pseudo-clases. En concreto, CSS define las
siguientes cuatro pseudo-clases (que deben usarse en ese orden):
:link, aplica estilos a los enlaces que apuntan a páginas o

recursos que aún no han sido visitados.
:visited, aplica estilos a los enlaces que apuntan a recursos que

han sido visitados anteriormente.
:hover, aplica estilos al enlace sobre el que el usuario ha

posicionado el puntero del ratón.
:active, aplica estilos al enlace que está pinchando el usuario. Los

estilos sólo se aplican desde que el usuario pincha el botón del ratón
hasta que lo suelta, por lo que suelen ser unas pocas décimas de
segundo.
Por defecto los navegadores muestran los enlaces no visitados de

color azul y subrayados y los enlaces visitados de color morado. Las
pseudo-clases anteriores permiten modificar completamente ese
aspecto. Por ejemplo:
a:hover { text-decoration: none; } Oculta el subrayado del enlace
Listas
List-style-type: Para cambiar el estilo de viñeta de una lista.
List-style-image: Para usar una imagen como viñeta:
ul.ok { list-style-image: url("imagenes/ok.png"); }
Tablas
Border-collapse: Elimina los espacios entre las celdas de la tabla.
Border-spacing: Define el espacio de separación entre celdas.
Contenedores
Min-width: Anchura mínima.

Max-width: Anchura máxima.
Min-height: Altura mínima.
Max-height: Altura máxima.
Overflow: Nos permite controlar aquellos contenidos que no

caben en sus cajas. Puede tomar los valores: visible, hidden, y scroll:
 visible: el contenido no se corta y se muestra sobresaliendo

la zona reservada para visualizar el elemento. Este es el
comportamiento por defecto.
 hidden: el contenido sobrante se oculta y sólo se visualiza
la parte del contenido que cabe dentro de la zona
reservada para el elemento.
 scroll: solamente se visualiza el contenido que cabe dentro
de la zona reservada para el elemento, pero también se
muestran barras de scroll que permiten visualizar el resto
del contenido.
Generales
All:unset: Retira las propiedades heredadas del contenedor en el
que se encuentra el elemento.
Opacity: Permite graduar la opacidad de un elemento. Toma

valores entre 0.0 y 1.0 de más transparente a más opaco.
Border-radius: Permite redondear las esquinas de los elementos.

Toman como valor un número de píxeles que indican la longitud del
radio de la circunferencia cuyo arco formará la esquina del elemento. A
mayor distancia, mayor redondeo de la esquina. Puede usarse con una
o varias de las esquinas del elemento.
Display: Muestra un elemento de un tipo (bloque, inline,… ) como si

fuera de otro.
Box-shadow: Funciona como el text-shadow, pero aplicado a

elementos. Puede tomar valores para desplazamiento horizontal,
vertical, difuminado y color.
Box-sizing: border-box: Permite incluir los valores de padding,

margin y border en el total definido en width, de manera que en lugar
de sumar píxeles al tamaño de un elemento, los cogen del total.
Z-index: Nos permite situar un elemento en un nivel por encima del

resto de elementos. Asumiendo que los elementos se distribuyen en un
plano (pantalla) delimitado por los ejes X e Y, esta propiedad nos
permite situar elementos en el eje Z a distintas alturas. Toma un valor

numérico que representa el nivel en el que situamos el elemento. No

puede usarse sin ir acompañada de la propiedad position.
Rotate(): Rota un elemento en el sentido de las agujas del reloj el

número de grados indicado.
div {
-ms-transform: rotate(20deg); /* IE 9 */
-webkit-transform: rotate(20deg); /* Safari */
transform: rotate(20deg);
}
8 Transiciones y animaciones
Las transiciones permiten cambiar una propiedad desde un valor a otro
en un tiempo dado.
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s, height 4s;
}
div:hover {
width: 300px; height: 300px;
}
Más propiedades para transiciones en:

http://www.w3schools.com/css/css3_transitions.asp
Para hacer animaciones es necesario:
 Definir estados clave mediante la regla @keyframes nombre { … }

 Indicar el keyframes a usar y la duración de la animación en el
elemento que queramos animar, con las propiedades
animation-name: nombre; (Para indicar el keyframes a usar)
animation-duration: Xs; (Para indicar la duración)
animation-iteration-count: 3; (Para indicar cuántas veces se
repetirá la animación, infinite para repetición continua)
Los keyframes se pueden declarar de varias formas. Si sólo tenemos dos

estados, usaremos:
@keyframes ejemplo {
from {background-color: red;}
to {background-color: yellow;}
}

Si tenemos más de dos estados los podemos definir por puntos

temporales usando porcentajes del tiempo total:
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
Más propiedades para animaciones en:

http://www.w3schools.com/css/css3_animations.asp
9 Pseudoclases :hover, :active y :focus
Estas pseudoclases permiten modificar el aspecto de los elementos que

se encuentran en una situación concreta:
:hover, si el puntero pasa por encima del elemento.
li.menu:hover {background-color:#dddddd}
:active, si se está pulsando en el elemento.
li.menu:active {background-color:#000000; color:#ffffff}
:focus, si el usuario ha puesto el foco (con ratón o tabulador) en un

elemento (el elemento debe ser accionable, como un input o un enlace).
input:focus {border: solid 2px}
10 Pseudoelementos
Los pseudoelementos permiten, entre otras cosas, incluir contenidos
antes o después de un elemento:
::before, inserta contenido justo antes del elemento al que acompaña.
li::before {content: url(icono.gif)}
::after, inserta contenido justo después del elemento al que acompaña.
li::after {content: url(icono.gif)}

11 Recursos útiles
Centrar una página de anchura fija:
HTML CSS
<body> #contenedor {
<div id="contenedor"> width: 80%;
<h1>Lorem ipsum dolor sit amet</h1> margin: 0 auto;
... }
</div>
</body>
Distribución básica de página de tamaños fijos:
HTML CSS
<body> #contenedor {
<div id="contenedor"> width: 700px;}
<div id="cabecera"> </div> #cabecera {}
#menu {
<div id="menu"> </div> float: left;
width: 150px;
<div id="contenido"> </div> }
#contenido {
<div id="pie"> </div> float: left;
</div> width: 550px;
</body> }
#pie {
clear: both;
}
Lista de enlaces como menú fijo:
HTML CSS
<body> ul {
<ul> list-style-type: none;
<li> margin: 0;
<a class="activo" href="#home"> padding: 0;
Home </a> width: 25%;
</li> background-color: #f1f1f1;
<li><a href="#news">News</a> position: fixed;
</li> height: 100%;
<li> overflow: auto;
<a href="#contact">Contact }
</a>
</li> li a {
<li><a href="#about">About</a> display: block;
</li> color: #000;
</ul> padding: 8px 16px;
text-decoration: none;
<div> }
<p>Texto…</p>
<p>Texto…</p>
…

</div> li a.active {
</body> background-color: #4CAF50;
color: white;
}
li a:hover {
background-color: #555;
color: white;
}
Imágenes cuyo tamaño se adapta al de la ventana:
HTML CSS
img {
max-width: 100%;
height: auto;
}

Manual CSS

Cargado por

Información del documento

Título original

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

Manual CSS

Cargado por

Copyright:

Formatos disponibles

1º CFGS ASIR.

Lenguajes de Marcas y Sistemas Gestores de la Información CSS

Lenguajes de Marcas y Sistemas Gestores de la Información

 CSS es un lenguaje de hojas de estilos creado para controlar el aspecto

2 ¿Cómo se incluye CSS en los documentos HTML/XHTML?

El lenguaje CSS puede incluirse en los documentos HTML de tres maneras

 Utilizando el atributo style en la etiqueta a la que queremos aplicar

 Utilizando el elemento style dentro de la etiqueta <head> del

IES Aldebarán. Fuensalida

IES Aldebarán. Fuensalida

3 Elementos básicos de CSS

Los diferentes términos se definen a continuación:

Selector: indica el elemento o elementos HTML a los que se aplica la

Declaración: especifica los estilos que se aplican a los elementos. Está

Propiedad: característica que se modifica en el elemento seleccionado,

Valor: establece el nuevo valor de la característica modificada en el

Comentarios: no se procesan. Delimitados por los caracteres /* … */.

Un archivo CSS puede contener un número ilimitado de reglas CSS,

Como su nombre indica, se utiliza para seleccionar a qué elementos se

IES Aldebarán. Fuensalida

 Selector universal: El carácter *, selecciona todos los elementos de la

 Selector de tipo o etiqueta: Selecciona todos los elementos de la página

Selector descendente: Selecciona los elementos que se encuentran

 Selector de clase: Selecciona sólo aquellos elementos html que estén

 Selector de ID: Selecciona sólo aquellos elementos html que estén

Estos selectores pueden combinarse entre sí para hacer selecciones más

Las propiedades definidas para un selector se aplican a sus

En caso de que dos propiedades afecten a un elemento, se aplicará la

IES Aldebarán. Fuensalida

El modelo de cajas o "box model" condiciona el diseño de todas las

Propiedades habituales con este modelo son:

 Width para definir la anchura de la mayoría de elementos. Si se

IES Aldebarán. Fuensalida

 Border-width, border-top-width, border-right-width, border-

Se pueden agrupar las opciones de borde de la

Selector {border: 1px solid red}

El tamaño de un elemento se calcula teniendo en cuenta el

 Background-color para elegir un color de fondo para la caja.

body { background-image: url("imagenes/fondo.png") }

 Background-repeat controla la repetición de la imagen de fondo.

Se pueden agrupar valores de las propiedades de background

IES Aldebarán. Fuensalida

6 Tipos de elementos y posicionamiento

En HTML todos los elementos utilizados están catalogados como de

Los elementos de bloque ("block elements" en inglés) siempre empiezan

Los navegadores crean y posicionan de forma automática todas las

El estándar de CSS define cinco modelos diferentes para posicionar una

 Posicionamiento normal o estático (position: static): se trata del

IES Aldebarán. Fuensalida

 Posicionamiento flotante (float: right | left): se trata del modelo

* Si existen otras cajas flotantes, se posicionan una al lado

La propiedad clear fuerza a un elemento a posicionarse debajo

La propiedad display permite mostrar elementos como si fueran de tipo

 block muestra un elemento como si fuera un elemento de

IES Aldebarán. Fuensalida

6.1 Flexbox. El módulo de caja flexible

Creamos un contenedor flex dándole a un contenedor (como <div>) la

 Los elementos se despliegan sobre una fila.

Podemos modificar el comportamiento del contenedor usando

 Flex-direction para cambiar la dirección en que se van a alinear los

(Se pueden combinar ambas propiedades en la propiedad flex-flow,

Podemos alinear el contenido con las propiedades:

 Align-items para alinear en el eje cruzado (por defecto, arriba-