Scribd
Cargar
15 vistas

Apuntes CSS

CSS es un lenguaje utilizado para definir el estilo de documentos HTML, especificando cómo deben mostrarse los elementos como colores, tamaños y posiciones. Existen tres métodos para aplicar estilos: en línea, interno y externo, y se pueden definir propiedades como tipo de letra, fondo y bordes. Además, CSS permite personalizar la apariencia de listas y otros elementos mediante diversas propiedades y valores.

Cargado por

iesvenanciofranz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
15 vistas

Apuntes CSS

CSS es un lenguaje utilizado para definir el estilo de documentos HTML, especificando cómo deben mostrarse los elementos como colores, tamaños y posiciones. Existen tres métodos para aplicar estilos: en línea, interno y externo, y se pueden definir propiedades como tipo de letra, fondo y bordes. Además, CSS permite personalizar la apariencia de listas y otros elementos mediante diversas propiedades y valores.

Cargado por

iesvenanciofranz
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 72

Cascading Style Sheets

Hojas de estilo en cascada


CSS es un lenguaje que describe el estilo
de un documento HTML.

cómo se deben mostrar (el estilo) los


elementos HTML: colores, tamaños,
posiciones, bordes, ….
Las etiquetas de HTML solo las vamos a
utilizar para describir el contenido de una
página web:

• no para colores, tamaños, posiciones:


nos olvidamos de la mayoría de los
atributos

• Sí para párrafos <p> , títulos <h1>,


tablas <table>, listas <ol>, bloques
<div> <span>
Además del atributo id, en cualquier
etiqueta podemos incluir los
atributos:
• Style – para poner los estilos
• Class – para poner un nombre
cualquiera al que nos referiremos
para aplicar estilos
Tres formas de
poner estilos
1.- estilos en línea
Se utiliza el atributo style dentro de
cualquier etiqueta

<h1 style="color:blue;margin-left:30px;">
Esto es un título
</h1>
2.-Hoja de estilo interna

Dentro de la cabecera <head> y entre


