Prof. Esp. Douglas Mariano dos Santos

Prof. Esp. Douglas Mariano dos Santos
Introdução ao CSS Prof. Esp. Douglas Mariano dos Santos

O que é CSS? CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata. É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo ou classe.

Para que é usado o CSS e porque usa-lo.
CSS é uma linguagem de estilos (Ou cascata) que define o layout de documentos HTML, ela é quem define o modo como cada elemento se comportará e quais características terá. O CSS controla fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais em relação a todos os elementos. Somente o HTML pode ser utilizado para organizar e formatar um layout de website ou blog, porém, o CSS proporciona mais opções e é mais preciso e sofisticado que o HTML por tratar de classes, ou seja, pode ocorrer que você tenha mais de 1 elemento que precise das mesmas fontes e cores, no HTML você terá que criar para elemento uma configuração, já no CSS basta criar uma classe e chamar para os dois elementos, isto economiza um grande volume de tráfego. O CSS tem suporte para todos os navegadores, o que é mais um motivo para sua utilização, hoje em dia o CSS é tido como um padrão para grandes projetos.

Quais são os benefícios do uso de CSS.
CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem: Controle do layout de vários documentos a partir de uma simples folha de estilos; Maior precisão no controle do layout; Aplicação de diferentes layouts para servir diferentes mídias (tela, impressora, etc.); Emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento. Portabilidade pois funciona em qualquer navegador. Facilidade por ser estruturado em classes. Rapidez por aplicar uma classe para vários elementos, diminuindo conteúdo desnecessário.

CSS é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo. Com a variação de atualizações dos navegadores (browsers) como Internet Explorer que ficou sem nova versão de 2001 a 2006, o suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais modernos como Opera, Internet Explorer 7 e Mozilla Firefox tem suporte maior, inclusive até a CSS 3, ainda em desenvolvimento. A interpretação dos browsers pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele assim como o Opera já é.

Tipos de mídia All - Todas as mídias (padrão)
Screen - Telas de computadores Print - Páginas impressas handheld - Dispositivos de mão, como celulares Projection - Projetores tv - Televisores braille - Dispositivos táteis de braille embossed - Impressão em relevo de braille speech - Dispositivos sintetizadores de voz tty - Teletipos e dispositivos portáteis de capacidade limitada

Aplicação … <head> <link type="stylesheet" href="assets/css/style.css"> <link type="stylesheet" href="assets/css/print.css" media="print"> </head>

… <head> <style> b, strong { color: red; } </style> <style media="print"> color: gray; text-decoration: underline; </head> …

