Scribd
Cargar
7 vistas35 páginas

CSS HJJH

El documento proporciona una guía completa sobre CSS, incluyendo su definición, sintaxis básica, formas de aplicación, selectores, propiedades y valores, así como conceptos avanzados como pseudoclases, media queries, Flexbox y Grid. También se detalla la evolución a CSS3, que introduce nuevas características y selectores. En resumen, es un recurso esencial para entender y aplicar estilos en documentos HTML.

Cargado por

cristian.lorca.estudio
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
7 vistas35 páginas

CSS HJJH

El documento proporciona una guía completa sobre CSS, incluyendo su definición, sintaxis básica, formas de aplicación, selectores, propiedades y valores, así como conceptos avanzados como pseudoclases, media queries, Flexbox y Grid. También se detalla la evolución a CSS3, que introduce nuevas características y selectores. En resumen, es un recurso esencial para entender y aplicar estilos en documentos HTML.

Cargado por

cristian.lorca.estudio
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/ 35

UD3: Hojas de estilos (CSS)

Índice
1. ¿Que es CSS?

2. Sintaxis básica

3. Formas de aplicar CSS

4. Selectores

5. Propiedades y valores

6. Pseudoclases - Pseudoelementos

7. Media Queries

8. Flexbox - Grid

9. CSS3
1. ¿Que es CSS?
Las hojas de estilo en cascada (cascading style sheets) o CSS, es un lenguaje creado por W3C que añade
diferentes estilos a documentos HTML o XHTML, dotándolos de formato.

Características:
• Se crearon para separar el contenido de un documento de
su aspecto, lo que permite tener documentos mejor
estructurados y limpios.
• Las hojas de estilos pueden aplicarse a un documento
entero, a una parte o, simplemente a una etiqueta concreta
(se pueden definir varios estilos para una misma etiqueta).
• CSS permite modificar la presentación de los elementos de
un documento HTML sin tener que tocar el código de éste.
• Las versiones de CSS vienen definida por la W3C (World
Wide Web Consortium). Actualmente la última versión es la
3 publicada a finales de 2011.

1
1. ¿Que es CSS?

Con CSS

SIN CSS

Sin CSS

2
2. Sintaxis básica
Todo código CCS se componen de reglas, que están formadas por dos partes muy diferenciadas: selector y
declaración. La regla es la declaración sobre estilo de uno o varios elementos.

