CSS

INTEGRANTES:
Linares Vazquez Mallerlyn Cristina
Mendoza de la Rosa Alejandra
Perez Martinez Ana Karen
INTRODUCCIÓN
CSS (siglas en inglés de Cascading Style Sheets), en español "Hojas de estilo en cascada", es un lenguaje de diseño gráfico para definir y crear la presentación
de un documento estructurado escrito en un lenguaje de marcado. Es muy usado para establecer el diseño visual de los documentos web, e interfaces de
usuario escritas en HTML o XHTML; el lenguaje puede ser aplicado a cualquier documento XML, incluyendo XHTML, SVG, XUL, RSS, etcétera. También
permite aplicar estilos no visuales, como las hojas de estilo auditivas.

CSS está diseñado principalmente para marcar la separación del contenido del documento y la forma de presentación de este, características tales como las
capas o layouts, los colores y las fuentes. Esta separación busca mejorar la accesibilidad del documento, proveer más flexibilidad y control en la
especificación de características presentacionales, permitir que varios documentos HTML compartan un mismo estilo usando una sola hoja de estilos
separada en un archivo .css, y reducir la complejidad y la repetición de código en la estructura del documento.
SINTAXS

CSS SYNTAXS AND SELECTORS:

● CSS SYNTAX
● CSS SELECTORS:
○ THE ELEMENT SELECTOR
○ ID SELECTOR
○ CLASS SELECTOR
○ GROUPING SELECTOR

● CSS COMMENTS
 CSS SYNTAXS
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:

El selector apunta al elemento HTML que desea estilizar.El bloque de declaración contiene una o más declaraciones separadas por punto y
coma.Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.

Una declaración CSS siempre termina con un punto y coma, y los bloques de declaración están rodeados por llaves.
EJEMPLO
En el siguiente ejemplo, todos los elementos <p> se alinearán en el centro, con un color de texto rojo:
CSS SELECTORS
THE ELEMENT SELECTOR:El selector de elementos selecciona elementos en función del nombre del elemento.

Puede seleccionar todos los elementos <p> en una página como esta (en este caso, todos los elementos <p> estarán alineados en el centro, con un
color de texto rojo):
THE ID SELECTOR:El selector de id utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.El ID de un elemento debe ser
único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un elemento único.

