¿Qué es el código de estilo CSS? Incluir CSS en código HTML
En este capítulo hablaremos sobre cómo implementar CSS en un documento HTML, es decir, vincular la descripción de estilo de un elemento directamente al elemento mismo, alguna etiqueta HTML.
Esta tarea se puede realizar de tres maneras:
- Escribe una descripción de estilo directamente en el propio elemento. Este método sólo es bueno si solo hay un elemento de este tipo en el documento HTML que necesita una descripción de estilo separada.
- Escriba una descripción de estilo para todos los elementos idénticos del documento HTML. Este método se justifica si el estilo de la página es fundamentalmente diferente del diseño general del sitio (un grupo de páginas interconectadas).
- Extraiga la descripción de estilo de los elementos HTML en un archivo CSS independiente. Esto le permitirá administrar el diseño de todo el sitio, cada página del sitio en la que se indica una referencia a un archivo CSS. Este método es el uso más eficaz de una hoja de estilos en cascada.
Echemos un vistazo más de cerca a cada opción y, al mismo tiempo, familiaricémonos con las reglas de la sintaxis de escritura CSS.
El atributo de estilo.
Casi todas las etiquetas HTML tienen un atributo estilo, lo que indica que se aplica una determinada descripción de estilo a esta etiqueta.
Está escrito así:
estilo="">
Todo lo que se escribirá entre las comillas del atributo. estilo y será una descripción de estilo para este elemento, en este caso el elemento
Bueno por ejemplo:
estilo="color: #ff0000; tamaño de fuente:12px"> este es un párrafo con un estilo personal
En este caso, especificamos que este párrafo debe mostrarse en rojo y tener un tamaño de fuente de 12 píxeles. En capítulos posteriores hablaré en detalle sobre lo que está escrito entre comillas, pero ahora estamos hablando de cómo aplicar CSS a cualquier etiqueta HTML.
Utilizando el mismo principio, puedes especificar un estilo individual para casi cada elemento HTML.
estilo="color-de fondo: #c5ffa0">
estilo="color: #0000ff; tamaño de fuente:18px">Todo sobre los elefantes
comprar un elefante
estilo="color: #ff0000; tamaño de fuente:14px">
estilo="color: #0000ff; tamaño de fuente:16px">Alquilar un elefante
estilo="color: #ff0000; tamaño de fuente:14px">
Pero una vez más, este método de introducir CSS es bueno sólo si necesita establecer un estilo determinado para una pequeña cantidad de elementos HTML.
Etiqueta (no confundir con el atributo del mismo nombre) en el que se describen los elementos que necesitamos.
Eche un vistazo al ejemplo, habrá comentarios a continuación.
Todo sobre elefantes
En este sitio encontrará cualquier información sobre los elefantes.
comprar un elefante
¡¡Con nosotros podrás adquirir los mejores elefantes a precios competitivos!!
alquilar un elefante
¡¡Sólo aquí puedes alquilar elefantes!!
Como puede verse en el ejemplo, logramos exactamente el mismo resultado que en el primer caso, solo que ahora no asignamos un estilo a cada elemento individualmente, sino que lo colocamos en el "encabezado" del documento, indicando así que todos los títulos ,
- los párrafos serán azules
- rojo. Imagínese cuánto más fácil sería nuestro trabajo si hubiera cien párrafos de este tipo y unos quince títulos en una página, y el documento en sí pesara menos al "eliminar" todas las descripciones de estilo repetidas para cada elemento individual.
Ahora los comentarios prometidos:
Etiqueta existe una declaración directa de los estilos de determinados elementos HTML según la siguiente sintaxis:
Si en un bloque de declaración de estilo se especifican varias propiedades de un elemento, se separan por punto y coma.
CSS en un archivo externo separado.
En resumen, llegamos a la principal ventaja, en mi opinión, de CSS, es decir, la capacidad de colocar toda la información relacionada con el diseño de un sitio en un archivo externo separado.
Entonces, abre el bloc de notas (u otro editor) y escribe el siguiente texto en él:
Cuerpo (color de fondo: #c5ffa0)
a (color:#000060; peso de fuente: negrita;)
a:hover (color:#ff0000; peso de fuente: negrita; decoración de texto:ninguna)
h1 (color: #0000ff; tamaño de fuente: 18px)
h2 (color: #ff00ff; tamaño de fuente: 16px)
p (color: #600000; tamaño de fuente: 14px)
Intentaré explicar en detalle lo que escribimos sobre esta cosa extraña en los capítulos siguientes de este libro de texto.
¡Todo! ¡Se ha creado el archivo de descripción de estilo! Ahora solo queda un poquito, es decir, forzar a las páginas necesarias de nuestro sitio a extraer información de este archivo.
Esto se hace usando la etiqueta (conexión). Etiqueta multiusos y sirve para “vincular” un documento HTML con archivos externos adicionales que aseguren su correcto funcionamiento. Etiqueta es una especie de enlace, sólo que no está destinado a los usuarios, sino a los programas de navegación (navegadores). Porque lleva exclusivamente información de servicio; se encuentra en el encabezado del documento HTML entre las etiquetas; y no se muestra en la pantalla de los navegadores.
Etiqueta tiene atributos:
href- Ruta al archivo.rel- Define la relación entre el documento actual y el archivo al que se hace referencia.
- Icono de acceso directo: especifica que el archivo incluido es un archivo .
- hoja de estilo- Especifica que el archivo incluido contiene una hoja de estilo.
- application/rss+xml: un archivo en formato XML para describir la fuente de noticias.
Dado que incluimos una hoja de estilos en cascada como un archivo externo, nuestro enlace de servicio toma la siguiente forma:
Repito, para disipar ciertamente posibles malentendidos. Atributo rel asignar un valor hoja de estilo Como estamos conectando una hoja de estilos en cascada como un archivo externo, indicamos la ruta al archivo css (en este ejemplo el archivo se llama miestilo.css y se encuentra al lado del documento HTML en el que está escrito este enlace) también indicamos que este archivo es de texto y contiene una descripción de estilo tipo="texto/css"
Ahora insertamos esta línea en los encabezados de página de nuestro sitio y disfrutamos del resultado.
archivo mystyle.css
cuerpo (color de fondo: #c5ffa0)
a (color:#000060; peso de fuente: negrita;)
a:hover (color:#ff0000; peso de fuente: negrita; decoración de texto:ninguno)
h1 (color: #0000ff; tamaño de fuente: 18px)
h2 (color: #ff00ff; tamaño de fuente: 16px)
p (color: #600000; tamaño de fuente: 14px)
archivo index.html
Menú:
Todo sobre elefantes.
Compra un elefante.
Alquila un elefante.
Todo sobre elefantes
En este sitio encontrará cualquier información sobre los elefantes.
Archivo elefante.html
Menú:
Todo sobre elefantes.
Compra un elefante.
Alquila un elefante.
comprar un elefante
¡¡Con nosotros podrás adquirir los mejores elefantes a precios competitivos!!
Archivo elefante1.html
Menú:
Todo sobre elefantes.
Compra un elefante.
Alquila un elefante.
alquilar un elefante
¡¡Sólo aquí puedes alquilar elefantes!!
En el ejemplo anterior, "sitio sobre elefantes", actualmente hay tres páginas, cada una de las cuales está asociada con un único archivo CSS externo: mystyle.css. Por lo tanto, lo "descargamos" significativamente e hicimos que el diseño de todo el sitio fuera "compatible con dispositivos móviles". ¿Imagínese cuántos kilobytes ganaríamos si este sitio tuviera cien páginas completas? Y además, ¿cuánto tiempo nos ahorraríamos si tuviéramos que cambiar algo en su diseño?
En este capítulo, analizamos tres formas de incrustar CSS en un documento HTML. ¿Cuál es mejor usar?
- Usar atributo estilo para cualquier elemento, si este elemento con un estilo diferente a otros elementos es el único en todo el sitio.
- Usar etiqueta
Ejemplo: hoja de estilo interna
- Pruébelo usted mismo »
Título
Texto primero
Texto dos
Texto tres
Hoja de estilo interna Título
Texto primero
Texto dos
Texto tres
En este ejemplo, configuramos el color de fondo del elemento usando CSS.
: color de fondo: verde pálido, color y tipo de fuente para los títulos: color: azul; familia de fuentes:verdana, así como el tamaño de fuente, el color y la alineación central del texto de los párrafos.
: tamaño de fuente: 20px; color: rojo; alineación de texto: centro.
Estilo incorporado
Cuando necesite formatear un solo elemento de una página HTML, la descripción del estilo se puede colocar directamente dentro de la etiqueta de apertura utilizando el atributo de estilo ya especializado. Por ejemplo:
Párrafo
Estos estilos se denominan integrados (en línea) o incrustados. Las reglas definidas directamente dentro de la etiqueta de apertura de un elemento anulan las reglas definidas en el archivo CSS externo, así como las reglas definidas dentro del elemento.
Título
Texto primero
Texto dos
Texto tres