Scribd
Cargar
33 vistas32 páginas

Ing. Fernando Germán Arellano Ponce

Cargado por

Garcia fauca Renzo roldan
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 PPTX, PDF, TXT o lee en línea desde Scribd
33 vistas32 páginas

Ing. Fernando Germán Arellano Ponce

Cargado por

Garcia fauca Renzo roldan
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 PPTX, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 32

CSS3

Ing. Fernando Germán Arellano Ponce


Concepto
El CSS podría definirse como un tipo de lenguaje que permite definir y crear la presentación de un
documento ya estructurado y escrito en un lenguaje de marcado como puede ser HTML. Es decir,
permite generar el diseño visual de páginas web e interfaces de usuario. Esta herramienta ha
evolucionado con el tiempo y actualmente se encuentra en su tercera versión.
Las siglas CSS corresponden a ‘Cascading Style Sheets’, cuyo significado es:
● Cascading. Los estilos que se aplican a los elementos de una página web se propagan a los
elementos que contiene en forma de cascada (Arriba hacia Abajo / Padre a Hijo).
● Style. Mediante las indicaciones CSS lo que hacemos es aplicar estilos visuales a los
diferentes elementos de las páginas web.
● Sheets. Cuando se generan los estilos de una página web se añaden en ficheros aparte u hojas
con la extensión .css
Escribir código css
Para escribir código css utilizamos:
- Selector
- Propiedad
- Valor

