07. Usando CSS3

Usando CSS3

Danae Aguilar Guzmán MCT, MS, MCTS, MCP

[email protected]

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

<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

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; 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


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

Software

Transcript of 07. Usando CSS3