CSS3

¿Qué es CSS?
Hojas de Estilo en Cascada (del inglés Cascading Style

Sheets) o CSS es el lenguaje de estilos utilizado para
describir la presentación de documentos HTML o XML
¿Para qué sirve?
Para estilos de texto muy básicos como, cambiar el color
y el tamaño de los encabezados y los enlaces. Se puede
utilizar para crear un diseño, como podría ser convertir
una columna de texto en una composición con un área de
contenido principal y una barra lateral para información
relacionada. Incluso se puede usar para crear efectos.
¿Para qué sirve?
Para estilos de texto muy básicos como, cambiar el color
y el tamaño de los encabezados y los enlaces. Se puede
utilizar para crear un diseño, como podría ser convertir
una columna de texto en una composición con un área de
contenido principal y una barra lateral para información
relacionada. Incluso se puede usar para crear efectos.
Sintaxis del CSS
Es un lenguaje basado en reglas: cada

usuario define las reglas que especifican
los grupos de estilos que van a aplicarse
a elementos particulares o grupos de
elementos de la página web. Por ejemplo:
«Quiero que el encabezado principal de
mi página se muestre en letras grandes
de color rojo».
Reglas CSS
Soporte del navegador
Primeros pasos
¿Para qué sirve CSS?
Con CSS puedes crear reglas para decirle a tu sitio web

cómo quieres mostrar la información y puedes guardar
los comandos para elementos de estilo (como fuentes,
colores, tamaños, etc.) separados de los que configuran
el contenido.
¿Para qué sirve CSS?
Punto de Partida
Para ocupar css se necesita Enlazar estilos con

previamente un archivo html etiqueta en html.
para estilizar.
Estilo al h1
Comentarios
Añadir CSS a tu HTML
Por supuesto, CSS no sirve de
mucho si no está vinculado a un
archivo HTML.
Existen tres maneras de hacerlo:
❑ externo (external)
❑ interno (internal)
❑ en línea (inline).
CSS externo
El CSS externo existe en su propio archivo. Este
archivo está enlazado a un documento HTML con una
etiqueta <link>. Este es el método más usado para
añadir CSS a HTML, ya que una hoja de estilo externa
puede dictar el estilo de diferentes documentos HTML.
Esto permite que los desarrolladores hagan cambios a
lo ancho del sitio con un solo archivo CSS.
CSS interno
El CSS interno es un código CSS incrustado en un
documento HTLM. Está escrito dentro del elemento
<style>, que se acomoda en la sección de <head>:
CSS inline
CSS en línea se ubica dentro de una etiqueta HTML
para cambiar el estilo de un elemento en específico.
La sintaxis inline es un poco diferente de lo que
hemos visto: la declaración está escrita como el
valor del atributo de estilo.
Aunque es posible hacer esto, usar este método viola la práctica de

separar el estilo del contenido, por eso no se recomienda su uso.
Selectores y propiedades (reglas, valores)
Un selector que coincide Las reglas son el contenido que

directamente con el nombre de un está dentro de las llaves del
elemento HTML, o una clase. selector, ahi indican que se hará
con el contenido seleccionado.
Por ejemplo: Para determinar todos
los párrafos del documento, se usa Para el Ejemplo es dar un color, y
el selector p como valor decimos que es verde.
Reglas CSS
Selector CSS, Selectores
Todas las reglas CSS comienzan con un selector. Este
indica la parte del documento donde se aplica la regla.
Y al selector le siguen una o más declaraciones dentro
de corchetes. Cada elemento HTML a modificar se
menciona por su nombre (p, div, a, etc.):
Selector CSS, Clases y ID
Pero también puedes señalar

los elementos por su clase o
atributo. La clase de
selector está escrito como
un punto (.) seguido del
nombre de la clase.
La identidad del selector se

