CSS de volta ao básico Terminologias explicadas
Folhas de estilo CSS ou em cascata completam a linguagem de definição das regras de design para a nossa web. Artistas de todos os lugares estão usando o CSS diariamente para criar, organizar e codificar conjuntos de regras para layouts básicos de sites. Esta se tornou a linguagem mais popular para o design de front-end e fornece habilidades incríveis com o recente lançamento do CSS3. Mas o que todo esse código realmente significa?
A linguagem em si foi totalmente desenvolvida há alguns anos. Confusão pode surgir principalmente devido à falta de comunicação e uso indevido de termos semelhantes. O CSS traz muitos novos conceitos para a tabela. Nós vamos cobrir algumas das terminologias mais populares para dominar como um guru CSS.
Por que especializar-se com CSS?
Esta questão foi colocada antes, e mesmo entrando em 2011, podemos ver os mesmos resultados aparecendo. CSS é uma linguagem robusta e não gosta de scripts ou programação. É uma linguagem de estilo, mais especificamente código usado para descrever como uma página da Web deve se comportar.
Usando CSS, podemos manipular diretamente atributos de elementos HTML individuais. Todos os blocos, parágrafos, links e imagens podem ser afetados pelas regras CSS. Refinar a semântica de apresentação para a web sempre foi um grande passo. Esta é a principal razão pela qual o CSS ainda é o principal protagonista dos designers - ninguém criou nada melhor!
Propriedades e Valores
Essa é a maneira mais simples de invadir o CSS. Todo o código se divide em duas ações: escolher um elemento para aplicar designs e o que aplicar. Este último é criado através de pares de propriedade / valor.
Como um exemplo cor vermelha; é um par propriedade / valor muito simples. A propriedade que usamos é cor o que nos permite passar em qualquer aceitável valor para mudar a cor do texto. Isso também pode ser um código hexadecimal ou dados de cores RGB (Vermelho-Verde-Azul). Muitas vezes os designers não mencionam a ideia de valores porque pode ser enganosa.
Propriedades e valores são realmente uma única ideia. Cada declaração de propriedade requer um valor e os valores por si só não têm sentido. Há muita documentação on-line sobre as diversas propriedades e como elas afetam os elementos HTML. Eu recomendaria a compra de um livro de referência de CSS em qualquer livraria próxima. Eles são bastante baratos e armazenam quase todas as informações que você precisa.
Valores Seletores
Seletores são necessários para completar uma linha inteira de código CSS. É o que declaramos para definir o tipo de elemento que estamos segmentando. Existem muitos seletores e muitos são tão complicados que o designer médio não precisaria das habilidades. Verifique os documentos do seletor do W3 se quiser saber mais.
A maneira mais simples de começar as definições de estilo é usar elementos nus como seletores de propriedade. Isso significa manipular o código raiz, como p para parágrafos, div para divisões e até corpo e html pode ser usado para manipular todo o documento da página da web. Abaixo está um exemplo rápido de estilo de todos os elementos de parágrafo.
p font-family: Arial, sans-serif; cor: # 222; intensidade da fonte: Negrito;
O que dá peso real ao CSS é o quão preciso pode ser o sniping de seletor. A melhor maneira de realizar estilos direcionados é através de dois métodos conhecidos como classes e IDs. Essas são ideias comuns em HTML nas quais você pode definir qualquer elemento para ter um ID e um valor de classe por meio de atributos. Então, usando CSS, é simples aplicar estilos a esse bloco específico.
p # firstpar font-size: 14px; / * estilos parágrafo com ID de "firstpar" * / p.comment font-size: 1.0em; Altura da linha: 1.3em; / * estilos parágrafo (s) com classe de "comentário" * /
Unidades de comprimento e valores
Muitas vezes esses termos se confundem, não é uma grande surpresa. Os valores foram explicados anteriormente como o posicionamento que usamos para descrever uma propriedade. Unidades de comprimento também são valores em que são usadas para descrever uma propriedade.
A diferença é que esses valores exigem dados numéricos e, portanto, devem retornar alguma forma de unidades. Pixels (px) são os mais predominantes e podem ser usados para qualquer coisa: largura / altura, tamanho da fonte, preenchimento / margens, para citar alguns.
Além desses, você pode ver percentuais (%) usados com frequência através de layouts de fluido. Ao definir valores de largura para um percentual, o compilador assumirá que 100% é a largura total do navegador da web. Isso dá muita precisão aos designers ao aplicar estilos a estruturas de layout e até tipografia de página.
O bloco de declaração
Agora, depois de juntar todos esses termos, finalmente podemos discutir a ideia central por trás das folhas de estilo. Blocos de código são usados para delinear áreas de tópicos e especificar detalhes de elementos. Por exemplo, abaixo está uma linha de código para um contêiner de navegação simples:
div # nav display: block; largura: 100%; preenchimento: 3px 6px; margem inferior: 20px;
A maneira mais fácil de exibir esse código é alinhar as propriedades uma após a outra. Os desenvolvedores de CSS usaram blocos de código para dividir cada propriedade em sua própria linha. Esta agenda não só ocupa muito mais espaço, mas reduz a capacidade de “desnatar” sua folha para encontrar exatamente o que você precisa.
Uma maneira melhor de dividir blocos de código é separar elementos convolutos em seus próprios depois que eles atingem um limite. Esse número é pessoal e será diferente entre os desenvolvedores. É o ponto de inflexão em que a lógica dita que é bobagem manter tudo em uma única linha, principalmente por causa da legibilidade.
Abaixo eu escrevi um exemplo de um bloco de propriedades de navegação todos juntos. Essa prática mantém elementos mais profundos no mesmo local, de modo que as edições em todos os elementos de navegação são muito mais simples.
div # nav display: block; largura: 100%; preenchimento: 3px 6px; margem inferior: 20px; div # nav ul estilo da lista: nenhum; display: bloco; div # nav ul li flutuante: esquerdo; margem direita: 10 px; tamanho da fonte: 12px; div # nav ul li a cor: # 0f0f0f; text-decoration: nenhum; display: bloco inline; preenchimento: 2px 5px;
Avanços possíveis de CSS2 / CSS3
Nas manchetes recentemente tem sido falar sem parar sobre os benefícios surpreendentes de CSS3. Mas o que tem realmente mudou na linguagem? O código claramente antigo ainda funcionará bem. Isso pelo menos mostra completa compatibilidade retroativa entre compiladores (sempre uma coisa boa).
As principais diferenças estão relacionadas principalmente a novas propriedades. Isso permite que cantos arredondados e efeitos de sombreamento sejam renderizados no navegador. O CSS3 também oferece novas ferramentas para descrever cores no documento. HSL (Hue-Saturation-Lightness) é o mais novo, além do HSLA, que inclui um canal Alpha para reduzir a opacidade.
Os seletores de atributo são um enorme passo em frente no que diz respeito ao estilo de marcação direta. Com esse estilo de código, você pode direcionar um nome de elemento específico que contém atributos com determinados valores. Eles são úteis principalmente ao trabalhar com marcações como XML, onde não há princípios de design padrão para manipular nós. O exemplo abaixo é uma ideia relativamente simples:
div [attrib ^ = "1"] / * estilos aqui * /
O código acima faz parte da biblioteca de seletores CSS. Isso afetaria todos os elementos div com um atributo “Atribuir” que também detém o valor “1”. Se isso ainda for confuso, refira o exemplo abaixo para esclarecer. Em teoria, esses dois seletores devem executar as mesmas ações.
p [id ^ = "primary"] / * styles * / p # principal / * styles * /
Conclusão
Depois de quebrar alguns dos termos mais confusos, o CSS parece um passeio no parque. A linguagem é muito intuitiva e os iniciantes podem começar a projetar dentro das primeiras horas disponíveis. Isto é o que torna o CSS tão popular entre os desenvolvedores da web.
Os benefícios do CSS3 apenas começaram a entrar em vigor. Ao longo dos novos anos, a evolução das tendências da web nos mostrará quanto controle realmente temos sobre o design de páginas da web. CSS atualmente se orgulha de ser a língua dominante para o estilo de website front-end. Praticar em habilidades rudimentares de nível intermediário pode produzir uma experiência de design abundante e mais conhecimento.
