Clase 5 CSS

Clase 5
CSS Parte 1
CSS
¡HTML NUNCA tuvo la intención de contener etiquetas para formatear una página web!
HTML se creó para describir el contenido de una página web, como:
<h1> Este es un encabezado </h1>
<p> Este es un párrafo. </p>
Cuando se agregaron etiquetas como <font> y atributos de color, se inició una pesadilla
para los desarrolladores web para mantener los estilos en grandes sitios web, donde se
agregaban fuentes e información de color a cada página.
Para resolver este problema, el World Wide Web Consortium (W3C) creó CSS.
CSS eliminó el formato de estilo de la página HTML.
¿Qué es CSS?
● CSS Cascading Style Sheets, Hoja de Estilos en Cascada
○ Lenguaje de estilos
○ La prioridad para aplicar las reglas de estilos está
determinada por el sistema en cascada (herencia)
● Permite aplicar estilos de manera selectiva a elementos en
documentos HTML
¿Cómo lo usamos?
Hay 3 formas de utilizar una hoja de estilo:
⮚ CSS Externo: Usamos <link> para vincular el css con archivo html.
<link rel="stylesheet" href= "css/styles.css" >
⮚ CSS Interno: Incluimos una etiqueta <style> dentro del <head> en

nuestro documento HTML.
<style> reglas css </style>
⮚ CSS en Línea: Dentro del atributo style= "reglas css"

incorporamos los estilos que se van a aplicar solo en esa etiqueta.
¿Cómo lo usamos?
La forma más común de agregar CSS es mantener los estilos en

archivos CSS externos.
Sin embargo, para aprender los diferentes estilos a veces es más fácil
probarlos en estilos en línea e internos , porque es más fácil de probar
estilos y colores y comprobar que funciona lo que queremos hacer.
CSS Externo
● Pasos a seguir para trabajar con archivo css Externo:

• Creamos una carpeta css
• Creamos el archivo style.css
• Ponemos la etiqueta <link> en <head>
<link rel="stylesheet" href="style.css">
• Insertamos las reglas de ccs en style.css
Estructura del CSS
Selector: El selector es el elemento HTML que vamos a seleccionar del

documento para aplicarle un estilo concreto. Por ejemplo, el elemento p.
Realmente, esto es mucho más complejo, pero ya dedicaremos una serie de
capítulos exclusivamente a este tema.
Propiedad: La propiedad es una de las diferentes características

que brinda el lenguaje CSS e iremos aprendiendo.
Valor: Cada propiedad CSS tiene una serie de valores concretos,

con los que tendrá uno u otro comportamiento.
Estructura del CSS
Para especificar más de una
propiedad se estila encolumnar los
atributos para una mejora legibilidad.
Comentarios: Se pueden incluir entre

los caracteres /* y */
h1 { color: blue;
font-family: verdana;
font-size: 300%;
}
p { color: red;
font-family: courier;
font-size: 160%;
}
Estructura del CSS
Ejemplo de REGLA
Selector:
h1 { propiedad | : valor :
color: blue;
font-size: 24px;
}
bloque de declaración :
Propiedades Básicas
• background-color
• color
• text-align
• with
• height
• border
• padding
• margin
• font-family
• font-size
• font-style
• font-weight
Colores
● https://htmlcolorcodes.com/es/
● https://color.adobe.com/
● Color picker es una Extencion de Google Chrome
● Usar el IDE que usamos para desarrollar
Colores
La propiedad color se puede usar en cualquier elemento, aunque principalmente se usa para modificar el
color del texto, Existen diferentes formas de especificar el color:
✔ Valor hexadecimal: #31078C o #FF0000
✔ Valor RGB (Red, Green, Blue): rgb(250, 0, 250), rgb(0, 0, 0) es el color negro y por el contrario,
rgb(255, 255, 255) es blanco.
✔ Valor RGBA (RGB + Alpha): rgba(5, 173, 213, 1) or rgba(100%, 62.5%, 100%, 1). El valor Alpha
tiene que estar comprendido entre [0-1] y hace referencia a la transparencia del elemento, siendo 1 =
opaco y 0 = transparente.
Mas variantes https://www.w3schools.com/cssref/css_colors.asp Referencia
https://www.w3schools.com/css/css_colors.asp Teoria
Google Fonts
● Nos permite modificar el tipo de fuente de las letras
● https://fonts.google.com/
○ Seleccionamos un tipo de fuente

○ Usamos la etiqueta Link para vincularlo con nuestro HTML
○ Usamos font-family para definir el uso de la fuente
Font
• font-size: nos permite especificar el tamaño de la fuente (px,
em, rem).
• font-style: nos permite darle estilo a la fuente (normal, italic,

oblique).
• font-family: establece una lista de fuentes (arial, helvetica,
sans-serif, etc).
• font-weight: nos permite especificar el ancho de la fuente