Para seleccionar un elemento con un ID específico, escriba un carácter de hash (#), seguido del ID del elemento.La regla de estilo a continuación se
aplicará al elemento HTML con id = "para1":
THE CLASS SELECTOR:El selector de clase selecciona elementos con un atributo de clase específico.Para seleccionar elementos con una clase
específica, escriba un carácter de punto (.), Seguido del nombre de la clase.

En el ejemplo a continuación, todos los elementos HTML con class = "center" estarán en rojo y alineados en el centro:
También puede especificar que solo los elementos HTML específicos deben verse afectados por una clase.

En el siguiente ejemplo, solo los elementos <p> con clase = "centro" se alinearán en el centro:
Los elementos HTML también pueden referirse a más de una clase.

En el siguiente ejemplo, el elemento <p> se diseñará de acuerdo con class = "center" y class = "large":
GROUPING SELECTOR:Si se tienen elementos con las mismas definiciones de estilo, así:
Será mejor agrupar los selectores, para minimizar el código.Para agrupar los selectores, separe cada selector con una coma.En el siguiente
ejemplo, hemos agrupado los selectores del código anterior:
 CSS COMMENTS
Los comentarios se utilizan para explicar el código, y pueden ser útiles cuando edite el código fuente en una fecha posterior.Los comentarios son ignorados
por los navegadores.Un comentario CSS comienza con / * y termina con * /. Los comentarios también pueden abarcar múltiples líneas:
 CSS HOW TO..
Cuando un navegador lee una hoja de estilo, le dará formato al documento HTML de acuerdo con la información del estilo.Hay tres formas de insertar una
hoja de estilo:

● External style sheet

● Internal style sheet
● Inline style
 EXTERNAL STYLE SHEET
Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo cambiando solo un archivo.Cada página debe incluir una referencia al
archivo de la hoja de estilo externa dentro del elemento <link>. El elemento <link> va dentro de la sección <head>:
Una hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no debe contener ninguna etiqueta html. El archivo de la hoja
de estilo se debe guardar con una extensión .css.

Aquí es cómo se ve el "mystyle.css":

 INTERNAL STYLE SHEET
Se puede utilizar una hoja de estilo interna si una sola página tiene un estilo único.Los estilos internos se definen dentro del elemento <style>, dentro
de la sección <head> de una página HTML:
INLINE STYLES
Se puede usar un estilo en línea para aplicar un estilo único para un solo elemento.Para usar estilos en línea, agregue el atributo de estilo al
elemento relevante. El atributo de estilo puede contener cualquier propiedad CSS.El siguiente ejemplo muestra cómo cambiar el color y el margen
izquierdo de un elemento <h1>:
 MULTIPLE STYLE SHEETS
Si se han definido algunas propiedades para el mismo selector (elemento) en diferentes hojas de estilo, se utilizará el valor de la última hoja de estilo de
lectura.

Ejemplo:Supongamos que una hoja de estilo externa tiene el siguiente estilo para el elemento <h1>:

luego, suponga que una hoja de estilo interna también tiene el siguiente estilo para el elemento <h1>:
Orden en cascada

Todos los estilos en una página se "colocarán en cascada" en una nueva hoja de estilo "virtual" según las siguientes reglas, donde el número uno
tiene la mayor prioridad:

Estilo en línea (dentro de un elemento HTML)

Hojas de estilo externas e internas (en la sección de cabeza)

Navegador predeterminado

Por lo tanto, un estilo en línea tiene la prioridad más alta, y reemplazará los estilos externos e internos y los valores predeterminados del
navegador.
 CSS COLORS
Los colores se especifican utilizando nombres de colores predefinidos, o valores RGB, HEX, HSL, RGBA, HSLA.

NOMBRES DE COLOR: En HTML, un color puede especificarse usando un nombre de color:

BACKGROUND COLOR
TEXT COLOR
BORDER COLOR
 COLOR VALUES
En HTML, los colores también se pueden especificar utilizando valores RGB, valores HEX, valores HSL, valores RGBA y valores HSLA.Igual que el nombre
de color "Tomate":
 RGB VALUE
En HTML, un color se puede especificar como un valor RGB, utilizando esta fórmula:

rgb (rojo, verde, azul)

Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255. Por ejemplo, rgb (255, 0, 0) se muestra en rojo, porque el rojo se
establece en su valor más alto (255) y otros se ponen a 0.

Para mostrar el color negro, todos los parámetros de color deben establecerse en 0, como este: rgb (0, 0, 0).

Para mostrar el color blanco, todos los parámetros de color deben configurarse en 255, de esta manera: rgb (255, 255, 255).

Experimente mezclando los valores RGB a continuación:

Los tonos de gris a menudo se definen usando valores iguales para las 3 fuentes de luz:
 HEX VALUE
En HTML, se puede especificar un color usando un valor hexadecimal en la forma: #rrggbb

Donde rr (rojo), gg (verde) y bb (azul) son valores hexadecimales entre 00 y ff (igual que el decimal 0-255). Por ejemplo, # ff0000 se muestra en rojo, porque el
rojo se establece en su valor más alto ( ff) y los demás se ajustan al valor más bajo (00).
 HSL VALUE
En HTML, se puede especificar un color utilizando el tono, la saturación y la luminosidad (HSL) en la forma:

hsl (matiz, saturación, luminosidad)

El tono es un grado en la rueda de color de 0 a 360. 0 es rojo, 120 es verde y 240 es azul. La saturación es un valor porcentual, 0% significa un tono de gris y 100%
es el color completo. La luminosidad es también un porcentaje, 0% es negro, 50% no es claro ni oscuro, 100% es blanco
Saturación: la saturación se puede describir como la intensidad de un color. 100% es color puro, sin matices de gris

50% es 50% de gris, pero aún puedes ver el color. 0% es completamente gris, ya no puedes ver el color.
Luminosidad: la luminosidad de un color se puede describir como la cantidad de luz que desea darle al color, donde 0% significa que no hay luz (negro), 50%
significa 50% de luz (ni oscura ni clara) 100% significa claridad completa (blanco ).
Los tonos de gris a menudo se definen al establecer el tono y la saturación en 0, y ajustar la claridad del 0% al 100% para obtener tonos más oscuros /
claros:
 RGBA VALUE
Los valores de color RGBA son una extensión de los valores de color RGB con un canal alfa, que especifica la opacidad de un color.

Un valor de color RGBA se especifica con: rgba (rojo, verde, azul, alfa)

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no transparenteat all):
 HSLA VALUE
