CSS Tutorial => Empezando con CSS

Observaciones

Los estilos se pueden crear de varias maneras, lo que permite diversos grados de reutilización y alcance cuando se especifican en un documento HTML de origen. Las hojas de estilo externas se pueden reutilizar en documentos HTML. Las hojas de estilo incrustadas se aplican a todo el documento en el que se especifican. Los estilos en línea se aplican solo al elemento HTML individual en el que se especifican.

Versiones

Versión	Fecha de lanzamiento
1	1996-12-17
2	1998-05-12
3	2015-10-13

Hoja de estilo externa

Una hoja de estilo CSS externa se puede aplicar a cualquier número de documentos HTML colocando un elemento <link> en cada documento HTML.

El atributo rel de la etiqueta <link> se debe establecer en "stylesheet" , y el atributo href en la ruta relativa o absoluta de la hoja de estilo. Si bien el uso de rutas de URL relativas generalmente se considera una buena práctica, también se pueden usar rutas absolutas. En HTML5 se puede omitir el atributo de type .

Se recomienda que la etiqueta <link> se coloque en la etiqueta <head> del archivo HTML para que los estilos se carguen antes de los elementos que diseñan. De lo contrario, los usuarios verán un destello de contenido sin estilo .

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>

style.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="foldername/style.css" .

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

Las hojas de estilo externas se consideran la mejor manera de manejar tu CSS. Hay una razón muy simple para esto: cuando administra un sitio de, por ejemplo, 100 páginas, todo controlado por una sola hoja de estilo, y desea cambiar los colores de sus 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" en las 100 páginas de lo que es 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 sea necesario.

<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 en él:

p.green { color: #00FF00; }

Todos los 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, siga main.css, por ejemplo:

p.green { color: #006600; }

Ahora todos los 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 descargarlo nuevamente. Como los navegadores almacenan en caché la hoja de estilo externa, sus páginas se cargan más rápido.

Estilos internos

CSS encerrado en etiquetas <style></style> dentro de un documento HTML funciona como una hoja de estilo externa, excepto que vive en el documento HTML que diseña en lugar de en un archivo separado, y por lo tanto solo se puede aplicar al documento en el que está 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 body ).

<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>

Estilos en linea

Use estilos en línea para aplicar estilos a un elemento específico. Tenga en cuenta que esto no es óptimo. Se recomienda colocar reglas de estilo en una etiqueta <style> 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 <style> 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 en el siguiente ejemplo se aplican directamente a los elementos a los que se adjuntan.

<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 la representación en varios clientes, programas y dispositivos de correo electrónico, pero pueden requerir mucho tiempo de escritura y ser un poco difíciles de administrar.

CSS @import rule (uno de CSS at-rule)

El @import CSS at-rule se utiliza para importar reglas de estilo de otras hojas de estilo. Estas reglas deben preceder a todos los otros tipos de reglas, excepto las reglas de @charset; Como no es una declaración anidada, @import no se puede usar dentro de reglas condicionales de grupo. @import .

Cómo usar @import

Puede usar la regla @import de las siguientes maneras:

A. Con etiqueta de estilo interno

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

B. Con hoja de estilo externa

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

@import '/additional-styles.css';

Importar CSS externo también es posible. 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);

Cambiando CSS con JavaScript

JavaScript puro

Es posible agregar, eliminar o cambiar los valores de propiedad de CSS con JavaScript a través de la propiedad de style 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 un estilo de caja de camello inferior. En el ejemplo, ve que la font-family propiedad css se convierte en fontFamily en javascript.

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

jQuery

Modificar las propiedades 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 de css que tienen guiones (es decir font-size ). Puede ponerlos entre comillas o en camello el nombre de la regla de estilo.

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

Ver también

Listas de estilo con CSS

Hay tres propiedades diferentes para el estilo de elementos de list-style-type : list-style-type list-style-image list-style-position , list-style-image list-style-position , que se deben declarar en ese orden. Los valores predeterminados son disco, fuera y ninguno, respectivamente. Cada propiedad se puede declarar por separado, o usando la propiedad abreviada de list-style .

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

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

Dto
circulo
cuadrado
decimal
bajo romano
alto romano
ninguna

(Para una lista exhaustiva, vea la wiki de especificaciones del W3C )

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

li {
    list-style-type: square;
}

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

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

La propiedad de 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;
}

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

CSS Tutorial
Empezando con CSS

Buscar..