css1 1

Hojas de estilo CSS
<OCAMPO>
HOJAS DE ESTILOS css
y tipografía en la web
<OCAMPO>
CSS
HOJAS DE ESTILOS
Diseño Gráfico Por
Computación
Cátedra Ocampo
• Inicio
• Programa
• Docentes
• TPs destacados
• Alumnos
¡Bienvenidos a DGPC!
Damos la bienvenida a los alumnos del 1º cuatrimestre
a DGPC: Diseño Gráfico Por Computación. En esta
web se alojarán todos los trabajos prácticos actuales y
anteriores, se irá actualizando el cronograma de las
clases y se encontrará material de soporte brindado por
la cátedra.
Programas a utilizar
Dado el constante avance de las tecnologías y sistemas
de código abierto que se utilizan en Internet, la cátedra
prevé el uso de los siguientes programas:
• Brackets
• FileZilla
• Gimp
• Inkscape
<OCAMPO>
CSS
HOJAS DE ESTILOS
Diseño Gráfico Por Diseño Gráfico Por Computación
Cátedra Ocampo
Computación Inicio Programa Docentes TPs destacados Alumnos
Cátedra Ocampo
+ =
• Inicio
• Programa ¡Bienvenidos a DGPC!
• Docentes Damos la bienvenida a los alumnos del 1º cuatrimestre
• TPs destacados a DGPC: . En esta
• Alumnos web se alojarán todos los trabajos prácticos actuales
y anteriores, se irá actualizando el cronograma de las
¡Bienvenidos a DGPC! clases y se encontrará material de soporte brindado
Damos la bienvenida a los alumnos del 1º cuatrimestre por la cátedra.
clases y se encontrará material de soporte brindado por Programas a utilizar
la cátedra. Dado el constante avance de las tecnologías y
sistemas de código abierto que se utilizan en
Programas a utilizar Internet, la cátedra prevé el uso de los siguientes
Dado el constante avance de las tecnologías y sistemas programas:
de código abierto que se utilizan en Internet, la cátedra Brackets
FileZilla
• Brackets
• FileZilla Gimp
• Gimp Inkscape
• Inkscape
<OCAMPO>
CSS
HOJAS DE ESTILOS
Lenguaje de diseño gráfico creado

para definir los estilos visuales
de un documento HTML.
Diseñado principalmente para marcar
la separación entre el contenido de un
documento y la presentación del mismo
(layout, capas, colores, tipografías, etc.).
<OCAMPO>
CSS
HOJAS DE ESTILOS
VENTAJAS
Mejorar la accesibilidad del documento
Proveer más flexibilidad y control en la especificación
de características presentacionales
Permitir que varios documentos HTML compartan
un mismo estilo usando una sola hoja de estilos
Reducir la complejidad y la repetición de código
en la estructura del documento
<OCAMPO>
CSS
HOJAS DE ESTILOS
World Wide Web Consortium

Consorcio internacional que genera recomendaciones y estándares
que aseguran el crecimiento de la World Wide Web a largo plazo.
<OCAMPO>
CSS
HOJAS DE ESTILOS
.CSS
Cascading Stylesheet
<OCAMPO>
CSS
HOJAS DE ESTILOS
Computación
Cátedra Ocampo
• Inicio
• Programa
ENLACE AL CSS
• Docentes
• TPs destacados
• Alumnos
En el HTML
Entre <head> y </head>
la cátedra.
<link href="css/estilos.css" rel="stylesheet">
• Brackets
• FileZilla
• Gimp
• Inkscape
<OCAMPO>
CSS
HOJAS DE ESTILOS
Computación
Cátedra Ocampo
• Inicio
• Programa
VIEWPORT
• Docentes
• TPs destacados
• Alumnos
En el HTML
Entre <head> y </head>
la cátedra.
<link href="css/estilos.css" rel="stylesheet">
• Brackets
• FileZilla
<meta name="viewport" content="width=device-width,
• Gimp
• Inkscape initial-scale=1, shrink-to-fit=no">
<OCAMPO>
CSS
HOJAS DE ESTILOS
Diseño Gráfico Por Diseño Gráfico Por
Computación Computación
Cátedra Ocampo Cátedra Ocampo
+ =
• Inicio • Inicio
• Programa • Programa
• Docentes • Docentes
• TPs destacados • TPs destacados
• Alumnos • Alumnos
¡Bienvenidos a DGPC! ¡Bienvenidos a DGPC!

