Home-theater-designers
CSS pertence a um trio de tecnologias da web centrais ao lado de HTML e JavaScript. Com um planejamento cuidadoso, o CSS contribui para uma separação de interesses. Recursos independentes controlam a estrutura de um conteúdo, sua apresentação e seu comportamento.
As folhas de estilo desempenham um papel importante na acessibilidade, escalabilidade e até mesmo no desempenho da web. Como autor de conteúdo ou web designer, eles fornecem controle sobre como os dispositivos renderizam o conteúdo. Do layout ao tamanho e cor da fonte, o CSS transforma o conteúdo em páginas bonitas.
Qual é a aparência do CSS?
CSS é uma grande linguagem - há muitas coisas diferentes para estilizar! Mas sua sintaxe é direta, com apenas algumas regras para aprender.
Os elementos HTML têm várias propriedades que podem ser estilizadas em CSS. o cor propriedade define a cor do primeiro plano (por exemplo, texto). O tamanho da fonte depende do tamanho da fonte propriedade.
Cada propriedade pode ser definida com um valor compatível. A atribuição de um valor a uma propriedade é uma 'declaração'. Geralmente, eles se parecem com isto:
property: valuePor exemplo:
como encontrar o endereço IP da impressora Windows 7
color: redValores para propriedades diferentes podem parecer muito diferentes, até mesmo valores para a mesma propriedade. Por exemplo, aqui estão mais duas maneiras de escrever a declaração anterior:
color: #ff0000
color: rgb(255, 0, 0)
Como HTML e folhas de estilo se unem
Você pode combinar HTML e CSS de algumas maneiras diferentes, cada uma com suas vantagens.
Estilos de escrita inline
O método mais simples é anexar declarações de estilo diretamente a um elemento no arquivo HTML. Você pode fazer isso usando o estilo atributo assim:
Most of this text is red …
… but this isn’t!
Embora estilizar elementos em linha como esse possa ser conveniente, ele tem várias desvantagens. Para começar, isso complica o HTML, tornando-o mais difícil de ler à primeira vista. Também é difícil de manter: imagine um documento longo no qual queremos definir a cor de cada parágrafo. Isso é CSS, mas não é 'Folhas de estilo'.
Incorporando estilos na cabeça
Você pode começar a ver a aparência de uma folha de estilo com o segundo mecanismo, incorporação . Usando essa abordagem, reunimos todas as declarações de estilo dentro de um estilo elemento no cabeça do nosso documento. Será mais ou menos assim:
/* style instructions go here */
...Porém, nossas instruções de estilo precisam de um pouco mais de detalhes do que antes. Como os movemos para o cabeçalho, cada regra não está mais associada a um elemento. Podemos ter declarado cor vermelha , mas o que deveria ter essa cor?
É aqui que entram os seletores de CSS. Eles nos permitem direcionar partes específicas da página e definir seu estilo em um só lugar, usando esta sintaxe:
sem som nas janelas de jogos 10
selector {
declaration1;
declaration2;
/* etc. */
}
Por exemplo, para estilizar o texto dos parágrafos em azul, podemos especificar o seguinte:
p {
color: blue;
}Neste exemplo, o seletor é simplesmente p , que corresponde a todos os elementos de parágrafo em nosso documento. Todo o texto será colorido de azul, contanto que esteja em O método final a cobrir é a vinculação. Esta é, de longe, a abordagem mais útil e pela qual você deve optar na maior parte do tempo. Em vez de incorporar regras CSS no estilo diretamente em seu documento, você pode movê-los para um arquivo separado. Cole este código dentro do tags de seu arquivo HTML para vincular sua folha de estilo externa. Com o método vinculado, estamos aproveitando um poder central do CSS: separação de interesses. Todas as informações semânticas - o que o conteúdo significa - estão contidas no documento HTML. O estilo - o que parece - está em um arquivo separado, a folha de estilo. Aqui estão apenas alguns benefícios dessa separação: Você aprendeu muito sobre estilos e folhas de estilo, mas e a parte em cascata do CSS? A cascata é o que decide quais estilos usar quando várias folhas de estilo estão presentes. Você viu como um autor pode especificar estilos para seu conteúdo. Mas outra característica do CSS é que ele dá aos leitores e fabricantes de navegadores alguma opinião sobre o assunto também. Você já deve estar se perguntando sobre os estilos padrão. Por exemplo, como um H1 elemento parece grande e em negrito, mesmo sem folhas de estilo do autor? Isso graças a um conjunto de regras especiais que constituem a folha de estilo do agente do usuário. Essas regras são inicialmente aplicadas por seu navegador da web a todas as páginas que você visita. A cascata especifica que uma folha de estilo do autor se aplica após os estilos do agente do usuário. Se nosso navegador diz que os títulos estão em negrito, mas o autor da página declara que os títulos nesta página são claros, eles acabarão claros. Há outra fonte de folha de estilo que passa algum controle para o leitor. Qualquer usuário da web pode, em teoria, manter uma folha de estilo do usuário com regras personalizadas. Elas ficam no meio: as regras do usuário sobrescreverão as configurações padrão do navegador, mas elas mesmas serão sobrescritas pelos estilos do autor. Infelizmente, o suporte para folhas de estilo do usuário nunca foi muito difundido. Você pode usar folhas de estilo em diferentes contextos, além da tela. o metade atributo do ligação elemento define a quais tipos de mídia a folha de estilo se aplica. Por exemplo, você pode definir um folha de estilo para impressão usando marcação como a seguinte: Você pode reunir estilos comuns em uma folha de estilo global e estilos específicos de mídia em arquivos separados. Existem até tipos de mídia para atender a apresentações auditivas ou em braille de seu conteúdo. CSS é uma ferramenta vital para melhorar a acessibilidade. Relacionado: Como navegar na web se você for cego ou deficiente visual Sites como a Wikipedia usam CSS para controlar seu estilo de impressão, ocultar elementos indesejados e simplificar o layout. As folhas de estilo em cascata cobrem muito: cascata, herança, seletores, fontes, mídia, etc. Mas seu poder habilita a web moderna. Este é um meio que fornece recursos integrados de reutilização, flexibilidade e acessibilidade. Para ver todo o poder do CSS e quanto ele tem a oferecer, verifique nossa folha de dicas que cobre todas as propriedades essenciais do CSS3. Domine a sintaxe CSS essencial com nossa folha de dicas de propriedades CSS3. Bobby é um entusiasta da tecnologia que trabalhou como desenvolvedor de software por quase duas décadas. Ele é apaixonado por jogos, trabalha como Editor de Críticas na Switch Player Magazine e está imerso em todos os aspectos da publicação online e desenvolvimento web. Junte-se ao nosso boletim informativo para dicas de tecnologia, análises, e-books grátis e ofertas exclusivas!Vinculando uma folha de estilo externa
O poder do CSS
Explicando o Cascade
Segmentando diferentes mídias
fazendo um novo endereço de e-mail
CSS faz com que o HTML pareça bom
Sobre o autor Bobby Jack(58 artigos publicados) Assine a nossa newsletter