Java Bootcamp: F.4411.316.013 - Poej/Mixto/F. Generation/ Curso Java (Online-Nacional) 3 Ed
Cargado por
Rocio SorianoJava Bootcamp: F.4411.316.013 - Poej/Mixto/F. Generation/ Curso Java (Online-Nacional) 3 Ed
Cargado por
Rocio SorianoF.4411.316.013 - POEJ/MIXTO/F.
Generation/
Curso JAVA (Online-Nacional) 3ªEd.
Java Bootcamp
Eduardo Corral Muñoz
[email protected]
Introducción a
CSS
Índice
_01 Qué es CSS
_02 Sintaxis
_03 Hojas de estilo
_04 Elementos CSS
_05 Buenas prácticas
01
Qué es CSS
Qué es CSS
CSS
Cascading Style Sheets
(hojas de estilo en casdaca)
Un lenguaje para definir como se muestran los elementos HTML
de una página web
muestra
02
Sintaxis
Sintaxis CSS
Instrucción
Selector Declaración 1 Declaración 2
propiedad: valor; propiedad: valor;
h1 {color: green; font-size: 14px;}
Sintaxis CSS
Selector:
Indica el elemento HTML al que se quiere aplicar el estilo
tag p {color: red; text-align: center;}
id #parrafo {color: red; text-align: center;}
class .centrado {color: red; text-align: center;}
.centrado {
color: red;
text-align: center;
}
03
Hojas de estilo
Hojas de estilo
Hoja de estilos externa
<head>
<link href= “miestilo.css” rel= “stylesheet” type= “text/css” >
</head>
Hojas de estilo
Hoja de estilos externa
miestilo.css
@charset "utf-8";
/* Esto es un comentario dentro de mi hoja CSS */
.wrapper {
position: relative;
overflow: auto;
}
#top, #sidebar, #bottom, .menuitem {
border-radius: 4px;
margin: 4px;
}
…
Hojas de estilo
Hoja de estilos interna
<head>
<style>
.wrapper {
position: relative;
overflow: auto;
}
#top, #sidebar, #bottom, .menuitem {
border-radius: 4px;
margin: 4px;
}
…
</style>
</head>
Hojas de estilo
Insertar estilos en el HTML – In line
<body>
<p style= “color: red;”>Esto es un párrafo rojo</p>
</body>
Hojas de estilo en cascada
Orden de aplicación de los estilos
1º - Estilo In Line definido en el elemento HTML
2º - Hojas de estilo internas
3º - Hojas de estilo externas
4º - Definiciones por defecto del navegador
Definición de estilos
Ejemplo_C1
<!doctype html>
<html>
<head>
<meta charset= "utf-8" />
<title>Estilos</title>
<style>
.verde {color: green;}
#azul {color: blue;}
p {color: #990000;}
</style>
</head>
<body>
<p style= “color: #ff0000;”>Esto es un párrafo rojo</p>
<p class= “verde”>Y esto es un párrafo verde</p>
<p id= “azul” > Y esto es un párrafo azul</p>
<p> Y esto es un párrafo marrón</p>
</body>
</html>
04
Elementos CSS
Hojas de estilo
Colores
color : valor;
Valor: nombre
tomato, red, lightblue, yellow, …
RGB
rgb( rojo, verde, azul) -> rgb(255, 0, 0)
Hexadecimal
color
#rrggbb -> #ff0000
HSL (Hue, Saturation, Lightness)
hsl(matiz, saturación, luminosidad) -> hsl (0, 100%, 50%)
RBGA
rgba( rojo, verde, azul, opacidad) -> rgba(255, 0, 0, 0.5)
HSLA
hsla(matiz, sat, lum, opacidad) -> hsla(0, 100%, 50%, 0.5)
Hojas de estilo
Fondos
background-color: color;
background-image: url(“nombre_imagen.jpg”);
background-repeat: no-repeat | repeat-x | repeat-y;
background-attachment: fixed | scroll; backgound
background-position: botton | top center | left | right;
Abreviando:
background: #ffffff url(“imagen.png”) no-repeat right top;
Hojas de estilo
Bordes
border-style: dotted | dashed | solid | double | groove | ridge |
inset | outset | none | hidden ;
border-width: valor_ud; ud= px | pt | cm | em | etc
thin | medium | thick
border-color: color;
border
border-top-style | width | color
border-right-style | width | color
border-bottom-style | width | color
border-left-style | width | color
Abreviando:
border: solid 2px #ff0000;
Hojas de estilo
Modelo de caja
margin
border
padding
Contenido
Hojas de estilo
Márgenes
margin: valor_ud; ud= px | pt | cm | em | etc | %
margin-top: valor_ud
margin-right: valor_ud
margin-bottom: valor_ud
margin-left: valor_ud
Abreviando:
margin
margin: 100px 120px 80px 60px; (top, right, bottom, left)
margin: 100px 120px 80px; (top, right=left, bottom )
margin: 100px 120px; (top= bottom, right=left )
margin: 100px; (top= bottom = right=left )
Centrado horizontal:
margin: auto;
Hojas de estilo
Padding
padding: valor_ud; ud= px | pt | cm | em | etc | %
padding-top: valor_ud
padding-right: valor_ud
padding-bottom: valor_ud
padding-left: valor_ud
padding
Abreviando:
padding: 100px 120px 80px 60px; (top, right, bottom, left)
padding: 100px 120px 80px; (top, right=left, bottom )
padding: 100px 120px; (top= bottom, right=left )
padding: 100px; (top= bottom = right=left )
Hojas de estilo
Dimensiones
height: valor_ud; ud= px | pt | cm | em | etc | %
max-height: valor_ud; ud= px | pt | cm | em | etc | %
min-height: valor_ud; ud= px | pt | cm | em | etc | %
height
width
width: valor_ud; ud= px | pt | cm | em | etc | %
max-width: valor_ud; ud= px | pt | cm | em | etc | %
min-width: valor_ud; ud= px | pt | cm | em | etc | %
Hojas de estilo
Outline
outline
border
Contenido
outline-style: dotted | dashed | solid | double | groove | ridge |
inset | outset | none | hidden ;
outline
outline-width: valor_ud; ud= px | pt | cm | em | etc
thin | medium | thick
outline-offset: valor_ud; ud= px | pt | cm | em | etc
outline-color: color;
Abreviando:
outline: solid 2px #ff0000;
Hojas de estilo
Texto
color: color;
text-align: center | left | right | justify;
text-decoration: none | overline | line-through | underline;
text-transform: uppercase | lowercase | capitalize;
text-indent: valor_ud; ud= px | pt | cm | em
letter-spacing: valor_ud; ud= px | pt | cm | em text
line-height: valor; defecto 1 (0.7…1.8…) | % | px | pt | cm | em
…
direction: ltr | rtl;
word-spacing: valor_ud; ud= px | pt | cm | em (+/-)
text-shadow: valor_h valor_v valor_desenfoque color;
text-overflow: clip | ellipsis | string;
white-space: normal | nowrap | pre |pre-line| pre-wrap;
Hojas de estilo
Fuentes tipográficas
font-family: fuentes; ("Times New Roman", Times, serif;)
font-style: normal | italic | oblique;
font-size: valor_ud; ud= px | pt | cm | em | %
font-weight: nomal | bold | bolder | lighter | 100 ... 900 font
400 700
font-variant: normal | small-caps
Abreviando:
font: italic bold 12px/30px Georgia, serif;
Hojas de estilo
Enlaces
a:link {definición stilo} – Enlace normal no visitado
a:visited {definición stilo} – Enlace visitado
links
a:hover {definición stilo} – Ratón sobre el enlace
a:active {definición stilo} – Enlace activado
Hojas de estilo
Listas
list-style-image: url(‘imagen.gif');
list-style-position: inside | outside;
list-style-type: disc | armenian | circle | decimal | none …
lists
Abreviando:
list-style: square inside url(“sqmorado.gif”);
Hojas de estilo
Tablas
border: valor_ud estilo color; (1px solid #ff0000)
border-collapse: separate | collapse;
border-spacing: valor_ud; (1 valor, valor x e y)
table
caption-side: top | bottom; (pie/cabecera de tabla)
empty-cells: show | hide;
table-layout: fixed | auto;
Hojas de estilo
Display - Visibilidad
display : inline | block | flex | inline-block | table | none … display
visibility : visible | hidden | collapse visibility
Hojas de estilo
Posición
position: static | relative | fixed | absolute | sticky;
bottom: valor_ud; ud= px | pt | cm | em …
top: valor_ud; ud= px | pt | cm | em …
position
left: valor_ud; ud= px | pt | cm | em …
right: valor_ud; ud= px | pt | cm | em …
clip: auto | shape ; [rect (top, right, bottom, left )]
z-index: número;
Hojas de estilo
Desbordamiento
overflow: visible | hidden | scroll | auto; overflow
Hojas de estilo
Flotar
float: none | left | rigth;
float
clear: none | left | rigth | both; clear
display: inline-block; Inline-box
Hojas de estilo
Transparencia
opacity : valor; (0 .. 1) opacity
Hojas de estilo
Formularios
Input [ type=text ] { definición estilo;}
Input [ type=number] { definición estilo;}
Input [ type=password] { definición estilo;}
Input [ type=date] { definición estilo;}
… form
select { definición estilo;}
textarea { definición estilo;}
button { definición estilo;}
Hojas de estilo
Navegación
menú
menú desplegable
globos
galeria de imágenes
Hojas de estilo
Esquinas redondeadas
border-radius: valor_ud; ud= px | pt | cm | em
border-top-left-radius: valor_ud; ud= px | pt | cm | em
border-top-rigth-radius: valor_ud; ud= px | pt | cm | em
border-bottom-left--radius: valor_ud; ud= px | pt | cm | em
border-bottom-right-radius: valor_ud; ud= px | pt | cm | em border-radius
Abreviando:
border-radius: 15px 50px 30px 5px; (tl, tr, br, bl)
border-radius: 15px 50px 30px; (tl, tr = bl, br)
border-radius: 15px 50px; (tl=br, tr=bl)
border-radius: 15px; (tl=br=tr=bl)
Hojas de estilo
Imágenes de fondo
background-image: url(imagen1.png), url(imagen2.png);
background-position: posición 1, posición 2; (top left, bottom right)
background
background-repeat: repetición 1, repetición 2; (no-repeat, …) images
Hojas de estilo
Más CCS
Gradientes
Animaciones
Transiciones
Columnas
Iconos
Hojas de estilo
Importar fuentes tipográficas
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,700,800");
@charset "utf-8";
/* CSS Document */
body {
font-family: 'Open Sans', sans-serif;
color: #7b818c;
font-weight: 400;
}
05
Buenas Prácticas
Buenas Prácticas
Objetivos
Facilitar la legibilidad del código y su modificación
Reducir al máximo la posibilidad de error
Asegurar el funcionamiento en todos los navegadores
Buenas Prácticas
Usa la indentación en tus CSS
.wrapper {
position: relative;
overflow: auto;
border-radius: 4px;
margin: 4px;
}
…
Buenas Prácticas
Cada selector en una línea
#top,
#sidebar,
#bottom,
.menuitem {
position: relative;
overflow: auto;
border-radius: 4px;
margin: 4px;
}
…
Buenas Prácticas
Utiliza espacios
#top,
#sidebar,
#bottom,
.menuitem_{
position:_relative;
overflow:_auto;
border-radius:_4px;
margin:_4px;
}
…
Buenas Prácticas
Termina todas las declaraciones con punto y coma
#top,
#sidebar,
#bottom,
.menuitem {
position: relative;
overflow: auto;
border-radius: 4px;
margin: 4px;
}
…
Buenas Prácticas
Separa con comas los valores de las propiedades
#top,
#sidebar,
#bottom,
.menuitem {
position: relative;
overflow: auto;
backgrpound-color: rgba (0, 0, 0, 0.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
…
Buenas Prácticas
Los valores hexadecimales de los colores en minúsculas
#top,
#sidebar,
#bottom,
.menuitem {
position: relative;
overflow: auto;
backgrpound-color: rgba (0, 0, 0, 0.5);
box-shadow: 0 1px 2px #ccc, inset 01px 0 #fff;
}
…
Buenas Prácticas
Utiliza comillas dobles para los atributos que lo requieran
.selector [type: “text”] {
position: relative;
overflow: auto;
backgrpound-color: rgba (0, 0, 0, 0.5);
box-shadow: 0 1px 2px #ccc, inset 01px 0 #fff;
}
…
...
