CSS_2020.pdf

CSS
Hojas de estilo
MCs. Ing. Juan Carlos Vallejos Paniagua

CSS
“Cascading Style Sheets” =“Hojas de estilo en Cascada”
Es el lenguaje que le permite control del diseño y distribución
de sus páginas web.
Las hojas de estilo son una herramienta que permiten añadir la
presentación, el color, forma y estilo a las páginas web.

¿Dónde escribo CSS?
Como atributo de una etiqueta HTML
Podemos escribir CSS dentro de la etiqueta de HTML, pero esto quedaría
como una desventaja a la hora de la mantención y la separación del código
HTML con el estilo.
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>

Dentro de las etiquetas <style>
Se puede destinar un espacio dentro del mismo documento de HTML para
escribir los estilos, esto quiere decir que dentro de la etiqueta <head> existe
la posibilidad de deﬁnir estilos con la etiqueta <style>
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
</body>
</html>

Utilizando un archivo .css
Lo más adecuado es utilizar un archivo que tenga la extensión .css donde
estén deﬁnidos todos los estilos utilizados por toda la aplicación y
simplemente invocar en cada página web el uso de dichos estilos.
Archivo ESTILO.CSS
body {
background-color: #FF0000;
}
<html>
<head>
<title>Ejemplo CSS</title>
<link rel="stylesheet" type="text/css" href=“estilos/ESTILO.CSS" />
</head>
<body>
</body>
</html>

Selectores
Los selectores son etiquetas
que seleccionan uno o varios
elementos del documento
HTML, para poder modiﬁcar
las características visuales de
dichos elementos.

Selectores de etiquetas HTML
Cuando se desea dar formato único a todos los elementos de un mismo
tipo, se selecciona la etiqueta HTML, dicha etiqueta se convierte en CSS en
un selector, por ejemplo si se desea dar formato a todos los párrafos con la
etiqueta <P>, se utilizará el selector p. Etiqueta {atributo: valor;}
p { color red;
}
<p> párrafo1 párrafo1 párrafo1 párrafo1 </p>

Selectores a elementos Únicos
Si se desea dar formato especial a un solo elemento del documento HTML,
este debe ser identiﬁcado con el atributo “id” dentro de la etiqueta y en el
documento CSS, hacer referencia a dicho identiﬁcador con “#” por delante.
#id {atributo: valor;}
#parra1 { color red;
}
<p id=”parra1”> párrafo1 párrafo1 párrafo1 párrafo1 </p>

Selectores a elementos de clase
Al deﬁnir una clase y hacer que muchos elementos de HTML la utilicen,
podemos utilizar cicha clase escribiendo un punto antes del nombre.
.clase {atributo: valor;}
#parrafos { color red;
}
<p class=”parrafos”> párrafo1 párrafo1 párrafo1 párrafo1 </p>
<p class=”parrafos”> párrafo1 párrafo1 párrafo1 párrafo1 </p>
<h1 class=”parrafos”>Titulo</h1>

Pseudo clases
Se dice que son pseudo clases porque actúan como clases pero en realidad
son ciertos estados o elementos de algunas etiquetas de HTML. Para hacer
referencia a una pseudo clases utilizaremos “:” después del selector de la
etiqueta, seguido de la pseudo clase, de la siguiente forma:
Etiqueta:PseudoClase { …. }

Pseudo clases de los LINKS
Pseudo Clase Descripción
a:link Selecciona un enlace que no ha sido
visitado aún
a:visited Un enlace que ya fue visitado o que se
encuentra en el histórico
a:hover Cuando el puntero del ratón se encuentra
sobre el enlace
a:active Es el momento cuando se presiona el
click sobre el enlace.

Esta pseudo clase hace referencia a la mayoría de los elementos que son
utilizados en los formularios y se encuentran con el foco, eso quiere decir
que cuando el cursor está activo en uno de los controles.
Ejemplo
input:focus {
border: blue 2px dotted;
padding: 2px;
}
Pseudo clase focus