(bold, 400, 600, 800).
Medidas
Relativas (em y rem): Son unidades relativas al dispositivo sobre el que se está viendo la
página web. Dependiendo de cada dispositivo puede ser distinto, tales como
computadoras o celulares.
Son más aconsejables, porque se ajustarán mejor al medio con el que el usuario está
accediendo a nuestra web. Son las siguientes:
Fuente actual: em Es la fuente que se esta trabajando por defecto, si la fuente es de

10 puntos y se coloca 2em se estaría trabajando con una fuente de 20 puntos.
Altura de la letra: ex 1ex sería igual a la altura de la letra de la fuente actual del usuario.
Píxeles: px varían su tamaño real en base a la resolución de la pantalla del usuario.

Medidas
Porcentaje:
El porcentaje se utiliza para definir una unidad en función de la que esté definida en un
momento dado. Imaginemos que estamos trabajando en 12pt y definimos una unidad
como 150%. Esto sería igual al 150% de los 12pt actuales, que equivale a 18pt.
Absolutas (px): Las unidades absolutas son medidas fijas, en pixeles, que deberían verse
igual en todos los dispositivos. El problema es que varian los dispositivos y por eso no es
aconsejable usarlas. Sino Usar medidas relativas
Ejemplos: https://www.w3schools.com/cssref/css_units.asp
• Puntos pt Un punto equivale a 1/72 pulgadas
• Pulgadas in
• Centímetros cm
• Milímetros mm
• Picas pc (equivale a 12 puntos)
Selectores CSS
● Definen a qué elemento o elementos vamos a aplicar
las reglas/estilos de css
○ Selectores simples
○ Selectores Combinados
○ Selectores avanzados
Selectores Simples
● Elementos HTML : <h1> <p> <img> , etc…
● #id: atributo id de los elementos HTML.
● .class: atributo que identifica a un grupo de elementos
● * : Selecciona a todos los elementos

● selector A, selector B: header, footer, etc.
Selectores Simples
La regla indica
qué hay que hacer
y el selector indica
a quién se aplica.
❑ Selector universal: *
Selecciona todos los
elementos de HTML.
❑ de etiqueta: Se hace
referencia a etiquetas HTML
especificas.
Selectores Simples
❑ de clase: Se utiliza
referenciando el atributo class
de los elementos del HTML
queramos aplicarles estilos.
❑ de ID: Se utiliza referenciando al

