Scribd
Cargar
27 vistas50 páginas

Java Bootcamp: F.4411.316.013 - Poej/Mixto/F. Generation/ Curso Java (Online-Nacional) 3 Ed

Este documento trata sobre CSS (Cascading Style Sheets), un lenguaje de diseño gráfico para definir y crear la presentación de un documento HTML. Se explican conceptos básicos como sintaxis, hojas de estilo, elementos como colores, fuentes y posicionamiento.

Cargado por

Rocio Soriano
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
27 vistas50 páginas

Java Bootcamp: F.4411.316.013 - Poej/Mixto/F. Generation/ Curso Java (Online-Nacional) 3 Ed

Este documento trata sobre CSS (Cascading Style Sheets), un lenguaje de diseño gráfico para definir y crear la presentación de un documento HTML. Se explican conceptos básicos como sintaxis, hojas de estilo, elementos como colores, fuentes y posicionamiento.

Cargado por

Rocio Soriano
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 50

F.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;
}
…
...

También podría gustarte