Damos la bienvenida a los alumnos del 1º cuatrimestre Damos la bienvenida a los alumnos del 1º cuatrimestre
a DGPC: Diseño Gráfico Por Computación. En esta a DGPC: Diseño Gráfico Por Computación. En esta
web se alojarán todos los trabajos prácticos actuales y web se alojarán todos los trabajos prácticos actuales y
anteriores, se irá actualizando el cronograma de las anteriores, se irá actualizando el cronograma de las
clases y se encontrará material de soporte brindado por clases y se encontrará material de soporte brindado por
la cátedra. la cátedra.
Programas a utilizar Programas a utilizar

Dado el constante avance de las tecnologías y sistemas Dado el constante avance de las tecnologías y sistemas
de código abierto que se utilizan en Internet, la cátedra de código abierto que se utilizan en Internet, la cátedra
prevé el uso de los siguientes programas: prevé el uso de los siguientes programas:
• Brackets • Brackets
• FileZilla • FileZilla
• Gimp • Gimp
• Inkscape • Inkscape
<OCAMPO>
CSS
SINTAXIS CSS
<OCAMPO>
CSS
SINTAXIS CSS
<OCAMPO>
CSS
SINTAXIS CSS
selector propiedad valor
<OCAMPO>
CSS
SINTAXIS CSS
header {
color: ;
}
<OCAMPO>
CSS
SINTAXIS CSS
header {
color: ;
}
selector
<OCAMPO>
CSS
SINTAXIS CSS
header {
color: ;
}
selector propiedad
<OCAMPO>
CSS
SINTAXIS CSS
header {
color: ;
}
selector propiedad valor
<OCAMPO>
CSS
SINTAXIS CSS
header {
color : orange;
background-color: green;
font-size : 2rem;
}
selector propiedades valores
<OCAMPO>
TIPOS DE SELECTORES css.
<OCAMPO>
CSS
selectores css
selector de etiqueta html
{
: ;
}
<OCAMPO>
CSS
selectores css #
selector de id
#logoauspiciante {
: ;
}
<OCAMPO>
CSS
selectores css .
selector de clase
. {
: ;
}
<OCAMPO>
CSS
selectores css *
selector universal
* {
: ;
}
<OCAMPO>
CSS
selectores css :
selector DE PSEUDOCLASE
a:hover {
: ;
}
<OCAMPO>
CSS
selectores css
selectores descendentes
header nav ul li a {
: ;
}
<OCAMPO>
CSS
selectores css >
selectores descendentes DIRECTOS
main > p {
: ;
}
<OCAMPO>
CSS
selectores css
selectores múltiples
header,
aside,
footer {
: ;
}
<OCAMPO>
CSS
selectores css
COMBINACIÓN DE SELECTORES
main . {
: ;
}
<OCAMPO>
CSS
selectores css
main p. {
: ;
}
<OCAMPO>
CSS
selectores css
header nav ul li a:hover {

: ;
}
<OCAMPO>
CSS
selectores css
footer > * {
: ;
}
<OCAMPO>
COMPOSICIÓN Y PUESTA EN PÁGINA
COLORES color
palabras clave
color: white;
color: silver;
color: gray;
color: black;
color: red;
color: maroon;
color: yellow;
color: olive;
color: lime;
color: green;
color: aqua;
color: teal;
color: blue;
color: navy;
color: fuchsia;
color: purple;
<OCAMPO>
COLORES color
palabras clave hexadecimal

color: white; color: #FFFFFF;
color: silver; 0-Fcolor: #C0C0C0;
color: gray; color: #808080;
color: #0000FF;
color:
color:
black;
red;
color: #000000;
color: #FF0000;
color: maroon; color:
red green#800000;
blue
color: yellow; color: #FFFF00;
color: olive; color: #808000;
color: lime; 0-Fcolor: #00FF00;
color: green; color: #008000;
color: #00F;
color:
color:
aqua;
teal;
color: #00FFFF;
color: #008080;
color: blue; r color:
g b #0000FF;
color: navy; color: #000080;
color: fuchsia; color: #FF00FF;
color: purple; color: #800080;
<OCAMPO>
COLORES color
hexadecimal RGB
color: #000000; color: rgb(0,0,0);
color: #000001; color: rgb(0,0,1);
color: #000002; color: rgb(0,0,2);
... ...
color: #0000FD; color: rgb(0,0,253);
color: #0000FE; color: rgb(0,0,254);
color: #0000FF; color: rgb(0,0,255);
<OCAMPO>
COLORES color
hexadecimal RGB
0-255
color: #000000; color: rgb(0,0,0);
color: rgb(0,0,255);
color:
color:
#000001;
#000002;
color:
color:
rgb(0,0,1);
rgb(0,0,2);
... red...
green blue
color: #0000FD; color: rgb(0,0,253);
color: #0000FE; color: rgb(0,0,254);
color: #0000FF; 0-255
color: 0-1
rgb(0,0,255);
color: rgba(0,0,255,1);
red green blue opacidad
<OCAMPO>
COLORES color
RGB clásico RGB con transparencia