Selector { propiedad:valor;}
Ejemplo:
H1 {color:#ccdd55}
Selector
Un selector es un identificador para saber sobre qué elemento HTML debemos aplicar el
estilo.
Existen diferentes tipos de selectores.
Se pueden crear jerarquías de estilos.
Podemos definir estilos por defecto para los elementos HTML estándar.
Los estilos pueden sobreescribir a otro, el orden de sobreescritura es el mismo en el que se
cargan los ficheros css o se lee el fichero.
Si queremos que un estilo prevalezca sobre el resto, podemos indicarlo con !important
Tipos de selectores:

De elemento HTML:
h1, table, div, span…
De identificador
Todos los elementos HTML cuya propiedad "id" tenga un determinado valor, tendrán ese estilo.
se usa # antes del SELECTOR
De clase
Todos los elementos HTML cuya propiedad "class" tenga un determinado valor tendrán ese estilo.
Ejemplo: se usa el punto antes del SELECTOR
Normalmente se le aplica un estilo por defecto a los elementos HTML para conformar una
plantilla.
La personalización definitiva se suele realizar haciendo uso de la propiedad "class".
No es recomendado usar el selector por id. Sólo se recomienda cuando el componente,
además de estilo realiza alguna funcionalidad javascript.
Cuando incluyamos plantillas en un fichero HTML hay que estar seguros que no
incorporan estilos CSS que sobreescriban los nuestros.
En caso de conflicto, debemos asegurar que nuestros estilos quedan situados por encima
de los otros (aunque no siempre es posible)
O S
PL
E M
E J
EJERCICIO 1
REALIZAR UNA PÁGINA WEB, QUE TENGA TRES PÁRRAFOS, UN TITULO.
Asignar a los párrafos el color rojo
Asignar al título el color azul y tipo de letra arial, tamaño 80px
el fondo de la pagina debe ser de color amarillo
el color del texto verde
Los códigos css deben estar en un archivo llamado miestilo.css
Solución
!DOCTYPE html>
<html lang="es">
<head>
<title>Este texto es el título del documento</title>
<meta charset="utf-8">
<meta name="description" content="Este es un documento HTML5">
<meta name="keywords" content="HTML, CSS, JavaScript">
<link rel="stylesheet" href="miestilo.css">
</head>
<body>
<h1> Ejercicio 1 </h1>
<p> Este es el primer párrafo que escribo </p>
<p> Este es el segundo párrafo que escribo </p>
<p> Este es el tercer párrafo que escribo </p>

</body>
</html>
hoja de estilo
*{
margin: 0px;
padding: 0px;
}
body{
background: rgb(238, 224, 32);
color: rgb(59, 241, 43);
}
h1{
color: blue;
font-size: 80px;
}
p{
color: red;
}
Color de Texto
Se usa la propiedad color seguida de su valor en hexadecimal, valores rgb, etc..

Ejemplo:

color: red;

color: #f2aa23;
Color de fondo
Para definir el color de fondo se usa:

background-color:yellow;
background:red;
Opacidad - transparencia
La propiedad CSS opacity define la transparencia de un elemento, esto es, en qué grado se
superpone el fondo al elemento.

Sintaxis
opacity: <valor alfanumérico>

Valores

<alphavalue>

Es un número cuyo valor se encuentra entre 0.0 y 1.0, ambos incluidos. Este valor representa
la opacidad. Si el valor se sale de la escala, será ajustado al valor válido más cercano.
valor Significado

0 El elemento es transparente (invisible).

Cualquier valor entre 0 y 1 El elemento es translúcido.

1 El elemento es opaco (sólido).


Bordes.
Se asignan bordes a los elementos u objetos. la propiedad es border.
La propiedad border permite definir en una única regla todos los bordes de los elementos
seleccionados. Se puede utilizar border para definir el o los valores siguientes: border-
width, border-style, border-color.
Sintaxis
border: [border-width || border-style || border-color ] ;
Fuentes
Hasta ahora, el principal problema del diseño web en cuanto a tipografía era el no poder usar cualquier
fuente para el texto html, ya que si no estaba instalada en el sistema del usuario que accedía a esa
página, no se podía visualizar.
Debido a esto, cuando hay que mostrar texto en una web, por un lado se utilizan las típicas y más
comunes fuentes “de sistema” que traen instaladas los sistemas operativos (Arial, Tahoma, Verdana,
Courier, Times New Roman…), asegurándonos que se visualizarán en cualquier computador como se
han creado en su diseño.
Y por otro lado, si se quiere poner un texto con una fuente distinta que probablemente nadie tenga en su
ordenador se crea un gif o un jpg de ese texto y se coloca como una imagen.
Ahora los nuevos navegadores y las nuevas reglas CSS permiten introducir una fuente en una página
web, de forma que podemos utilizar cualquier fuente que queramos. ¿Como?. Hay varias maneras.
La regla @font-face
Una de las At-Rule (regla arroba) en CSS, es la pequeña maravilla que va a cambiar el aspecto del diseño web. Es una propiedad para
definir en un sitio web una fuente que el usuario no tenga instalada en su computador.

Sólo debemos subir el archivo de la fuente deseada a nuestro sitio web (mediante FTP, al servidor) y definirla mediante CSS.

La fuente debe ser definida por la regla @font-face, además de la clase en la que la vayamos a usar. Para el tipo de fuente, puede usarse
en formato OpenType (.otf) o bien, en formato Truetype (.ttf).

Ejemplo
@font-face {
font-family: ”MiFuente”;
src: url(Chunkfive.otf) format(“opentype”);
}
Tamaño de Fuente
La propiedad font-size:, nos permite definir el tamaño de la fuente, en pixeles, unidades
rem o porcentaje.
Ej.

font-size: 16px;
Tipo de letra
Para utilizar un tipo de letra se usa la propiedad:
font-family
Ej.
font-family: Arial;

De no tener el tipo de letra definido, el sistema junto con el navegador, utilizarán la fuente
más parecida.
Padding
La propiedad abreviada de CSS padding establece el área de relleno en los
cuatro lados de un elemento a la vez. Sintaxis
padding:10px; /* Aplica a los cuatro lados */
padding: 10%
padding: 10px;
padding:10px 15px 20px 25px
/* arriba y abajo | izquierda y derecha */
El área de relleno de un elemento es el espacio entre su contenido y su borde.

Los valores asignados comienzan a aplicarse en el sentido de las manecillas


padding: 5% 10%;
del reloj (Arriba,Derecha,Abajo,Izquierda)
/* arriba | izquierda y derecha | abajo */

Propiedades constituyentes padding: 10px 20px 20px;


Esta propiedad es una abreviatura de las siguientes propiedades CSS:
/* arriba | derecha | abajo | izquierda */
● padding-top
● padding-right (en-US) padding: 5px 10px 0px 25px;
● padding-bottom
● padding-left (en-US)
Margenes
Se utiliza para asignar espacios entre el borde de la
● Un único valor aplicará para todos los cuatro
página y su contenido, su propiedad es margin.
lados.
Sintaxis
● Dos valores aplicarán: El primer valor para
/* Aplica a todos los cuatro lados */Se utiliza para
arriba y abajo, el segundo valor para izquierda
asignar espacios entre el borde de la página y su y derecha.
contenido, su propiedad es margin. ● Tres valores aplicarán: El primero para arriba, el
Sintaxis segundo para izquierda y derecha, el tercero
/* Aplica a todos los cuatro lados */ para abajo.
margin: 1em; ● Cuatro valores aplicarán en sentido de las
/* Vertical | Horizontal */ manecillas del reloj empezando desde arriba.
margin: 5% auto; (Arriba, derecha, abajo, izquierda)
/* Arriba | Horizontal | Abajo */
margin: 1em auto 2em;
/* Arriba | Derecha | Abajo | Izquierda */
margin: 2px 1em 0 auto;
Alineación
Para alinear el texto se utiliza, la propiedad
text-aling
sus valores son:
● center
● left
● right
● justify
Menú o barra de navegación
Una barra de navegación necesita HTML estándar como base.

En nuestros ejemplos, crearemos la barra de navegación a partir de una lista HTML estándar.

Una barra de navegación es básicamente una lista de enlaces, por lo que usar los elementos <ul> y <li> tiene
mucho sentido:

<ul>

<li><a href="inicio.html">Inicio</a></li>

<li><a href="Archivo.html">Archivo</a></li>

<li><a href="Contactos.html">Contactos</a></li>

<li><a href="Ayuda.html">Ayuda</a></li>

</ul>
Aplicando css
Ahora eliminemos las viñetas y los márgenes y el relleno de la lista:

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Descripción

● list-style-type: none;- Elimina las balas. Una barra de navegación no necesita marcadores de lista
● Establecer margin: 0;y padding: 0; eliminar la configuración predeterminada del navegador
Barra vertical
Para crear una barra de navegación vertical, puede diseñar los elementos <a> dentro de la lista, además del
código anterior.

li a {
display: block;
width: 60px;
}

● display: block; - Mostrar los enlaces como elementos de bloque hace que se pueda hacer clic en toda
el área del enlace (no solo en el texto) y nos permite especificar el ancho (y el relleno, el margen, la
altura, etc. si lo desea)
● width: 60px;- Los elementos de bloque ocupan todo el ancho disponible por defecto. Queremos
especificar un ancho de 60 píxeles.

También puede establecer el ancho de <ul> y eliminar el ancho de <a>, ya que ocuparán el ancho completo
disponible cuando se muestren como elementos de bloque.
Corregir así
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}

