Como Cascading Style Sheets (CSS) Work
CSS, ou Cascading Style Sheets, é o código que controla não só a aparência visual dos seus elementos HTML individual, mas também onde os elementos aparecem em relação um ao outro, e às vezes como eles interagem e animar. Entre HTML, CSS e javascript, você codificar toda a camada de apresentação de um website. powering o local para executar funções dinâmicas ou se conectar a um CMS (conteúdo management sistema) do banco de dados requer um código adicional, como PHP.
CSS tem evoluído suas capacidades dramaticamente na última poucos anos- agora é possível criar sites visualmente ricas - com (por exemplo) caixas de bordas arredondadas, gradientes simples e texto sombreado - sem o uso de gráficos de bitmap em tudo. Todos estes efeitos frescos pode ser definida como trechos de código e, em seguida, aplicado a qualquer objeto HTML você se sentir necessidades alguns gussying up. Se você sempre exigem uma mudança de todo-o-board para o seu site, atualizando uma linha CSS de código irá fazer o truque.
Para começar suas capacidades CSS fora do chão, você começar definindo uma série de estilos para cada elemento que você deseja alterar, quer se trate de um componente HTML (como um link ou um título) ou um elemento CSS (como um recipiente div). Você posso fazer tudo isso definindo dentro do documento HTML em si, mas é mais comum para definir os estilos em um documento separado de sua página HTML. Observe também que você pode definir uma série de modificadores, chamado aulas, que você pode chamar em seu código HTML para afetar ainda mais a maneira como os elementos aparecem - é semelhante à forma como adjetivos ajudar a especificar o substantivo (s) que estão anexados.
Aqui está um exemplo de código CSS que faz com que todos os seus títulos HTML aparecem em vermelho e definir em 18 pontos Arial:
h1 {color: # e80f0f-font-family: Arial, Helvetica, sans-serif-margin: 20px 20px 32px; line-height: 22px; font-size: 18px;} Este código é guardado dentro de um documento separado - neste caso, um documento chamado sample.css. A página HTML refere-se a este documento se externa na seção principal da página. Então, em qualquer lugar da página que o tag é usada, o texto que se segue irá render com as configurações definidas de volta no documento CSS.
Agora, se você quiser ter um título de caso de especial que fez algumas manchetes maiores com uma ainda mais brilhante vermelho, você pode configurar uma classe CSS personalizado para lidar com essa tarefa e acrescentá-la à tag em seu HTML. Você pode nomear uma classe qualquer coisa que você gostaria - apenas certifique-se que tem um período na frente do nome e não tem espaços no nome, como este:
.grande {font-size: 24px; line-height: 26px; color: # e80f0f-}Como se mostra no exemplo seguinte, o primeiro título aparece como o código CSS definiu. O segundo título tem a classe .big anexado à tag de modo que o resultado é uma maior título, mais brilhante.
Observe que no CSS .big exemplo de código classe dada anteriormente, você não tem que repetir as preferências de fonte e de margem. Estas definições já estão contabilizados no estilo originais. Você só precisa de delinear as mudanças. A palavra cascata em Cascading Style Sheets significa que seus estilos são repassados (herdado) Por folhas de estilo que começam suas instruções de suas preferências originais - neste caso, aqueles que você criou na classe. Basicamente, quando você criar um estilo, qualquer elemento que recebe atribuído esse estilo Número 147-cascatas através # 148- para os outros estilos, como indicado pelo seu configurações, a menos que você aplicar uma alteração.
Você criar efeitos visuais em CSS como este usando propriedades aprovadas, tais como font-size, margem, e cor, como usado nos exemplos dados aqui. Portanto, como você pode imaginar, a chave para obter uma alça sobre CSS (e sobre o que pode e não pode fazer com ele) encontra-se em estudar todas as propriedades CSS disponíveis e experimentando com que tipo de valores que você pode entrar para cada um . Você pode encontrar listas bastante abrangente on-line se você pesquisar lista e valores propriedades CSS.
