Web Design: Usando folhas de estilo externas e internas em CSS

Cascata Sheets tecnologia de estilo (CSS) permite definir um conjunto de estilos de fonte, que você pode usar de forma consistente em todo o site. Por exemplo, imagine que você está projetando um grande site e você quer uma aparência consistente para todas as páginas: Todos os títulos devem ser, em conjunto, 18 pontos negrito Arial Narrow (você pode usar tamanhos verdadeiro ponto em CSS), e um vermelho escuro cor. Todas as legendas devem ser Verdana itálico, 11 pontos, e azul de aço.

A vantagem do CSS é que você economiza tempo, permitindo-lhe aplicar configurações consistentes rapidamente para todos elementos de texto em todo um site. Fazer uma mudança de estilo global para o seu site, por isso, é tão fácil como mudar uma única linha de código CSS.

CSS vem em dois sabores: externo folhas de estilo e interno folhas de estilo.

folhas de estilo externas em web design

Para folhas de estilo externas, define-se um monte de estilos de texto em um arquivo CCS como mystyles.css. Cada estilo pode ter um nome personalizado de sua escolha como .BigHeadline, .SectionHeadline, e assim por diante, contanto que não há espaços eo nome é precedido por um período. Um estilo como este é chamado de classe na terminologia CSS. Depois de definir a classe com um nome personalizado, você colchetes abertos e incluir uma lista de propriedades de estilo tais como a escolha da fonte, cor e tamanho, como no exemplo a seguir:

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

Ao usar uma folha de estilo externa, cada uma das suas referências páginas web esse arquivo mystyles.css único para a sua informação de fonte styling. Isto é conseguido através da atribuição de uma linha de código em cada página da web que diz a ele onde encontrar mystyles.css online. Em seguida, quaisquer elementos de texto na página da web que são atribuídos um de seus nomes de estilo personalizado (como .BigHeadline) serão renderizados como você codificada.

Dessa forma, se você tiver a necessidade de fazer uma mudança de fontes globais - por exemplo, mudar a cor .BigHeadline de vermelho escuro para azul - você faz a mudança uma vez para a classe no arquivo mystyles.css CSS, e todas as páginas da web com texto que usam o estilo BigHeadline irá atualizar instantaneamente.

Estes são dois exemplos de classes CSS personalizado definido para governar como manchetes e títulos de seção
Estes são dois exemplos de classes CSS personalizados definidos para governar como manchetes e títulos de seção deve olhar.

folhas de estilo internas em web design

folhas de estilo internas são os estilos CSS definidos para apenas uma página - não para o site inteiro. folhas de estilo internas são convenientes para as pequenas nuances encontradas apenas em uma página, embora não seja a melhor prática para usá-los. Se todos os seus códigos CSS estão espalhados por diferentes páginas da web, ela representa um fardo local de manutenção: você deve cavar para descobrir onde todos os códigos residem. É melhor ter todo o seu CSS consolidou juntos em um arquivo de fácil acesso.

folhas de estilo internas, se você decidir usá-los, são encontrados dentro da marca e substituir folhas de estilo externas que a página também pode ser de referência. O nome da classe e seus valores de propriedade ir na seção superior do código HTML, como mostrado neste exemplo:

Exemplo de estilos CSS internas 

Neste código, você pode ver que o estilo .headline é Arial Narrow em negrito 16 pontos. O # 990033 número após a cor é uma hexadecimalcode que cria um vermelho escuro. Como você adicionar títulos para sua página da web, você pode rapidamente formatá-los, aplicando o estilo .headline que definiu para a página:

Não há notícias são uma coisa fácil de formatar

menu