las etiquetas <style> y </style>
<head>
<style>
body {
background-color: blue;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
3.-Hoja de estilo externa
En un documento distinto que llamaremos
con cualquier nombre y extensión .css
Deberá estar guardado en la misma carpeta
que la página html

Dentro de la cabecera <head> se hará


referencia a ese documento con la etiqueta:

<link rel="stylesheet" type="text/css" href=“nombre.css">


Dentro de un archivo llamado ejem.css
body {background-color: lightblue;}
h1 {color: navy; margin-left: 20px;}

Dentro del archivo prueba.html


<head>
<link rel="stylesheet" type="text/css"
href=“ejem.css">
</head>
Las propiedades siempre tienen la forma:

color:blue;margin-left:30px;

• Nombre de la propiedad seguida de :


• Propiedades separadas por ;

(irán entre comillas si se ponen en el atributo


style de la etiqueta o entre llaves { } si se ponen
fuera de la etiqueta)
Especificación de colores
 El valor de un color
puede indicarse:
 Nombre: black, white,
red, green, blue, yellow,
...
 RGB en hexadecimal:
#ff0000
 RGB en decimal:
rgb(255,0,0)
 Rgba (255,0,0, 0.7)
 Hsl (120, 100%, 50%)
Especificación de tamaños
 Los valores
numéricos de
distancia,
tamaño, etc
pueden
indicarse con
diversas
unidades.
Propiedades del tipo de letra
 Las propiedades se refieren al tipo o tamaño de letra, al
color de primer plano, al color de fondo, etc... que
usarán los elementos encerrados entre las etiquetas
HTML que usen ese estilo.
 Casi todas las propiedades pueden aplicarse sobre
cualquier etiqueta, y la mayoría son heredables por los
descendientes.
Propiedades del tipo de letra
 Existen diversas propiedades para definir los estilos:
 Tipos de letra
 Fondo
 Texto
 Listas
 Márgenes y rellenos
 Bordes
 etc
Propiedades del tipo de letra
 Determinan el formato de letra:
 font-family
 font-style
 font-variant
 font-weight
 font-size
 font
Tipo letra: font-style
 Valores: normal, italic, oblique

body {font-style: normal}


h1,h2 {font-style: oblique}
h1 {font style: italic}
p.estilo1 {font-family: serif; font-style: italic}
Tipo letra: font-weight
 Valores:
 Predefinido: normal, bold, bolder, lighter
 Numérico: 100, 200, 300, 400, 500, 600, 700, 800, 900

p.e1 {font-weight: normal}


p.e2 {font-weight: bold}
p.e3 {font-weight: 600}
Tipo letra: font-variant
 Valores: normal, small-caps
h3 {font-variant: small-caps}
p:first-line {font-variant: small-caps}
Tipo letra: font-size
 Valores:
 Predefinido: xx-small, x-small, small, medium, large, x-large,
xx-large
 Numérico: píxeles (px), puntos (pt), milímetros (mm), ...
 Porcentual
h1 {font-size: xx-large}
h2 {font-size: x-large}
h3 {font-size: large}
.est1 {font-size: 12px}
h4 {font size: 10pt}
h5 {font-size: 50%}
h1 {font-size: 150%}
Tipo letra: font-family
 Indica el tipo de letra
body {font-family: helvetica}
 Pueden indicarse varias alternativas separadas por comas
p {font-family: helvetica, arial, verdana}
 Hay 5 familias genéricas: serif (como Times), sans-serif
(como Helvetica), cursive (como Zapf-Chancery), fantasy
(como Western) y monospace (como Courier).
 Los nombres con espacios en blanco deben entrecomillarse
body {font-family: “new century schoolbook”, arial,
serif}
Diferencia entre las fuentes serif y sans-serif
Tipo letra: font
 Establece varias propiedades del tipo de letra
conjuntamente:
p { font: italic bold 12pt normal Times, serif }
p { font: italic small-caps 900 12px arial}
 No es necesario especificar todas las propiedades
p { font: bold 12pt Times, serif }
p { font: italic small-caps 900}
 Siguiendo un orden y dejar size y family al final
p { font: font-style font-variant font-weight font-size
font-family}
p { font: italic small-caps 900 32px calibri}
Propiedades de texto
 Permiten fijar el espacio entre caracteres, el interlineado,
etc:
 Color
 word-spacing
 letter-spacing
 text-decoration
 text-transform
 text-align
 text-indent
 text-height
 line-height
Texto: color
 Color del texto:
body {color: black; font-size: 16pt}
h1 {color: #00ff00}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
Texto: word-spacing
 Espaciado entre palabras.
 Valores: normal o numérico
h1 {word-spacing: normal}
h2 {word-spacing: 1em}
h3 {word-spacing: 0.5in}
 El valor numérico puede medirse como:
 Valor absoluto: pulgadas (in), centímetros (cm),
milímetros (mm), puntos (pt) o picas (pc).
 Valor relativo: em, ex o píxeles (px)
Texto: letter-spacing
 Espacio entre caracteres.
 Valores: normal o valor numérico.
body {letter-spacing: normal}
blockquote {letter-spacing: 2mm}
p {letter-spacing: 0.1em}
Texto: text-decoration
 Valores: none, underline, overline, line-through, blink
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
a {text-decoration: none}
Texto: text-transform
 Valores: capitalize, uppercase, lowercase, none
h1 {text-transform: capitalize}
h2 {text-transform: uppercase}
h3 {text-transform: lowercase}
Texto: text-align
 Valores: left, right, center o justify
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
div.just {text-align: justify}
Texto: text-indent
 Sangría inicial de un bloque de texto.
p {text-indent: 1cm}
Texto: line-height
 Separación entre líneas. Valores:
 Normal
 Numérico
 Porcentual respecto del tamaño de la letra
p.small {line-height: 90%}
p.big {line-height: 200%}
Propiedades del fondo
 Determinan el color e imagen de fondo:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background
 Ninguna de estas propiedades es heredada por los
hijos.
Fondo: background-color
 Color de fondo de un elemento
body {background-color: yellow}
h1 {background-color: #00ff00}
p {background-color: rgb(250,0,255)}

 Por defecto el valor es transparent:


h2 {background-color: transparent}
Fondo: background-image
 Establece una imagen de fondo
body {background-image: url(fondo1.jpg)}
table {background-image: url(fondo2.gif)}

 El valor por defecto es none:


p {background-image: none}
Fondo: background-repeat
 Valores: repeat, repeat-x, repeat-y, no-repeat
body {background-repeat: repeat-y}
table {background-repeat: no-repeat}
Fondo: background-position
 Posición inicial de la imagen respecto a esquina
superior izquierda.
 Valores:
 Porcentual respecto al tamaño del elemento:
body {background-position: 50% 50%}
 Numérico:
body {background-position: 2cm 1cm}
 Predefinidos: (left, center, right) para horizontal y (top,
center, bottom) para vertical:
body {background-position: right top}
Fondo: background-
attachment
 Valores:
 scroll (la imagen se desplaza al hacer scroll del texto)
 fixed (la imagen permanece fija)
body { background-color: white;
background-image: url (fondo.jpg);
background-repeat: repeat-y;
background-position: top left;
background-attachment: fixed;
}
Fondo: background
 Establece los valores de varias propiedades para el
fondo de forma conjunta:
body {background: white url (fondo.jpg) repeat-y
fixed}
body { background: white url (fondo.jpg);
background-repeat: repeat-y;
background-attachment: fixed;
}
Ejercicio
 Define propiedades de
fondo para la página y
una tabla en una hoja de
estilos. Prueba las
posibilidades que ves.
Propiedades de borde
Podemos ajustar cada borde
por separado
 border-style  border-top-width
 border-width  border-top-color
 border-color  border-top-style
 border  border-top
 border-left-width
 border-left-color
 border-left-style
 border-left
Borde: border-style
Tipo de línea del borde:
Línea del borde tipo 3D:
 None
 Groove
 Hidden
 Ridge
 dotted (punteado)
 inset
 dashed (a trazos)
 outset
 solid (continuo)
Puede tener entre uno y cuatro
 double (doble) valores de forma que el primero sería
h1 {border-style: solid dotted} para el borde superior, el siguiente
para el derecho, luego inferior y por
p {border-left-style: dashed} último el de la izquierda.

Es obligatorio poner esta propiedad si queremos que se muestre el borde


Borde: border-width
 Valores:
 Predefinido: thin, medium o thick
 Numérico
 Puede tener entre uno y cuatro valores de forma que el
primero sería para el borde superior, el siguiente para el
derecho, luego inferior y por último el de la izquierda.
p {border-width: 15px}
Div {border-top-width: thin}
H1 {border-right-width: 2pt}
Borde: border-color
 Color del borde
h1 {border-color: red}
p {border-left-color: blue}
 Por defecto hereda la propiedad color.
Borde: border
 Ponemos las propiedades del borde de una sola vez.
Tienen que seguir el orden siguiente: width, style y
color

p { border: 5px solid red;}


Bordes redondeados: border-radius

 Redondea las esquinas. Valores en px o %(cuanto


mayor valor, mayor redondeo). Se pueden dar entre
uno y cuatro valores que afectarán a las distintas
esquinas.

p {baclground-color: green;
border-radius: 10px 30px;}
Propiedades de caja
Modelo de caja de los
elementos HTML:
 Margen: espacio desde el
exterior hasta el borde.
 Borde: recuadro que limita
contenido y relleno.
 Relleno (padding): espacio
desde el contenido hasta el
borde.
Caja: width, height (sólo para
elementos tipo block)
 Indican las dimensiones
del elemento. Valores:
 Auto
 Numérico
 Porcentual respecto al
padre
img.normal {height:
auto}
img.big {height: 160px}
img.small {height: 30px}
Propiedades de margen y
relleno
 margin-top  padding-top
 margin-bottom  padding-bottom
 margin-left  padding-left
 margin-right  padding-right
 margin  padding
margin-top, margin-bottom,
margin-left, margin-right
Valores:
 Auto
 Numérico
 Porcentual respecto de la anchura del padre
h1 {margin-left: 3cm}
p {margin-top: 2cm}
strong {margin-left:1cm; margin-right: 1cm}
margin
Expresa el valor de todos los márgenes:
 Un valor: igual ancho para los 4 lados
 Dos valores: top-bottom right-left
 Cuatro valores: top right bottom left
p {margin: 2cm}
strong {margin: 1cm 0.6cm}
h1 {margin: 1cm 0.5cm 1cm 0.5cm}
Propiedades de lista
 Permiten configurar la apariencia de los elementos
lista
 list-style-type
 list-style-image
 list-style-position
 list-style
Lista: list-style-type
 Indica el tipo de marca a colocar delante de cada ítem
 Valores:
 None
 No numeradas: disc, circle, square
 Numeradas: decimal, lower-latin, upper-latin, lower-
roman, ...
ul.disc {list-style-type: disc}
ul.circle {list-style-type: circle}
ul.square {list-style-type: square}
ul.none {list-style-type: none}
Lista: list-style-image
 Especifica una imagen que se usará como marca en la
lista.
 Valores: none, url
ol{
list-style-image: url(arrow.gif);
list-style-type: circle
}
Lista: list-style-position
 Indica si se indenta la marca junto al texto o sólo el
texto
 Valores: inside, outside
ul.inside {list-style-position: inside}
ul.outside {list-style-position: outside}
Lista: list-style
 Indica de forma compacta las propiedades de una lista
ul{ list-style: disc outside url(arrow.gif)}
ol{list-style: decimal inside}
PSEUDOCLASES DE LOS
ENLACES (Y OTRAS ETIQUETAS)
Un enlace puede tener cuatro estados posibles que se
referencian con las siguientes pseudo-clases:
 a:link - enlace normal
 a:visited – enlace visitado
 a:hover – enlace cuando pongo el ratón encima
 a:active – enlace cuando hacemos click
Para referirse a las pseudoclases hay que poner el
nombre de la etiqueta, seguido de : y el nombre de
la pseudoclase
Obligatorio: hover solo puede ir después de link y
visited; y active solo puede ir después de hover
a:link {
color: red;
}

a:visited {
color: green;
}

a:hover {
color: hotpink;
}

a:active {
color: blue;
}
Clasificación de las etiquetas:
inline o block
Los elementos HTML pueden ser:
 De bloque (block): son elementos que generalmente
contienen a otros y que inician una nueva línea, por lo
que no pueden situarse en la misma horizontal sino
uno encima de otro. Son por ejemplo <p>, <div>,
<form>, <li>, <table>, <pre>, <h1>
 En línea (inline): se sitúan en una línea sin provocar
un salto, a menos que sobrepasen el ancho máximo.
Son, por ejemplo: <strong>, <em>, <a>, <img>… Estos
elementos no los márgenes superior e inferior y no se
les puede ajustar el ancho (width) ni el alto (height)
 Flotantes (floating): son elementos block o inline que
rompen el flujo normal de formato colocándose a
derecha e izquierda y obligando al resto de elementos a
acoplarse a ellos.
display
 Indica cómo mostrar un elemento: none, block ,
inline, inline-block
p {display: inline}
div {display: none}
strong{display: block}

La opción inline-block funciona como una mezcla de los


elementos block y los inline: nos permite situar a los elemento
como si fueran inline (uno a continuación de otro en la misma
línea) y además nos permiten ajustarles el ancho , alto y márgenes
verticales como si fueran elementos block).
float
Indica dónde se colocará
un elemento con respecto
al padre.
 Valores: none, right, left
div{ float:right;
width:120px;margin:0 0
15px 20px;
padding:15px;border:1px
solid black;text-align:
center;}
clear
Indica el lado donde se prohíben colocar elementos
flotantes
 Valores: right, left, both, none
img {
float:left;
clear:both;
}
Ejercicio 1. Diseña
Ejercicio 2 Quijote
Realizad el
diseño de la
página que se
muestra a la
derecha.
Pensad y
diseñad.
Luego, cuando
acabéis seguid
adelante
Ejercicio Quijote
 Paso 1: fijar estilo para la
capa contenedora de las
demás.
body { background-color:
#606060; ….etc
Ejercicio Quijote
 Paso 2: Definir el
contenedor general
.contenedor {
background-color: orange;
color: #606060;
border: #c0c0c0;
Etc….
}
Ejercicio Quijote
 Paso 2: fijar estilo para la
capa superior (cabecera)
header{
background-color: black;
color: white;
font-family: "Trebuchet MS",
Times, serif;
Etc….
}
Header h2 {
font-style: italic;
color: darkgray;
}
Ejercicio Quijote
 Paso 3: fijar estilo para la
capa lateral
.aside {
width: ????
padding: ???
float: left;
text-align: justify;
background-color: #e8e8e8;
border-right: 1px solid darkgray;
border-bottom: 1px solid darkgray;
}
Ejercicio Quijote
 Paso 4: fijar estilo para la
capa principal
section{
padding: ????;
margin-left: ???;
text-align: justify;
}
Ejercicio Quijote
 Paso 5: fijar estilo para la
capa inferior (pie)
footer{
clear: both;
background-color: black;
color: darkgray;
padding: ???;
text-align: center;
}
footer a {
color: darkgray;
}
Ejercicio Quijote
 Paso 6: estructura del
documento e inclusión
de imagen

También podría gustarte