Learning CSS / Sass

Apuntes de mi aprendizaje en CSS y Sass.

Cascading Style Sheets, (en español: Hojas de Estilos en Cascadas) según la definición de la W3C: "se encarga de describir el rendirizado de documentos estructurados HTML, XML y SVG"; es un lenguaje que define el estilo visual de las páginas web, CSS establece ¿cómo? se muestra.

Otras Guías de Estilos

Historia
Enlazar CSS a HTML
Sintaxis de CSS
Selectores
Herencia
Especificidad
Cascada
Texto
Resources
Custom Properties
Metodologias CSS
Source

Importante: Es fundamental conocer los cuatro conceptos pilares de CSS

Selectores
Herencia
Cascada
Especifidad

Historia

Aqui te muestro un timeline de CSS.

⇡ back to top

Enlazar CSS a HTML

Existen varias maneras de hacer linking CSS to HTML:

Inline

<!-- 1° forma Inline -->

<body style="color: lemon;"></body>

Embedded

<!-- 2° forma embedded -->

<head>
    <style>
        body {
            color: tomato;
        }
    </style>
</head>

Extern (Recomendado: Primero tienes que tener el archivo en un mismo directorio.

| myproject
|     styles.css
|     index.html

En styles.css debemos tener al menor una regla de CSS.

body {
    background: #272822;
    color: #f92672;
}

<!-- 3° forma extern -->

<!-- En HTML -->
<head>
    <link rel="stylesheet" href="styles.css" />
</head>

<!-- Otra forma (no recomendado) -->
<head>
    <style>
        @import url('styles.css');
    </style>
</head>

En CSS

En CSS tambien podemos importar de la misma forma solo basta poner la at-rules @import.
```
/* En un archivo CSS */

@import url('styles.css');
```

⇡ back to top

Sintaxis de CSS

Esta es la infografía mejor explicada.

Si quieres mas detalles revisa en el siguiente enlace. CSS Bucabulary

Selectores

Selectores Simples

Selector Universal *: Selecciona a todos los elementos.
```
* {
    color: tomato;
}
```
Selectores de Tipo <body>(etiqueta): Selecciona a la etiqueta definida, se utiliza para normalizar.
```
h1 {
    color: tomato;
}
```
Selector de Clase .class: Selecciona la clase definida en el HTML.
```
.fondo {
    background-color: #ff5f52;
}
```
Selector de ID #: Selecciona el ID definida del HTML. Se recomienda utilizar en anclas de HTML y seleccionar el objeto a traves de JS.
```
#menu {
    color: #2a2a2a;
}
```

Selectores Compuestos

Selectores Agrupados A,B,C: es una anidación de selectores. Es necesario separa con ,
```
.fondo, h1, #menu {
    background-color: salmon;
}
```
Selectores combinados A.B: que cooncidan en los selectores nombrados, se crea un único selector; tiene que estar separado por un · y sin espacio.
```
h1.title {
    background-color: orange;
}
```
Selectores descendientes A B: se crea el patron de padre, hijo y nietos.(Busca en cualquier nivel)
```
ul li {
    color: yellow;
}
```

Selectores de Operadores

Selectores de hijo directo A > B: (Busca en primer Nivel)

body > header {
    background-color: green;
}

Selectores de hermano adyacente A + B: Todo <div> que este despues de <p>.
```
p + div {
    margin: 1rem;
}
```
Selectores de hermanos generales(siguientes) A ~ B: Selecciona a todos los <p> que esten despues del <h2>, no importa la ubicación
```
h2 ~ p {
    font-size: 1.2em
}
```

Selectores de Atributo

Con Atributo: Selecciona con los atributos descritos.

/* Elementos <a> con un atributo title */

a[title] {
    color: purple;
}

/* Elementos <input> con un atributo type="submit" */

input[type="submit"] {
    border: 1px dashed yellow;
}

Que Coincida:

/* Elementos <a> con un href que coincida con "https://example.org" */

a[href="https://example.org"] {
    color: green;
}

Que Contenga:

/* Elementos <a> con un href que contenga "example" */

a[href*="example"] {
    font-size: 2em;
}

Que Comience:

/* Elementos <a> con un href que comience con "https" */

a[href^="https"] {
    color: #001978;
}

Que Termine:

/* Elementos <a> con un href que termine en ".org" */

a[href$=".org"] {
    font-style: italic;
}

Que Contenga:

/* Elementos <a> cuyo atributo class contenga la palabra "logo" */

a[class~="logo"] {
    padding: 2px;
}

ℹ W3C - Level 3 (Actual) │ Level 4 │ List of All Levels

⇡ back to top

Herencia

La herencia permite declarar propiedades en elementos de nivel alto y que estas propiedades se transmitan a todos los elementos descendientes. Sólo algunas propiedades se heredan por defecto, pero la herencia puede forzarse mediante la palabra clave inherit.

Forzar herencia

Para forzar la herencia se utiliza la palabra clave inherit:

<!-- Example por defecto los enlaces son de color azul -->

<p>Haga click <a href="#">aquí</a></p>

/* Hereda el color del body que es negro */

a {
    color: inherit;
}

⇡ back to top

Especificidad

El nivel de especifidad es de la siguiente forma:

!important > especificidad > cascada

¿Cómo se calcula la especifidad?

Descripcion	Valor
Etiqueta y pseudoelementos	1
Clases, atributos y pseudoclases	10
ID	100
Estilos en linea	1000

Tools

Graficar especificidad

⇡ back to top

Cascada

La cascada soluciona los conflictos cuando varias declaraciones afectan a un elemento determinado. Las declaraciones importantes anulan a las que no lo son tanto. Entre declaraciones de igual importancia, la especificidad de la regla controla cuál se aplica. Y, si todas las demás son iguales, el orden de las fuentes supone la distinción definitiva.

Texto

Unidades de medida para fuentes

Unidad	Tamaño
px	`absoluto`
em	`relativo al contexto`
rem	`relativo al <html></html> viene de Root EM`
%	`tamaño normal de una fuente`
vh	`1vh es 1% del height del viewport(area disponible que se muestra)`
vw	`1vh = 1% del width del viewport`

Nota: El body por defecto tiene un font-size: 16px

⇡ back to top

Propiedades

Para mas detalle de las propiedades revisar Mozilla Developer la sección font.

Resources

Puedes utilizar las fuentes de:

Generadores de fuente (.ttf .woff .eot)

Si el nombre de la fuente tiene mas de dos letras se recominda poner entre comillas.

h1 {
  font-family: Verdana, serif;
  font-family: "Times New Roman", serif;
}

nhuamani / css Goto Github PK

css's Introduction

Learning CSS / Sass

Table of Contents

Historia

Enlazar CSS a HTML

Sintaxis de CSS

Selectores

Selectores Simples

Selectores Compuestos

Selectores de Operadores

Selectores de Atributo

Herencia

Forzar herencia

Especificidad

¿Cómo se calcula la especifidad?

Tools

Cascada

Texto

Unidades de medida para fuentes

Propiedades

Resources

Generadores de fuente (.ttf .woff .eot)

Custom Properties

Variables CSS

Metodologias CSS

Source

css's People

Contributors

Stargazers

Watchers

Recommend Projects

Recommend Topics

Recommend Org