Texto instructivo grupo-3.
COMO APPLICAR
CSS A HTML.
Maestra: Iluminada De León.
#19 Willmer Guzman
INTEGRANTES #15 Daireny Faña
#32 Kuoenistmare Frank Reyez
#17 Arianna Garcia
#3 Melani Beato
#35 Maybeth Rodríguez
• INTRODUCCIÓN
Requerimientos
Software requerido:
• IDE de programacion (Ej: VS CODE, bloc de
notas etc...).
• Navegador (Cualquier navegador).
Hardware requerido:
• Desktop o Laptop (Con minimo 4GB de
RAM).
• INTRODUCCIÓN
1.1 ¿Qué es CSS?
CSS o Cascading style sheets es un lenguaje de
marcado que se utiliza en conjunto con html
para controlar la apariencia del contenido de las
páginas escritas en HTML.
• INTRODUCCIÓN
1.2 ¿Cómo se usa CSS?
Cada elemento en html es tratado como una caja, dichas cajas pueden contener dentro de si otras cajas o el contenido que representan, un
ejemplo de esto podría ser la etiqueta <p>: todo el texto contenido entre la etiqueta de inicio y finalización es tratado como el contenido de la
caja.
Html Resultado
CSS funciona de tal manera que puede controlar el aspecto del contenido y el aspecto
propio de cajas específicas y de otras cajas que se encuentren contenidas en la misma.
Para aplicar CSS, use un selector que identifique la caja en cuestión y agregue
declaraciones que controlen su apariencia dentro de dos llaves (Ej: {..}).
• INTRODUCCIÓN
1.2 ¿Cómo se usa CSS?
Las declaraciones están compuestas por 2 partes:
1- Propiedades: Especifican la característica a alterar. Para
aplicar una propiedad, escriba el nombre de la misma y
agregue un “:” al final.
2- Valores: Especifican las características específicas que
tomará el contenido o la caja. Para darle un valor a una
propiedad, escriba un valor valido luego de “:” y finalice el
valor especificado con un “;”.
• INTRODUCCIÓN
1.2 ¿Cómo se usa CSS?
Para especificar selectores, puedes hacer uso de los siguientes métodos .
1- Elementos: Defina los elementos a los cuales quieres aplicar estilos directamente escribiendo sus nombres.
Ej: p {…} y h1, h2, h3 {..}
2- ID: Tras haberle agregado un atributo “id” al elemento en cuestión, agregue el valor que le dio con una almohadilla precediéndolo para
dar a entender que se le están aplicando estilos. El atributo “id” es universal y se aplica a todo elemento, cada valor de “id” debe ser único
y empezar por una letra.
Ej: #barra1 {..}
3- Clases: Tras haberle agregado un atributo “class” al elemento/os en cuestión, agregue el valor que se le dio a dicho atributo con un
punto precediéndolo, esto le permitirá seleccionar varios elementos con atributos “class” con el mismo valor y especificar que se le están
aplicando estilos. El atributo de “class” es universal y se puede aplicar a cualquier elemento, puedes aplicar el mismo valor de clase a
varios elementos.
Ej: .parrafos {..}
• INTRODUCCIÓN
1.3 Como aplicar CSS a tu página
Hay 3 maneras de aplicar CSS a tus documentos HTML, 2 internas y 1 externa.
Como aplicar CSS interno:
Hay dos métodos que puedes utilizar:
1- Utilizando el atributo “style”: Agregue el atributo “style” al elemento en cuestión, y dentro de su valor, especifique los estilos que
quiera aplicar. Para utilizar este método no se necesitan selectores.
2- Utilizando el elemento <style> dentro de <head>: Agregue la etiqueta de
inicio y finalización de <style> dentro de <head>, luego, agregue todos los
estilos que quieras aplicar. Asegúrese de añadir el atributo type con el valor de
“text/css” para especificar al ordenador que el contenido de la etiqueta se trata
de estilos de CSS.
• INTRODUCCIÓN
1.3 Como aplicar CSS a tu página
Como añadir CSS externo:
Utilizando la etiqueta <link>: Haga uso de la etiqueta link con el atributo type con el valor “text/css” y rel con el valor
“stylesheet” para conectar a un documento externo de CSS.
[Link]
2.1 Controlar el color:
Para interferir con el color de tanto las letras como el fondo de las cajas, se hace uso de las propiedades “color:” y “background-
color:”, y los valores de dichas propiedades se pueden especificar de 3 maneras:
1- Valores RGB (Red, Green, Blue): Estos especifican ciertas cantidades de rojo,
verde y azul de 0-255. Para especificar colores, agregue 3 valores de 0-255 para el
rojo, verde y azul separados por comas, esto le permitirá crear varias tonalidades.
Ej: “rgb(100,150,170)”.
2- Código hexadecimal: Utilice un código valido de 6 dígitos con una almohadilla
precediéndolo, con cada 2 dígitos especificando una tonalidad de rojo, verde o azul.
El ordenador los mezclara para crear un variado rango de tonos.
Ej: #ee3e80.
3- Nombre del color: Escriba el nombre del color que quieras usar de los 147 colores
preexistentes que se pueden utilizar.
Ej: Red (rojo).
[Link]
2.2 Controlar la transparencia:
Para controlar la transparencia use la propiedad opacity:, luego, especifique un valor entre 0.0-1.0. 0.15
equivale a un 15% de transparencia, 0.7 un 70% y 1.0 un 100%.
Ej: opacity: 0.75;
Además de esto, también se puede utilizar la propiedad rgba: para definir el color junto con el porcentaje de
transparencia. Se añaden los 3 valores individuales de 0-255 para definir la cantidad de rojo, verde y azul, acto
seguido, se especifica un 4to valor para representar el grado de transparencia junto con el color.
Ej: rgba(100, 70, 50, 0.7);
[Link]
2.2 Degradado de colores
Puedes añadir degradados al fondo de tus páginas utilizando la
propiedad background y dándole un valor de linear-gradient(…).
Para especificar los colores del degradado, se especifica el valor
de cada color separado por comas dentro del paréntesis, y por
default, este mostrará los colores verticalmente en un orden
descendiente.
Ej: background: linear-gradient(red, purple, blue).
Para alterar la dirección del degradado, se utiliza
un valor adicional al inicio de la lista de colores
a aplicar. Los valores utilizados son “to left” (a
la izquierda), “to bottom” (Al fondo), “to top”
(Arriba) y “to right”(A la derecha).
[Link]
3.1 Controlar la fuente:
Para especificar fuentes, use la propiedad font-family: y acto seguido añada como valor la fuente/s a utilizar y el tipo de letra de
dicha fuente. (Las fuentes cuyo nombre contengan caracteres especiales o espacios deberán ser escritas entre comillas).
CSS es capaz de mostrar 5 tipos de letra estándar:
1-Serif: Tiene detalles en los extremos. Algunos ejemplos de fuentes con este tipo de
letra son: Georgia, Times y Times New Roman.
2-Sans-serif: tiene extremos rectos. Algunas fuentes comunes son: Arial, Verdana y
Helvetica.
3- Monospace: cada letra tiene el mismo ancho. Algunas fuentes comunes son:
Courieur y ‘Courier New’.
[Link]
3.1 Controlar la fuente:
4- Cursive: Las letras cuentan con características de la escritura cursiva. Algunas
fuentes comunes son: ‘Monotype Corsiva’ y ‘Comic Sans MS’.
5- Fantasy: Posee la mayor decoración y normalmente se usa para títulos. Algunas
fuentes son: Impact y Haettenschweiler.
La fuente solo se mostrará si se encuentra descargada dentro del computador del usuario, por lo que es
recomendable especificar varias fuentes del mismo tipo de letra para asegurarse que, si una no funciona, la otra
pueda ser aplicada como repuesto. Para lograr esto, se añade el nombre de diversas fuentes con el mismo tipo de
letra separadas por comas.
[Link]
3.2 Controlar el tamaño de letras
La propiedad font-size nos permite especificar el tamaño de las letras
en 3 unidades:
1- Pixeles: Las computadoras representan información visual en la
computadora por medio de pixeles, pequeñas unidades cuadradas que
representan un color y sirven para crear imágenes digitales. Para usar esta
unidad, se escribe un valor numérico seguido de las letras px (que significan
pixel).
Ej: font-size: 20px.
2- Porcentajes: Para usar este método se utiliza un porcentaje del tamaño en
pixeles por default de las letras del navegador del usuario. El default de las
letras de un navegador suele ser de 16px o pixeles por letra, por lo que, un
valor de 200%, serían 32 pixeles.
Ej: font-size: 200%;
3- EMs: Esta unidad se basa en el tamaño estándar en pixeles de la letra M
del navegador del usuario y lo utiliza para definir el tamaño de la letra
basándose en dicho valor. Para usar este método, se hace uso de un valor
número seguido de las letras em, y el tamaño de la letra dependerá del
tamaño por default de la M en el navegador del usuario.
Ej: font-size: 2em;
[Link]
3.3 Decoración adicional de las letras
1- Negrita: Se aplica con la propiedad font-
weight:, y se le da un valor de bold (negrita
en inglés) o normal, también se puede
especificar la cantidad de negrita con
números del 100 al 900.
Ej: font-weight: 300;
2- Itálica: Se usa la propiedad font-
style:, y se le da un valor de normal,
italic (itálica) o oblique (oblicua).
Ej: font-style: italic.
[Link]
3.3 Decoración adicional de las letras
3- Subrayar y tachar: Se usa la propiedad text-
decoration con los valores none (nada), underline
(subrayar), overline (línea por arriba) y line-
through.
Ej: text-decoration: line-through.
4- Leading (Espacio vertical entre letras):
Se usa la propiedad line-height:, con valores
especificados en EMS o pixeles.
Ej: line-height: 20px;
5- Kerning (Espacio horizontal entre letras): Se
usa la propiedad letter-spacing con valores
especificados en en EMS o pixeles.
Ej: letter-spacing: 40px.
[Link]
3.3 Decoración adicional de las letras
6- Espaciar palabras: Se usa la propiedad
word-spacing con valores en EMS o
pixeles.
7- Alinear texto horizontalmente: Se usa la
propiedad text-align con los valores left
(izquierda, right (derecha), center (centro)
o justify (hace que el texto ocupe todo el
ancho de la caja).
Ej:
8- Alinear texto verticalmente: Se usa la
propiedad vertical-align: con los valores
top(arriba), middle (en medio),
bottom(fondo), sub(abajo), super(por
encima) o baseline(en la linea superior de
texto).
[Link]
3.3 Decoración adicional de las letras
9- Sangria: Se usa la propiedad text-indent: con
valores especificados en ems, pixeles o
porcentaje. (Los valores también pueden ser
negativos, en ese caso, la sangría será hacia la
izquierda).
Ej:
10- Sombra: Se usa la propiedad text-shadow: para darle una sombra a
las letras, con 3 valores de distancia y un 4to de color especificado en
ya sea rgb, por nombre o código hexadecimal:
Ej: text-shadow: Xpx Ypx Zpx #color;
El primer valor es la distancia de caída de la sombra a izquierda o
derecha (los valores negativos hacen caída a la izquierda), el segundo
valor representa la caída hacia arriba o abajo de la sombra (los valores
negativos hacen caída arriba), el tercer valor específica el difuminado
de la sombra y el cuarto el color.
[Link]
4.1 Dimensiones de la caja
Para definir las dimensiones de una caja, se usan
las propiedades width: (ancho) y height (altura) y
luego se le dan valores especificados con
cualquiera de las 3 unidades de medida
utilizadas. Ej: height: 150px; width: 350px.
También puedes especificar acciones para
cuando el contenido ocupa más espacio
que el contenido de la caja con la
propiedad overflow: y los valores hidden
(esconder el contenido restante) y scroll
(crear una barra para deslizar hacia abajo
en el contenido).
[Link]
4.2 Modelo de caja
El modelo de caja en CSS sirve como una manera más
clara de entender el funcionamiento de las cajas en
HTML, este modelo es un rectángulo con 4 divisiones
dentro de sí mismo, que representan ciertos
componentes de las cajas:
1- Contenido: Aquí se encuentra el contenido de la caja, ya sea texto, imágenes, audio etc..
2- Padding: Este es el relleno de la página, y es lo que separa al contenido de sus bordes.
3- Border: Este empieza donde se acaba el padding o relleno, y se encarga de marcar los bordes de la caja.
4- Margin: Este empieza donde se terminan los bordes, y es la distancia que tiene un elemento en relación con otro.
[Link]
4.3 Bordes
Por default, los bordes de un elemento son invisibles, pero podemos aplicar varias propiedades para
hacer bordes visibles y controlar su apariencia.
1- Ancho de borde: Para controlar el ancho
del borde, se utiliza la propiedad border-
width:
para definir el ancho de los bordes por
medio de cualquiera de las 3 unidades.
Puede tomar hasta 4 valores para cada
borde.
2- Estilo de borde: Para definir el
estilo del borde, se utiliza la
propiedad border-style:, la cual
puede tomar los siguientes valores.
ej: imagen
[Link]
4.3 Bordes
3- Color de borde: Para darle un color específico a los bordes, se usa la propiedad border-
color:, con valores especificados con cualquiera de las 3 unidades de color.
Los bordes pueden tener hasta 4 colores diferentes, en caso de solo añadir 3, el
primero se aplicara al borde superior, el segundo al borde derecho e izquierdo y el
tercero al borde del fondo.
[Link]
4.4 Relleno
Para agregar relleno, se especifican valores en una de las 3 unidades de
longitud (em, px o %) con la propiedad padding:. Se puede hacer uso de
hasta 4 valores diferentes de longitud para aplicar a cada lado que
quieras rellenar.
Por ejemplo, en la siguiente imagen se pueden observar unas cajas con
la propiedad padding:
La primera tiene padding de 30px en todos los lados (padding: 30px).
La segunda tiene un padding de 10px arriba y en el fondo y 40px en la
izquierda y derecha (padding: 10px 40px;).
La tercera tiene un padding de 10px arriba, 80px en izquierda y derecha
y 5px en el fondo
(padding: 10px 80px 5px).
La cuarta y última caja tiene un padding de 40px arriba, 15px en la
derecha, 5px en el fondo y 30px a la izquierda (padding: 40px 15px
5px 30px).
[Link]
4.5 Márgenes
Para especificar la longitud de los márgenes se
usa la propiedad margin:. al igual que el
relleno, puede ser específicado con cualquiera
de las 3 unidades de longitud, y puede
contener hasta 4 valores diferentes para cada
lado donde quieras aplicar márgenes.
Un detalle adicional de esta propiedad, es
que cuando dos márgenes chocan, la
distancia entre los dos elementos no se
suma, sino que el navegador muestra el
margen que tenga la mayor longitud. Puedes
hacer que la distancia entre dos elementos
sea nula dándoles un margen de 0px, y por
medio del uso de valores negativos, puedes
hacer que se traslapen.
C N C L U S IÓ N
Esperamos que les haya servido y
también ver sus proyectos muy pronto.
Gracias
Willmer
The G.O.A.T
(enano)