Si queremos editar las preferencias tenemos que ir a:
Sublime Text > Preferences > Setting - User
Algunas de las configuraciones más útiles:
{
"bold_folder_labels": true,
"caret_extra_width": 1,
"caret_style": "phase",
"fade_fold_buttons": false,
"highlight_line": true,
"highlight_modified_tabs": true,
"indent_guide_options": [ "draw_active" ],
"line_padding_bottom": 1.5,
"line_padding_top": 1.5,
"scroll_past_end": true,
"shift_tab_unindent": true,
"show_full_path": false,
"tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true,
}Todos los elementos en una página web son cajas rectangulares.
Las características de estas cajas podemos describirlas a través del box-model.
Hay varias propiedades CSS que controlan las dimensiones de cada elemento:
width y height, que definen las dimensiones del elemento (aunque, como se aplican exactamente, dependerá de la propiedad display)padding, que determina el espacio entre el contenido y el borde exterior.border de la caja.margin, el espacio que separa el elemento del resto de elementos.Area de contenido | Padding | Border | Margin
.box {
width: 300px;
height: 50px;
border: 5px solid #d8cd00;
margin: 50px;
padding: 50px;
}
Por defecto el navegador añade los paddings y los bordes a las dimensiones del elemento
300px + 50px * 2 + 5px * 2 = 410px
.box {
width: 300px;
height: 50px;
border: 5px solid #d8cd00;
margin: 50px;
padding: 50px;
}
box-sizing tiene 3 valores posibles:
content-box: el que se aplica por defecto y calcula el width y height teniendo en cuenta únicamente el contenido.padding-box: Incluye el padding dentro de las dimensiones del elemento.border-box: Incluye padding y border dentro de las dimensiones.Es una buena idea, sobre todo si trabajamos con una layout flexible (en porcentajes) declarar box-sizing: border-box para todos los elementos usando el selector universal (*).
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
“Inheriting box-sizing Probably Slightly Better Best-Practice” - Chris Coyier
width y height son las propiedades que determinan el ancho y alto, respectivamente, del area de contenido de un elemento html.
Por defecto su valor es auto, es decir que se asignaran automaticamente dependiendo de si el elemento es inline o block.
inline, el width será tan largo como el contenido.block, ocupará el 100% de su contenedor.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
El height por su parte, dependerá del alto del contenido, por lo que, si se trata de texto estará ligado al line-height del mismo.
Lorem ipsum dolor sit amet,consectetur adipisicing elit.
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
La propiedad display es la encargada de controlar si un elemento se comportará como un elemento block o uno inline (entre otras opciones).
Los elementos block ocupan el 100% de su contenedor desplazando al siguiente elemento a una nueva línea.
Aplican las propiedades del box-model de manera normal.
Los elementos inline mantienen el flow normal de texto.
Tienen algunas particularidades a la hora de interpretar el box-model.
width y el heightpaddings verticales no afectaran la posición de los elementos que les rodean.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
El valor inline-block es una combinación de los dos anteriores.
Los elementos inline-block mantienen el flujo del texto como los elementos inline pero interpretan el box-model como un elemento block
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
El valor none en la propiedad display removerá por completo el elemento de nuestra página web. Los elementos que le sigan en el HTML ocuparán su lugar en el flow del documento.
Un lector de voz ignorará nuestro contenido con display: none, lo cual tenemos que tener en cuenta si no queremos afectar la accesibilidad a la hora de ocultar algo.
La propiedad visibility nos permite hacer invisible un objeto pero que este siga ocupando su lugar en el flow del documento, por lo que el resto de los elementos seguirán comportándose como si estuviera allí.
Los posibles valores para visibiliy son:
visible | hidden | collapse
Podemos controlar la opacidad de un elemento con la propiedad opacity, cuyo valor va de 0 (transparente) a 1 (opaco).
Hay que tener en cuenta que los elementos contenidos por el elemento al que apliquemos opacity también se verán afectados y su opacidad máxima siempre será la del elemento padre.
<p>El parrafo tiene una opacidad del 50% por eso, aunque el strong
tenga el 100%, <strong>sigue siendo semitransparente.</strong></p>
p { opacity: .5; }
strong { opacity: 1; }
El parrafo tiene una opacidad del 50% por eso, aunque el strong tenga el 100%, sigue siendo semitransparente.
Cuando forzamos las dimensiones del elemento con width y height pueden darse dos casos:
overflow.p { height: 220px; }Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
p { height: 80px; }Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
La propiedad overflow controla lo que sucede con el contenido cuando excede el tamaño del elemento contenedor. Sus posibles valores son:
visiblehiddenscrollauto
p {
height: 80px;
overflow: visible;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
p {
height: 80px;
overflow: hidden;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam.
p {
height: 150px;
overflow: scroll;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsam quae quibusdam temporibus laboriosam dolorem explicabo modi, esse corrupti error sapiente nemo et odit ea natus consequuntur beatae, voluptate expedita!.
p {
height: 150px;
overflow: auto;
}
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum, ratione est voluptas reiciendis perspiciatis accusantium sed, libero iure expedita minima labore magnam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis ipsam quae quibusdam temporibus laboriosam dolorem explicabo modi, esse corrupti error sapiente nemo et odit ea natus consequuntur beatae, voluptate expedita!.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, esse ut voluptates cumque dolore vitae similique harum.
El padding es el espacio interior que separa el contenido del borde de la caja.
El margin es el espacio exterior que separa el al elemento del resto de los elementos.
Tanto el padding como el margin nos permiten controlar cada uno de sus lados individualmente con las siguientes propiedades:
padding-top | padding-right | padding-bottom | padding-leftmargin-top | margin-right | margin-bottom | margin-left
.box {
padding-top: 10px;
padding-bottom: 30px;
padding-left: 10%;
padding-right: 4em;
margin-top: 30px;
margin-bottom: 30px;
margin-left: 20px;
margin-right: 20px;
}
También pueden declararse todos los lados en una sola propiedad (padding y margin respectivamente) separando los valores con un espacio y siguiendo el sentido de las agujas del reloj.
Si utilizamos esta abreviación, cuando el valor derecho es igual al izquierdo podemos omitir este último. Si además el valor superior e inferior también son iguales podemos omitir el inferior.
.box {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
/* es igual a: */
padding: 10px 20px 10px 20px;
/* e igual a: */
padding: 10px 20px 10px;
/* e igual a: */
padding: 10px 20px;
}
border es la propiedad usada para controlar el borde que delimita un elemento y requiere tres valores: width, style y color separados por un espacio.
.box {
border: 1px solid red;
}
Si queremos afectar estos valores de manera individual utilizaremos las propiedades: border-width, border-style y border-color, que pueden a su vez contener 4 valores, uno por lado, al igual que el padding o el margin.
.box {
border-width: 1px 8px 6px 4px;
border-style: solid;
border-color: red blue;
}
Tambien podemos combinar las propiedades anteriores con los diferentes valores top, right, bottom, left para cambios muy precisos.
.box {
border-right-style: solid;
border-top-width: 4px;
border-bottom-color: red;
}
Los posibles estilos de borde que nos ofrece CSS para la propiedad border-style son:
none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
2px
solid
6px
double
8px
dashed
4px
dotted
La propiedad border-radius nos permite redondear las esquinas de nuestras cajas.
En su forma más simple funciona similar al propiedad a otras propiedades, aceptando 4 valores separados por espacio que indicarán el radio de la circunferencia que aplicaremos a las esquinas, empezando el primer valor en la esquina superior izquierda y desplazandose en sentido horario.
.box { border-radius: 10px 40px 40px 10px; }