07. usando css3
Post on 16-Apr-2017
53 Views
Preview:
TRANSCRIPT
Definir y aplicar un estilo
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 */ }
Definir y aplicar un estilo
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
Importando estilos externos y especificando el media Type
<link rel='stylesheet' type='text/css' href='Content/screen.css' media='screen' /> <link rel='stylesheet' type='text/css' 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 { background-color: white; 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 { background-color: white; color: gray; }
#botonGuardar { background-color: white; color: gray; }
Selectores
Selectores por clase
Selector universal
.miClase { background-color: white; color: gray; }
* { background-color: white; 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 { background-color: white; }
div + h1 { background-color: yellow; }
Selectores
Seleccionando elementos subsecuentes:
Selectores por atributos
a[title]:hover:after { content: " (" attr(href) ")"; background-color: yellow; }
div ~ h1 { background-color: yellow; }
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
Asignando valores a border, padding, margin.
p { border: 10px; padding: 25px; margin: 15px; background-color: yellow; 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; background-color: yellow; 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
Posicionando elementos <div>
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; }
Posicionando elementos <div>
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; }
Posicionando elementos <div>
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; }
Posicionando elementos <div>
Usando la propiedad float
Los elementos pueden flotar solo horizontalmente.
#div3 { background-color: lightpink; float: left; width: 32%; }
Posicionando elementos <div>
Usando la propiedad clear
Pondrá el elemento después de los elementos flotantes.
#div6 { background-color: lightgray; clear: both; }
top related