color: rgb(0,0,255); color: rgba(0,0,255,1);
color: rgba(0,0,255,0.9);
color: rgba(0,0,255,0.8);
color: rgba(0,0,255,0.7);
color: rgba(0,0,255,0.6);
color: rgba(0,0,255,0.5);
color: rgba(0,0,255,0.4);
color: rgba(0,0,255,0.3);
color: rgba(0,0,255,0.2);
color: rgba(0,0,255,0.1);
color: rgba(0,0,255,0);
<OCAMPO>
COLORES color
palabras clave color: blue;
hexadecimal color: #0000FF;
hexadecimal short color: #00F;
RGB clásico color: rgb(0,0,255);
RGB con transparencia color: rgba(0,0,255,1);
<OCAMPO>
COLORES
Color color: #39F;
Color color: black;

background-color: #39F;
<OCAMPO>
márgenes
80% 20%
width: 80%;
background-color: yellowgreen;
<OCAMPO>
márgenes
Bloque de texto
sin margin ni padding
80% 20%
width: 80%;
margin: 0;
padding: 0;
<OCAMPO>
márgenes
Bloque de texto
con margin, sin padding
80% 20%
width: 80%;
margin: 1rem;
padding: 0;
<OCAMPO>
márgenes
Bloque de texto
sin margin, con padding
80% 20%
width: 80%;
margin: 0;
padding: 1rem;
<OCAMPO>
márgenes
Bloque de texto
con margin y con padding
80% 20%
width: 80%;
margin: 1rem;
padding: 1rem;
<OCAMPO>
márgenes
Bloque de texto
80% 20%
width: 80%;
margin: 0;
padding: 1rem;
<OCAMPO>
márgenes
Bloque de texto
(con box-sizing)
80% 20%
width: 80%;
margin: 0;
padding: 1rem;
box-sizing: border-box;
<OCAMPO>
MÁRGENES
margin-top: 1rem ;
margin-right: 1rem; margin: 1rem;
margin-bottom: 1rem;
margin-left: 1rem;
margin-top: 0;
margin-right: 1rem; margin: 0 1rem;
margin-bottom: 0;
margin-left: 1rem;
margin-top: 1.5rem;
margin-right: 1rem; margin: 1.5rem 1rem 2rem 0;
margin-bottom: 2rem;
margin-left: 0;
<OCAMPO>
márgenes
margin-top: 1em;
margin-right: 1em; margin: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-top: 0;
margin-right: 1em; margin: 0 1em;
margin-bottom: 0;
margin-left: 1em;
margin: 1.5rem 1rem 2rem 0;

margin-top: 1.5em;
margin-right: 1em; margin: 1.5em 1em 2em 0;
margin-bottom: 2em; top
margin-left: 0;
<OCAMPO>
COMPOSICIÓN Y PUES TA EN PÁGINA
márgenes
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;

margin-top: 1.5em;
margin-bottom: 2em; right
margin-left: 0;
<OCAMPO>
márgenes
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;

margin-top: 1.5em;
margin-bottom: 2em; bottom
margin-left: 0;
<OCAMPO>
márgenes
margin-top: 1em;
margin-bottom: 1em;
margin-left: 1em;
margin-top: 0;
margin-bottom: 0;
margin-left: 1em;

margin-top: 1.5em;
margin-right: 1em; margin: 1.5em 1em 2em left
0;
margin-bottom: 2em;
margin-left: 0;
<OCAMPO>
bordes border
<OCAMPO>
bordes border
border-width: 1px;
<OCAMPO>
bordes border
border-width: 1px;
border-style: dashed;
<OCAMPO>
bordes border
border-width: 1px;
border-style: dashed;
border-color: #39F;
<OCAMPO>
bordes border
border-width: 1px;
border-style: dashed; border: 1px dashed #39F;
border-color: #39F;
<OCAMPO>
bordes border
border-width: 1px;
border-color: #39F;
border: 1px dashed #39F;

