WEB DEVELOPER
CSS
1. INTRODUCCIÓN.
- El CSS es una herramienta que hace que el texto plano de HTML tenga un estilo,
es la herramienta que le da forma, color, tamaño, … al HTML.
2. TAG PARA INCLUIR CSS EN HTML.
- Dentro de HTML podemos escribir código CSS utilizando el tag; <style> código
CSS </style>. Para darle, por ejemplo, forma a un párrafo utilizaríamos el tag;
<style>
p{
color: red;
font-size: 20px;
}
</style>
3. CREAR ARCHIVO CSS.
- Los desarrolladores siempre separan los archivos HTML de los archivos CSS,
para crear un archivo CSS hemos de terminar el archivo con .css, por ejemplo:
[Link].
[Link] LINKEAR CSS A HTML.
- Utilizamos el tag, en HTML, <link> sin necesidad de un tag de clausura, solo de
apertura. En este tag necesitaremos de tres atributos para dar indicaciones
sobre el archivo que vamos a linkear, los cuales son:
href, que se iguala con ./ y la dirección del archivo, ejemplo:
href="./[Link]" .
type, que se iguala con la descripción del tipo de documento que
es, ejemplo: type="text/css".
rel, este atributo se iguala con la descripción de la relación que
hay entre el HTML y el archivo enlazado, en cuanto a un css la
relación sería stylesheet. Ejemplo: rel="stylesheet"
5.PÁRRAFO.
- Para darle forma a un párrafo en HTML desde CSS se utiliza el selector: p, de
esta forma:
p{
Aquí la forma que se quiera dar en cuestión.
}
[Link] FORMA A PARTIR DE ATRIBUTOS.
- Imaginemos que no queremos dar la misma forma a todos los párrafos, para
ello daremos un atributo clase a nuestro párrafo, o texto, en cuestión y en CSS
indicaremos que solo queremos ese cambio para ese párrafo, texto, …
específicamente, por ejemplo:
En HTML, indicamos la clase tal que así: <p class=”etiqueta”> texto </p>
Luego en CSS, indicamos que solo hacemos referencia a ese párrafo
indicándolo mediante la clase, tal que así:
.etiqueta{
- Podemos poner múltiples elementos en el atributo clase de HTML, por
ejemplo: <p class=” etiqueta verde”> , esto sería en CSS:
.etiqueta{
.verde{
[Link] ID.
- Si dentro de un contenido con un atributo clase ya añadido, queremos que sólo
un elemento dentro de ese contenido, ya con una forma atribuida, tenga
específicamente una forma diferente, utilizaremos el atributo id, ejemplo:
En HTML lo indicaremos tal que así: <h1 id=”titulo-largo”>
Y en CSS lo indicaremos tal que así:
#titulo-largo{
[Link] ORDEN DE SELECTORES.
- En CSS podemos especificar a qué queremos dar forma por clases, id y tags. El
más específico es el id, seguido de clase y por último el tag. El orden en cuanto
a cómo poner los elementos en CSS será de menos específico a más; primero el
tag y por último el ID, de forma descendente.
[Link] DE SELECTORES.
- Cuando escribimos las reglas de CSS es posible que requiera de dos elementos
HTML o más, al mismo tiempo.
Esto se da por combinación de múltiples selectores los cuales indicaremos
cómo un encadenamiento. Por ejemplo:
[Link] {
Aquí se indica tanto la clase como el tag.
}
10. ELEMENTOS ANIDADOS.
- Para elementos que tienen una relación, que están anidados como, por
ejemplo, una tabla. Consideremos la tabla en HTML:
<ul class=’main-list’>
<li> … </li>
<li> … </li>
</ul>
En CSS la indicaríamos tal que así:
.main-list li{
}
11. IMPORTANTE.
El elemento !important se incorpora después de un atributo dado en CSS y
sirve para dar a entender que es un atributo fuerte muy difícil de
sobrescribir. Ejemplo de cómo utilizarlo:
.descripción h5{
color: red !important;
}
12. SIMPLIFICAR SELECTORES.
En CSS si dos selectores coinciden con los mismos atributos podemos
ahorrarnos líneas de código simplificando en un selector. Ejemplo:
Si encontramos esto:
h1 {
font-family: Georgia;
}
.menu {
font-family: Georgia;
}
Se puede simplificar tal que así:
h1, .menu {
font-family: Georgia;
}
[Link] DE TEXTO.
Los atributos más utilizados para dar forma a los textos son:
font-family: La fuente de la letra, hay múltiples, tantas como en
Microsoft Word con los mismos nombres. Por defecto, Times new
roman.
color: El color que se utiliza en las letras, tantos como gama de
colores que hay.
text-transform: Este selector cambia la forma de la letra. Cursiva,
negrita, pone la primera letra en mayúscula, las pone todas en
mayúscula,...
font-size: El tamaño de la fuente. Definido en px (pixels).
font-weight: Define el grosor de las letras. Se puede definir con un
número, normal si la queremos tamaño medio por defecto o bold
que es en negrita.
text-align: Esta propiedad define si el texto debe de estar en el
centro, derecha o izquierda.
background-color: Esta propiedad define el color detrás de un texto.
opacity: Esta propiedad puede hacer a un elemento transparente. Su
valor va desde el 0 (0% de visibilidad) a 1 (100% de visibilidad).
background-image: Esta propiedad define el color detrás de una
imagen. Se utiliza normalmente para agregar imágenes, su forma de
utilización es, como ejemplo:
background-image:
url("[Link]
content/courses/freelance-1/unit-2/[Link]");
14. MODELO DE CAJA.
Se pueden diseñar cajas donde delimitar un cierto texto o incluso que el
usuario escriba en ellas, las cajas en CSS están estructuradas de la siguiente
forma:
Margen (Margin): Es la separación que hay entre la caja y otro
elemento externo. Este funciona exactamente como el relleno,
teniendo aparte la particularidad de que se le puede atribuir el
valor 0 auto, el cual centrará el texto en cuestión.
Borde (Border): Especifica el grosor y el estilo del borde de la
caja. Para indicar su representación en CSS se le pasan tres
propiedades, las cuales son (por orden):
Anchura: Se puede indicar con px, o con palabras
específicas; thin(delgado), medium (medio) o thick
(grueso).
Estilo: Se puede indicar con diferentes estilos, los
comunes son; none(ninguno), dotted(punteado) o
solid(solido), y aquí;
[Link]
SS/border-style#Values. Se pueden encontrar 10
estilos más.
Color: Se indica con el nombre del color a
elección.
Border-radius: Especifica la curvatura que se le pretende dar a
las esquinas de la caja, en px o %, siendo 0 una caja con esquinas
puntiagudas.
Relleno (Padding): Especifica el espacio que hay entre el borde y
el texto del interior de la caja. Aplicándose a los 4 rellenos de la
caja, si queremos que el relleno derecho sea diferente al
izquierdo y este al superior, debemos especificar con:
Padding-top, padding-bottom, padding-right o
padding-left.
O podemos especificar usando solo el padding
común pero dándole 4 valores, empezando por
arriba y yendo en dirección de las agujas del reloj.
Ejemplo; padding: 6px 11px 4px 9px;
O si añadimos sólo 2 valores el primero
representara arriba y abajo mientras el segundo
representa el izquierdo y el derecho.
Contenido (Content): Especifica el contenido de las celdas o
celda de la caja.
Altura (Height): Especifica la altura del interior de la caja, donde
se encuentra el contenido. Se indica con px(pixels). Este
elemento tiene dos propiedades que aseguran que, aunque se
cambie de navegador o de dispositivo, va a poder estar bien
estructurada la información, con:
min-height: Esta propiedad asegura un mínimo de altura
en el contenido.
max-height: Esta propiedad asegura un máximo de altura
en el contenido.
Anchura (Width): Especifica la anchura del interior de la caja,
donde se encuentra el contenido. Se indica con px(pixels). Este
elemento cuenta con las mismas 2 propiedades que la altura.
box-sizing: esta propiedad controla el tipo de modelo de caja que
el navegador interpreta en una web.
border-box: resetea el modelo de la caja para todos los
elementos HTML. Se utiliza así:
*{
box-sizing: border-box;
}
Representación gráfica:
15. COLAPSO ENTRE MARGENES.
Que decir, hemos de tener una consciencia de que tenemos que tener en
cuenta poner una distancia efectiva, con márgenes, entre diferentes
elementos para que no se colapsen unos con otros. Aquí un esquema:
16. DESBORDAMIENTO.
Si añadimos un elemento dentro de una caja que sea mayor a la caja este
elemento desbordaría y saldría de la caja, para asegurarnos que esto no
ocurra existe un elemento llamado, overflow el cual nos da la opción
mediante tres propiedades de asegurarnos que el contenido este contenido
en la caja y no desborde. Estas tres propiedades son:
hidden: Esta propiedad oculta el desbordamiento.
scroll: Esta propiedad evita el desbordamiento con un scroll.
visible: Esta propiedad deja visible el desbordamiento. Por
defecto es la propiedad del overflow.
17. RESETEAR POR DEFECTO.
Muchos navegadores vienen con propiedades en CSS por defecto, teniendo
cada navegador el suyo. Por esto muchos desarrolladores optan por borrar
los estados por defecto para empezar con unas propiedades 0. El método es
este:
*{
margin: 0;
padding: 0;
}
18. VISIBILIDAD.
Los elementos pueden ser ocultados con la propiedad, visibility. Tiene dos
propiedades:
hidden: oculta el elemento en cuestión.
visible: lo hace visible.
Se utiliza de esta forma:
visibility: hidden;
19. POSICIÓN.
- La posición por defecto para que aparezcan los elementos en el navegador
es la esquina superior izquierda de la web. Esta posición por defecto puede ser
cambiada por la propiedad, position. Puede tener cuatro valores:
static: valor por defecto.
relative: permite variar la posición de por defecto. Y así variar la
posición con estos valores. Ejemplo:
.box-bottom{
position: relative;
top: 20px:
left: 10px; ----- >(Todos se mueven en dirección contraria)
right: 30px;----->(Se especifican con px, em o %)
bottom: 50px
}
absolute: Es exactamente igual que relative, pero todos los otros
elementos de la página lo ignoraran. Y tanto en absolute como en
relative los objetos posicionados siempre estarán en el lugar donde se
les diga, aunque hagamos scroll, los objetos nos seguirán y estarán a
"x"px de la nueva esquina.
fixed: La diferencia de este elemento es que los objetos no nos seguirán
si hacemos scroll y se mantendrán siempre en el mismo espacio.
Z-index: Puede ser que dos caja se superposicionen, z-index es un valor
que según el valor que le des, entero, pondrá una caja delante o detrás
de la otra/s. El valor más alto va delante; por ejemplo: el valor 2 iría
delante que la caja con valor 1, en z-index.
Display: Este elemento permite redistribuir los textos. Tiene 4 valores:
Inline: Este valor permite que el texto quede en una
misma línea. Este incluye solo <h1>.
Block: Este tiene más valores que inline, de <h1> a <h6>,
<p>, <div> y <footer>.
Inline-block:
Float: Este elemento permite mover el objeto o todo lo posible a la
derecha o a la izquierda. Ejemplo; float: right;
Clear: Especifica como los objetos deben comportarse cuando se chocan
uno dentro del otro en la web. Tiene cuatro diferentes valores:
left: El lado izquierdo del elemento no tocara ningún otro
elemento con el mismo elemento contenido.
right: Igual que left, pero el lado derecho.
both: Ambos lados no serán tocados.
none: Todos los lados pueden tocarse.
20. COLOR.
- Los colores pueden ser representado de cuatro formas; su nombre, por
valor hexadecimal, valores numéricos que mezclan los colores rojo, verde y
azul, y valores numéricos que mezclan el valor de saturación brillo y matiz.
Nombre: nombre en inglés.
Hexadecimal: debemos poner # y el valor hexadecimal, el número.
RGB: Se utiliza poniendo; color: rgb(10,10,10); (10 valor aleatorio).
HSL: Se utiliza exactamente como rgb, pero los mismos valores dan otro
color.
HSLA y RGBA: Es igual que hsl o rgb pero se incluye
transparencia en los colores, la letra a. El valor de a va del 0 al 1.
Ejemplo: color: hsla(10, 10, 10, 0.3);
- Hay dos propiedades para los colores, para los colores que aparecen
delante y los que aparecen detrás.
color: para los delanteros. Ejemplo; color: red;
background-color: para los traseros. Ejemplo; background-color: red;
21. FUENTE DE ESCRITURA.
- La propiedad, font-family, sirve para cambiar la fuente de la letra.
- La propiedad, font-weight, sirve para cambiar el tamaño de la letra. Se
pueden añadir tanto valores como bold o normal, como valores que van
desde 100 a 900, siempre múltiples de 100 (900 es negrita).
bold: La convierte en negrita. Ejemplo: font-weight: bold;
normal: La deja normal.
- El espacio entre palabras se da con la propiedad word-spacing y su valor es
desde 0 a 1, con la terminación em. Ejemplo; word-spacing: 0.3em;
- El espacio entre letras se da con la propiedad letter-spacing y su valor es
desde 0 a 1, con la terminación em. Ejemplo; letter-spacing: 0.3em;
- Para transformar el texto de mayúsculas a minúsculas o viceversa, se utiliza
la propiedad text-transform. Con los valores; uppercase (Mayúsculas) y
lowercase(Minúsculas).
- Para alinear el texto entero, se utiliza text-align. Tiene tres valores como el
word; right, left y center.
- Para señalar la altura de una linea se utiliza line-height, sus valores van del 1
al 2 o por pixeles, px. Imagen para señalar mejor la altura de línea:
- Para añadir nuevos tipos de fuentes, entrar aquí: [Link]
- Para seguir añadiendo de otras formas consultar en codeacademy.
22. CUADRÍCULAS.
- Para crear cuadrículas lo hemos de indicar en HTML con:
<div class="grid">
<div class="box a">A</div>
<div class="box b">B</div>
</div>
- Para crear columnas utilizaremos, en CSS, la propiedad; grid-template-
columns: 100px 200px 300px; Dependiendo del número de columnas que
queramos, si queremos 80 columnas pues lo indicaremos poniendo 80 valores
en pixeles, px, o en porcentajes del ancho total.
- Para crear filas utilizaremos, en CSS, la propiedad; grid-template-row: 100px
200px 300px;. Dependiendo del número de columnas que queramos, si
queremos 80 columnas pues lo indicaremos poniendo 80 valores en pixeles, px,
o en porcentajes del ancho total.
- Si ponemos solo grid-template, indicaremos primero las filas y luego las
columnas, separando los valores por / . Ejemplo: grid-template: 100px 200px
300px / 20% 10% 300px.
- Como medida de las fila y columnas también podemos, aparte de utilizar
pixeles, em y rem, utilizar también fr. que significa fracción, la fracción de todo
el ancho o alto que queremos utilizar en esa fila o columna. Ejemplo: grid-
template: 2fr 1fr/ 3fr 4fr;.
- El valor repeat() se usa para duplicar las filas o columnas. Por ejemplo: grid-
template-columns: repeat(3, 100px); Este ejemplo duplica tres columnas de
100px.
- El valor, minmax() se usa para que las columnas o filas al ampliar o disminuir
una web tengan siempre un rango de tamaño. Por ejemplo:
grid-template-columns: 100px (tamaño mínimo o máximo si el valor de
una columna es mayor será el mínimo y al contrario) minmax(100px, 500px)
100px;
Aquí en el ejemplo la columna 1 y 3 serán siempre de 100px pero la segunda
tendrá un rango entre 100px y 500px.
- Para poner huecos entre las celdas de una cuadrícula existe la propiedad, grid-
gap. Definida por em, fr o px. Si queremos solo hueco entre columnas o filas
tenemos las propiedades:
grid-column-gap: para columnas.
grid-row-gap: para filas.
O grid-gap, y poner / para separar los valores de filas y de
columnas.
- Podemos decidir dónde empezar la cuadrícula con grid-row-start, grid-row-end,
grid-column-start, grid-column-end, grid-row (separando los valores enteros
con / ), grid-column y grid-area (en la cual se pueden definir los dos valores de
fila y los dos de columna separando los valores enteros por /). Se señala con
números enteros del 1 al 9. Ejemplo: grid-row-start: 1;.
Para que las columnas y filas puedan no tropezarse utilizamos delante
de los valores enteros la palabra span.
grid-area orden:
1. row-start.
2. column-start.
3. row-end.
4. column-end.
- Para colocar los objetos de dentro de las cuadrículas en un determinado sitio
de la cuadrícula utilizamos, justify-items. El cual tiene cuatro valores:
start: alinea los objetos al lado izquierdo de la cuadrícula.
end: los alinea al lado derecho.
center: los alinea al centro.
stretch: Extiende los objetos hasta llenar toda la cuadrícula.
- Para colocar los cuadros de dentro de las cuadrículas en un determinado sitio
de la cuadrícula utilizamos, justify-content. El cual tiene siete valores:
start: alinea el cuadro al lado izquierdo de la cuadrícula.
end: lado derecho.
center: al centro.
stretch: expande los cuadros hasta rellenar la cuadrícula entera.
space-around: incluye una cantidad equivalente de espacios en
cada lado de los cuadros.
space-between: lo mismo que space-around. Pero no en
extremos.
space-evenly: lo mismo pero si en los extremos.
- Para colocar los objetos de dentro de las cuadrículas en un determinado sitio
de la cuadrícula utilizamos, align-items. El cual tiene cuatro valores:
start: alinea los objetos arriba de la cuadrícula.
end: los alinea abajo.
center: los alinea al centro.
stretch: Extiende los objetos hasta llenar toda la cuadrícula.
- Para colocar los cuadros de dentro de las cuadrículas en un determinado sitio
de la cuadrícula utilizamos, align-content. El cual tiene siete valores:
start: alinea el cuadro arriba de la cuadrícula.
end: abajo.
center: al centro.
stretch: expande los cuadros hasta rellenar la cuadrícula entera.
space-around: incluye una cantidad equivalente de espacios en
cada lado de los cuadros.
space-between: lo mismo que space-around. Pero no en
extremos.
space-evenly: lo mismo pero si en los extremos.
- Align-self y justify-self, especifican como los elementos individualmente
deberían posicionarse ellos mismos respecto el eje de las columnas. Tanto uno
como el otro aceptan los mismos cuatro valores; start, end, center y stretch.
- grid-auto-rows, grid-auto-flow y grid-auto-columns: ya se verá.