Apuntes Finales Del Curso de Desarrollo de Web Con CSS

Apuntes finales del curso de desarrollo de web con CSS
¿Qué es CSS? (Cascading Style Sheets)

Es un lenguaje de estilo utilizado para describir el aspecto y formato de un documento
HTML. Se utiliza para definir la presentación y diseño visual de un sitio web, incluyendo
el tamaño y tipo de fuente, los colores de fondo y de texto, el posicionamiento y el
tamaño de los elementos en una página, entre otras características.
Especificidad: se refiere al conjunto de reglas que se utilizan para determinar qué

estilos se aplican a un elemento en particular cuando se tienen varias reglas CSS que se
aplican al mismo elemento. La especificidad se basa en la combinación de selectores
de CSS que se utilizan para seleccionar los elementos, y se utiliza para determinar cuál
de las reglas que se aplican a un elemento tendrá prioridad si varias reglas se aplican al
mismo elemento. En nuestro archivo html, en el head iremos indicando los <a> y
<links> que enlazan el documento con archivos css y páginas exteriores, como primer
link siempre se pondrá normalize.css, mientras que el último suele ser la hoja de estilo.
Equivalencia de píxeles a rems: sirve para ajustar los píxeles a los rems, esto son
unidades de medida que utilizaremos durante el código. Con este código hacemos que
10px=1rem, también conseguimos el código se adapte mejor a todos los tipos de
pantalla.
html {
font-size: 62.5%;
}
body {
font-size: 16px; /* 1rem = 10px */
}
Normalize.css: Este documento se aplica a todos nuestros proyectos con CSS, es un

código ya escrito que podemos localizar en la siguiente web: Normalize.css
Este código hace que nuestro proyecto se vea casi idéntico en todos los navegadores,
ya que normalmente sin este código se verían diferencias más notables, teniendo en
cuenta la especificidad siempre lo pondremos el primero en el head del html con su
respectivo preload.
CSS Box Model: Esta propiedad la aplicamos a todos nuestros proyectos.

Normalmente cuando estamos aplicando código CSS en imágenes u otros elementos,
los márgenes se generan de una forma complicada de gestionar, por ejemplo, si
tenemos una image a 100px, conjunto a un padding que modifica los márgenes a 20px,
finalmente nos queda una imagen de 240px, para que esto no ocurra y podamos
aplicar de forma correcta el tamaño sin tener en cuenta variables como paddings etc
se utiliza el siguiente un código que sacamos de la siguiente página:
https://www.paulirish.com/2012/box-sizing-border-box-ftw/ en ella podemos ver que
tenemos dos líneas de código incluidas dentro de html { }, y luego creamos un código
nuevo dentro del archivo CSS, un ejemplo dentro de un código ya creado:
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Responsive Web Design: es una técnica de diseño y desarrollo de sitios web que busca
proporcionar una experiencia óptima al usuario en una amplia gama de dispositivos y
tamaños de pantalla. Esto lo conseguimos con Media Queries, la estructura sería la
siguiente: @media (min-width:768px) { }x Básicamente lo que hace este código es
indicar, que a partir de que la pantalla supere los 769px se apliques los estilos que se
ejecuten entre los corchetes. Para automatizar un poco esta acción haremos lo
siguiente: En Windows pulsamos Ctrl+Shift+P -> En el buscador indicamos: User
Snippets y hacemos click a la única opción para luego localizar css y volver a hacer
click, se nos abre un archivo con muchos comentarios, dentro de los corchetes
indicamos lo siguiente:
"Crea un Media Querie": {

"prefix": "mq",
"body": "@media (min-width: $1) {\n $2\n}"
}
De esta forma cuando en nuestra hoja de estilo indicamos mq, directamente nos
aparecerá una opción para agregar el código anterior, además está generado para que
el cursor se ponga automáticamente en el valor donde se colocan los px, y luego si das
a tab se coloca dentro de los corchetes. Hay varios valores predefinidos:
@media (min-width:480px) { } Para teléfono
@media (min-width:768px) { } Para tablet
@media (min-width:1140px) { } Para PC normal
@media (min-width:1400px) { } Para PC grande
Colores: Los colores en CSS se puedes especificar de varias formas:

