Beruflich Dokumente
Kultur Dokumente
---------------------------------------------------------------------------------------------------------<p>
Esto es un parrafo en varias palabras <SPAN style=color:green>
en color verde </SPAN> en color verde resulta muy facil.
</p>
-----------------------------------------------------------------------------------------------------------
-----------------------------------------------------------------------------------------------------------<p style=font-family:Arial,Helvetica>Hola</p>
-----------------------------------------------------------------------------------------------------------
<div style=atributo:valor>
<etiquetaHTML> texto 1 </etiquetaHTML>
<etiquetaHTML> texto 2 </etiquetaHTML>
..
<etiquetaHTML> texto n </etiquetaHTML>
</div>
--------------------------------------------------------------------------------------------<div style=color:#000099;font-weight:bold>
<h3> Estas etiquetas van en azul </h3>
<p>
Seguimos dentro del DIV ,luego permanecen los estilos
</p>
</div>
------------------------------------------------------------------------------------------------4.En una pagina HTML.
Se usa la etiqueta <style> en la cabecera (head) del documento.El codigo escrito afecta a
todo el codigo HTML
sintaxis
<style type=text/css>
codigo CSS
</style>
-------------------------------------------------------------------------------------------------------<style type=text/css>
p{
color:red;
}
</style>
------------------------------------------------------------------------------------------------------En navegadores antiguos sin soporte CSS se ignorara la etiqueta style pero no el contenido
de esta, que sera considerado un texto normal y se mostrara al principio de la pagina.
Para evitar este efecto en navegadores antiguos y hacer que se ignore el codigo CSS se
colocara el texto CSS entre comentarios.
<style type=text/css>
<!
etiquetaHTML
{
codigoCSS
}
-->
</style>
Los navegadores modernos ignoraran el comentario y los navegadores viejos si le
haran caso y se saltaran el codigo.
5.Estilo definido para todo un sitio WEB
Creamos un archivo donde solo se colocan las declaraciones de estilos
las paginas del sitio con ese archivo
y enlazando todas
El archivo de estilos debe tener extension .css y solo contendra codigo CSS.Para que una
pagina dada utilice los estilos definidos en le archivo de estilos incluimos el siguiente codigo en la
cabecera (<head>) de la pagina.
<link href=ruta rel=stylesheet type=text/css>
Otra forma de incluir un archivo externo con estilos es usando la etiqueta <style> con la
etiqueta @import . Tambien debe incluirse en el 'head'
<style type=text/css>
@import URL '/path/estilos.css'
</style>
(Observar que se usan comilla simples para el path)
Esta ultima posibilidad no se puede emplear con Netscape Navigator 4.x.
3.REGLAS DE ESTILOS
Una regla de estilos son las declaraciones de los formatos que aplicamos a los elementos
html.
Una regla de estilo tiene dos componentes.
........................................................................................................................................................
etiquetaHTML {propiedad:valor;}
.nombreClase {propiedad:valor ; } (observar el '.' antes de 'nombreClase' )
#nombreAtributoID { propiedad:valor } (observar el '#' antes del nombre del 'id'
4.TIPOS DE SELECTORES
Existe cinco tipos de selectores o criterios de seleccin para elegir los elementos de una regla.
1. Selector por tipo o nombre del elemento.
2. Selector por contexto del elemento
3. Selector por clase o identificdor del elemento.
4. Selector por pseudo-clase del elemento.
5. Selector por los atributos del elemento.
6. Selector por pseudo-elementos.
-------------------------------------------------------------------------------------------------------------------Sintaxis CSS
div p{color:#00FF00;}
|
|
|
<div>
<h1><p> Esto es un parrafo </p> </h1>
</div>
II. Padre
El padre es el elemento que contiene de forma directa al que se desea formatear.
EtiquetaPadre > etiquetaHijo { propiedad:valor ; }
|
div > p {color:red;} |
|
III.Hermano
Hermano es el elemento que precede directamente (adyacente) , dentro del mismo
elemento padre , al que se desea formatear.
Usamos el simbolo (+)
EtiquetaHermano + EtiquetaHTML { propiedad:valor;}
-----------------------------------------------------------------------------------------------div + p {color:red; }
------------------------------------------------------------------------------------------------3.Selector por clase o identificador.
Permite seleccionar todos los elementos que pertenecen a dicha clase o id. (es el metodo las
utilizado)
Cuando seleccionamos por clase usamos ' .'
Cuando seleccionamos por id usamos '#'
a) Seleccion por id
etiquetaHTML#nombreId { propiedad:valor ; }
Si se omite el nombre del elemento ( la etiqueta html ) selecciona a todos los que
pertenecen a esa clase o id (los operadores '#' o '.' deciden si por por clase o id )
Selector de identificador
p#uno{color:red;}
|
|
|
Selector de clase
p.dos {color:red;}
----------------------------------------------------------------------------------------------------------------------
Pseudo-clase
Significado
:link
:visited
Vinculos ya visitados
:hover
:active
:focus
etiquetaHTML[atributo]{codigoCSS;}
------------------------------------------------------------------------------------------------Ejemplo: td[fgcolor] {color:#003333;} --->Le aplica el formato a todas las celdas de una
tabla tiene establecido el atributo fgcolor
-----------------------------------------------------------------------------------------------------
6.Selector de pseudo-elementos
Son partes de elementos,HTML no les reconoce identidad propia y por tango no pueden ser
seleccionados por HTML,pero CSS permite identificarlas y formatearmas de manera distinta al
resto de elementos.(por ejemplo la primera letra o la primera linea de cada parrafo)
Pseudo-elemento
Significado
:first-letter
:first-line
:before
El elemento anterior
:after
El elemento posterior
Agrupacin de selectores
Se aplica cuando se desea las mismas reglas de estilo a ms de un elemento.Para ello se
indican los selectores separados por una coma (,).
etiquetaHtml_1, etiquetaHTML_2 { codigo CSS;}
Si combinamos los tipos de selectores anteriores podemos obtener una seleccin las fina
---------------------------------------------------------------------------------------------------------Ejemplo:
Seleccionamos los elementos p que esten dentro de elementos div, que pertenezcan a la clase
portada y que tengan el atributo id
5.MODELO DE CAJAS
El modelo de cajas hace que todos los elements de las paginas se representen mediante cajas
rectangulares.
Cada vez que se inserta una etiqueta HTML se crea una nueva caja rectangular que encierra
los contenidos de ese elemento.
CSS permite modificar todas las caractericticas de una caja.Cada caja esta formada por 6
partes (este el orden desde el punto de vista del usuario).
1.
2.
3.
4.
2).U.Absolutas
Estan completamente definidas y su valor no depene de otro valor de referencia
Las unidades absolutas son:
(2) Porcentaje : Cada propiedad que perrmite indicar como valor un porcentaje , define el
valor al que hace referencia ese porcentaje .
- Cuando se utiliza para definir el tamao de letra de los elementos es equivalente a la
unidad em (100% = 1em)
- Cuando se utiliza para establecer la anchura de un elemento su referencia es la anchura del
elemento contenedor
(3) auto: Es el valor que se utiliza si no se establece de forma explicita un valor para esta
propiedad.
(4) inherit:
--------------------------------------------------------------------------------------------------------------Ejemplo:
------------------------------------------------------------------------------------------------------------B ) Altura
Define la altura de los elementos.Se define con higth y toma los mismos valores que la anchra.
2.Margenes y Rellenos
A) Margenes
Permite controlar los margenes horizontales y verticales .
Tenemos las propiedades :margin-top,margin-left,margin-botton,margin-right.
Se aplica a todos los elementos, salvo margin-top y margin-botton que solo se aplican a
elementos de bloque y a las imagenes.El valor inicial es 0
------------------------------------------------------------------------------------------------------------------Ejemplo:
B) Relleno
C ) Borders
Podemos modificar el aspecto de cada uno de los cuatro bordes de la caja.Para cada borde
se puede establecer su anchura o grosor , su color y su estilo, por lo que en total CSS define un total
de 20 propiedades.
Definirelos la anchura o grosor el color y el estilo.
1.-Anchura
La anchura de los bordes se controla con las propiedades :
1.
2.
3.
4.
La anchura se indica mediante una unidad de medida absoluta o relativa o mediante las
palabras :
I. thin---->borde delgado
II. medium--->borde normal
III. thick---->borde ancho.
La medida mas usual es el pixel que permiten un mayor control sobre el grosor (las
palabras claves casi no se emplean)
Definida una caja con div , la aplicacin de la regla seria .
Div{
border-top-width:valor 1;
border-right-width:valor 2;
border-botton-width:valor 3;
border-left-width:valor 4;
}
Este es el borde que tendria la caja pero dentro de ella hay elementos html que crean tambien sus
cajas y puede tener sus bordes .
Podemos establecer de forma simultanea los cuatro bordes con la propiedad :border-width que
puede recibir de 1 a 4 valores con el signifiado habitual.
2.Color
Se controla con ls propiedades siguientes .
1.
2.
3.
4.
Border-top-color
border-right-color
border-botton-color
border-left-color
Puede recibir como valores
----------------------------------------------------------------------------------------------------
NOTA 1 :Aqui tienes algunas palabras claves para establecer los colores.
NOTA 2: Aqui tienes informacin sobre las distintas posibilidades de uso de RGB
Hay una propiedad shorthand llamada border-color para establecer de forma simultanea el color
de los cuatro bordes.
3.Estilo
Podemos establecer el estilo de cada borde con:
1.
2.
3.
4.
border-top-style
border-right-style
border-botton-style
border-left-style
Para establecer de forma simultanea los estilos de todos los bordes usamos la
propiedad:border-style
3.1.-Propiedad para establecer todos los atributos de cada borde de forma simultanea
CSS define una serie de propiedades que permiten establecer todos los atributos de los
bordes de forma simultanea
Se incluye una propiedad 'shorthand' para cada borde y una global.
border-top
border-botton
-border-right
-border-left
Tambien tenemos una propiedad para establecer todos los atributos de todos los bordes
de forma directa.
Propiedad: border
Recibe los valores :unidad de medida, color-borde .estilo-borde, inherit.
4.Fondos
Es el fondo de la caja del elemento,puede ser un color de fondo o una imagen.
Para establecer un color o imagen de fondo en la pagina entera se debe establecer un fondo
al elemento <body>
Hay 5 propiedades para establecer el fondo de cada elemento.
1. Background-color:Permite mostrar un color de fondo solido en la caja de un elemento.
2. Background-image:Permite mostrar una imagen como fondo:Toma los valores url|none|
inherit.Se aplica a todos los elementos.
Es conveniente crear una carpeta de imagenes que se encuentre en el mismo directorio
que los archivos CSS con todas las imagenes utilizadas en el diseo de la pagina .De esta
forma separamos las imagenes usadas en el diseo CSS el resto de imagenes del sitio.
Si la imagen es mas pequea que el elemento CSS se repite horizontal y verticalemente.
3. Para controlar la repeticion de las imagenes de fondo tenemos la propiedad
background-repeat
Toma los valores:
1. repeat---> La imagen debe repetir en todas las direcciones.Comportamiento por defecto.
2. no-repeat-->muestra una sola vez la imagen.
3. Repeat-x ---> se repite solo horizontalmente.
4. Repeat-y---> verticalmente.
4.- Para controlar la posicion de la imagen en el fondo tenemos
background-position
Permite indicar la distancia que se desplaza la imagen de su posicion original situada en la
esquina superior izquierda.
5 .Para controlar que el fondo permanezca fijo cuando la ventana del navegador se desplanza
mediante las barras de scroll usamos
background-attachment
Toma los valores :scroll | fixed .No es aconsejable porque algunos navegadores no la soportan.
Tenemos una propiedad para indicar todas las propiedades de los colores e imagenes de
fondo de forma directa.Se denomina background
Toma los valores
background-color
background-image
background-repeat
background-attachment
background-position
El orden es indiferente pero suele ser :color,url de imagen, repeticion y posicion,
6.POSICIONAMIENTO
Tipos de posicionamiento:normal,relativo,absoluto,fijo y flotante.
Tipos de elementos:elementos en linea y elementos en bloque.
a) Elementos en bloque:Empiezan en una nueva linea y ocupan todo el espacio hasta el final
de la linea .
ELEMENTO EN BLOQUE
ELEMENTO EN BLOQUE
6.1.-Tipos de posicionamiento
1. normal o estatico (static) ---> Por defecto.
2. Relativo ---> Lo posicionamos segn el normal y luego lo bajamos.
3. Absoluto ---> La posicion se establece de forma absoluta y el resto de elementos de la
pagima ignoran la nueva posicion.
4. Fijo ---> Convierte una caja en inamovible
5. flotante ----> Las capas se desplazan todo lo posible a la izquierda o derecha .
El desplazamiento se especifica con la propiedad : position que toma los valores :
a ) Posicionamiento normal.
b ) Posicionamiento relativo
c)Posicionamiento absoluto
d ) Posicionamiento fijo
e ) Posicionamiento flotante .
Desplaza las cajas todo los posible a la derecha o la izquierda.
La propiedad que permite este desplazamiento es float
Toma los valores left , right,none
Si establezo left se desplaza al punto mas a la izquieda de la linea
Si establezo right se desplaza al punto mas la derecha de la liena
none elimina el posionamiento flotante.
Uno de sus principales usos es colocar imagenes alrededor de los cuales fluye texto
img {
float:<valor>;
}
Ejemplo
div.posicionamiento {
position:absolute;
top: 200px
left :0px;
margin:20px;
padding:10px;
border:5px solid #ccc;
background:#666;
width:150px
}
------------------------------------------------------------------------------------------------------7.TEXTO
Ademas de las relativas a la tipografia del texto CSS define tras que determina la apariencia
del texto en su conjunto.
Estas porpiedadess permiten controlar :la alineacion,el interlineado,separacion entre palabras
,...
1. Alineacion del texto
Se emplea la propiedad . Text-align
Toma los valores :left| right | left |center | justify
Valor por defecto left..Tambien se aliean las imagenes.
2.Interlineado
Se emplea la propiedad text-align
Permite controlar la altura ocupada por cada linea de texto
Toma los valores :normal | numero | unidad de medida | porcentaje
3.Decoracion
Se emplea la propiedad: text-decoration
Toma los valores :none | underline | overline | line-through | blink )
5.Alineacion vertical
Usamos la propiedad vertical-align
Toma los valores :baseline |sub | super | top | text- top | middle | botom| porcentaje | unidad
de medida
6.Tabulacin
Usamos la propiedad text-indent.
Toma una unidad de medida o un porcentaje.
Paso 0:Crear una carpeta con los recursos a emplear como imagenes ,
videos.
Paso 1:Crear una/s web que hara/n uso de una pagina CSS llamada
estilo.css (puedes emplear cualquier otro nombre).
<head>
<title> --- </title>
<link rel = stylesheet
type=text/css href=estilo.css>
</head>
Paso 2:Declara ciertas caractericticas en el <body> que deben
repetirse en toda la pagina (estas propiedades se establecen en el
archivo CSS ), por ejemplo
1.Imagen de fondo que se repetira por toda la pagina en un
mosaico
background:<ruta de la imagen > repeat
2.Fijamos la fuente, el color y la alineacion
font:<atributos>;
color:<atributos>;
text-align:<atributos>
3.Definimos los margenes
margin: valor1px valor2px valor3px valor4px;