Manual Css

Fundamentos CSS
¿ Qué es CSS ?
• CSS es el acronimo de Cascading Style Sheets (hojas de estilo en cascada)

• Define como sera desplegado un elemento HTML
• Permite trabajar en un documento externo el estilo para nuestra página
• La hoja de estilo externa es almacenada con la extensión .css
Sintaxis CSS
Un selector normalmente suele ser un elemento HTML

Una declaración esta compuesta por un atributo y se respectivo valor
Ademas de un elemento HTML un estilo puede ser declarado para un identificador (id) o una clase
(class).
• Identificador (id). Un selector id se utiliza para agregar estilo a un elemento en especifico, ya

que el id de un elemento debe ser unico en todo el documento. Cuando en un elemtento esta
definada la propiedad id, por ejemplo: id= “parrafo1”, la sintaxis sería:
#parrafo1
{
/*Declaración de estilo*/
}
• Clase (class). El selector de clase es usado para agregar estilo a un grupo de elemento. Un
elemento podra hacer uso de un selector de clase si en su atributo class le establece como valor
el nombre del selector clase.
.estilo_clase
{
/*Declaración de estilo*/
}
¿Como usar CSS?
Hay tres maneras de agregar CSS a una pagina web:

• Hoja de estilo externa
• Estilo declaración interna
• Estilo declaración en lines
Hoja de estilo externa
Puede crearse un archivo .css con las declaraciones de estilo para una página. Para hacer uso de una
hoja de estilo externa en una página utilizaremos la etiqueta <link />. La etiqueta link es declarada
dentro de la seccion de encabezado de un documento HTML.
<head>
<link rel= “stylesheet” type= “text/css” href= “ruta del documento .css” />
</head>
Estilo interno
Se puede declara estilo para una página de forma interna haciendo uso de la etiqueta <style> en la
sección de encabezado.
<head>
<style type= “text/css”>
... estilo
</style>
</head>
Estilo en linea
Un estilo en linea pierde funcionalidad, utilicelos con moderación. Para utilizar el estilo en linea use el
atributo style del elemento correspondiente.
<p style= “...estilo”>Este es un parrafo</p>
Comentarios en CSS
Un comentario es utilizada para explicar el codigo y facilitar su porterior modificación. Los

comentarios son ignorados por el navegador.
/* Este es un comentario en CSS */

CSS Background
Propiedad Descripción Valor CSS

background Establece todas las propiedades de fondo en Background-color 1
una sola declaración background-image
background-repeat
background-
attachment
background-position
inherit
background-attchment Establece si una imagen de fondo es fija o se Scroll 1
desplaza con la página fixed
inherit
background-color Establece el color de fondo de un elemento Color-rgb 1
color-hex
color-name
transparent
inherit
background-image Establece una imagen de fondo para un Url() 1
elemento nada
heredado
background-position Establece la posición de partida para un Left top 1
elemento de fondo left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos
heredado
background-repeat Establece si/como una imagen será repetida Repeat 1
repeat-x
repeat-y
no-repeat
heredado
CSS Text

color Establece el color para el texto Color-rgb 1
color-hex
color-name
direction Establece la dirección del texto Ltr 2
rtl
line-height Establece el interlineado para el texto Normal 1
number
length
%
letter-spacing Incremeneta o decrementa el espacio entre Normal 1
caracters length
text-align Alineación de texto en un elemento Left 1
right
center
justify
text-decoration Añade decoración al texto Ninguno 1
underline
overline
line-through
blink
text-indent Aplica sangria a la primera linea de un texto Length 1
en un elemento %
text-transform Modifica las letras en un elemento Ninguno 1
capitalize
uppercase
lowercase
vertical-align Establece la alineación vertical en un Baseline 1
elemento sub
super
top
text-top
middle
bottom
text-bottom
length
%
white-space Establece como se maneja el espacio en Normal 1
blanco en un elemento pre
nowrap
word-spacing Incrementa o decrementa el espacio en blanco Normal 1
entre palabras length
CSS Font