Selector Declaración
h2 { color: #0099FF; }
Propiedad Valor

• Selector: Puede ser uno o varios los elementos a los que aplicar la regla CSS. Para definir el estilo de un
selector, se escribe la etiqueta seguida de la lista de declaraciones encerradas entre llaves.

• Declaración: Esta compuesta por dos partes: propiedad y valor, éstas se encuentran separadas por punto
y coma.
o Propiedad: Permite modificar el aspecto de una característica de un selector.
o Valor: Indica la asignación que se hace a la propiedad.

3
2. Sintaxis básica
Otros aspectos a tener en cuenta de las hojas de estilo en cascada o CSS son:

1. Comentarios: Para escribir comentarios en los archivos CSS


se debe utilizar /* al principio y */ al final

2. Agrupamientos: Es posible aplicar la misma declaración a


distintos selectores, para ello se utilizará la coma

3. Herencias: Al tener los HTML estructura de árbol, los sectores anidados heredan las declaraciones de los
padres.

4. Unidades de medidas utilizadas:

Puntos Pulgadas Centímetros Pixeles Milímetros Elemento actual Elemento fuente Porcentaje
pt in cm px mm em rem %

4
2. Sintaxis básica
5. Se comporta como una caja: Toda etiqueta HTML se comporta como una caja con su margen, padding,
border, ...

6. Los navegadores no controlan el diseño: Los navegadores solo


muestran los elementos en el orden en el que están, colocándolos de
izquierda a derecha (si no cabe se pone abajo).

5
3. Formas de aplicar CSS
Existen diferentes formas de aplicar estilos a un documento HTML.

1. Documento externo (Recomendado): Se creará un documento de hojas de estilo, cuya extensión será .css
Para vincular el archivo externo al documento HTML usaremos la etiqueta <link> con sus atributos
correspondientes (va dentro de <head>)

<link rel=stylesheet” type=“text/css” href=“estilo.css”/>

2. Aplicado dentro del propio documento: 3. Estilo aplicado a la etiqueta del documento:
Para ello utilizaremos la etiqueta <style> Se utilizará el atributo style en cada una de las
dentro de la etiqueta <head> etiquetas a las que se le quiera aplicar estilo.

6
4. Selector
Cualquier elemento HTML puede ser un selector, los más utilizados son:

De tipo Universal Descendiente De clase

De ID Hijo Adyacente

1. Selector de tipo: Se aplica a los elementos especificados de


una página. Hay que añadir el nombre del elemento seguido de
una declaración.

7
4. Selector

2. Selector universal: Utiliza el carácter (*) y se aplica a todos los elementos de la


pagina web. No suele usarse con frecuencia.

3. Selector descendiente: Se usa cuando un elemento es descendiente


de otro, es decir, se encuentra dentro de otro (entre la etiqueta de
inicio y fin).

4. Selector clase: Se usa para aplicar estilo a un


elemento concreto del documento, el selector
clase puede tener cualquier nombre y va
precedido del punto. Para poder aplicar dicha
clase a un elemento HTML se debe utilizar el
atributo class=“nombreDeLaClase”.

8
4. Selector

5. Selector por ID: Similar a los selectores de clase, pero


siendo la almohadilla (#) la que precede al selector en
vez del punto.

6. Selector hijo: Similar al descendente pero solo afecta a


los hijos directos de los elementos. Para ello se utiliza el
signo mayor que (>).

7. Selector adyacente: Se usa para elementos que


están seguidos de otros y son hermanos (el
elemento padre de ambos es el mismo). El signo
(+) se emplea para la declaración entre los
elementos,

9
5. Propiedades y valores (Texto)
Propiedad Valores Descripción
• none (No se aplica ningún estilo al texto)
• line-throguht (Tachado)
text-decoration Decora el texto
• overline/underline (Subrayado superior/inferior)
• wavy overline/wavy underline (Subrayado ondulado superior/inferior)
• Color HEX (Ejemplo: #C2472C)
Cambiar el color del
color • Color RGB (Ejemplo: rgb(255, 0, 0))
texto
• Nombre del color
• center (Centrado)
• justify (Justificado)
text-align Alineación del texto
• left (Alinear a la izquierda, valor por defecto)
• right (Alinear a la derecha.)
• ltr (La dirección del texto va de izquierda a derecha, valor por defecto)
direction Dirección del texto
• rtl (La dirección del texto va de derecha a izquierda)
• none (No realiza ningún tipo de transformación, valor por defecto)
• capitalize (Representa en mayúscula la primera letra de cada palabra) Convierte mayúsculas,
text-transform
• lowercase (Convierte a minúsculas) minúsculas, etc
• uppercase (Convierte a mayúsculas)

10
5. Propiedades y valores (Tipo de letra)

Propiedad Valores Descripción


• xx-small/x-small/small/mediium/large/x-large/xx-large (De menos a más grande)
font-size • Valor en una unidad de medida (pt, em, rem, px, …) Tamaño de letra
• Valor en porcentaje (%)
• Times, "Times New Roman", Georgia, serif
• Verdana, Arial, Helvetica, sans-serif Tipo de letra
font-family
• "Lucida Console", Courier, monospace (fuente)
• …
• nomal (Normal)
font-style • italic (Cursiva) Estilo fuente
• oblique (oblicua)
• normal (Grosor normal, valor por defecto)
• bold/bolder (Negrita)
font-weight Grosor fuente
• lighter (Fuente mas delgada)
• Valor entre 100 y 900 (400 equivale a normal y 700 a negrita)

11
5. Propiedades y valores (Fondos y tamaño)
Propiedad Valores Descripción
• transparent (Sin color, valor por defecto)
• Color HEX (Ejemplo: #C2472C)
background-color Color de fondo
• Color RGB (Ejemplo: rgb(255, 0, 0))
• Nombre del color
• none (Sin imagen, valor por defecto)
background-image Imagen de fondo
• Url de la imagen

Propiedad Valores Descripción


• auto (Valor por defecto)
height • Valor en una unidad de medida (pt, em, rem, px, …) Altura
• Valor en porcentaje (%)
• auto (Valor por defecto)
width • Valor en una unidad de medida (pt, em, rem, px, …) Anchura
• Valor en porcentaje (%)
margin • Valor en una unidad de medida (pt, em, rem, px, …) Margen
padding • Valor en una unidad de medida (pt, em, rem, px, …) Padding

12
5. Propiedades y valores (Posicionamiento)
Propiedad Valores Descripción
• none (El contenido no flota, valor por defecto)
float • left (Arrastra el elemento hacia la izquierda tanto como sea posible) Posicionamiento flotante
• right (Arrastra el elemento hacia la derecha tanto como sea posible)
• inline (Respecta el flujo por defecto, es decir, coloca la etiqueta tras la
anterior. No le afecta ni la propiedad width ni height).
display • block (Rompe el flujo por defecto y provoca un salto de línea antes y Tipo de caja
después de ésta. Ocupará todo el ancho de la página salvo que se
especifique de otra manera)
• static (Es el valor por defecto. El elemento sigue el flujo normal, las
propiedades top, botton, right, left o z-indez no le afectan).
• absolute (Se comporta como fixed pero en relación a la primera etiqueta
padre que tenga position relative)
position Modo de posicionamiento
• fixed (Siempre estará en la misma posición, se le aplicará las propiedades
top, botton, right, left o z-indez. No le afecta el scroll)
• relative (Similar a static, pero las propiedades top, botton, right, left o z-
indez si le afectan, por lo que se puede modificar su posición)
• Auto Permite posicionar
z-index
• Numero entero elementos que se solapan

13
6. Pseudoclases - Pseudoelementos
A la hora de aplicar propiedades CSS a un archivo HTML, es posible especificar el estado concreto del elemento
seleccionado, para ello se utilizará las pseudoclases, la sintaxis de éstas es:

Ejemplos

Pseudoclase Descripción
:link | :visited Selecciona un link visitado / no visitado.
:hover Selecciona el elemento cuando se pasa el ratón sobre él.
:active Selecciona un link activo.
:focus Seleccione un elemento input cuando éste recibe el foco.
:first-child | :last-child Selecciona el primer/último hijo de un determinado padre.
:nth-child(odd | even | Nº entero) Selecciona los hijos impares/pares/o que ocupan una posición X.
:nth-of-type(odd | even | Nº Selecciona los hijos impares/pares/o que ocupan una posición X
entero) de un determinado tipo.

14
6. Pseudoclases - Pseudoelementos
Si se desea añadir CSS a partes especificas de un determinado elemento, será necesario hacer uso de los
pseudoelementos, la sintaxis de éstos es:

Ejemplos

Pseudoelemento Descripción
::before | ::after Inserta algo antes o después del selector.
::first-letter Selecciona la primera letra de un determinado elemento.
::first-line Selecciona la primera línea de un determinado elemento.
::marker Selecciona el marcador de un determinado elemento de la lista.
Selecciona parte/partes del elemento cuando se seleccionan con el
::selection
ratón.

15
7. Media Queries
Las media queries se utilizan para modificar los elementos HTML en función del tipo de dispositivo o de ciertos
parámetros específicos como son la resolución de la pantalla, el ancho del navegador, ...

@media not|only mediatype and (mediafeature and|or|not mediafeature) {


CSS-Code;
}

Posibles Valores
Posibles Valores
max-width | max-height -> Anchura/altura máxima

mediafeature
all (Todos los dispositivos)
MediaType

min-width | min-height -> Anchura/altura mínima


print (Material impreso)
orientation -> Orientación del dispositivo puede ser
screen (Pantallas) landscape (horizontal) o portrait(vertical)
speech (Sintonizadores de audio) min-resolution | min-resolution -> Resolución mínima y
máxima

16
8. Flexbox - Grid (Flexbox Concepto)
Flexbox es un modulo de CSS que facilita realizar diseños responsive. Flexbox .contenedor-padre {
nos permite modificar el ancho, alto, y posicionamiento de los elementos de display: flex;
la mejor manera posible en el espacio que disponemos. }

Nota: Los flexbox se crean aplicando sobre el contenedor padre la propiedad display: flex

17
8. Flexbox - Grid (Flexbox Propiedades)
.contenedor-padre {
La propiedad justify-direction
display: flex;
especifica la dirección de todos
justify-direction: row | row-reverse | column | columna-reverse;
los elementos.
}

18
8. Flexbox - Grid (Flexbox Propiedades)
.contenedor-padre {
La propiedad flex-wrap determina si los
display: flex;
elementos "hijos" deben estar en una misma
flex-wrap: nowrap |wrap | wrap-reverse;
línea o en varias.
}

19
8. Flexbox - Grid (Flexbox Propiedades)
La propiedad justify-content alinea los elementos del contenedor cuando éstos no utilizan todo el espacio
disponible en el eje principal.

.contenedor-padre {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

20
8. Flexbox - Grid (Flexbox Propiedades)
La propiedad align-items especifica .contenedor-padre {
la alineación predeterminada de los display: flex;
elementos dentro del contenedor align-items: stretch |flex-start | flex-end | center | baseline;
flexible. }

21
8. Flexbox - Grid (Grid Concepto)

Grid es un sistema de maquetación que divide la


página en una cuadrícula o rejilla (grid) a partir
de la cual se pueden posicionar los distintos
elementos de una manera más sencilla, versátil y
con menos código.

.contenedor-padre {
display: grid;
}

Nota: La cuadrícula o rejilla (grid) se crea aplicando sobre el contenedor padre la propiedad display: grid

22
8. Flexbox - Grid (Grid Propiedades)

23
8. Flexbox - Grid (Grid Propiedades)

24
8. Flexbox - Grid (Grid Propiedades)

25
9. CSS3 (Concepto)
CSS3 es la ultima versión publicada de las hojas de estilo en cascada o CSS. En ésta se dota de nuevos estilos y
apariencias a los elementos de un documento HTML, XML,… permitiendo añadir sombras de cajas, transiciones,
esquinas redondeadas, gradientes lineales y radiales, … ahorrando bastante tiempo y mejorando el rendimiento.

Nuevos selectores de atributos de CSS3:

Selector Descripción
Selecciona los elementos que tenga dicho
[atributo]
atributo.
Selecciona los elementos que tenga un
[atributo^=“valor”]
atributo que empiece por el valor introducido.
Selecciona los elementos que tenga un
[atributo$=“valor”]
atributo que termine por el valor introducido.
Selecciona los elementos que tenga un
[atributo*=“valor”]
atributo que contengan el valor introducido.

26
9. CSS3 (RGB/RGBA - HSL/HSLA)
CSS3 añade el canal Alpha tanto a RGB como a HSL, este permite definir la transparencia del elemento. Los
valores de este canal están comprendidos entre 0 (transparente) y 1 (opaco).

RGB/RGBA rgba(Red, Green, Blue, Alpha) HSL/HSLA hsla(Hue, Saturation, Lightness, Alpha)

Valor Descripción Valor Descripción


Define la cantidad de rojo con un Define el tono con un valor entre 0 y 360,
Red Hue
valor entre 0 y 255. ambos incluidos.
Determina la cantidad de verde con Determina la saturación del color. Utiliza para
Green Saturation
un valor entre 0 y 255. ello un valor porcentual
Establece la cantidad de rojo con un Establece la luminosidad del color. Se expresa
Blue Lightness
valor entre 0 y 255. con un valor porcentual.
Define la transparencia del elemento Define la transparencia del elemento con un
Alpha con un valor comprendido entre 0.0 Alpha valor comprendido entre 0.0 (transparente) y
(transparente) y 1.0 (opaco). 1.0 (opaco).

27
9. CSS3 (Gradientes – Esquinas redondeadas)
Gradientes: Es posible crear gradientes tanto
lineales como radiales, se utiliza para ello las
siguientes propiedades:
Esquinas redondeadas: Mediante la propiedad
Propiedad Descripción border-radius es posible redondear las esquinas
Degradado de manera línea con al de un elemento (p, span, div, table, …)
linear-gradient
menos dos colores de arriba abajo.
Degradado de manera línea con al
radial-gradient menos dos colores del centro a los
extremos.
repeating-
Repite un gradiente lineal.
lineal-gradient
repeating-
Repite un gradiente radial.
radial-gradient

28
9. CSS3 (Sombras)
Mediante la propiedad box-shadow se puede crear una sombra sobre un elemento. La sintaxis de esta etiqueta
es:

box-shadow: none | h-offset v-offset blur spread color inset;

Valor Descripción
none Valor por defecto que no muestra ningún sombrado.
Valor requerido que introduce desplazamiento horizontal a la sombra, los números positivos representan
h-offset
el lado derecho mientras que los negativos el lado izquierdo.
Valor requerido que introduce desplazamiento vertical a la sombra, los números positivos colocan la
v-offset
sombra debajo mientras que los negativos arriba.
blur Valor opcional que determina el radio de desenfoque, un numero alto representa un mayor desenfoque.
Valor opcional que establece el radio de propagación. Los números positivos aumentan la sombra, los
spread
negativos la disminuyen.
color Valor opcional utilizado para definir el color de la sombra, por defecto es negro.
inset Valor opcional que permite cambiar el sentido de la sombra, ésta pasará del exterior al interior.

29
9. CSS3 (Columnas)
En CSS3 es posible trabajar con columnas de una manera sencilla utilizando para ello la propiedad columns así
como las propiedades que se muestran a continuación:

Propiedad Descripción
column-
Ancho de la columna.
width
column-
Número de columnas.
count
Especifica como se rellenan las columnas, el valor por
column-fill
defecto es balance.
column-gap Separación entre las columnas.
column-rule- Establece el color de la línea de separación entre las
color columnas.
column-rule- Define el estilo de la línea de separación entre las
style columnas.

30
9. CSS3 (Transiciones)
Mediante las transiciones es posible animar propiedades CSS. Las propiedades de éstas son las siguientes:

Propiedad Descripción
transition- Nombre de propiedades o propiedades CSS
property separadas por una coma.
transition-
Duración del efecto en segundo o milisegundos.
duration
Velocidad del efecto, siendo alguno de sus
valores:
• linear: Misma velocidad
transition- • ease: Valor por defecto
timing- • ease-in: Inicio lento
funcion • ease-out: Final de transición lenta.
• ease-in-out: Comienzo y final de
transición lenta.

transition- Retardo del inicio del efecto en segundos o


delay milesegeuntos.

31
9. CSS3 (Animaciones)
La propiedad animation permite realizar animaciones sobre determinados elementos, ésta es una propiedad
abreviada de las siguientes:

Propiedad Descripción
animation- Especifica el nombre de la animación
name (@keyframes)
animation- Duración de la animación en segundo o
duration milisegundos.
animation- Retardo del inicio de la animación en
delay segundos o milisegundos.
animation-
Número de veces que debe ejecutarse
iteration-
la animación.
count

Se especifica en el bloque @keyframes el estado de la


animación mediante porcentaje (0% = Principio de la
animación, 100% = Final de la animación)

32
9. CSS3 (Transformaciones)
Gracias a la propiedad transform se puede aplicar una transformación (mover, escalar, rotar, etc.). Alguna de
estas funciones son:

Propiedad Descripción
Transforma el tamaño de un elemento en el
scale(x, y)
plano 2D.
Transforma el tamaño de un elemento en el
scale3d(x, y, z)
plano 3D.
Gira un elemento alrededor de un punto fijo
rotate(ángulo)
en un plano 2D sin deformarlo.
rotate3d Gira un elemento alrededor de un punto fijo
(x,y,z, ángulo) en un plano 3D sin deformarlo.
Sesga un elemento a lo largo del eje X por el
skewX(ángulo)
ángulo dado.
Sesga un elemento a lo largo del eje Y por el
skewY(ángulo)
ángulo dado.

33

También podría gustarte