Los valores de color HSLA son una extensión de los valores de color HSL con un canal alfa, que especifica la opacidad de un color.

Un valor de color HSLA se especifica con: hsla (matiz, saturación, luminosidad, alfa)

El parámetro alfa es un número entre 0.0 (totalmente transparente) y 1.0 (no es transparente en absoluto):
 EL COLOR DE UNA PÁGINA SE ESTABLECE ASÍ:

CSS Backgrounds
Color de fondo

Propiedad que especifica el color

de fondo de un elemento.
En el siguiente ejemplo, los elementos <h1>, <p> y <div> tienen diferentes
colores de fondo:
 Imagen de fondo
La background-image propiedad especifica una imagen para usar como fondo de un elemento.
Por defecto, la imagen se repite para que cubra todo el elemento.
La imagen de fondo para una página se puede configurar de esta manera:
 Imagen de fondo - Repetir horizontal o verticalmente
De forma predeterminada, la background-imagepropiedad repite una imagen tanto horizontal como verticalmente.
Algunas imágenes deben repetirse solo horizontal o verticalmente

HORIZONTAL background-repeat: repeat-x;

Vertical: background-repeat: repeat-y;
Establecer posición y no repetir

background-repeat: no-repeat;
La posición de la imagen está especificada por la background-position : propiedad

Right
Left
Top
Posición fija. Para especificar que la imagen de
fondo debe ser fija (no se desplazará
con el resto de la página)

background-attachment : fixed
 Para acortar el código, también es posible

Propiedad de taquigrafía especificar todas las propiedades de fondo en

una sola propiedad. Esto se llama una propiedad

background:
de taquigrafía.
La propiedad abreviada para el fondo
es background:
 Cuando se usa la propiedad abreviada, el orden
de los valores de la propiedad es:

•background-color
•background-image
•background-repeat
•background-attachment
•background-position

No importa si falta uno de los valores de propiedad,

siempre que los otros estén en este orden.
Bordes CSS
La border-style propiedad especifica qué tipo de borde mostrar.

Se permiten los siguientes valores:

dotted - Define un borde punteado.
dashed - Define un borde discontinuo.
solid - Define un borde sólido.
double - Define un doble borde.
groove- Define un borde ranurado 3D. El efecto depende del valor
del color del borde.
ridge- Define un borde acanalado en 3D. El efecto depende del
valor del color del borde.
inset- Define un borde de inserción 3D. El efecto depende del valor
del color del borde.
outset- Define un borde de inicio 3D. El efecto depende del valor del
color del borde.
none - No define fronteras
hidden - Define un borde oculto.
1. Primero colocamos <head> y <Style>
2. Definimos la clase
3. Se compone etiqueta.NombredelaClase{Propiedad: valor1;}
<p . Dotted { border-style : dotted}
4. Cerramos </style> y </head>
5. Abrimos <body> y aplicamos el estilo.
5. Aplicar el estilo de una clase utilizamos el parámetro Class
<etiqueta class= “NombredelaClase”>Texto</etiqueta>
<p class=“Dotted” Un borde punteado</p>
 Ancho del
