HTML => Usando HTML con CSS

Introducción

CSS proporciona estilos a los elementos HTML en la página. El estilo en línea implica el uso del atributo de estilo en las etiquetas, y no se recomienda. Las hojas de estilo internas usan la etiqueta <style> y se usan para declarar reglas para partes dirigidas de la página. Las hojas de estilo externas se pueden usar a través de una etiqueta <link> que toma un archivo externo de CSS y aplica las reglas al documento. Este tema cubre el uso de los tres métodos de apego.

Sintaxis

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

Uso externo de la hoja de estilo

Utilice el atributo de link en la head del documento:

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

También puede usar las hojas de estilo proporcionadas desde sitios web a través de una red de distribución de contenido, o CDN para abreviar. (por ejemplo, Bootstrap):

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

En general, puede encontrar soporte CDN para un marco en su sitio web.

Hoja de estilo interna

También puede incluir elementos CSS internamente usando la etiqueta <style> :

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>  
</head>

También se pueden incluir múltiples hojas de estilo internas en un programa.

<head>
    <style type="text/css">
        body {
           background-color: gray;
        }
    </style>

    <style type="text/css">
        p {
           background-color: blue;
        }
    </style>  
</head>

Estilo en linea

Puede diseñar un elemento específico utilizando el atributo de style :

<span style="color: red">This text will appear in red.</span>

Nota: intente evitar esto: el punto de CSS es separar el contenido de la presentación.

Múltiples hojas de estilo

Es posible cargar múltiples hojas de estilo:

<head>
    <link rel="stylesheet" type="text/css" href="general.css">
    <link rel="stylesheet" type="text/css" href="specific.css">
</head>

Tenga en cuenta que los archivos y las declaraciones posteriores anularán los anteriores . Así que si general.css contiene:

body {
    background-color: red;
}

y specific.css contiene:

body { 
    background-color: blue;
}

Si se usan ambos, el fondo del documento será azul.

Modified text is an extract of the original Stack Overflow Documentation

Licenciado bajo CC BY-SA 3.0

No afiliado a Stack Overflow

HTML
Usando HTML con CSS

Buscar..