Por nombre: Ejemplo1: color: blue; Ejemplo2: color: black;
Por HEX: Ejemplo: color: #000000; Ejemplo2: color: #000;
Por rgb() o hsl(): Ej. rojo: color: rgb(255, 0, 0); Ej. rojo: color: hsl(0, 100%, 50%);
Por rgba() o hsla(): Añade un cuarto parámetro para la opacidad (transparencia):
Ej. Blanco opaco: color: rgba(255, 255, 255, 1);
Ej. Azul con opacidad del 50%: color: hsla(240, 100%, 50%, 0.5);
Web para ver los colores en sistema HEX: https://htmlcolorcodes.com/es/
Lo normal será establecer una paleta de colores en nuestro archivo de estilo CSS, para
ello abrimos un pseudoconector :root { } en el que iremos introduciendo diferentes
variables indicadas con --nombredelavariable: #000000; Normalmente será el primer
dato que aparece en la página style.css (la principal). Luego esas variables las
enlazamos con nuestros selectores aplicando color: var(--nombredelavariable);
Márgenes: Para modificar los márgenes, teniendo en cuenta que en una página suele
estar todo centrado, lo más fácil es crear en nuestra hoja de estilo una clase que se
vaya enlazando con los diferentes elementos html. Normalmente nombraremos a esta
clase contenedor, una vez indicado el selector con corchetes: .contenedor { } daremos
unos valores base en su interior:
.contenedor {
width: 120rem;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
El width genera una limitación dentro del contenedor, por otra parte, los margin
generan el espacio que queremos dejar en los 4 márgenes, en este caso 0 de espacio
arriba y abajo y se aplica un auto para los márgenes izquierdo y derecho para que se
autoajusten al centro. Modificando estos valores podemos modificar los márgenes.
Reducimos El código anterior de la siguiente forma, contando que los 4 valores se
ordenan como las agujas del reloj empezando por las 12:
.contenedor {
width: 120rem;
margin: 0 auto 0 auto;
Podríamos incluso reducirlo un poco más dejando margin: 0 auto; ya que si damos solo
dos valores CSS entenderá que el primero es arriba y abajo, y el segundo izq y derecha.
Estructura de CSS
- Primero de todo creamos una carpeta donde guardaremos todos los archivos.css,
en este caso normalmente pondremos el nombre de style.css para el archivo css
general. En los apuntes de html podemos ver como enlazar los dos documentos
con la etiqueta <link>.
- El siguiente paso es generar un código que sirve para ajustar los píxeles a los rems,
esto son unidades de medida que utilizaremos durante el código. Con este código
hacemos que 10px=1rem, también conseguimos el código se adapte mejor a
todos los tipos de pantalla.
html {
font-size: 62.5%;
}
body {
font-size: 16px; /* 1rem = 10px */
}
- Ahora dentro del archivo se tiene que indicar primero el selector, este tiene que
coincidir con la etiqueta que queramos modificar en el archivo html, en este
apunte pondremos un ejemplo con el título <h1>. Seguidamente tendremos que
abrir y cerrar unas corcheras delimitando la zona donde se indicará el código. La
estructura básica quede de la siguiente forma:
- h1 {
-
- }
- Dentro de la estructura podremos indicar los set de valores, estos set de valores
es lo que irá modificando el tamaño, forma, situación, etc. de nuestro texto. Estos
son algunos sets de valores:
Propiedades: text-align: Valores: rigth; left; center; (Sitúa el texto)
Propiedad: color: Valor: códigodelcolor; (Cambia el color)
Propiedad: text-transform: Valor: uppercase; lowercase; (Mayus o min)
Propiedad: font-size: Valor: tamañoenrems; (Cambia tamaño del texto)
Propiedad: font-family: Valor: fuentedeseada; (Indica el tipo de fuente)
Propiedad: font-weight: Valor: bold; normal; lighter; (negrita,normal,fino)
Propiedad: margin: Valor: valor1 valor2 valor3 valor4; (márgenes fuera)
Propiedad: display: Valor: block; line; flex; grid; (cambia posición elemento)
Propiedad: padding: Valor: valor1 valor2 valo3 valor4; (márgenes dentro)
Propiedad: text: Valor: none; (Quita propiedades como el subrayado)
Propiedad: display: Valor: flex; (Diseños flexibles en filas o columnas)
Propiedad: flex-direction: Valor: Row; Column; (Si se hace fila o columna)
Propiedad: justify-content: Valor: posicion; (Alinea el contenido en row)
Propiedad: align-items: Valor: posicion; (Centra el contenido en column)
Propiedad: width: Valor: numenpixeles; (Delimita un tamaño exacto de ancho)
Propiedad: max-width: Valor: numenpizeles; (Delimita un tmño max de ancho)
Propiedad: background-image: Valor: url (urldelaimagen); (mete img d fondo)
Propiedad: background-repeat: Valor: repeat; no-repeat; (img se repite o no)
Propiedad: background-size: Valor: cover; anchoyalto; (cambia tamaño img)

Propiedad: box-sizing: Valor: border-box; content-box; (¿Se aplica márgenes?)
Propiedad: border-radius: Valor: pxdeseado; (Aplica un borde diferente)
Propiedad: line-height: Valor: num; (Separación entre el texto de un párrafo)
Propiedad: cursor: Valor: pointer; (Crea el dedito en enlaces de un form)
Pseudo-clases: No llegan a ser set de valores, se indican de la siguiente

forma:
selector:hover { } Al posarse encima de un link se remarca
selector:visited { } Color del link al haber sido visitado
selector:focus { } Define un elemento para la navegación con teclado. (Tab)
selector:nth-child(numeroselector) { } Si tienes varias clases creadas esto

permite seleccionar una en concreto poniendo en el paréntesis el nº de la clase
que queremos seleccionar.
Ejemplo:
h1 {
text-align: center;
color:#ffec00;
text-transform: uppercase;
font-size: 2rem;
- Hay varios selectores y varias formas de usarlos, serían las siguientes:

Selector de elemento: Selecciona un elemento en base a su etiqueta. Por
ejemplo: h1 { }
Selector de clase: Selecciona un elemento en base a su clase, este se utiliza
para modificar un atributo class= de html. Siempre se pone un punto seguido
del nombre de la clase. Ejemplo: .nombredelaclase { }
Selector de ID: Selecciona un elemento en base a su ID, este se utiliza para
modificar un atributo id= de html. Siempre se pone un # seguido del nombre
de la ID. Ejemplo: #nombredelaid { }
Selector de Atributo: Selecciona un elemento en base a un atributo, por
ejemplo scr o href, este se localiza entre cortchetes. Ejemplo:
[src=”logo.jpg”] { }
Combinación de descendentes: Tenemos la opción de combinar varios
selectores para agrupar grupos más específicos y modificarlos por CSS. En el
siguiente ejemplo veremos como seleccionamos la clase cliente conjunto a la
clase Nombre, por lo tanto estaríamos seleccionando elementos que cumplan
esos dos requisitos para modificarlos en CSS: .cliente .nombre { }
Todos los hijos: Sirve para seleccionar todos los elementos hijos de un
elemento padre, en el siguiente ejemplo estaríamos seleccionando todos los
párrafos (hijos) que tengan una clase llamada cliente: .cliente > p { }
Pseudo-selectores: Este tipo de selector nos sirve para generar selectores que
no se encuentran en el documento html, por ejemplo, si utilizamos el
selector :root {} nos servirá para seleccionar un elemento raíz en la pag. html y
modificarlo, esto normalmente sirve para establecer variables personalizadas
de CSS en el elemeto raíz con el pseudoconector root y de esta forma poder
utilizarlo en toda la página. Siempre se inicia con : seguido del valor (en este
caso root). Ejemplo donde iniciamos con el conector :root asignando las
variables que queremos utilizar con el color; --nombredelavariable: #000000;
:root {
--negro: #000000;
--negrogris: #3C3C3B;
--blanco: #FFFFFF;
--gris: #9E9B9B;
--azul: #23E8DC;
}
Luego podemos enlazar ese selector con otra parte del documento, para ello
utilizamos la propiedad color: var(--nombredelavariable)
color:var(--azul);
Selector de varias clases: Este selector nos sirve para seleccionar varias clases
a la vez y aplicarles las mismas propiedades, en este caso simplemente
separamos las dos clases con coma: .clase1, .clase2 { }

Apuntes Finales Del Curso de Desarrollo de Web Con CSS

Cargado por

Copyright:

Formatos disponibles

Apuntes Finales Del Curso de Desarrollo de Web Con CSS

Cargado por

Información del documento

Título 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

Apuntes Finales Del Curso de Desarrollo de Web Con CSS

Cargado por

Copyright:

Formatos disponibles

Apuntes finales del curso de desarrollo de web con CSS

¿Qué es CSS? (Cascading Style Sheets)

Especificidad: se refiere al conjunto de reglas que se utilizan para determinar qué

Normalize.css: Este documento se aplica a todos nuestros proyectos con CSS, es un

CSS Box Model: Esta propiedad la aplicamos a todos nuestros proyectos.

"Crea un Media Querie": {

@media (min-width:768px) { } Para tablet

@media (min-width:1140px) { } Para PC normal

@media (min-width:1400px) { } Para PC grande

Colores: Los colores en CSS se puedes especificar de varias formas:

Propiedades: text-align: Valores: rigth; left; center; (Sitúa el texto)

Propiedad: color: Valor: códigodelcolor; (Cambia el color)

Propiedad: text-transform: Valor: uppercase; lowercase; (Mayus o min)

Propiedad: font-size: Valor: tamañoenrems; (Cambia tamaño del texto)

Propiedad: font-family: Valor: fuentedeseada; (Indica el tipo de fuente)

Propiedad: font-weight: Valor: bold; normal; lighter; (negrita,normal,fino)

Propiedad: margin: Valor: valor1 valor2 valor3 valor4; (márgenes fuera)

Propiedad: padding: Valor: valor1 valor2 valo3 valor4; (márgenes dentro)

Propiedad: text: Valor: none; (Quita propiedades como el subrayado)

Propiedad: display: Valor: flex; (Diseños flexibles en filas o columnas)

Propiedad: flex-direction: Valor: Row; Column; (Si se hace fila o columna)

Propiedad: justify-content: Valor: posicion; (Alinea el contenido en row)

Propiedad: align-items: Valor: posicion; (Centra el contenido en column)

Propiedad: width: Valor: numenpixeles; (Delimita un tamaño exacto de ancho)

Propiedad: max-width: Valor: numenpizeles; (Delimita un tmño max de ancho)

Propiedad: background-image: Valor: url (urldelaimagen); (mete img d fondo)

Propiedad: background-repeat: Valor: repeat; no-repeat; (img se repite o no)

Propiedad: background-size: Valor: cover; anchoyalto; (cambia tamaño img)

Propiedad: border-radius: Valor: pxdeseado; (Aplica un borde diferente)

Propiedad: line-height: Valor: num; (Separación entre el texto de un párrafo)

Propiedad: cursor: Valor: pointer; (Crea el dedito en enlaces de un form)

Pseudo-clases: No llegan a ser set de valores, se indican de la siguiente

selector:hover { } Al posarse encima de un link se remarca

selector:visited { } Color del link al haber sido visitado

selector:focus { } Define un elemento para la navegación con teclado. (Tab)

selector:nth-child(numeroselector) { } Si tienes varias clases creadas esto

- Hay varios selectores y varias formas de usarlos, serían las siguientes:

También podría gustarte