07. Usando CSS3

Usando CSS3
Danae Aguilar Guzmán
MCT, MS, MCTS, MCP
danaeaguilar@gmail.com

Definir y aplicar un estilo
Comentarios
body {
background-color: white;
color: gray;
}
/* Este es el estilo
para el elemento body*/
body {
background-color: white; /* El valor rgb es #ffffff */
color: gray; /* Este es el color de la fuente */
}

Creación de un estilo en línea
Creación de una hoja de estilos externa
<body style='background-color: white; color: gray;'>
</body>
<head>
<title></title>
<link rel='stylesheet' type='text/css'
href='Content/default.css' />
</head>

Tipos Media
Usando media para especificar el dispositivo de
destino
@media screen {
p {
font-family: verdana,sans-serif; font-size: 14px;
}
}
@media print {
p {
font-family: times,serif; font-size: 10px;
}
}
@media screen,print {
p {
font-weight: bold;
}
}

Tipos Media
Otros Media Types
all
aural
braille
embossed
handheld
print
projection
screen
tty
tv

Tipos Media
Importando estilos externos y especificando el
media Type
href='Content/screen.css' media='screen' />
href='Content/printer.css' media='print' />

Importando hojas de estilo
Hojas de estilo importadas desde otras hojas
de estilo
@import url('/Content/header.css');
@import url('/Content/menu.css');
@import url('/Content/sidebar.css');
@import url('/Content/mainContent.css');
@import url('/Content/footer.css');
body {
color: gray;
}

Usando Tipos de Fuentes
Usando @font-face para importar fuentes
@font-face {
font-family: myFont;
src: url('Fancy_Light.ttf'),
url('Fancy_Light.eot'); /* IE9 */
}

Selectores
Selectores de elementos
Selectores por id
button {
color: gray;
}
#botonGuardar {
color: gray;
}

Selectores
Selectores por clase
Selector universal
.miClase {
color: gray;
}
* {
color: gray;
}

Selectores
Seleccionando descendentes
Seleccionando hijos directos:
li a {
text-decoration: none;
}
li > a {
text-decoration: none;
}

Selectores Pseudo Clases
Selectores pseudo-clases
 :link a:link
 :visited a:visited
 :active a:active
 :hover a:hover
 :focus input:focus
 :checked input[type=’checkbox’]:checked
 :lang(language) p:lang(en)
 :not div:not(“#mainContainer”)
 :nth-child(formula) li:nthchild(3), li:nthchild(10n + 3),
se peude usar odd y even por ejemplo li:nth-child(odd).
 :nth-last-child(n) li:nth-last-child(3)
 :only-child
 :only-of-type
 :first-of-type

Selectores Pseudo Elemento
Selectores pseudo-elemento
::first-line p::first-line
::first-letter p::first-letter
::before p::before{ content: “Note: “; color:
red;}
::after p::after{ content: “listo!”; color: red;}

Selectores
Agrupando selectores
Seleccionando elementos subsecuentes:
button, p {
}
div + h1 {
background-color: yellow;
}

Selectores
Seleccionando elementos subsecuentes:
Selectores por atributos
a[title]:hover:after {
content: " (" attr(href) ")";
}
div ~ h1 {
}

Selectores
Seleccionando por el valor de los atributos:
*
Contiene
^
Empieza con
$
Termina con
a[href='http://www.google.com']:hover {
background-color: greenyellow;
}

Colores
Rojo #ff0000
Verde #00ff00
Azul #0000ff
Usando la función rgb
 Valores de 0 a 255, o de 0% a 100%
 Si es menor a 0 sera 0, si es mayor al
máximo, sera el máximo
h1 { background-color: rgb(255,0,0); }
h1 { background-color: rgb(-100,500,0); } /* 0,255,0 */
h1 { background-color: rgb(20%,150%,0%); } /* 20%,100%,0% */

Colores
Usando transparencia
0 – transparente
1 - opaco
Usando la funcion argb
 Agrega la propiedad alpha que representa la
opacidad
#miDiv {
background-color: rgba(0, 0, 255, 0.5);
}
#principal {
opacity: .5;
}

CSS box
 Define los espacios alrededor de los boxes
en el documento

CSS box
 Asignando valores a border, padding,
margin.
p {
border: 10px;
padding: 25px;
margin: 15px;
border-style: solid;
border-color: green;
}

CSS box
 Se puede asignar para cada lado por
separado.
p {
border-bottom: 10px;
border-right: 5px;
border-left: 1px;
border-top: 0px;
padding: 25px;
margin: 15px;
border-style: solid;
border-color: green;
}

CSS box
 Se puede asignar para cada lado por
separado, en una sola asignación.
 El orden será:
 top right bottom left
p {
padding: 1px 2px 8px 4px ;
}

Posicionando elementos <div>
 La posición de los divs se puede especificar
con la propiedad position
Puede ser:
 static
 relative
 absolute
 fixed

Posición static
 Es el valor por defecto. Puede servir para
limpiar alguna otra posición
Posición relative
La posición relativa a su posición actual, se
especifica con top, y left
#div2 {
background-color: cyan;
position: relative;
top: 15px;
left: 30px;
}

Posición absolute
 La posición absoluta toma como referencia
las coordenadas del padre con posiciones no
static.
 Si todos los padres tienen posiciones static,
entonces toma la ventana del navegador.
 Se especifica con top, left, bottom, o right
#div2 {
background-color: cyan;
position: absolute;
top: 15px;
left: 30px;
}

Posición fixed
 Similar a la posición absoluta pero fixed
siempre se basa en el navegador.
#div5 {
background-color: lightblue;
position: fixed;
top: 5px;
left: 5px;
}

Usando la propiedad float
Los elementos pueden flotar solo
horizontalmente.
#div3 {
background-color: lightpink;
float: left;
width: 32%;
}

Usando la propiedad clear
Pondrá el elemento después de los elementos
flotantes.
#div6 {
background-color: lightgray;
clear: both;
}

Centrando un div
Le damos un ancho, y las propiedades
margin-left y margin-right en auto.
#div1 {
width: 600px;
margin-left: auto;
margin-right: auto;
}

07. Usando CSS3

Más contenido relacionado

La actualidad más candente (10)

Similar a 07. Usando CSS3 (20)

Más de Danae Aguilar Guzmán (20)

Último (11)

07. Usando CSS3