borde

La border-width propiedad especifica el

ancho de los cuatro bordes.

El ancho se puede establecer como un

tamaño específico (en px, pt, cm, em, etc.) o
utilizando uno de los tres valores predefinidos:
delgado, medio o grueso.

La border-width propiedad puede tener de

uno a cuatro valores (para el borde superior,
el borde derecho, el borde inferior y el borde
izquierdo).
Color del borde

La border-color propiedad se utiliza

para establecer el color de los
cuatro bordes.

La border-color propiedad puede

tener de uno a cuatro valores (para
el borde superior, el borde derecho,
el borde inferior y el borde izquierdo).
Lados
individuales
En CSS, también hay propiedades
para especificar cada uno de los
bordes (arriba, derecha, abajo e
izquierda):
 Bordes redondeados

La border-radius propiedad se utiliza para agregar bordes redondeados a un elemento:

 Márgenes CSS

Las margin propiedades de CSS se utilizan para crea espacio alrededor de los
elementos, fuera de cualquier borde definido.
Con CSS, tienes el control total sobre los márgenes
Propiedades para estableces margen para cada lado de un elemento :

•margin-top
•margin-right
•margin-bottom
•margin-left
 El valor heredado

Este ejemplo permite que el margen izquierdo del elemento <p class = "ex1"> se herede del elemento principal (<div>):
 El auto valor
Puede establecer la propiedad de
margen auto para centrar horizontalmente
el elemento dentro de su contenedor.
El elemento ocupará el ancho especificado y
el espacio restante se dividirá en partes
iguales entre los márgenes izquierdo y
derecho:
 Relleno CSS
Las padding propiedades CSS se utilizan para generar espacio alrededor del
contenido de un elemento, dentro de los bordes definidos.

Con CSS, tienes control total sobre el relleno. Existen propiedades para configurar el
relleno para cada lado de un elemento (arriba, derecha, abajo e izquierda).
 Lados Individuales
CSS tiene propiedades para especificar el relleno para cada • Padding-left
lado de un elemento:
Valores:
• Padding-top
• Padding-right
Especifica el relleno en px,pt,cm, etc.
• Padding-bottom
Relleno - Shorthand Property
Para acortar el código, es posible especificar todas las propiedades de relleno en una propiedad.

Para 4 valores: Tiene tres valores: Tiene dos valores: Tiene un valor:

• Relleno: 25px 50px • relleno: 25px 50px • relleno 25px 50px; • relleno: 25px;
75px 100px;el 75px; • Los rellenos • Los cuatro
relleno superior es • el relleno superior superiores e rellenos son 25px
de 25px es de 25px inferiores son 25px
• El relleno derecho • Los rellenos • Los rellenos
es 50px derecho e izquierdo derecho e izquierdo
• El relleno inferior es son 50px son 50px
de 75px • El relleno inferior es
• El relleno izquierdo de 75px
es 100px
Ajuste de altura y anchura
 Modelo de Cajas
Durante varios años, el
denominado modelo de
cajas fue una pesadilla para los
desarrolladores web.

Todos los elementos de HTML pueden

ser considerados como cajas-Diseño

64
 Explicación de las diferentes partes:

Contenido : el contenido del cuadro, donde

aparecen el texto y las imágenes.
Relleno : limpia un área alrededor del
contenido. El relleno es transparente.
Borde : un borde que rodea el relleno y el
contenido.
Margen - Limpia un área fuera de la frontera. El
margen es transparente.

65
 AJUSTE DE ALTURA Y
ANCHURA

Las propiedades height y widthse

–
max-widthse
se utilizan para establecer la altura y el ancho de un
elemento

66
 SINTAXIS Se especifica en valores de
longitud , como px, cm, etc., o en
porcentaje (%) del bloque que
div { contiene.
max-
width: 500px;
height: 100px;
backgroundcolor:
powderblue;
} No incluyen bordes, sombreado
relleno o margen
67
 sintaxis
