Comenzando con CSS

Hoja de estilo externa

Se puede aplicar una hoja de estilo CSS externa a cualquier número de documentos HTML colocando un elemento <enlace> en cada documento HTML.

El atributo rel de la etiqueta <link> debe establecerse en "stylesheet", y el atributo href en la ruta relativa o absoluta a la hoja de estilo. Si bien el uso de rutas URL relativas generalmente se considera una buena práctica, también se pueden usar rutas absolutas. En HTML5, el atributo tipo [se puede omitir] (https://html.spec.whatwg.org/multipage/semantics.html#the-link-element).

Se recomienda que la etiqueta <enlace> se coloque en la etiqueta <cabeza> del archivo HTML para que los estilos se carguen antes que los elementos a los que aplican estilo. De lo contrario, [los usuarios verán un destello de contenido sin estilo] (http://stackoverflow.com/a/1642259/2397327).

Ejemplo

hola-mundo.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

estilo.css

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

Asegúrese de incluir la ruta correcta a su archivo CSS en el href. Si el archivo CSS está en la misma carpeta que su archivo HTML, entonces no se requiere una ruta (como en el ejemplo anterior), pero si está guardado en una carpeta, especifíquelo así href="nombrecarpeta/estilo.css".

<link rel="stylesheet" type="text/css" href="foldername/style.css">

Las hojas de estilo externas se consideran la mejor manera de manejar su CSS. Hay una razón muy simple para esto: cuando administra un sitio de, digamos, 100 páginas, todas controladas por una sola hoja de estilo, y desea cambiar los colores de los enlaces de azul a verde, es mucho más fácil hacer el cambio. en su archivo CSS y deje que los cambios “caigan en cascada” a lo largo de las 100 páginas que ir a 100 páginas separadas y hacer el mismo cambio 100 veces. Nuevamente, si desea cambiar completamente el aspecto de su sitio web, solo necesita actualizar este archivo.

Puede cargar tantos archivos CSS en su página HTML como necesite.

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

Las reglas de CSS se aplican con algunas reglas básicas y el orden sí importa. Por ejemplo, si tiene un archivo main.css con algún código:

p.green { color: #00FF00; }

Todos sus párrafos con la clase ‘verde’ se escribirán en verde claro, pero puede anular esto con otro archivo .css simplemente incluyéndolo después de main.css. Puede tener override.css con el siguiente código después de main.css, por ejemplo:

p.green { color: #006600; }

Ahora todos sus párrafos con la clase ‘verde’ se escribirán en verde más oscuro en lugar de verde claro.

Se aplican otros principios, como la regla ‘!importante’, la especificidad y la herencia.

Cuando alguien visita su sitio web por primera vez, su navegador descarga el HTML de la página actual más el archivo CSS vinculado. Luego, cuando navegan a otra página, su navegador solo necesita descargar el HTML de esa página; el archivo CSS se almacena en caché, por lo que no es necesario volver a descargarlo. Dado que los navegadores almacenan en caché la hoja de estilo externa, sus páginas se cargan más rápido.

Estilos internos

El CSS encerrado en las etiquetas <style></style> dentro de un documento HTML funciona como una hoja de estilo externa, excepto que vive en el documento HTML al que aplica estilo en lugar de en un archivo separado y, por lo tanto, solo se puede aplicar al documento en que vive. Tenga en cuenta que este elemento debe estar dentro del elemento <head> para la validación de HTML (aunque funcionará en todos los navegadores actuales si se coloca en el cuerpo).

<head>
    <style>
        h1 {
            color: green;
            text-decoration: underline;
        }
        p {
            font-size: 25px;
            font-family: 'Trebuchet MS', sans-serif;
        }
    </style>
</head>
<body>
    <h1>Hello world!</h1>
    <p>I ♥ CSS</p>
</body>

Regla @import de CSS (una de las reglas at de CSS)

La regla @import CSS se utiliza para importar reglas de estilo de otras hojas de estilo. Estas reglas deben preceder a todos los demás tipos de reglas, excepto las reglas de @charset; como no es una declaración anidada, @import no se puede usar dentro de las reglas arroba del grupo condicional. @import.

Cómo usar @import

Puede usar la regla @import de las siguientes maneras:

A. Con etiqueta de estilo interna

   <style>
    @import url('/css/styles.css');
   </style>

B. Con hoja de estilo externa

La siguiente línea importa un archivo CSS llamado additional-styles.css en el directorio raíz al archivo CSS en el que aparece:

@import '/additional-styles.css';

También es posible importar CSS externo. Un caso de uso común son los archivos de fuentes.

@import 'https://fonts.googleapis.com/css?family=Lato';

Un segundo argumento opcional para la regla @import es una lista de consultas de medios:

@import '/print-styles.css' print;
@import url('landscape.css') screen and (orientation:landscape);

Estilos en línea

Use estilos en línea para aplicar estilo a un elemento específico. Tenga en cuenta que esto no es óptimo. Se recomienda colocar reglas de estilo en una etiqueta <estilo> o en un archivo CSS externo para mantener una distinción entre el contenido y la presentación.

Los estilos en línea anulan cualquier CSS en una etiqueta <estilo> o en una hoja de estilo externa. Si bien esto puede ser útil en algunas circunstancias, este hecho a menudo reduce la capacidad de mantenimiento de un proyecto.

Los estilos del siguiente ejemplo se aplican directamente a los elementos a los que están adjuntos.

<h1 style="color: green; text-decoration: underline;">Hello world!</h1>
<p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p>

Los estilos en línea son generalmente la forma más segura de garantizar la compatibilidad de representación entre varios clientes de correo electrónico, programas y dispositivos, pero pueden llevar mucho tiempo escribirlos y un poco difíciles de administrar.

Cambiar CSS con JavaScript

JavaScript puro

Es posible agregar, eliminar o cambiar los valores de las propiedades CSS con JavaScript a través de la propiedad ’estilo’ de un elemento.

var el = document.getElementById("element");
el.style.opacity = 0.5;
el.style.fontFamily = 'sans-serif';

Tenga en cuenta que las propiedades de estilo se nombran en minúsculas. En el ejemplo, ves que la propiedad css font-family se convierte en fontFamily en javascript.

Como alternativa a trabajar directamente en los elementos, puede crear un elemento <style> o <link> en JavaScript y agregarlo al <body> o `` del documento HTML.

jQuery

Modificar las propiedades de CSS con jQuery es aún más simple.

$('#element').css('margin', '5px');

Si necesita cambiar más de una regla de estilo:

$('#element').css({
    margin: "5px",
    padding: "10px",
    color: "black"
});

jQuery incluye dos formas de cambiar las reglas css que tienen guiones (es decir, tamaño de fuente). Puede ponerlos entre comillas o en mayúsculas y minúsculas el nombre de la regla de estilo.

$('.example-class').css({
    "background-color": "blue",
    fontSize: "10px"
});

Ver también

Diseñar listas con CSS

Hay tres propiedades diferentes para diseñar elementos de lista: tipo-estilo-lista, imagen-estilo-lista y posición-estilo-lista, que deben declararse en ese orden. Los valores predeterminados son disco, exterior y ninguno, respectivamente. Cada propiedad se puede declarar por separado o usando la propiedad abreviada list-style.

list-style-type define la forma o el tipo de viñeta utilizada para cada elemento de la lista.

Algunos de los valores aceptables para list-style-type:

  • desct
  • circulo
  • cuadrado
  • decimal
  • bajo-romano
  • alto-romano
  • ninguna

(Para obtener una lista exhaustiva, consulte la [wiki de especificación W3C] (https://www.w3.org/wiki/CSS/Properties/list-style-type))

Para usar viñetas cuadradas para cada elemento de la lista, por ejemplo, usaría el siguiente par propiedad-valor:

li {
    list-style-type: square;
}

La propiedad list-style-image determina si el ícono del elemento de la lista está configurado con una imagen y acepta un valor de ninguno o una URL que apunta a una imagen.

li {
    list-style-image: url(images/bullet.png);
}

La propiedad list-style-position define dónde colocar el marcador de elemento de lista y acepta uno de dos valores: “dentro” o “fuera”.

li {
  list-style-position: inside;
}