BOrdes y
otros
elementos
Como decorar los bordes de los
elementos en las Páginas Web

Espacio de contenido
Ancho del contenido Alto del Contenido
width Height

El espacio de padding
El área de padding es el espacio entre el contenido del elemento y su borde
(border). No se permiten valores negativos.
La propiedad padding es un atajo para evitar la asignación de cada lado
por separado (padding-top, padding-right, padding-bottom, padding-left).

Bordes
Bordes regulares
Para deﬁnir los bordes utilizamos la propiedad border:
border: border-width border-style border-color;

Bordes con esquinas redondeadas
border-radius: 1-4 longitud|% / 1-4 longitud|%;
Permite establecer las esquinas curvas:

border-radius
parametros
border-radius: 10px 30px 10px 30px;

Margen
establece el margen para los cuatro lados. Es una abreviación para evitar
tener que establecer cada lado por separado con las otras propiedades de
margen: margin-top, margin-right, margin-bottom y margin-left.
También se permiten valores negativos.

Colores,
fondos y
tipos de
letras

colores
Los colores son valores de propiedades que muestran color en los
elementos de nuestra página web.
Regularmente se utiliza el formato RGB:

Color de la letra
Para cambiar el color de la letra se puede utilizar la propiedad colo
color : red;

Color de fondo Background
Podemos modiﬁcar el fondo de un elemento con la propiedad
background, que tiene la siguiente sintaxis:
background : color | image | repeat | attachment | position ;

Fondos con degradado
Se tiene un degradado lineal cuando los colores van
degradándose en forma de recta, desde un color a otro color.
background: linear-gradient(dirección, color1, color2, ...);

Existen
aplicaciones que
te ayudarán
https://www.cssmatic.com/es/

Sombras
Cuadros con sombras
Para realizar cuadros con sobras o mejor dicho colocar sombras a los
cuadros. El atributo box -shadow requiere varios valores para especiﬁcar
las características de la sombra, como difuminado, separación de la
sombra y la propia caja o color. La sintaxis es como esta:
box-shadow: desp-hor desp-vert difunimado tam-sombra color;

box-shadow:50px 50px 50px 20px red;

Sombras
Textos con sombra
Esta propiedad es una extensión de las cajas con sombras, por lo que es
muy similar el uso de la propiedad text-shadow, como podemos apreciar:
text-shadow: : desp-hor desp-vert difunimado color;

text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006;

Una de las mejoras más importantes que introdujo CSS3, es
indudablemente sobre las animaciones, en este tema veremos cómo se
pueden introducir algunas animaciones básicas en el diseño de nuestras
páginas web.
Animaciones con CSS

#obj
{ position:relative;
animation:movimiento 2s inﬁnite;
-webkit-animation:movimiento 2s inﬁnite;
}
@keyframes movimiento
{
from {left:0px;
top:10px;}
to {left:200px;
top:200px;}
}
Ejemplo
En el Objeto
La Animación

#obj
{ position: relative;
animation: rotacion 2s infinite;
-webkit-animation: rotacion 2s infinite;
-moz- animation: rotacion 2s infinite;
}
@keyframes rotacion
{
0% {transform:rotate(0deg);}
}
Ejemplo

#obj
{ position: relative;
animation: escala 2s inﬁnite;
}
@keyframes movimiento
{
from { transform:scale(0.5);}
to { transform:scale(2);}
}
Ejemplo

CREDITS: This presentation template was created by
Slidesgo, including icons by Flaticon, and
infographics & images by Freepik.
Gracias!
Preguntas?
jcvallejos@uto.edu.bo
WA 67200287
Please keep this slide for attribution.

CSS_2020.pdf

Más contenido relacionado

Similar a CSS_2020.pdf (20)

Último (11)

CSS_2020.pdf