font Establece todas las propiedades de fuente en Font-style 1
una sola declaración font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
massage-box
small-caption
status-bar
heredado
font-family Establece familia fuente para el texto Family-name 1
generic-family
heredado
font-size Establece el tamaño de fuente para el texto Xx-small 1
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
heredado
font-style Especifica el estilo de la fuente para el texto Normal 1
italic
oblique
heredado
font-varinat Especifica si un texto debe de ser mostrado Normal 1
con un tipo de funte small-cpas small-caps
heredado
font-weight Especifica el remarcado de una fuente Normal 1
bold
bolder
lighter
100-900
heredado
CSS Link
Un enlace puede ser modificado por diferentes propiedades (ejemplo: color, font-family, background)
Un enlace puede ser modificado por varios estilos dependiendo en el estado en el que se encuentre. Los
cuatro estados de un enlace son:
a:link enlace sin visitar

a:visited enlace visitado
a:hover Movimento de raton sobre el enlace
a:active Enlace al momento de hacer clic
CSS List
Las propiedades CSS de listas permiten:

Establecer diferentes elementos de ordenacion para listas ordenadas
Establecer diferentes viñetas para listas desordenadas
Asignar una imagen como viñeta

list-style Establece todas las propiedades de lista en una List-style-type 1
sola declaración list-style-position
list-style-image
heredado
list-style-image Especifica una imagen como viñeta Url 1
nada
heredado
list-style-position Establece si las viñetas de lista deben aparecer Inside 1
dentro o fuera del flujo de contenido outside
heredado
list-style-type Establece el tipo de marcado para un item de Nada
lista disc
circle
square
decimal
decimal-leading-zero
armenian
georgian
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
lower-roman
upper-roman
CSS Tablas
Una tabla es un elemento compuesto por varias etiquetas: <tabla>, <td>, <th> y <tr>.
Una tabla puede ser modificada por las soguientes propiedades.
Bordes
Border-collapace
Ancho y alto
texto
Relleno (padding)
Color
CSS Modelo de caja (box model)
Todos los elementos HTML pueden ser vistos como cajas. El termino modelo de caja (box model) se
emplea cuando se habla de diseño y despliegue.
El modelo de caja es escencialmente todo elemento HTML esta envuelto por un contenedor, de modo
que los elementos HTML se despliegan como cajas en una pagina web.
Partes del modelo de caja:
Margin (margen): limpia un area alrededor del borde. El margen no tiene un color de fondo es
transparente.
Border (borde): El borde rodea al relleno y al contenido. El borde es afectado por el color de fondo del
elemento.
Padding (relleno): limpia un area alredor del contenido.
La configuración de las partes del modelo de caja afecta la altura y anchura real del elemento.
CSS Border

border Establece todas las propiedades de borde en Border-width 1
una sola declaración border-style
border-color
Border-bottom Establece todas las propiedades de borde Border-bottom-width 1
inferior en una sola declaracion border-bottom-style
border-bottom-color
border-color Establece el color para los cuatro bordes Color-name 1
hex-number
rgb-number
transparent
heredado
border-left Establece todas las propiedades de borde Border-left-width 1
izquierdo en una sola declaración border-left-style
border-left-color
border-right Establece todas las propiedades de borde Border-right-width 1
derecho en una sola declaración border-right-style
border-right-color
border-style Establece el estilo para los cuatro border Nada 1
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
heredado
border-top Establece todas las propiedades de borde Border-top-width 1
superior en una sola declaracion border-top-style
border-top-color
border-width Establece el ancho para los cuatro bordes Thin 1
medium
thick
length
heredado
Propiedad CSS: Outline

Un outline es una linea que de dibuja alrededor de los elemento despues del borde, esta fuera del
alcance del elemento.

outline Establece todas las propiedades outline en una Outline-color 2
sola declaración outline-style
outline-width
heredado
outline-color Establece el color para el outline Color-name 2
hex-number
rgb-number
reestablecer
heredado
outline-style Establece el estilo para el outline Nada 2
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
heredado
outline-width Estable el ancho para el outline Thin 2
medium
thick
length
heredado
CSS Margin

margin Establece los cuatro margenes en una sola Margin-top 1
declaración margin-right
margin-bottom
margin-left
margin-bottom Establece el margen inferior para un elemento Auto 1
length
%
margin-left Establecer el margen izquierdo Auto 1
length
%
margin-top Establece el margen superior Auto 1
length
%
margin-right Establece el margen derecho Auto 1
length
%
CSS Padding
Define el espacio entre el borde un elemento y su contenido.