atributo id de los elementos del
HTML y sólo puede hacer
referencia a un solo elemento
dentro de un mismo archivo.
Prioridad de Selectores
Inline Style
Attr id (#)
Attr class (.)
Element
Link: https://specifishity.com/
Jerarquía
!important: p { color:red!important; }
inline styles: <p style=“color:pink;”>Esto es un párrafo</p>
#id: #párrafo { color:blue; }
.class – pseudoclases: .párrafo { color:green; }
<etiquetas> – pseudoelementos: p { color:orange; }
Ejemplo: https://repl.it/@aylromero/Jerarquia-CSS#style.css
Arbol del DOM
HTML
Head Body
title style h1 p
Selectores Combinados
https://www.w3schools.com/cssref/css_selectors.asp
https://www.w3schools.com/cssref/css_selectors.asp
❑ selector descendiente: <div>

<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
Se aplican en los elementos que <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
tienen una relación padre-hijo, eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
es decir las etiquetas que están <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
dentro de otras etiquetas. </div>
---------------------------------------------------------------------------------------------------------------
En el siguiente ejemplo es más

div p {
fácil agregar un selector
descendiente que aplicar una color: green;
clase a cada elemento <p> font-size: 20px;
font-weight: bold;
}
selector de hijos: Si no
<p>
❑ Esto es <strong> muy </strong> importante.
queremos seleccionar todos </p>
<p>
los elementos descendientes Esto es <i> realmente <strong> muy </strong> </i> importante.
pero si a los hijos directos </p>
podemos utilizar el símbolo >. ---------------------------------------------------------------------------------------------------------------
p > strong {
❑ otros selectores: color: orange;
https://www.w3schools.com/cssref/css_selectors.asp }
---------------------------------------------------------------------------------------------------------------
Esto es muy importante.

Esto es realmente muy importante.
Pseudoclase
Es un selector que marca los elementos que están en un estado específico.
Es una palabra precedida por dos puntos y Selecciona un fragmento del documento que está en un
estado determinado y permite que se comporte como si se hubiera añadido una clase a su HTML.
:first-child: Se utiliza para representar al primer elemento

entre un grupo de elementos hermanos.
p:first-child {
color: red;
<div> }
<p> Lorem ipsum dolor sit amet </p> --------------------------------------------------------------------------
------------------------------------------------------
<p> Lorem ipsum dolor sit amet </p>
<p> Lorem ipsum dolor sit amet </p> Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet.
</div> Lorem ipsum dolor sit amet.
https://www.w3schools.com/cssref/css_default_values.asp
Pseudoclases
:last-child: Se utiliza para representar al último elemento entre un
grupo de elementos hermanos.
p:last-child {
<div> color: blue;
<p> Lorem ipsum dolor sit amet </p> }
<p> Lorem ipsum dolor sit amet </p> -------------------------------------------------------------------------
-------------------------------------------------------
<p> Lorem ipsum dolor sit amet </p>

</div> Lorem ipsum dolor sit amet.
Pseudoclases
:nth:child Se utiliza para representar al último elemento
<ol>
<li> Lorem ipsum dolor sit amet </li>

li:nth-child(3n+1){
background-color: black;
entre un grupo de elementos hermanos, podemos poner <li> Lorem ipsum dolor sit amet </li>

color: white;
cualquier número entero siempre y cuando tenga un caso
}

-----------------------------------------------------------------------------------
de uso. <li> Lorem ipsum dolor sit amet </li>
<li> Lorem ipsum dolor sit amet </li> 1. Lorem ipsum dolor sit amet
2. Lorem ipsum dolor sit amet
En el siguiente ej. :nth-child(3) representaría al tercer
</ol>
elemento. 4. Lorem ipsum dolor sit amet
:nth-child(3n) representaría a los elementos 3, 6 y 9. 6. Lorem ipsum dolor sit amet
nth-child(3n+6) representaría a los elementos 6 y 9.
También acepta como valor (even) y (odd) para seleccionar
pares e impares.
Hyperlink pseudoclases
:link se refiere a un enlace que todavía no ha sido visitado.
:hover se refiere a un elemento sobre el que se coloca el puntero del mouse.
:visited se refiere a un enlace que ya ha sido visitado.
:active Se refiere a cualquier elemento que ha sido activado por el usuario.
<a href=“#Contacto”>Contacto</a> a:link {
color: red;
}
Contacto a:hover {
background-color: yellow;
}
Contacto a:visited {
color: blue;
}
Contacto a:active {
background-color: green;
color: white;
Contacto }
Pseudoelementos
Se utilizan para darle estilos a partes específicas de un elemento.
❑ ::first-letter: Se utiliza para darle estilo a la primer letra de un texto.
p:: first-letter { color:blue;} | Esto es un párrafo
❑ ::first-line: Se utiliza para darle estilo a la primer línea de un párrafo.

p:: first-liner { background-color:yellow;} | Esto es una línea
Esto otra
❑ ::before: Puede utilizarse para agregar algo antes del contenido de un elemento
a::before{ content:“✨";}
❑ ::after: Coloca contenido después de un elemento a::before{ content:“🙉";}
❑ ::selection: Agrega estilos a una parte del documento que ha sido resaltada por el usuario
p::selection{background-color:pink;}
Keywords
none: ninguno.
inherit: el valor de la propiedad del elemento será heredado

del elemento padre.
initial: restablece el valor inicial de la propiedad.
unset: si es que el elemento heredo un valor diferente al

suyo, lo restablece a ese valor heredado del padre.

Clase 5 CSS

Cargado por

Copyright:

Formatos disponibles

Clase 5 CSS

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Clase 5 CSS

Cargado por

Copyright:

Formatos disponibles

Clase 5

⮚ CSS Interno: Incluimos una etiqueta <style> dentro del <head> en

⮚ CSS en Línea: Dentro del atributo style= "reglas css"

La forma más común de agregar CSS es mantener los estilos en

● Pasos a seguir para trabajar con archivo css Externo:

Selector: El selector es el elemento HTML que vamos a seleccionar del

Propiedad: La propiedad es una de las diferentes características

Valor: Cada propiedad CSS tiene una serie de valores concretos,

Comentarios: Se pueden incluir entre

✔ Valor hexadecimal: #31078C o #FF0000

Mas variantes https://www.w3schools.com/cssref/css_colors.asp Referencia

○ Seleccionamos un tipo de fuente

• font-style: nos permite darle estilo a la fuente (normal, italic,

• font-weight: nos permite especificar el ancho de la fuente

Fuente actual: em Es la fuente que se esta trabajando por defecto, si la fuente es de

Píxeles: px varían su tamaño real en base a la resolución de la pantalla del usuario.

● .class: atributo que identifica a un grupo de elementos

● * : Selecciona a todos los elementos

❑ de ID: Se utiliza referenciando al

Attr class (.)

❑ selector descendiente: <div>

En el siguiente ejemplo es más

Esto es muy importante.

:first-child: Se utiliza para representar al primer elemento

<p> Lorem ipsum dolor sit amet </p>

<li> Lorem ipsum dolor sit amet </li>

<li> Lorem ipsum dolor sit amet </li>

<li> Lorem ipsum dolor sit amet </li>

<li> Lorem ipsum dolor sit amet </li>

❑ ::first-line: Se utiliza para darle estilo a la primer línea de un párrafo.

❑ ::after: Coloca contenido después de un elemento a::before{ content:“🙉";}

inherit: el valor de la propiedad del elemento será heredado

initial: restablece el valor inicial de la propiedad.

unset: si es que el elemento heredo un valor diferente al

También podría gustarte