div{
width:300px;
border:25px
solidgreen; padding:25px;
margin:25px;
}

68
 Planteamiento del problema

Supongamos que queremos diseñar un elemento

<div>. para que tenga un ancho total de 350 px.

69
 SOLUCION
• 320px (ancho)
+ 20px (izquierda + derecha)
+ 10px (borde izquierdo + derecho)
+ 0px (margen izquierdo + derecho)
= 350px

div {
CODIFICANDO
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
70 }
CONTORNO CSS
• Un contorno es una línea que se dibuja alrededor de los elementos,
FUERA de los bordes, para que el elemento "destaque".

71
 CSS tiene las siguientes propiedades de
contorno:

• Outline-Style

72
 SINTAXIS
p {outline-color:red;}
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
</style>
</head>
<body>

73
 Color de contorno
• El color puede ser establecido por:
• nombre: especifique un nombre de color, como "rojo"
• RGB: especifique un valor RGB, como "rgb (255,0,0)"
• Hex: especifique un valor hexadecimal, como "# ff0000"
• invertir: realiza una inversión de color (lo que garantiza que el
contorno sea visible, independientemente del fondo de
color)

74
SINTAXIS
• p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
}

75
 Ancho del contorno

• La outline-width propiedad especifica el ancho del contorno y puede

tener uno de los siguientes valores:
• delgado (típicamente 1px)
• medio (típicamente 3px)
• grueso (típicamente 5px)
• Un tamaño específico (en px, pt, cm, em, etc)

76
 SINTAXIS
• p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}

77
 outline-offset
• Propiedad agrega espacio entre un contorno y el borde / borde de un
elemento. El espacio entre un elemento y su contorno es
transparente.

78
 sintaxis

•p{
margin: 30px;
border: 1px solid
black;
outline: 1px solid red;
outline-offset: 15px;
}

79
FORMATO DE TEXTO

80
Color de texto

• La propiedad color se utiliza para establecer el color del texto.

• body {
color: blue;
}
h1 {
color: green;
}
•

81
 Alineación del texto
h1 {
text-align: center;
El text-align propiedad que se utiliza para establecer la
}
alineación horizontal de un texto.

Cuando el comando text-align se establece en

h2 {
"justificar“ text-align: left;
}
div {
h3 {
text-align: justify; text-align: right;
} }

82
Subrayar
h1 {
texto
text-decoration: overline;
}

h2 {
text-decoration: line-through;
}

h3 {
text-decoration: underline;
}

83
Transformación del texto

• text-transform propiedad que se utiliza para especificar letras

mayúsculas y minúsculas en un texto.
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}

84
SANGRIA DE TEXTO
text-indent propiedad que se utiliza para especificar la
sangría de la primera línea de un texto:

p{
text-indent: 50px;
}

85
Espaciado de letras
letter-spacing propiedad que se utiliza para especificar el
espacio entre los caracteres de un texto.

h1 {
letter-spacing: 3px;
}

h2 {
letter-spacing: -3px;
}

86
Altura de la línea

• line-height propiedad que se utiliza para especificar el

espacio entre líneas:

p.small {
line-height: 0.8;
}

p.big {
line-height: 1.8;
}

87
Dirección del texto

• Direction propiedad que se utiliza para cambiar la dirección

del texto de un elemento:

p{
direction: rtl;
}

88
Espacio entre palabras

• word-spacing propiedad que se utiliza para especificar el

espacio entre las palabras en un texto.

h1 {
word-spacing: 10px;
}

h2 {
word-spacing: -5px;
}
89
 CSS Fonts
• Las propiedades de fuente CSS definen la familia de fuentes, negrita, tamaño y estilo de un texto.
 Familias de fuentes CSS
• Hay dos tipos de nombres de familia de fuentes:
• Familia genérica : un grupo de familias de fuentes con un aspecto similar (como "Serif" o
"Monospace")
• Familia de fuentes : una familia de fuentes específica (como "Times New Roman" o "Arial")

FAMILIA GENERICA FAMILIA DE FUENTES DESCRIPCION

Serif Times New Roman Las fuentes Serif tienen pequeñas líneas en los
extremos de algunos caracteres.
Georgia.
Sans-serif Arial "Sans" significa sin - estas fuentes no tienen las
líneas al final de los caracteres
Verdana
Monospace Courier New Todos los caracteres monoespacios tienen el
mismo ancho.
Lucida Console
 Font Family
• La familia de fuentes de un texto se establece con la propiedad font-family.
• La propiedad font-family debe contener varios nombres de fuentes como un sistema "alternativo". Si el
navegador no admite la primera fuente, intenta la siguiente fuente, y así sucesivamente.
 Font Style
• La propiedad font-style se utiliza principalmente para especificar texto en cursiva.
• Esta propiedad tiene tres valores:
 Font Size
La propiedad font-size establece el tamaño del texto.
El valor del tamaño de fuente puede ser un tamaño absoluto o relativo.
• Tamaño absoluto
• Establece el texto a un tamaño especificado.
• No permite que un usuario cambie el tamaño del texto en todos los navegadores
• Tamaño relativo:
• Establece el tamaño relativo a los elementos circundantes.
• Permite a un usuario cambiar el tamaño del texto en los navegadores
• Establecer tamaño de fuente con píxeles
Ajustar el tamaño del texto con píxeles le da un control total sobre el tamaño del texto
• Usa una combinación de porcentaje y Em
La solución que funciona en todos los navegadores es establecer un tamaño de fuente predeterminado
en porcentaje para el elemento <body>:
 Font Weight
• La propiedad font-weight especifica el peso de una fuente:
 Tamaño de fuente sensible
• El tamaño del texto se puede configurar con una unidad vw, lo que significa el "ancho de la ventana
gráfica".
• De esa manera, el tamaño del texto seguirá el tamaño de la ventana del navegador:
 Variante de fuente
• La propiedad font-variant especifica si un texto debe mostrarse o no en una fuente de minúsculas.
• En una fuente de minúsculas, todas las letras en minúsculas se convierten en letras mayúsculas. Sin
embargo, las letras mayúsculas convertidas aparecen en un tamaño de fuente más pequeño que las
letras mayúsculas originales en el texto.
Iconos CSS
 Cómo agregar iconos
• La forma más sencilla de agregar un icono a su página HTML es con
una biblioteca de iconos, como Font Awesome.
• Agregue el nombre de la clase de icono especificada a cualquier
elemento HTML en línea (como <i> o <span>).
• Todos los íconos son vectores escalables que se pueden personalizar
con CSS (tamaño, color, sombra, etc.).
Fuente Awesome Icons
•
Iconos de arranque
• Para usar los glifos de Bootstrap
Iconos de Google
• Para usar los íconos de Google.
 CSS Links
Con CSS, los enlaces pueden ser estilizados de diferentes maneras.
• Los enlaces pueden ser de estilo con cualquier propiedad CSS (por
ejemplo color, font-family, background, etc.).
Además, los enlaces pueden tener un estilo diferente dependiendo del estado en el que se encuentren.
Los cuatro estados de enlaces son:
a:link - un enlace normal, no visitado
a:visited - Un enlace que el usuario ha visitado.
a:hover - Un enlace cuando el usuario hace click sobre él.
a:active - Un enlace en el momento de hacer clic.
 Decoración de texto
• La propiedad text-decoration se utiliza principalmente para eliminar los subrayados de los
enlaces:
Color de fondo
• La propiedad background-color se puede utilizar para especificar un color de fondo para los
enlaces:
Avanzado - Botones de enlace
• Este ejemplo muestra un ejemplo más avanzado en el que combinamos varias propiedades CSS para
mostrar enlaces como cuadros / botones:
2FIN__

113