Uma vez que você começou a mexer em HTML 17 Exemplos simples de código HTML Você pode aprender em 10 minutos 17 Exemplos simples de código HTML Você pode aprender em 10 minutos Se você conhece as seguintes 17 tags HTML (e as poucas extras que acompanham), Será capaz de criar uma página básica a partir do zero ou ajustar o código criado por um aplicativo como ... Leia Mais, você provavelmente estará interessado em adicionar mais energia às suas páginas da web. CSS é a melhor maneira de fazer isso. O CSS permite que você aplique alterações em toda a sua página sem ter que usar muitos estilos HTML inline. 9 Erros que você não deve fazer ao criar uma página da Web 9 Erros que você não deve fazer ao criar uma página da Web make, mas se você for mais cedo, a sua página ficará melhor, será mais fácil de manter e funcionará como você quiser. Consulte Mais informação .
Veremos como criar uma folha de estilo in-line para que você possa praticar suas habilidades em CSS e, em seguida, passaremos para 10 exemplos simples que mostrarão como fazer algumas coisas básicas. De lá, sua imaginação é o limite!
Se você quer uma introdução um pouco mais técnica, não se esqueça de verificar 5 Baby Passos para Aprendizagem CSS e Tornando-se um Sorcerer CSS Kick-Ass 5 Baby Passos para Aprendizagem CSS e Tornando-se um Kick-Ass CSS Sorcerer um Kick-Ass CSS Sorcerer CSS é o único site de mudanças mais importante visto na última década, e abriu o caminho para a separação de estilo e conteúdo. De maneira moderna, o XHTML define a estrutura semântica ... Leia Mais.
Folha de estilo inline
Todo documento HTML contém uma tag. Essa seção principal é onde está sua folha de estilo CSS inline. Veja como ficará:
All of your CSS declarations.Coloque isso no topo do seu documento, preencha com o seu CSS, e você está pronto para ir.
1. Formatação Fácil de Parágrafo
O legal sobre estilização com CSS é que você não precisa especificar um estilo toda vez que cria um elemento. Você pode apenas dizer "todos os parágrafos devem ter este estilo específico" e você está pronto para ir. Aqui está um exemplo de como você pode fazer isso.
Vamos dizer que você quer cada parágrafo (isso é tudo com um
Tag HTML Top 11 Tags HTML Cada Blogueiro e dono do site deve saber Top 11 Tags HTML Todo Blogueiro e dono do site deve saber A world wide web conhece muitas línguas e está codificada em várias diferentes. A única língua no entanto, que pode ser encontrada em todo o mundo e existe desde a invenção das páginas da web, é a ... Leia mais) na sua página para ser um pouco maior do que o habitual. E cinza escuro, em vez de preto. Veja como você faria isso com CSS:
p { font-size: 120%; color: dimgray; } Isso é tudo que existe para isso. Agora, sempre que o navegador renderizar
parágrafo, o texto herdará o tamanho (120% do normal) e a cor ("dimgray").
Se você está curioso para saber quais cores de texto simples você pode usar, confira esta lista de cores CSS da Mozilla.
2. Mude o caso de letra
Ok, agora que vimos como fazer uma alteração em cada parágrafo, vamos ver como podemos ser mais seletivos. Vamos criar uma designação para parágrafos que devem estar em letras pequenas. Veja como faríamos isso:
p.smallcaps { font-variant: small-caps; } Para criar um parágrafo totalmente em letras pequenas, usaremos uma tag HTML ligeiramente diferente. Aqui está o que parece:
Seu parágrafo aqui.
Como você pode ver, adicionar um ponto e um nome de classe a qualquer elemento específico no CSS especifica um subtipo desse elemento definido por uma classe. Você pode fazer isso com texto, imagens, links e praticamente qualquer outra coisa.
Se você quiser alterar o caso de um conjunto de texto para um caso específico, use estas linhas CSS:
text-transform: uppercase; text-transform: lowercase; text-transform: capitalize; O último capitaliza a primeira letra de cada frase.
3. Alterar as cores dos links
Vamos tentar mudar o estilo de algo diferente de um parágrafo completo. Existem quatro cores diferentes que um link pode ser atribuído: sua cor padrão, sua cor visitada, sua cor hover e sua cor ativa (que é exibida enquanto você clica nela). Veja como podemos mudar isso:
a:link { color: gray; } a:visited { color: green; } a:hover { color: rebeccapurple; } a:active { color: teal; } Note que cada "a" é seguido por dois pontos, não por um ponto.
Cada uma dessas declarações altera a cor de um link em um contexto específico. Não há necessidade de alterar a classe de um link para que ele mude de cor. Tudo será determinado pelo usuário e pelo estado do link.
4. Remover os sublinhados de links
Embora o texto sublinhado indique claramente um link, às vezes é mais interessante desfazer esse sublinhado. Isso é feito com o atributo “text-decoration”. Veja como nos livraríamos dos sublinhados nos links:
a { text-decoration: none; } Qualquer coisa com a tag de link ("a") permanecerá não sublinhada. Deseja sublinhar quando o usuário passar por cima dele? Apenas adicione isto abaixo:
a:hover { text-decoration: underline; } Você também pode adicionar essa decoração de texto a links ativos para garantir que o sublinhado não desapareça quando o link for clicado.
5. Faça um botão de ligação
Se você quer atrair mais atenção para o seu link, usar um botão de link é uma ótima maneira de fazê-lo. Este requer mais algumas linhas, mas vamos passar por cima delas individualmente:
a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; } Ao incluir todos os quatro estados de link, garantimos que o botão não desapareça quando um usuário passar o mouse ou clicar nele. Você também pode definir parâmetros diferentes para links em foco e ativos, como alterar o botão ou a cor do texto, para adicionar um pouco de pop.
A cor de fundo é definida com cor de fundo e cor de texto com cor. O preenchimento define o tamanho da caixa - o texto é preenchido com 10 pixels na vertical e 25 pixels na horizontal. Alinhamento de texto garante que o texto seja exibido no centro do botão, em vez de fora de um lado. A decoração de texto, como vimos no último exemplo, remove o sublinhado.
“Display: inline-block” é um pouco mais complicado. Em suma, permite definir a altura e a largura do objeto e garante que ele inicie uma nova linha quando for inserido.
6. Crie uma caixa de texto
Um parágrafo simples não é muito emocionante. Se você quiser destacar sua frase de chamariz ou outro elemento em sua página, convém colocar uma borda em torno dela. Veja como fazer isso com uma string de texto:
p.important { border-style: solid; border-width: 5px; border-color: purple; } Este é bastante simples. Ele cria uma borda roxa sólida, 5 pixels de largura, em torno de qualquer parágrafo de classe importante. Para fazer um parágrafo herdar essas propriedades, apenas declare-o assim:
Seu importante parágrafo aqui.
Isso funcionará independentemente do tamanho do seu parágrafo; uma única linha terá uma borda a largura da página, uma linha alta e um parágrafo mais longo será cercado por uma borda maior.
Existem muitos estilos de borda diferentes que você pode aplicar; em vez de “sólido”, tente “pontilhado” ou “duplo”. E a largura pode ser “fina”, “média” ou “grossa”. Você pode até mesmo definir a espessura de cada borda individualmente, assim:
border-width: 5px 8px 3px 9px; Isso resulta em uma borda superior de 5 pixels, uma borda direita de 8, uma parte inferior de 3 e um tamanho de borda esquerda de 9 pixels.
7. Alinhar no Centro Elementos
Para uma tarefa muito comum, isso é uma coisa surpreendentemente não intuitiva para fazer com CSS. Uma vez feito isso algumas vezes, torna-se muito mais fácil. Existem algumas maneiras diferentes de centrar as coisas.
Para um elemento de bloco (geralmente uma imagem), usaremos o atributo margin:
.center { display: block; margin: auto; } Isso garante que o elemento seja exibido como um bloco e que a margem de cada lado seja definida automaticamente (o que os torna iguais). Se você quiser centralizar todas as imagens em uma determinada página, poderá adicionar "margin: auto" à tag img:
img { margin: auto; } Para saber por que funciona dessa maneira, confira a explicação do modelo de caixa CSS no W3C. Aqui está uma versão gráfica curta:
Mas e se quisermos centralizar o texto? CSS tem um método específico de fazer isso:
.centertext { text-align: center; } Se quisermos usar a classe "centertext" para centralizar o texto em um determinado parágrafo, tudo o que precisamos fazer é adicionar essa classe ao
tag:
Este texto será centrado.
Lembrar esses passos diferentes, no entanto, é outro assunto. Você pode querer marcar esta página.
8. Ajuste de preenchimento
O preenchimento de um elemento especifica quanto espaço deve haver em cada lado. Por exemplo, se você adicionar 25 pixels de preenchimento à parte inferior de uma imagem, o seguinte texto será pressionado 25 pixels para baixo. Muitos elementos podem ter preenchimento, mas usaremos uma imagem para um exemplo aqui.
Digamos que você queira que cada imagem tenha 20 pixels de preenchimento nos lados esquerdo e direito e 40 pixels na parte superior e inferior. Existem várias maneiras de fazer isso. O mais básico:
img { padding-top: 40px; padding-right: 25px; padding-bottom: 40px; padding-left: 25px; } Há uma pequena mão que podemos usar para apresentar todas essas informações:
img { padding: 40px 25px 40px 25px; } Isso define os preenchimentos superior, direito, inferior e esquerdo para o número correto. Mas nós podemos torná-lo ainda mais curto:
img { padding: 40px 25px } Quando você usa apenas dois valores, o primeiro valor é definido para a parte superior e inferior, enquanto o segundo será para a esquerda e para a direita.
9. Realçar linhas de tabela
CSS pode fazer muito para fazer suas tabelas parecerem muito legais. Adicionar cores, ajustar bordas e tornar sua tabela responsiva a telas móveis é fácil. Vamos ver apenas um efeito legal aqui: destacando as linhas da tabela quando você passa o mouse sobre elas.
Aqui está o código que você precisa para isso:
tr:hover { background-color: #ddd; } Agora, sempre que você passar o mouse sobre uma célula da tabela, essa linha mudará de cor. Para ver algumas das outras coisas legais que você pode fazer, confira a página do W3C em tabelas CSS.
10. Mudando imagens entre transparente e opaco
CSS pode ajudar você a fazer coisas legais com imagens também. Por exemplo, ele pode exibir imagens com menos que a opacidade total (elas aparecem ligeiramente “com falta”) e colocá-las em opacidade total quando você passa o mouse sobre elas. Veja como faremos isso:
img { opacity: 0.5; filter: alpha(opacity=50); } O atributo "filter" faz a mesma coisa que "opacidade", mas o Internet Explorer 8 e versões anteriores não reconhecem a medição de opacidade, por isso é uma boa ideia incluí-lo.
Agora que as imagens são um pouco transparentes, vamos colocá-las totalmente opacas em um mouseover:
img:hover { opacity: 1.0; filter: alpha(opacity=100); } Torne-se um mestre de CSS
Com esses exemplos de código CSS, você deve ter uma ideia muito melhor de como o CSS funciona. Uma vez que você passou por todos eles, você observará uma série de padrões que você pode aplicar para mais código CSS Aprender HTML e CSS com estes tutoriais passo a passo Aprender HTML e CSS com estes tutoriais passo a passo Curioso sobre HTML, CSS e JavaScript? Se você acha que tem o dom de aprender como criar sites do zero - aqui estão alguns ótimos tutoriais passo a passo que vale a pena tentar. Consulte Mais informação . E é quando você sabe que realmente começou a se tornar um mestre de CSS.
E se tudo isso soa muito complicado, lembre-se que você acabou de pegar alguns modelos de CSS 11 Sites de modelo CSS: Não comece do zero! 11 sites de modelos CSS: não comece do zero! Existem milhares de modelos gratuitos de CSS disponíveis on-line, todos adotando tendências e tecnologias de design moderno. Você pode usá-los em sua forma original ou personalizá-los para torná-los seus. Leia mais e modifique-os.
O que você faz com CSS? Quais exemplos você gostaria de ver no futuro? Compartilhe seus pensamentos nos comentários abaixo!