Diseño web: el uso de hojas de estilo externas e internas en css

En cascada Hojas de la tecnología de estilo (CSS) le permite definir un conjunto de estilos de fuente, los cuales se pueden utilizar consistentemente a través de su sitio web. Por ejemplo, imagine que usted está diseñando un sitio web grande y desea un aspecto coherente para todas las páginas: Todos los títulos deben establecerse en Arial Narrow Bold, de 18 puntos (se puede utilizar tamaños de punto real en CSS), y un color rojo oscuro color. Todos los títulos deben ser Verdana cursiva, de 11 puntos, y el azul de acero.

La ventaja de CSS es que le ahorra tiempo ya que le permite aplicar una configuración coherente rápidamente a todas elementos de texto a través de una página web. Hacer un cambio de estilo global de su sitio web, por lo tanto, es tan fácil como cambiar una sola línea de código CSS.

CSS viene en dos sabores: externo y las hojas de estilo interno hojas de estilo.

Video: Curso CSS Avanzado desde 0. Hojas internas y externas II. Vídeo 3.mp4

hojas de estilo externas en el diseño web

Para las hojas de estilo externas, se define un montón de estilos de texto en un archivo de CCS como mystyles.css. Cada estilo puede tener un nombre personalizado de su elección como .BigHeadline, .SectionHeadline, y así sucesivamente, siempre y cuando no haya espacios y el nombre está precedido por un punto. Un estilo como esto se le llama clase en la terminología de CSS. Después de definir la clase con un nombre personalizado, soportes abiertos e incluir una lista de las propiedades de estilo como la elección de la fuente, el color y tamaño, como en el siguiente ejemplo:

.BigHeadline {font-family: Arial, Helvetica, sans-serif-font-size: 24px; line-height: 30px; font-weight: 800-font-variant: small-caps-color: # 900-Letter-spacing: 2px ; text-shadow: 2px 2px 3px # 999999 -} SectionHeadline {font-family: Arial, Helvetica, sans-serif-font-size: 18px; line-height: 22px; font-weight: 600-color: # 333-. text-transform: capitalize-} 

Cuando se utiliza una hoja de estilos externa, cada una de sus páginas web referencias este archivo mystyles.css única por su estilo de fuente de información. Esto se logra mediante la colocación de una línea de código en cada página web que le dice dónde encontrar mystyles.css en línea. A continuación, los elementos de texto en la página Web que se le asigna uno de sus nombres de estilo personalizado (como .BigHeadline) harán que a medida que ha codificado.

Video: Tutorial de XHTML y CSS -28- Hojas de Estilo Externas

De esta manera, si alguna vez tiene la necesidad de hacer un cambio de fuentes global - por ejemplo, cambiar el color .BigHeadline de color rojo oscuro a azul - que hacer el cambio una vez a la clase en el archivo CSS mystyles.css, y todas las páginas web con el texto que utilizan el estilo BigHeadline se actualizará al instante.

Estos son dos ejemplos de clases CSS personalizadas definidas para gobernar cómo los titulares y encabezados de sección
Estos son dos ejemplos de clases CSS personalizadas definidas para gobernar cómo los titulares y encabezados de sección debe mirar.

hojas de estilo internas en el diseño web

hojas de estilo internas son los estilos CSS que defina para una sola página - no es para todo el sitio web. hojas de estilo internas son convenientes para los pequeños matices que sólo se encuentran en una página, aunque no es la mejor práctica para usarlos. Si todos los códigos CSS se encuentran dispersos a través de diferentes páginas web, que representa una carga de mantenimiento sitio: hay que cavar para encontrar donde residen todos los códigos. Es mejor tener toda tu CSS consolidó juntos en un archivo de fácil acceso.

Video: Recomendacion #66 - Descarga Paquete De Hojas De Estilo CSS Para Usarlos En Tu Pagina Web o Blog

hojas de estilo internas, si decide usarlos, se encuentran dentro de la etiqueta y anular hojas de estilo externas que la página también se puede hacer referencia a. El nombre de la clase y sus valores de propiedad van en la parte superior sección del código HTML, como se muestra en este ejemplo:

Ejemplo de estilos CSS internos 

En este código, se puede ver que el estilo .Headline es Arial Narrow Bold de 16 puntos. El # 990033 número después de color es un hexadecimal código que crea un color rojo oscuro. A medida que agrega encabezados a su página web, puede dar formato rápidamente aplicando el estilo .Headline que ha definido para la página:

Video: Curso CSS Avanzado desde 0. Estilos inline.Vídeo 4.mp4

Los titulares son un juego de niños para formatear

Artículos Relacionados