padding Establece todas las propiedades de relleno en Padding-top 1
una sola declaracion padding-right
padding-bottom
padding-left
padding-bottom Establece el relleno inferior para un elemento Length 1
%
padding-left Establece el relleno izquierdo de un elemento Length 1
%
padding-top Establece el relleno superior de un elemento Length 1
%
padding-right Establece el relleno derecho Length 1
%
CSS Advanced
Agrupación de selectores
Cuando un mismo estilo es aplicable a varios selectores, es posible evitar la declaracion por separado
para cada selector haciendo uso de una agrupacion de selectores. Sintaxis:
selector1, selector, 2 ...selectorn

{
... estilo
}
Selectores anidados
Es posible aplicar un estilo para un selector dentro de otro selector.
Selector1 selector2
{
... estilo
}
CSS Dimension
Se refiere a las configuraciones de tamaño del elemento.

height Establece la altura para un elemento Auto 1
length
%
heredado
max-height Maxima altura 2
max-width Maxima anchura 2
min-height Altura minima 2
min-width Anchura minima 2
width Establece la anchura de un elemento Auto 1
length
%
heredado
CSS Display y Visibility
La propiedad display especifica si/como sera desplegado un elemento, y la propiedad visibility

especifica si un elemento podria ser visible o oculto.
Ocultar elemento:
display:none el elemento es ocultado y la página se despliga como si no existiera

visibility:hidden oculta el elemento pero su espacio sigue reservado
CSS Display
display:inline ocupa el ancho necesario y fuerza saltos de linea

display:block ocupa todo el ancho disponible, tiene un salto de linea antes y despues de el.
Es posible cambiar el despliegue de un elemento modificando su propiedad display.
CSS Positioning
La propiedad positioning permite colocar un elemento. Hay cuatro metodos de posicionamiento:
Posicionamiento estatico (static)
Los elementos HTML tienen posicionamiento estatico de manera predeterminada. Los elementos
estaticos siguen el flujo natural de la página.
Posicionamiento fijo (fixed)
Un elemento con posición fija se coloca con relación a la ventana del navegador. Este elemento se
mantiene fijo aun si la ventana se desplaza.
Posicionamiento relativo (relative)
Un elemento con posicionamiento relativo se coloca en una posicion relativa a su posicion normal. Un
elemento relativo se puede mover de su posicion original pero su espacio sigue reservado.
Posicionamiento absoluto (absolute)
Un elemento con posicion absoluta tiene una posicion relativa con respecto a un elemeto primario con
posicionamiento no estatico, si este elemento no se especifica el elemento contenedor es <html>.
Los elementos con posicionamiento absoluto son retirados del flujo normal de la página. El documento
y otros elementos ignoran al elemento absoluto. Esto puede provocar un superposicionamiento de
elementos.
Superposicionamiento de elementos
Cuando los elementos son posicionados fuera del flujo normal, ellos pueden cubrir otros elementos.
Para evitar la superposicion de elementos emplearemos la propiedad z-index, la cual permite
especificar el orden de apilamiento de los elementos.
Propiedades de posicionamiento

bottom Define el margen inferior como borde de Auto 2
posicionamiento length
%
heredado
clip Partes de un elemento con posicion absoluta Shape (forma) 2
auto
heredado
cursor Define el tipo de cursor que sera desplegado Url 2
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left Define el margen izquierdo como borde de Auto 2
%
heredado
overflow Especifica que sucede si el contenido de un Auto 2
elemento desborda la caja hidden
scroll
visible
heredado
position Especifica el tipo de posicionamiento de un Absolute 2
elemento fixed
relative
static
heredado
right Define el margen derecho como borde de Auto 2
%
heredado
top Define el margen superior como borde de Auto 2
%
heredado
z-index Establece el orden de apilamiento de un Numero 2
elemento auto
heredado
CSS Float
Un elemento flota horizontalmente, esto significa que un elemento unicamente puede flotar de derecha-
izquierda y no de arriba-abajo.
Los elementos despues del elemento flotante se colocan alredor de él. Los elementos antes del
elemento flotante no se ven afectados.
Si se usan varios elementos flotantes se colocan uno detras de otro mientras haya lugar.
Los elementos despues del elemente flotante fluyen aldedor del el. Para evitar esto utilice la propiedad
clear.
CSS Alineación horizontal
Un elemento con despliegue en bloque ocupa todo el ancho disponible y tiene un salto de linea antes y
despues de él.
En esta sección se mostrara como alinear horizontalmente un elemento con despliegue en bloque.
Alineación centrada utilizando usando la propiedad margin
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
Alineación de izquierda-derecha usando la propiedad position
.posicion_right
{
position:absolute;
right:0px;
width:300px;
}
Para obtener el mismo despliegue en todos los navegadores utilice la siguiente clase:
body
{
margin:0;
padding:0;
}
.contenedor
{
position:relative;
width:100%
}
.izquierda
{
position:absolute;
right:0px;
width:300px;
}
Alineacion izquierda-derecha usando float
.derecha
{
float:right;
width:300px;
}
Compatibilidad de navegadores
body
{
margin:0;
padding:0;
}
.derecha
{float:right; windth:300px;}
Pseudo-classes
Una pseudo-clase es usada para añadir efectos especiales a un elemento como si fuera un selector.
Pseudo-clase Descripción CSS

