docCSS2 - UTN FRBA - Materias Online
download 
Demanda Transcripción
CSS2 - UTN FRBA - Materias Online
Universidad Tecnólogica Nacional
Facultad Regional Buenos Aires
Hojas de estilo
CSS
p.concol
{color: red;
font-style: italic;}
-------------------<h1>Prueba color</h1>
<p class="concol">
Este es un parrafo con color </p>
<p>Este es un parrafo negro</p>
Materia: Tecnología y Discapacidad
Tres estilos de estilos
•
•
•
Interno
Externo
En línea
Interno
ARCHIVO
pagina.html
<<<<
<html> <head>
<style type="text/css">
p.concol {color: red;
font-style: italic; }
</style>
</head> <body>
<h1>Prueba color</h1>
<p class="concol">
Este es un parrafo con color </p>
<p> Este es un parrafo negro </p>
</body> </html>
Externo
ARCHIVO
miestilo.css
<<<<
p.concol {color: red;
font-style: italic; }
ARCHIVO
AGRUPAMIENTO
Cuando varios selectores comparten las mismas
declaraciones, pueden agruparse en una lista separada por
comas.
Por ejemplo:
H1, H2, H3 { font-family: sans-serif }
pagina.html
<<<<
<html> <head>
</head> <body>
<h1>Prueba color</h1>
<p class="concol">
Este es un parrafo con color </p>
<p> Este es un parrafo negro </p>
</body> </html>
En línea
ARCHIVO
pagina.html
<<<<
<html> <head>
</head> <body>
<h1>Prueba color</h1>
<p style="color: red; font-style:italic">
Este es un parrafo con color </p>
<p> Este es un parrafo negro </p>
</body> </html>
Cascada de Prioridad de los estilos
LISTAS Y VIÑETAS
•
•
•
•
•
•
list-style
•
•
list-style-position inside | outside
Del Browser
MENOR
Externo
Interno
En linea
MAYOR
FONDOS
• background ** T **
• background-attachment
• background-color
•
•
•
•
scroll | fixed
color-rgb | color-hex |
| color-name | transparent
background-image
url | none
background-position
top left | top center |
| top right | center left | center center
| center right | bottom left |
| bottom center | bottom right |
| x-% y-% | x-pos y-pos
background-repeat
repeat | repeat-x |
| repeat-y | no-repeat
*T*
list-style-type none | disc | circle | square |
| decimal | decimal-leading-zero |
| lower-roman | upper-roman |
| lower-alpha | upper-alpha |
list-style-image
none | url
Pseudo-clases Anchor
•
•
•
•
a:link {propiedad: valor}
(enlaces)
/* no visitado */
a:visited {propiedad: valor} /* visitado */
a:hover {propiedad: valor}
/* mouse encima */
a:active {propiedad: valor} /* seleccionado */
flow vs float
TEXTO
•
•
•
color
text-decoration
none | underline | overline |
| line-through | blink
•
•
text-indent
length | %
text-transform
none | capitalize |
| uppercase | lowercase
text-align
color
left | right | center | justify
FUENTES
• font ** T **
• font-family: family-name | generic-family
• font-size: xx-small | x-small | small | medium | large |
•
•
•
| x-large | xx-large | smaller | larger | length | %
font-stretch: normal | wider | narrower |
ultra-condensed | extra-condensed | condensed |
semi-condensed | semi-expanded | expanded |
extra-expanded | ultra-expanded
font-style:
normal | italic | oblique
font-weight: normal | bold | bolder | lighter
| 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
MARGEN
•
•
•
•
•
margin:
* T * top right bottom left
margin-top:
length | %
margin-right:
length | %
margin-bottom:
length | %
margin-left:
length | %
BORDES
UNIDADES DE CSS
** T **
-color: color
-style: none | hidden |
| dotted | dashed
| solid | double |
| groove | ridge |
| inset | outset
-width: thin | medium |
| thick | length
border
border-top
border-right
border-bottom
border-left
RELLENO
•
•
•
•
•
padding
* T * top right bottom left
padding-top
length | %
padding-right
length | %
padding-bottom length | %
padding-left
length | %
RELATIVAS
%
em
porcentaje
proporción con el tamaño de fuente
normal del elemento referenciado
ABSOLUTAS
cm
mm
pt
px
centimetros
milimetros
puntos
pixeles
VENTAJAS DE USAR CSS
• Separación de estilo y estructura
• Consistencia de estilo
• Codigo de menor tamaño
• Diseño más flexible
• Mantenimiento más fácil
Cumple con los estandares, lo cuál asegura
mayor compatibilidad con futuras herramientas
FLOTANTES
•
<div> ....
•
•
float left | right | none
</div>
clear left | right | both | none
COLORES DE CSS
rgb(x,x,x) RGB
#rrggbb
HEX
los siguientes nombres
black
#000000
olive
navy
#000080
gray
blue
#0000ff
silver
green
#008000
red
teal
#008080
fuchsia
lime
#00ff00
orange
aqua
#00ffff
yellow
maroon #800000
white
purple #800080
#808000
#808080
#c0c0c0
#ff0000
#ff00ff
#ffA500
#ffff00
#ffffff