escribe con un gato (#),
seguido del nombre de
identidad.
Selector CSS elementos hijo
Para dirigirte a un
elemento hijo dentro de
un elemento padre,
escribe el selector como
si fuera el elemento
padre, seguido del
elemento hijo (con un
espacio entre ellos):
Selector CSS elementos múltiples
Y si deseas asignar la misma
regla a múltiples elementos,
puedes hacerlo con el
selector en grupo. Este
abarca dos o más nombres de
elementos separados por
comas. El orden no es
importante, pues la regla se
aplicará a todos los elementos
que se enumeren:
Propiedades CSS
Como la primera parte de una declaración CSS, una

propiedad CSS le indica al navegador cuál
característica de estilo del elemento debe cambiarse.
Existen muchas propiedades CSS que afectan diferentes
cosas: color, tamaño, fuente, forma o locación en una
página. Una propiedad siempre se acompaña de al menos
un valor y estos elementos aparecen siempre separados
por dos puntos (:).
Valor CSS
Cada propiedad tiene un paquete de
valores. Estos especifican el estilo
de la propiedad de un elemento.
Estas son algunas propiedades
usuales y sus valores:
➢ Propiedades de color
➢ La propiedad de ancho (width)
➢ La propiedad para la familia de
fuente (family font)
Selector universal *
Selectores de etiqueta
Selectores múltiples con coma (h1, h2, h3)
----------------------------------------------------------------
Selector descendentes (Uno dentro
del otro como div p)
Selector de clase (.nomClass)
Selector id (#id)
Selectores avanzados
● Selectores de hijos: div > p

(Solo los p que sean directos
del div se aplicaran los
cambios).
● Selectores continuos h1 + p
● Selector de suceso a:link
/hover
● Selectores de atributos:
input[type] ó
input[type=”text”]
● Herencia (Padre a hijo)
Fondos
Los fondos se aplican en el
body para que ocupen todo
el HTML.
background
● color(hexadecimal)
● url (dirección de la
imagen)
Tomar en cuenta el peso de

la imagen
Herramierramientas
live server (VSC)
colorzilla
Es una extensión para visual
Live Server studio code que nos crea un

servidor local que refleja todo
lo que programamos en tiempo
real.
ColorZilla
Es una herramienta que nos

ayuda a identificar los
colores que podamos ver en la
web, así también nos deja
jugar con ellos para entrar
otro color y más...
Fondos de dos o más colores.
Gradientes
Pseudoclases
Una pseudoclase CSS es una ● hover

palabra clave que se añade a ● link
los selectores y que ● visited
especifica un estado especial ● active
del elemento seleccionado.
Por ejemplo, :hover aplicará
un estilo cuando el usuario
haga ‘flote’ sobre el
elemento especificado por el
selector.
Textos y tipografías Propiedades que podemos
aplicar a las tipografías
Fuentes de Google
Ventajas:
● Es gratis
● Hay mucho de donde elegir
● Tu pagina es mas rapida
● Es fácil de implementar
Unidades de medida
Así como en la vida real
tenemos los cm, metros, etc.
En el diseño web ocupamos
otras medidas
Unidades de Color
Tenemos Diferentes formas de representar los colores en
código.
- Palabras Clave: Hay 150 palabras clave que podemos usar:
aqua, black, blue, fuchsia, gray, green, lime, maroon,

navy, olive,orange, purple, red, silver, teal, white, yellow
- RGB Decimal: rgb(215, 38, 61) |rgba (215, 38, 61, .5)
(transparencia)
- RGB Porcentual: rgb(84%, 15%, 24%)
- RGB Hexadecimal: #D7263D

Práctica 3
Modelo de Cajas
● Margen
● Borde
● Relleno
● Contenido
Práctica botones
Manejo del modelo de cajas.
Manejo de clases.
Tipos de Elementos
Hay dos tipos de elementos:
1. Elementos de bloque “block”

div, article, section, header,footer, aside, table, p,
video, ul, ol, h1, h2, h3, h4, h5, h6
2. Elementos de línea "inline"
a, span, img, b, i, small, cite, code, em, strong, br,
script, button, input, label, select, textarea.
Posicionamiento de cajas
Static
-Normal (static):
Posicionamiento por defecto
con el que los navegadores
acomodan los elementos
Relative
- Relativo (relative): Nos

permite posicionar una caja y
después moverla desde su lugar
original (Dejando su lugar).
Absolute
- Absoluto (absolute): Nos

permite posicionar una caja
respecto a su contenedor y
el resto de elementos
ignoran la nueva posición.
Fixed
- Fijo (fixed): Nos permite

posicionar una caja en donde
su posición respecto a la
pantalla del usuario siempre
va a ser la misma.
Float - Flotante (float): Nos
permite desplazar las cajas
todo lo posible hacia la
derecha o izquierda.
Práctica barra de navegación
Manejo del modelo de cajas.
Manejo de clases.
Posicionamiento.
Visualización
display:none; Desaparece el contenido
visibility:hidden; Los oculta dejando su lugar.
overflow:hidden; Oculta el desbordamiento
overflow:auto; Genera un scrol para navegar dentro de..

z-index
Posición por capas
Número más grande, arriba

Sombras
text-shadow: 2px 0px 10px blue;
● El primer valor: Posición horizontal de la sombra

● El segundo valor: Posición vertical de la sombra
● El tercer valor: Tamaño de la sombra
● Cuarto valor: Color de la sombra.
Se puede ocupar para texto o para cajas

Bordes
border:7px solid #000;
Tamaño del borde, tipo, color
● dotted
● dashed
● double
● groove
● ridge
● inset
● outset
border-radius: 0px 40px 0px 40px;

Pseudo Elementos
Los pseudo-elementos se añaden a los selectores, pero en

cambio, no describen un estado especial sino que, permiten
añadir estilos a una parte concreta del documento.
● ::first-letter
● ::first-line
● ::selection
● ::before
● ::after
Listas
Tablas
Aplicar bordes
Fondos
resaltarlos
Centrarlos
Formularios práctica y propiedad
En el CSS3 existe una propiedad : box-

sizing que nos permite escoger el modelo
de caja que deseamos.
box-sizing : content-box | border-box ;

box-sizing : content-box | border-box ;
content-box: define el comportamiento de la

caja tal y como fue especificado en el CSS.
border-box: en este caso las propiedades

width, (min | max)-width, height, (min |
max)-height determinan el tamaño real de la
caja. Esto quiere decir que para calcular el
tamaño del contenido, tendremos que restar
del tamaño real de la caja cualquier relleno
(padding) o borde (border) especificado.
Práctica Galeria
de Imagenes Manejo de cajas.
Transform
Esta propiedad está enfocada a la animación.
Cosas que podemos hacer con transform:
● - Trasladar elementos (izquierda/derecha, arriba/abajo)

● - Escalar Elementos (alto, ancho)
● - Rotar Elementos (grados)
● - Sesgar Elementos (arriba, abajo)
Transiciones
Las transiciones CSS se controlan mediante la propiedad

abreviada transition. Es preferible utilizar este método
porque de esta forma se evita que la longitud de la lista de
parámetros sea diferente
transition-property
transition-duration / transition-timing-function / transition-delay

Animaciones
Las animaciones CSS3 permiten animar la transición entre un

estilo CSS y otro. Las animaciones constan de dos
componentes: un estilo que describe la animación CSS y un
conjunto de fotogramas que indican su estado inicial y final,
así como posibles puntos intermedios en la misma.
animation-...
Otra fuentes
● Práctica diseño de página tipo
blog 1
● Práctica diseño de página tipo
blog 2
● Practica mi pagina

CSS3

Cargado por

Información del documento

Descripción original:

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

CSS3

Cargado por

Copyright:

Formatos disponibles

¿Qué es CSS?

Hojas de Estilo en Cascada (del inglés Cascading Style

Es un lenguaje basado en reglas: cada

Con CSS puedes crear reglas para decirle a tu sitio web

Para ocupar css se necesita Enlazar estilos con

Aunque es posible hacer esto, usar este método viola la práctica de

Un selector que coincide Las reglas son el contenido que

Pero también puedes señalar

La identidad del selector se

Como la primera parte de una declaración CSS, una

● Selectores de hijos: div > p

Tomar en cuenta el peso de

live server (VSC)

Live Server studio code que nos crea un

Es una herramienta que nos

Una pseudoclase CSS es una ● hover

- Palabras Clave: Hay 150 palabras clave que podemos usar:

aqua, black, blue, fuchsia, gray, green, lime, maroon,

- RGB Porcentual: rgb(84%, 15%, 24%)

- RGB Hexadecimal: #D7263D

Manejo del modelo de cajas.

Hay dos tipos de elementos:

1. Elementos de bloque “block”

- Relativo (relative): Nos

- Absoluto (absolute): Nos

- Fijo (fixed): Nos permite

Manejo del modelo de cajas.

display:none; Desaparece el contenido

visibility:hidden; Los oculta dejando su lugar.

overflow:hidden; Oculta el desbordamiento

overflow:auto; Genera un scrol para navegar dentro de..

Posición por capas

Número más grande, arriba

text-shadow: 2px 0px 10px blue;

● El primer valor: Posición horizontal de la sombra

Se puede ocupar para texto o para cajas

Tamaño del borde, tipo, color

border-radius: 0px 40px 0px 40px;

Los pseudo-elementos se añaden a los selectores, pero en

En el CSS3 existe una propiedad : box-

box-sizing : content-box | border-box ;

content-box: define el comportamiento de la

border-box: en este caso las propiedades

Esta propiedad está enfocada a la animación.

Cosas que podemos hacer con transform:

● - Trasladar elementos (izquierda/derecha, arriba/abajo)

Las transiciones CSS se controlan mediante la propiedad

transition-duration / transition-timing-function / transition-delay

Las animaciones CSS3 permiten animar la transición entre un

También podría gustarte