:active Añade estilo al elemento seleccionado 1
:first-child Agrega estilo al primer hijo de un elemento 2
:focus Añade estilo a un elemento que ha obtenido el foco mediante el teclado 2
:hover Añade estilo a un elemento cuando el raton pasa sobre el 1
:lang Añade estilo a un elemento que tenga especificado el atributo lang 2
:link Añade estilo a un elemento sin visitar 1
:visited Añade estilo a un elemento seleccionado 1
Pseudo-elemento
Un pseudo-elemento añade efectos especiales a elementos, acompaña a un selector.
Pseudo-clase Descripción CSS

:after Añade contenido despues del elmento 2
:before Añade contenido depues del elementoi 2
:first-letter Añade estilo al primer caracter de un texto 1
:first-line Añade estilo a la primera linea de un texto 1

Manual Css

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Manual Css

Загружено:

Авторское право:

Доступные форматы

Fundamentos CSS

• CSS es el acronimo de Cascading Style Sheets (hojas de estilo en cascada)

Un selector normalmente suele ser un elemento HTML

• Identificador (id). Un selector id se utiliza para agregar estilo a un elemento en especifico, ya

Hay tres maneras de agregar CSS a una pagina web:

Hoja de estilo externa

<p style= “...estilo”>Este es un parrafo</p>

Un comentario es utilizada para explicar el codigo y facilitar su porterior modificación. Los

/* Este es un comentario en CSS */

Propiedad Descripción Valor CSS

Propiedad Descripción Valor CSS

Propiedad Descripción Valor CSS

a:link enlace sin visitar

Las propiedades CSS de listas permiten:

Propiedad Descripción Valor CSS

Una tabla puede ser modificada por las soguientes propiedades.

CSS Modelo de caja (box model)

Partes del modelo de caja:

Propiedad Descripción Valor CSS

Propiedad CSS: Outline

Propiedad Descripción Valor CSS

Propiedad Descripción Valor CSS

Define el espacio entre el borde un elemento y su contenido.

Propiedad Descripción Valor CSS

selector1, selector, 2 ...selectorn

Es posible aplicar un estilo para un selector dentro de otro selector.

Se refiere a las configuraciones de tamaño del elemento.

Propiedad Descripción Valor CSS

La propiedad display especifica si/como sera desplegado un elemento, y la propiedad visibility

display:none el elemento es ocultado y la página se despliga como si no existiera

display:inline ocupa el ancho necesario y fuerza saltos de linea

Es posible cambiar el despliegue de un elemento modificando su propiedad display.

La propiedad positioning permite colocar un elemento. Hay cuatro metodos de posicionamiento:

Posicionamiento estatico (static)

Posicionamiento fijo (fixed)

Posicionamiento relativo (relative)

Posicionamiento absoluto (absolute)

Propiedad Descripción Valor CSS

CSS Alineación horizontal

Alineación centrada utilizando usando la propiedad margin

Alineacion izquierda-derecha usando float

Pseudo-clase Descripción CSS

Un pseudo-elemento añade efectos especiales a elementos, acompaña a un selector.

Pseudo-clase Descripción CSS

Вам также может понравиться