_____________________________________________________________________________________
*****************************************************************************************************************
CURSO DISEÑO WEB Y MULTIMEDIA // BLOQUE CSS // VICENTE BENEITO URBANO 30/06/2012
*****************************************************************************************************************
*****************************************************************************************************************
INTRODUCCIÓN A CSS
Validar documento css:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD">
Insertar comentarios:
/*Comentario
múltiple*/
Cargar hoja de estilos css
<HEAD>
<link rel="stylesheet" href="NOMBRE.css" type="text/css">
</HEAD>
Css ejemplo
p{
color:yellow;
}
h1{
color:red;
}
Selectores (como las etiquetas en HTML)
Una regla de css está formada por una parte llamada SELECTOR
Y por otra llamada DECLARACIÓN
La DECLARACIÓN indica que hay que hacer y el selector indica a quien
Hay que hacérselo
Por tanto, los selectores son imprescindibles para aplicar de forma
Correcta los estilos CSS en una página
Para aplicar el mismo estilo a distintos selectores se separa con
Una coma ejemplo: #selector1;#selector2{Propiedades:valor}
ESQUEMA:
-----------------------------------------------------------------------
h1 { color : black ; }
|_______| |________| |_________|
Selector propiedad valor
|___________________|
DECLARACIÓN
|____________________________|
REGLA CSS
----------------------------------------------------------------------
Tipos:
1 - Universal *{}
2 - Tipo o etiqueta p{}
3- Descendentes
4 - clase
5 - ID (selector único)
1- SELECTOR UNIVERSAL:
Se utiliza mucho cuando queremos que todos los elementos estén alineados
*{
margin:0; (distancia de la "imagen")
padding:0; (distancia del texto dentro de la imagen)
}
-------------------------------------------------------------------------
margin se divide en 4 propiedades:margin-top
margin-left
margin-rigth
margin-bottom
2- SELECTOR ETIQUETA O TIPO
Elementos que coinciden con las etiquetas HTML:
h1{
color:red;
}
3- SELECTOR DESCENDIENTE - SPAN -
p span { color:red;}
-------------------------------
<p>
<span> texto1</span>
</p>
4- SELECTOR DE CLASE - CLASS - (se puede repetir en html)
---------------------
HTML | CSS
--------- | ----------
class | .
-------- | ----------
id | #
-------- | ---------
-------------------------------------------------------------------
<p class="nombre"> HTML
.nombre{atributos} CSS
h1.nombre{atributos}
5- SELECTOR DE ID ( no se puede repetir en HTML)
ENFOCADO PARA LAS CAPAS
HTML CSS
id <------------- > #
TAMAÑOS EN CSS
Tamaños en CSS
- absolutas
- Relativas (son las que más se usan)
ABSOLUTAS
-----------------------------
cm (centímetros)
mm (milímetros)
pt (puntos 1 punto = 1 pulgada 0.35 milímetros)
pc (picas 1 pica = a 12 puntos)
in (inches o pulgadas 1 pulgada 2.54 centímetros)
RELATIVAS
-----------------------------
unidades totalmente flexibles y lo usaremos siempre para que se ajuste
la pantalla
- em (la anchura de la letra que tengamos en nuestro navegador por defecto)
- ex (la altura de la letra que tengamos en nuestro navegador por defecto)
- px (la relación de pulgadas que tenga nuestro dispositivo o monitor)
EM y EX
12 puntos = 1 em
1 ex = 0.5 em
---------------------------------------------------------
altura EX | LETRA
_____
em anchura
---------------------------------------------------------
Ejemplo:
90% del navegador:
body{
font-size:0.9em;}
}
también se puede representar con .9em eliminando así el 0, las dos formas son
correctas
MODELOS DE CAJA (CARACTERÍSTICA MÁS IMPORTANTE DE CSS)
- <div></div>
* dos tipos de cajas importantes:
- Block (reserva el contenido)
- inline (las etiquetas las coloca de forma lineal)
PROPIEDADES EN CSS
* dos tipos de cajas importantes:
- Block (reserva el contenido)
- inline (las etiquetas las coloca de forma lineal)
PROPIEDADES EN CSS
PROPIEDADES DE LA FUENTE
- color:COLOR; (COLOR, no se hereda en el enlace)
- font-family:NOMBRETIPOGRAFIA; (TIPOGRAFÍAS)
- font-style:ITALIC; (Cursiva)
- font-weight:NUMÉRICO/PALABRAS; (Grosor de la letra)(numérica: 100 al 900)
(Palabras: normal, bold, bolder, lighter)
- font-variant:normal/small-caps (letra normal o mayúscula)
- font-size:TAMAÑO;
---------------------------------------------------------------
ABSOLUTO EM % PX PT
xx-small .9em 50% 9px 9pt
----------------------------------------------------------------
los enlaces no HEREDAN EL COLOR es decir, los enlaces tienen muchos estados
y no lo heredan
Enlaces y estados:
a: hover
a: visited
a: link
los enlaces no HEREDAN EL COLOR es decir, los enlaces tienen muchos estados
y no lo heredan
Enlaces y estados:
a: hover
a: visited
a: link
PROPIEDADES DEL TEXTO
- text-indent:100px (Sangría de la primera línea del párrafo, podemos usar la medida que queramos)
- text-align:LEFT/RIGHT/CENTER/JUSTIFY (alineación)
- text-decoration:UNDERLINE/OVERLINE/LINE-THROUGH/BLINK/NONE
UNDERLINE (SUBRAYADO)
OVERLINE (LÍNEA EN LA PARTE SUPERIOR DEL TEXTO)
LINE-THROUGH (TACHADO DE TEXTO)
BLINK (TEXTO PARPADEANTE SOLO EN FIREFOX)
NONE (NINGUNA SE PUEDE USAR PARA QUITAR SUBRAYADO DE ENLACE)
- letter-spacing:TAMAÑO (Separación entre letras. Numérico entre -infinito a + infinito)
- word-spacing:TAMAÑO (separación entre palabras)
- text-transform:LOWERCASE/UPPERCASE/CAPITALIZE/NONE
LOWERCASE (TODAS LAS LETRAS MINÚSCULAS)
UPPERCASE (TODAS LAS LETRAS MAYÚSCULAS)
CAPITALIZE (MUESTRA LA PRIMERA PALABRA EN MAYÚSCULAS)
NONE (TAL y COMO SE ESCRIBIÓ)
- line-height:TAMAÑO (distancia entre líneas de texto)
PROPIEDADES DE LA CAJA O CAPA O BLOQUE <div></div>
- width (ancho del div, si lo que insertamos dentro supera el ancho
se autodimensiona)
- max-width (Máximo de ancho, se usa poco y algunos navegadores
no la soportan)
- min-width (Mínimo de ancho, se usa poco y algunos navegadores
no la soportan)
- height (altura del div si no se pone la altura se autodimensiona)
- max-width (Máximo de altura, se usa poco y algunos navegadores
no la soportan)
- min-width (Mínimo de altura, se usa poco y algunos navegadores
no la soportan)
- Display:none/inline/block/inline-block/list-item (no aparece, en línea/seguido o en
bloque o transformar lineal a bloque o
convertir un grupo en lista <ul>)
- Margin* (margen posicional de la capa)
- Padding* (margen de la capa en sí)
- Border* (Borde de la caja)
--------------------------------------------------
*ASPECTOS DE LA CAJA EN CSS:
--------------------------------------------------
*MARGIN Y SUS FORMAS DE ASIGNAR:
1- Margin-TOP/BOTTOM/LEFT/RIGHT:TAMAÑO (valores positivos o negativos)
2- Margin:TAMAÑO (El margen al rededor, engloba los 4 lados)
3- Margin:10px 20px; (horizontal y vertical)
4- Margin:5px 10px 15px 20px; (color las agujas del reloj ARRIBA DERECHA ABAJO IZQUIERDA)
---------------------------------------------------------------------------------------
*PADDING Y SUS FORMAS DE ASIGNAR:
1- Padding-TOP/BOTTOM/LEFT/RIGHT:TAMAÑO (valores positivos o negativos)
2- Padding:TAMAÑO (El margen al rededor, engloba los 4 lados)
3- Padding:10px 20px; (horizontal y vertical)
4- Padding:5px 10px 15px 20px; (las agujas del reloj ARRIBA DERECHA ABAJO
IZQUIERDA)
IZQUIERDA)
----------------------------------------------------------------------------------------
*BORDES Y SUS FORMAS DE ASIGNAR.
1- Border:width/style/color
2- Border-TOP/BOTTOM/LEFT/RIGHT:width/style/color (valores positivos o negativos)
WIDTH: (tres tipos de estilos)
THIN (fino)
MEDIUM (Mediano)
THICK (Grueso)
STYLE:
none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
COLOR:
#000000
red
3- border-left:
border-left-color:
border-left-style:
border-left-width:
border-right:
border-right-color:
border-right-style:
border-right-width:
border-top:
border-top-color:
border-top-style:
border-top-width:
border-bottom:
border-bottom-color:
border-bottom-style:
border-bottom-width:
PROPIEDADES DE POSICIONAMIENTO
- Top
(SOLO HACE FALTA INDICAR O TOP O BOTTOM PERO LOS DOS NO)
- BOTTOM
- Right
(SOLO HACE FALTA INDICAR O RIGHT O LEFT PERO LOS DOS NO)
- left
- Z-index (PROFUNDIDAD DE LOS ELEMENTOS #valor{z-index:1)#valor{z-index:2)
ELEMENTOS FLOTANTES:
-------------------------------
- Float
- Overflow:visible/hidden/scroll/auto;
VALORES:
-visible (visible)
-hidden (esconden el contenido que no tenga un width o height)
-scroll (aparecen la barra de desplazamiento)
-auto (navegador decide)
----------------------
- overflow-x:hidden (Modo de quitar la barra de desplazamiento en x)
- overflow-y:visible
----------------------
- overflow-y:hidden (Modo de quitar la barra de desplazamiento en y)
- overflow-x:visible
----------------------
- Position:static/relative/absolute/fixed/inherit
No hay comentarios:
Publicar un comentario