Flashcards
CSS3
Cards in this deck (68)
- 1O que é CSS?É um recurso utilizado para criar estilos e formatações em páginas HTML
- 2Sintaxe CSSobjeto_formatar { formatação1: valor; formatação2: valor; etc..}
Exemplo:
h1 {
color: black;
} - 3Local no código HTMLDentro da área comportamental (head):
formatação_css - 4Formatação de cor de textocolor: cor;
- 5Formatação de cor de fundobackground-color: cor;
- 6Tamanho da fontefont-size: 1px;
- 7Sombreamento do textotext-shadow: descolamento_lateral deslocamento_vertical espalhamento_sombra cor_sombra;
Ex:
text-shadow: 2px 2px 4px black; - 8Tipo de Fontefont-family: fonte;
Ex:
font-family: Arial; - 9Adornos da fontetext-decoration: tipo;
- 10Texto sublinhadotext-decoration: underline;
- 11Linha acima da palavratext-decoration: overline;
- 12Texto riscadotext-decoration: line-through;
- 13Nenhuma formataçãotext-decoration: none;
- 14Nível de negritofont-weight: possiveis_valores;
possiveis_valores:
normal (sem negrito)
bold (negrito normal)
bolder (negrito normal)
nível de píxel: 100px a 900px - 15Alinhamento do textotext-align: alinhamento;
alinhamento pode ser: center, left, right, justify - 16Indentaçãotext-indent: 50px;
- 17Cores utilizando RGBrgb(1, 2, 3);
1 = qtde de vermelho (0 a 255)
2 = qtde de verde (0 a 255)
3 = qtde de azul (0 a 255) - 18Cores utilizando RGB Alphargba(1, 2, 3, 0.5);
1 = qtde de vermelho (0 a 255)
2 = qtde de verde (0 a 255)
3 = qtde de azul (0 a 255)
0.5 = nível de transparência (0 a 1) - 19Cores utilizando Código Hexadecimal#00FF00
1º campo de dois digitos: Vermelho
2º campo de dois digitos: Verde
3º campo de dois digitos: Azul
Cada campo varia de 00 a FF - 20Imagem de fundobackground-image: url("caminho_da_imagem");
- 21Usar folha de estilo (arquivo css)ao invés de usar a tag use <link rel="stylesheet" type="text/css" href="caminho_css">
- 22Especificar o conjunto de caracteres no arquivo de estilo como UTF-8@charset "UTF-8";
- 23Comentário em CSS/* Comentário */
- 24Formatar através de classeobjeto.classe {
formatacao
} - 25Formatar através de Identificadorobjeto#id {
formatacao
} - 26Cor da bordaborder: tamanho tipo cor;
Ex:
border: 4px solid black; - 27Efeito de sombra na bordabox-shadow: mesma_config_text_shadow
- 28Criar um quadro dentro da bordabox-sizing: border-box;
- 29Definir positição em relação a um objetoposition: posicao;
posicao pode ser relative ou absolute; - 30Localização do top de um objetotop: 0px;
- 31Efeito de transiçãotransition: ação tempo;
Ex:
transition: opacity 1s; - 32Mudar opacidade de um objetoopacity: 0.5;
vai de 0 a 1 - 33Definir um espaçamento inicialpadding: 10px;
- 34Especificar ação quando passar o mouse por cima do objetoobjeto:hover { }
- 35Especificar ação quando um objeto ganhar focoobjeto:focus { }
- 36Transformar um menu em bloco para permitir que ele flutue na páginanav#menu {
display: block;
} - 37Definir espaçamento entre itensmargin: 10px;
- 38Transformar itens de uma lista em blocos em uma linhanav#menu li {
display: inline-block;
} - 39Transformar textos em maiúsculas;text-transform: uppercase;
- 40Definir margem à esquerdaleft: 300px;
- 41Remover marcadores da listanav#menu ul {
list-style: none;
} - 42Definir margens externas específicasmargin: topo dir baixo esq;
margin-top: margem topo;
margin-right: margem direita;
margin-bottom: margem baixo;
margin-left: margem esquerda; - 43Definir margens internas específicaspadding: topo dir baixo esq;
padding-top: margem topo;
padding-right: margem direita;
padding-bottom: margem baixo;
padding-left: margem esquerda; - 44Definir margem automaticamentemargin: auto;
margin: auto 10px auto 10px; - 45Impedir que o navegador repita a imagem de plano de fundobackground: url("imagem") no-repeat;
- 46Especificar uma fonte externa (arquivo local)@font-face {
font-family: 'NomeDaFonte';
src: url("localização");
} - 47Especificar uma fonte externa (link externo)Site: google.com/fonts
@import url(https://fonts.googleapis.com/css?family=Titillium+Web); - 48Integrar fonte no cssfont-family: 'Nome da Fonte', sans-serif
- 49Fazer um bloco flutuarsection {
float: left (flutuar a esquerda)| right (flutuar a direita);
} - 50Limpar os blocos flutuantesclear: both;
- 51Definir espaçamento entre bordas de tabelasborder-spacing
- 52Alinhamento Verticalvertical-align: top | middle ou center | bottom;
- 53Impedir que a página roleobjeto::-webkit-scrollbar {
display: none;
} - 54Ocultar a visualização do conteúdooverflow: hidden;
- 55Aumentar tamanho de uma linhaline-height
- 56Alterar tamanho do backgroundbackground-size: width height;
- 57Alterar posição do backgroundbackground-position: lateral vertical;
- 58Alterar tamanho de um objeto por webkit-webkit-transformer: scale(1.5);
- 59Implementar efeito de transição por webkit-webkit-transition: all tempo tipo_de_transição;
- 60Tipos de transiçãocubic-bezier(ti,pi,tf,pf);
ease-in;
ease-out;
linear;
ease-in-out; - 61Transição Personalizadahttp://cubic-bezier.com/
- 62Formatar mais de um objetoobjeto1, objeto2 {
formatação
} - 63Deformar objetotransform: matrix(EscalaX, DeformacaoX, DeformacaoY, EscalaY, PosicaoX, PosicaoY);
- 64Criar animaçãoanimation-name: animacao;
animation-duration: duracao;
animation-delay: atraso;
@keyframes animacao {
from {formatacao1}
to {formatacao2}
} - 65Transicao de animacaopode ser definido com:
@keyframes animacao {
from {}
to {}
ou
0% {}
50%{}
100%{}
} - 66Rotação 2d de um objeto/*RotaçãoSentidoHorário*/
transform: rotate(180deg); - 67Rotação 3d de um objeto/*RotaçãoHorizontal*/
transform: rotateX(270deg);
/*RotaçãoVertical*/
transform: rotateY(90deg);
/*RotaçãoSentidoHorário*/
tranform: rotateZ(180deg); - 68—
Information
- Description
- Curso CSS3
- Created by
- Vanderson Sander
- Views
- 1
- History
-
- Created by Vanderson Sander · Mar 1, 2016
- Copied by Vanderson Sander · Mar 1, 2016
- Rating