Semana 3 Maquetación CSS

MAQUETACION EN
CSS
Mg. Richard E. Mendoza G.

SELECTOR: es el nexo de unión entre la
hoja de estilos y los documentos a los que
se aplique dicha hoja. Ya sean (x)HTML,
XLM, SVG... y media type.
DECLARACION: es un bloque que empieza
con un carácter (no espacio) y termina con la
primer llave de cierre o punto y coma (fuera
de una cadena, sin escape y no incluido
dentro de otro par de {}. () o []).
PROPIEDAD: es un identificador, un
nombre leíble por humanos, que define qué
característica es considerada.
VALOR: describe como las características
deben ser manejadas por el motor.
ANATOMIA CSS

5
• Margin: Se utiliza para crear espacio
alrededor, de los elementos fuera de los
bordes definidos
• Border: Permite especificar el estilo, el
ancho y el color de borde de un
elemento.
• Padding: Se utiliza para generar un
espacio alrededor de un elemento,
dentro de los bordes definidos.
MODELO DE CAJA

6
• Cada capa tiene cuatro márgenes, los que
por defecto tienen un valor cero. En el
código CSS, el margen se establece
mediante el atributo “margin”, el cual es
seguido de un guión (sin dejar espacio) y
el lado de la capa al cual se le determina
el margen.
• Las propiedades margin-top, margin-
right, margin-bottom y margin-left:
permiten establecer el tamaño del
margen exterior de forma
independiente (arriba, derecha, abajo e
izquierda respectivamente).
MARGENES CSS

HERENCIA CSS
La herencia en CSS es el mecanismo
mediante el cual determinadas propiedades
de un elemento padre se transmiten a sus
hijos. De hecho, se parece mucho a la
herencia genética. Si los progenitores
tienen los ojos azules, los hijos seguramente
también tendrán los ojos azules.
html {
font-size: 75%;
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
font-size: inherit;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Herencia</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main>
<h1>Soy un titulo</h1>
<p>Soy un parrafo</p>
</main>
</body>
</html>

ORDEN DE DECLARACION
Importancia.
Hoja de estilo de agente de usuario (Estilos
del navegador): primero el navegador va a
implementar los estilos que ya trae por
defecto
Declaraciones normales en hojas de estilo
de autor (nuestro .css) que son los estilos
que nosotros colocamos en nuestro
proyecto.
Declaraciones importantes en hojas de
estilos de autor (utilizar el !important)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-
scale=1.0" />
<title>Herencia</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<main>
<h1>Soy un titulo</h1>
<p>Soy un parrafo</p>
</main>
</body>
</html>

ESPECIFICIDAD
Especificidad: el orden de importancia es:
!important
Iniline styles
#id
,class
tag
Para evitar rescribir estilos y que se rompa
nuestro código tenemos que evitar los
!important, Iniline styles #id y tag.
Orden de la fuente: las declaraciones finales
son las que se se van a ejecutar en el caso
que los estilos tienen la misma especificidad

Selector universal:
* { margin: 0; }
Selector de tipo o etiqueta:
h1 { font-size: 32px }
Selector class:
.destacado { color:red; }
Selector ID:
#container { padding: 10px; }
SELECTORES BASICOS

Selector descendente:
p span { color: red; }
ul li { font-size: 12px }
Grupo de selectores:
#contenedor section a li { font-size: 1.2em }
nav ul li a { text-decoration:none; }
SELECTORES BASICOS

Selectores de hijos. Elemento hijo directo de otro elemento.
p > span { color: blue; }
Selector adyacente. Elementos justo a continuación de otros elementos.
h1 + h2 { color: red; }
Selector de atributos. Elementos HTML por sus atributos y/o valores.
a[href=“http://ejemplo.com”] { color: red; }
SELECTORES BASICOS

Si hay dos reglas definiendo una misma
propiedad de un mismo elemento, la
regla que esté al final será la que se
seguirá, por eso se le llama cascada.
REGLAS CSS

Cuanto más específico es un selector mayor fuerza tiene y es el que
prevalece, aunque esté al final de ‘la cascada’.
● Menos específico:
p { text-align: left;}
● Más específico:
#content p {text-align: center;}
REGLAS CSS: ESPECIFICIDAD

Cuando se establecen algunos valores
de una propiedad CSS en un elemento,
sus elementos descendientes
heredan de forma automática el valor
de esa propiedad.
REGLAS CSS:HERENCIA

• Propiedades HEREDADAS:
● color
● font‐family
● font‐size
● font‐style
● font‐variant
● font‐weight
● font
● text‐align
Propiedades NO HEREDADAS:
● background
● border
● display
● float
● width
● height
● top, right, bottom, left
● margin
● padding
REGLAS CSS: HERENCIA

Nos permiten una puesta a cero de todos los navegadores para
mostrar las propiedades CSS lo más homogéneo posible.
Algunos ejemplos:
● HTML5 Doctor,
● Normalize.css
Se añaden como archivo externo y se agregan dentro del elemento
head de HTML antes de incluir cualquier otro estilo.
BUENAS PRACTICAS

Organizar los elementos en el orden
en que aparecen en nuestro HTML,
hará que nuestras hojas de estilo sean
más fáciles de manejar tanto en la
fase de desarrollo, como en la de
mantenimiento.
Otra buena práctica es poner
comentarios para cada grupo de
CSS. Esto hará fácil su interpretación.
BUENAS PRACTICAS

Es importante limpiar el código y eliminar estilos redundantes.
Correcto:
span, p {
font-size: 12px;
color: red;
}
Incorrecto:
span {
font-size: 12px;
color: red;
}
p {
font-size: 12px;
color: red;
}
BUENAS PRACTICAS

Una forma de agilizar el código es compactar la codificación
cuando se puede por ejemplo en los márgenes.
Correcto:
#contenedor {
margin: 10px 8px 5px;
}
Incorrecto:
#contenedor {
margin-top: 10px;
margin-right: 8px;
margin-left: 8px;
margin-bottom: 5px;
}
BUENAS PRACTICAS

De acuerdo a pruebas realizadas* el rendimiento de carga de los
códigos hexadecimales es hasta un 70% mejor.
Hexadecimales: RGBA:
#FFFFFF
Colores predefinidos:
rgb(255,
HSL:
0, 0, 0.7)
blue
RGB:
rgb(120,
HSLA:
100%, 50%)
rgb(255, 0, 0); rgb(120, 100%, 50%, 0.6)
*Pruebas realizadas por Sean Connon, Senior Web Developer en Alien Creations, Inc.
BUENAS PRACTICAS

El uso de guiones bajos puede dar resultados erróneos en
navegadores antiguos.
Correcto:
.col-left {
margin: 0;
padding: 0;
}
Incorrecto:
.col_left {
margin: 0;
padding: 0;
}
BUENAS PRACTICAS

CSS es sensible a mayúsculas y minúsculas.
Para evitar duplicidades y errores, es una buena práctica usar
solo minúsculas en el nombre de clases y ids.
Correcto:
.alert-box {
margin: 0;
padding: 0;
}
Incorrecto:
.alert_BOX {
margin: 0;
padding: 0;
}
BUENAS PRACTICAS

Herramienta que nos permite escribir pseudocódigo que se
convertirá posteriormente en CSS.
Este pseudocódigo puede estar conformado por:
variables, funciones, mixins, etc.
Esto nos ayuda a:
1. Trabajar de manera más ordenada y rápida.
2. Administrar y mantener fácilmente el código CSS.
BUENAS PRACTICAS

Los preprocesadores más populares:
● Less
● Sass
● Stylus
Para usar bien un preprocesador es importante antes saber bien
cómo funciona CSS.
BUENAS PRACTICAS

Semana 3 Maquetación CSS

Más contenido relacionado

La actualidad más candente

Similar a Semana 3 Maquetación CSS

Más de Richard Eliseo Mendoza Gafaro

Último

Semana 3 Maquetación CSS