width style color
<OCAMPO>
bordes border
border-width: 1px;
border-color: #39F;
border-radius: 2rem;
<OCAMPO>
SOMBRA
box-shadow: .5rem .5rem .5rem silver;
<OCAMPO>
SOMBRA
box-shadow: .5rem .5rem .5rem 1rem silver ;
<OCAMPO>
SOMBRA
box-shadow: .5rem .5rem .5rem 1rem silver inset;
<OCAMPO>
SOMBRA
vertical expansión tipo
box-shadow: .5rem .5rem .5rem 1em silver inset;

horizontal desenfoque color
box-shadow: .5em .5em .5em 1em silver inset;
<OCAMPO>
unidades de medida en css.
<OCAMPO>
UNIDADES DE MEDIDA
ABSOLUTAS cm
absolutas
cm centímetros
<OCAMPO>
UNIDADES DE MEDIDA
ABSOLUTAS mm
absolutas
cm centímetros
mm milímetros
<OCAMPO>
UNIDADES DE MEDIDA
ABSOLUTAS in
absolutas
cm centímetros
mm milímetros
in pulgadas
<OCAMPO>
UNIDADES DE MEDIDA
ABSOLUTAS pt
1/72in = 0.35mm
absolutas
cm centímetros
mm milímetros
in pulgadas
pt puntos
<OCAMPO>
UNIDADES DE MEDIDA
ABSOLUTAS pc
12pt = 4.23mm
absolutas
cm centímetros
mm milímetros
in pulgadas
pt puntos
pc picas
<OCAMPO>
UNIDADES DE MEDIDA
ABSOLUTAS px
absolutas
cm centímetros
mm milímetros
in pulgadas
pt puntos
pc picas
px píxeles
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS %
absolutas RELATIVAS
cm centímetros % porcentaje
mm milímetros
in pulgadas
pt puntos
pc picas
px píxeles
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS em
Lorem ipsum
absolutas RELATIVAS
mm milímetros em cuerpo
in pulgadas
pt puntos
pc picas
px píxeles
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS rem
Lorem ipsum
absolutas RELATIVAS
in pulgadas rem root em
pt puntos
pc picas
px píxeles
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS vw
absolutas RELATIVAS
pt puntos vw viewport width
pc picas
px píxeles
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS vh
absolutas RELATIVAS
pc picas vh viewport height
px píxeles
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS vmin
absolutas RELATIVAS
px píxeles vmin viewport mínimo
<OCAMPO>
UNIDADES DE MEDIDA
RELATIVAS vmax
absolutas RELATIVAS
vmax viewport máximo
<OCAMPO>
UNIDADES DE MEDIDA
80%
valor unidad
absolutas RELATIVAS
cm
mm
centímetros
milímetros
% 2.5rem
porcentaje
em valor
cuerpo
unidad
pt
pc
puntos
picas
100vw
vw viewport width
vh viewport height
valor unidad
vmax viewport máximo
<OCAMPO>
cátedra
<OCAMPO>
Diseño Gráﬁco por Computación
2020

css1 1

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

css1 1

Cargado por

Copyright:

Formatos disponibles

Hojas de estilo CSS

Lenguaje de diseño gráfico creado

World Wide Web Consortium

¡Bienvenidos a DGPC! ¡Bienvenidos a DGPC!

Programas a utilizar Programas a utilizar

selector propiedad valor

selector propiedad valor

selector de etiqueta html

selectores descendentes DIRECTOS

header nav ul li a:hover {

palabras clave hexadecimal

RGB clásico RGB con transparencia

palabras clave color: blue;

hexadecimal color: #0000FF;

hexadecimal short color: #00F;

RGB clásico color: rgb(0,0,255);

RGB con transparencia color: rgba(0,0,255,1);

Color color: #39F;

Color color: black;

margin: 1.5rem 1rem 2rem 0;

margin: 1.5rem 1rem 2rem 0;

margin: 1.5rem 1rem 2rem 0;

margin: 1.5rem 1rem 2rem 0;

border: 1px dashed #39F;

box-shadow: .5rem .5rem .5rem silver;

box-shadow: .5rem .5rem .5rem 1rem silver ;

box-shadow: .5rem .5rem .5rem 1rem silver inset;

vertical expansión tipo

box-shadow: .5rem .5rem .5rem 1em silver inset;

box-shadow: .5em .5em .5em 1em silver inset;

También podría gustarte