li a {
display: block;
}
Ejemplo <html>
<body>

Cree una barra de navegación vertical básica con un color de fondo gris
y cambie el color de fondo de los enlaces cuando el usuario mueva el
<h2>Barra de Navegación Vertical</h2>
mouse sobre ellos:
<ul>
ul {
list-style-type: none; <li><a href="inicio.html">Inicio</a></li>
margin: 0;
padding: 0; <li><a href="Archivo.html">Archivo</a></li>
width: 200px;
background-color: #f1f1f1;
}
<li><a href="Contactos.html">Contactos</a></li>
<li><a href="Ayuda.html">Ayuda</a></li>
li a {
display: block; </ul>
color: #000;
padding: 8px 16px;
text-decoration: none;
}
</body>
/* Change the link color on hover */
</html>
li a:hover {
background-color: #555;
color: white;
}
Mantener Activa una opción del menú
Código completo css
.active {
background-color: #4CAF50; ul {
list-style-type: none;
color: white; margin: 0;
} padding: 0;
width: 200px;
background-color: #f1f1f1;
}

li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}

li a.active {
background-color: #4CAF50;
color: white;
}

li a:hover:not(.active) {
background-color: #555;
color: white;
Vínculos centrales y agregar bordes

Agregue text-align:centera <li> o <a> para centrar los enlaces.

Agregue la borderpropiedad a <ul> agregue un borde alrededor de la barra de navegación. Si también desea
bordes dentro de la barra de navegación, agregue a border-bottoma todos los elementos <li>, excepto al
último:

ul {
border: 1px solid #555;
}
li {
text-align: center;
border-bottom: 1px solid #555;
}
li:last-child {
border-bottom: none;}
Ejemplo
ul {

list-style-type: none; li {
margin: 0; text-align: center;
border-bottom: 1px solid #555;
padding: 0;
}
width: 200px;
li:last-child {
background-color: #f1f1f1; border-bottom: none;
border: 1px solid #555; }
} li a.active {
li a { background-color: #4CAF50;
display: block; color: white;
color: #000; }
padding: 8px 16px; li a:hover:not(.active) {
text-decoration: none; background-color: #555;
} color: white;
}
Colocar objetos en la pantalla
Para colocar objetos en la pantalla del navegador, debemos utilizar:

Selector:

position : Determina la forma como los objetos de colocan en la pantalla.

Las opciones propuestas son: relative, y absolute

relative: esta opción permite cambiar el punto origen de la pantalla, es decir hace que el
área o espacio que se está usando como un DIV por ejemplo sea el que asuma el punto
origen (0,0). y todos los elementos que estén dentro de esta área utilizarán ese punto de
referencia.

También podría gustarte