… <head> <style> b, strong { color: red; print { color: gray; text-decoration: underline; </style> </head>

… <body> <p> Diga <strong style="color: red">não</strong> à violência! </p> </body>

Seletores Há diversas maneiras de especificar a quais elementos se está definindo a apresentação; são chamados de “seletores”, e são separados por vírgula. No exemplo a seguir, é aplicada a cor vermelha às tags de negrito (b ou strong), e a cor azul à tag b com a classe .blue.

… <head> <style> b, strong { color: red; } b
… <head> <style> b, strong { color: red; } b.blue { color: blue; </style> </head> <body> <p> Diga <strong>não</strong> à <b class="blue">opressão</b>. </p> </body>

Os seletores podem sem combinados para criar regras mais complexas
Os seletores podem sem combinados para criar regras mais complexas. Segue os tipos mais comuns de seletores: Sintaxe Descrição * Qualquer elemento tag Especifica uma tag .classe Especifica uma classe, que pode ser usada em vários elementos #id Especifica uma ID, que pode ser usada apenas em um elemento [atributo] Especifica a existência de um atributo [atributo="valor"] Especifica que o valor do atributo é igual a um determinado valor [atributo^="valor"] Especifica que o valor do atributo começa com um determinado valor [atributo$="valor"] Especifica que o valor do atributo termina com um determinado valor [atributo*="valor"] Especifica que o valor do atributo possui um determinado valor elemento1 elemento2 Especifica que um elemento está dentro de outro elemento elemento1 > elemento2 Especifica que um elemento está diretamente dentro de outro elemento :empty Pseudo-classe que especifica elementos vazios :first-child Pseudo-classe que especifica o primeiro elemento :last-child Pseudo-classe que especifica o último elemento :nth-child(an+b) Pseudo-classe que especifica o enésimo elemento, determinado por uma expressão. a especifica de quantos em quantos elementos, e b especifica o primeiro elemento da contagem. Por exemplo, para elementos pares, usa-se: 2n+1 ou even :not(seletor) Pseudo-classe que especifica o inverso do seletor ::first-letter Pseudo-elemento que representa a primeira letra do elemento ::first-line Pseudo-elemento que representa a primeira linha do elemento ::before Pseudo-elemento que representa o que vem antes do elemento ::after Pseudo-elemento que representa o que vem depois do elemento

Cores As cores podem ser definidas de quatro formas diferentes: palavra-chave, valor hexadecimal, RGB(A), e HSL(A). Palavra-chave: yellow Hexadecimal: #FFFF00 RGB (Vermelho, Verde e Azul): rgb(255, 255, 0) ou rgb(100%, 100%, 0) As três cores primárias vão de 0 a 255 HSL (Matiz, Saturação e Luminosidade): hsl(60, 100%, 50%) Matiz é um grau de cor, que vai de 0 a 360 – 0 (ou 360) é vermelho, 120 é verde, e 240 é azul Saturação é uma porcentagem, onde 0 é um tom de cinza, e 100% é a cor completa Luminosidade é uma porcentagem, onde 0 é preto, e 100% é branco É possível especificar a opacidade (Alpha) para cores em RGB e HSL, como o quarto parâmetro, que vai de 0.0 (totalmente transparente) a 1.0 (totalmente opaco): RGBA: rgba(255, 255, 0, 0.5) HSLA: hsla(60, 100%, 50%, 0.5)

Gradientes O primeiro parâmetro especifica a direção do gradiente, e os demais (sem limite) as cores e ponto de início. Exemplo: .rgb { width: 100%; height: 120px; background-image: linear-gradient(to right, red 0%, green 50%, blue 100%); } Para gradientes diagonais, usa-se um valor em degraus no primeiro parâmetro. Exemplo: 130deg. Também é possível criar gradientes radiais. Exemplo: background-image: radial-gradient(ellipse at center, red 0%, green 50%, blue 100%);

Fontes Há dois tipos de fontes: as com serifa (serif), e as sem serifa (sans-serif). Quando o navegador não encontra uma fonte especificada, ele tenta usar uma semelhante. É possível especificar também o estilo da fonte (normal, itálica, e oblíqua), e a espessura (normal e negrito). i, em { font-family: "Arial", sans-serif; /* Na ausência da fonte, usar qualquer fonte sem serifa */ font-size: 16px; /* 16 pixels, 12 pontos, 1.0 em, ou 100% */ font-style: italic; /* Valores possíveis: normal, italic, oblique, e inherit */ font-weight: normal; /* Espessura da fonte. Permite valor numérico, de 100 a 900 */ }

Para o tamanho da fonte, é possível usar diversas unidades de medidas, sendo as mais comuns px (pixels), pt (pontos), em e % (relativos ao tamanho da fonte do elemento pai). Para a propriedade font-style, é possível dar o valor inherit, que significa que herdará o estilo do elemento pai. No caso da propriedade font-weight, é possível dar um valor relativo ao elemento pai, lighter (mais claro) e bolder (mais negrito). É possível usar fontes que não vêm instaladas no computador. { font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: local('Open Sans'), /* Fonte instalada */ local('OpenSans'), url(../fonts/OpenSans.woff2) format('woff2'), /* Formato preferível */ url(../fonts/OpenSans.woff) format('woff'); /* Formato de compatibilidade */ }

Layout Há diversos modos de layout suportados (e outros em desenvolvimento). No HTML, por padrão, o modo de layout é decidido por elemento (imagens são inline, parágrafos são block, etc). Para uma lista completa, consulte: Position Há quatro formas de posicionamento atualmente suportadas: static fluxo normal. As propriedades top, right, bottom, left e z-index não têm efeito relative fluxo relativo. As posições são calculadas a partir dos elementos adjacentes absolute o posicionamento é calculado a partir do topo da página fixed o posicionamento é calculado a partir do topo da página, mas é fixo independente da rolagem

#chat { position: fixed; right: 0; bottom: 0; z-index: 9; /
#chat { position: fixed; right: 0; bottom: 0; z-index: 9; /* Camada no qual o elemento se encontra. Permite sobrepor outros elementos */ }

Alinhamento Para alinhar elementos inline, como imagens e texto, é possível usar a propriedade text-align (alinhamento horizontal) e vertical-align (alinhamento vertical). Exemplo: .h-center-inline { text-align: center; } .v-center-inline { vertical-align: middle;

Entretanto, para elementos block é necessário alguns hacks: /
Entretanto, para elementos block é necessário alguns hacks: /* Alinha a esquerda */ .align-left { float: left; } /* Alinha a direita */ .align-right { float: right; /* Limpa o alinhamento */ .clearfix::before, .clearfix::after { content: " "; display: table; .clearfix::after { clear: both;

O elemento pai precisa aplicar a propriedade clear: both, ou o layout ficará comprometido. Exemplo: … <div class="clearfix"> <div class="align-left"> </div>

Para centralizar horizontalmente
.h-center { margin: 0 auto; } Para centralizar verticalmente, a coisa complica: /* Centraliza verticalmente */ .v-center { display: table; .v-center .v-center-item { display: table-cell; vertical-align: middle;

… <div class="v-center"> <div class="v-center-item"> </div>

Prof. Esp. Douglas Mariano dos Santos

Apresentações semelhantes

Apresentação em tema: "Prof. Esp. Douglas Mariano dos Santos"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Prof. Esp. Douglas Mariano dos Santos

Apresentações semelhantes

Apresentação em tema: "Prof. Esp. Douglas Mariano dos Santos"— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback