0% acharam este documento útil (0 voto)

9 visualizações30 páginas

CSS

O documento é um guia abrangente sobre CSS, cobrindo desde a importação de fontes até a estilização de elementos HTML. Ele aborda conceitos como seletores, propriedades de estilo, posicionamento, efeitos de transição, e técnicas de layout, além de exemplos práticos. Também discute a especificidade e a importância das regras CSS, bem como efeitos visuais como sombras e gradientes.

Enviado por

otiniel200pro

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

9 visualizações30 páginas

CSS

Enviado por

otiniel200pro

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 30

css

@import
url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Hand:wght
@400..700&display=swap');

/*Css cascading style sheet

responsavel pela estilização da página web*/

/*Css incorporado/interno*/

/1º Antes da tag head/

/*<style>

body{

background-color: yellow;

</style>
<head>*/

/2º Na propia tag/

<1 style>="color:blue font-size:88px"*/

/*hieraquia*/

/* 1º na propia tag> 2 antes da tag head > css externo*/

/*link que serve para chamar o css no html

<link rel="stylesheet" href="./css/style.css"> */

/*pode se fazer varios csss externos para diferentes temáticas para a pagina
html*/

/*Seletor - epecifica qual elemento html que se deseja estilizar

Ex: body{} \ p{} todos elementos com as tag p e o body vão ter om só
coportamento*/

/*Classes são marcações padronizadas colocadas nas tag html, para serem
estilizadas no css

Ex: no html- classe="center" no css- .center{Text-align="center"} todas as tags que

tiverem a classe "center" terá otexto alinhado ao centro*/

/*id é uma marcação unica para uma só tag no html- id="teste" no css-
#teste{color="blue"} so a tag que tiver o id teste ira ter o fundo azul . obs: Não se
pode utilizar numeros no inicio do id ou nas classes.*/
/*O suposto curinga é utilizado para colocar propiedades para todas as tags do
formulario html

Ex: {color="green"} todas as tags irão ter o fundo verde/

/*O agrupamento de seletores utiliza-se para declarar propiedades para os

mesmos seletores

Ex: h1, p{color="center"} a cor de fundo azul vai valer para as tags h1 e p.*/

/*Propiedade color - serve colorir um texto

"color picker" Para escolher os padrões de cor

Ex: .tmt {

color:blue;

propiedade background - serve para colorir o fundo da pagina com cores sólidas.

Ex: as{background:blue}

Enfeitar imagem de fundo

Ex: html - "antes da tag link" <div class="exe1"></div> Css - .exe1{

heigth="100px"

back-color="gray"}

Para colocar a imagem de fundo. baixar a imagem na pasta onde está o projeto.

bacground-image:url(../)
background-size:cover/contain;- utilizado para que a imagem se adapte ao
tamanho da pagina.

*background-repeat:no-repeat; repeat-x; ;/serve para controlar a repetição da

imagem.

background-position:top,center,right,left,; serve para selecionar a posição da

imagem.*/

/*short-end/atalho.

Ex:bacground:gray url(../) no-repeat center; fica de fora o background-size*/

/borda deependem do tamanho tipo de borda e a cor

Ex: border: 15px inset black;

tipos de
bordas:solid/dotted/dashed/double/groove/ridge/inset/outset/none/hidden

localização da borda:

EX: border-top:

border- left:

border-rigth:

border-bottom:

borda arredondada:

border-radius:30px*/

/*marging é o espaçamento.

Ex: marging-top:30px;

marging-left::

marging-right:
marging-bottom:

declaração numa linha só.

marging: 30pxtop 70pxright 150left 20bottom;

Espaçamento entre paragrafos.

Ex .p{marging-bottom: 60px;

marging-left: 40px;

marging-right:30px;}

/*padding é o mesmo que preenchimento

padding-top:

padding-right

padding-left

pading-bottom:

declaração numa linha só.

padding: 30pxtop 70pxright 150left 20bottom;

preenchimento de todos os lados:

padding: 50px;

criar um botao

Ex:

.botao {

background-color: aqua;
color: azure;

padding: 10px;

border-radius: 5px;

text-decorration: none;

para colocar outra cor no botao quando o mouse estiver em cima

.botao:hover {

bacground: blue

/*width:300px;-largura;

height:40px;-altura;

max-width:800px;largura maxima; adaptação a qualquer tela.*/

/*propiedade de texto

text-align:center/left/right/justify;alinhamento de texto.

direction: rtl/lrt;direção de texto

unicode-bidi:bide-override; inversão das palavras

text-decorrection: none;tirar o sublinhado dos links.

text-decorrection:over-line/line-throug/underline

text-transform:uppercaseA/lowercasea/Acapitalize;

text-ident:50px; Identação

letter-spacing:5px;Espaçamento entre em letras.

line-heigth:5px; Espaçamento entre linhas.

word-spacing:3px;Espaçamento entre palavras.

/*font- tipos de fontes para palavras

Ex:font-family:Calibri;

font-size:34px; Tamanho da fonte.

obs:Para achar outras fonte/-google fonts

1-escolher fonte/colocar @import/ colocar no inicio da tag/copiar a font familiy e

colocar no seletor da tag

font-style:italic/oblique.Inclinação das letras.

font-weight:bold/100/900;lagura da fonte*/

/*Estilização de links

Ex: a.btn1{bacground:darkgreen;

color:white;

padding: 10px;

border: 4px solid greenyellow;

border-radius:5px;}- este seletor significa que só irá ser acionado em links

Quando o mouse passar por cima

a.btn1:hover {

bacground: red;

color: white;

padding: 12px;

border: 4px solid greenyellow;

border-radius: 5px;

Ex:

a.btn2 {

text-decoration: none;

padding: 10px;

border:5px doubble blue;

color: blue;}

a.btn2:hover{

text-decoration: underline;

padding: 8px;

background:blue;

color:white;}

a.btn3{color:black;

text-decoration:none;}

a.btn3:hover {

color: red;

border-bottom:3px solid black;}

a.btn4{

text-decoration:none;

color:blue;

font-size:18px;}

a.btn4:hover{
font-size: 22px

font-weight:bold;;

a.btn5{cursor:;Comportamento do cursor

}*/

/*Display- utilizado para controlar o layout

As tags span/a/img têm a propiedade display inline(uma ao lado da outra em

linha).

display:block; ocupa a tela inteira e ocupa o bloco completo pois funciona pois é
o elemento de um layout.

display:inline; fica tudo na mesma linha, é sequenciado e ajustado ao tamanho

com espaçamento de palavras.

display:none; oculta o conteudo mais deixa ativo a tag.

Ex: html(<ul class="borda">

<li>Primeiro</li>

<li>Segundo</li>

<li>Terceiro</li>

</ul>)

css(.borda{border:1px solid red;}

.azul{background:blue;}
.azul {

background: red;

.azul {

background: green;

li{display:inline;})

obs: para colocar os elementos com display inline sem espaçamento, tenho
que no html colocar as tags uma a frente de outra, nesse caso juntas.

display:inline-block;

Ex: html(<div class="Azul"></div><div class="red"></div><div

class="Green"></div>)

css(div{width:33%;

heigth:150px;

display:inline-block;})

para ocultar uma div no html(style:visibility;)

obs: As tag do tipo in line normalmente nao obedecem poi temos que aprender a
propiedade display.

/*Max width- largura maxima

Ex:

.ex2{
max-width: 800px; a Largura do site se adapta a qualquer tela- para ter um site
responsivo.}**/

/*position-posição do elemento na pagina

Ex: html(<div class="container"></div><div class="div1">Primeiro</div><div

class="div2">Segundo</div><div class="div3">Terceiro</div>)

css(

Relative

Position relativo utilizado para fazer camadas.

Pode se especificar também a posição: left,top,rigth e etc.

.div1 {

position: relative;

left: 20px;

width: 30px;

height: 100px;

background: white;

display:inline-block;

})

z-index- seve para colocar a camada por de trás de outra camada, varia de -1 a
999.

.div {

position: relative;

left: 20px;
width: 30px;

height: 100px;

background: white;

z-index:-1/999;

Fixed - em relação a tela ele fica preso num posicionamento.

.div {

position: fixed;

left: 20px;

width: 30px;

height: 100px;

background: white;

bottom:10px;

rigth:10px;

Absolute - posiçao de um conteudo na tag pai/ o body

.container {

position: relative; relativo ao body

top: 20px;

width: 30px;

height: 100px;

background: white;

bottom: 10px;

rigth: 10px;
.div3{

position: absolute;

width: 30px;

height: 100px;

background: red;

top: 250px;

right: 50px;

display: inline-block;

stick - ela é pegajosa e se desloca só dentro da tag pai/ a tag pai deve estar relativo

.div {

position: sticky;

top:0;

width: 30px;

height: 100px;

background: white;

bottom: 10px;

rigth: 10px;

pode se colocar um background de imagem para o site ficar mais bonito.

width: 100% para centralizar;

/*Ouverflow´
.exemplo{background: whith;

color: blue;

heigth: 150px;

overflow: auto;}

overflow: visible; mostra o conteudo mesmo que ultrapasse o elemento.

overflow: hidden; mostra só o conteudo que enquadra no elemento.

overflow: scroll; coloca o conteudo num layout com barra de rolagem

overflow: auto; acrescenta a barra de rolagem quando o conteudo nao se

enquadra no elemento.

para retirar a barra de rolagem do corpo.

cima - baixo

body{

overflow:hidden;}

direira - esquerda

body {

overflow-x: hidden;

para colocar classes mais rapido no html- div.ola - ENTER*/

/*Float - Faz um elemento flutuar

Ex: <br /><br /><div class="container"><img width=20px" src=" ./img/fundo 2.jpg"

alt=" wda" />

<p>lorem</p>

</div>

css

.container {

border: 1px solid black;

.container img{

float: left

marging-rigth:20px;

margin-bottom:10px;

clear: both;- para limpar um ponto de flutuação.

shift+alt+seta para baixo copia elementos

Para fazer menu.

html
<ul>

<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a class="login"

href="#"></a>login<a href=""></a>

</ul>

css

ul {

background: black;

li {

display: inline-block;

li a {

color: white;

text-decoration: 20px;

li a:hover {

background: white;

color: black

.login{float:right}

.login a:hover{background: orange;

color:with;}

/*Opacity - definir a transparencia do objeto.

piscum.photo. - para imagens aleatórias

html

<img class="img1" src"">

css

.img1 {

Opacity: 0.2;

equivale a 20% 0.0 ate 0.9

.img1:hover {

Opacity: 0.2;

.botao: {pading:23px;

.botao:hover{

opacity:0.9;}

.transparente{background: blue;

color:white;

padding;40px;
opacity: 0.5;

/*Efeito dropdwon

html

<body><h1 class="borda">Meu primeiro CSS </h1><ul><li><a

href="#">Link</a></li><li><a href="#">Link</a></li><li><a
href="#">Link</a></li><li class="dropdown"><a class="dropbtn"
href="#">Link</a><div class="dropdown-content"><a href="#">Link</a><a
href="#">Link</a><a href="#">Link</a><a href="#">Link</a></div></li></ul>

css

ul {

background: black;

list-style-type: none;

padding: 0;

margin: 0;

overflow: hidden;

li {

float: left;

li a,

.dropbtn {
display: inline-block;

color: white;

padding: 14px 16px;

text-decoration: none;

text-align: center;

li a:hover,

.dropdown:hover .dropbtn {

background: red;

li.dropdown {

display: inline-block;

.dropdown-content {

display: none;

position: absolute;

background: white;

width: 150px;

.dropdown-content a {

color: black;

display: block;

text-align: left;

border: 1px solid rgb(207, 207, 207);

}

.dropdown-content a:hover {

color: white;

.dropdown:hover .dropdown-content {

display: block;

/*Especifidades css

ordem de prioridade:

1-In line

2-Classes

3-Incorporado

//////

identificadores> classe > seletor incorporado

tag.class e tag.id> class

seletores iguais com informações diferents o ultimo, é o mais especifico.

ordem final

1-id
2-tag.class

3-.class

4-tag

/*Regra important - diz que uma alteração é mais importante independente do

grau de especificidade.

Utilizado para fazer testes.

! important

Ex: .grs{

color:blue;

!important;}

Coloca-se só uma vez.

/*Efeito de gradiente - transição de cores no mesmo elemento.

.gra{background-img: linear-gradiente(Blue,

red)

posições

.gra {

background-img:to rigth/top/Angulos(180deg,90deg) linear-gradiente(Blue,

red) }
Pode se utilizar varias cores ao mesmo tempo

Para colocar em formato de circulo

.gra {

background-img: radial-gradiente(Blue50%,

red/30%)*/

/*Propiedade shadow - sombra em textos e elementos

Ex:

.tge{

color:blue;

text-shadow: 2px- horizontal, 2px- vertical, 5px - desfoque, red}

Tem que se testar com os numeros para ver o formato ideal

Multiplas sombras

.multi{

color: blue;

text-shadow: 0 0 10px red, adicional 2px 3px 4px orange

Box Shadow

.caixa{

width:40p%
~heigth: 300px;

background: gray;

box-shadow: 5px 5px 15px red;}

Para fazer card com texto

width:40p%~heigth: 300px;

background: gray;

box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2) 0 6px 20 px rgba(0,0,0,0,0.19);*/

/*Efeito de texto

.caixa {

width: 40p% ~heigth: 300px;

heigth: auto; o texto acompanhará o limite do elemento.

background: gray;

box-shadow: 5px 5px 15px red;

.reduzido{white-space:nowarp; o texto fica numa só linha

ovre-flow: hidden; contem o texto no elemento

text-overflow: elipsis; coloca 3 pontinhos no limite do elemento.

padding-bottom; 30px;

na tag

marging-bottom:0;

padding-bottom: 0px;

}
.caixa:hover .reduzido{

white-space:normal; as propiedades do reduzido sera imverso ou normal.

/*Media queries- apresentação do site em diferentes dispositivos -

responsividade/ layout responsivo quando o site se adapta a tela.

/* Smartphones (600px para baixo)

@media only screen and (max-width: 600px) {

...

/* Dispositivos um pouco maiores, mas ainda pequenos (Pequenos Tablets e

Smartphones + largos, 600px para cima)

@media only screen and (min-width: 600px) {

...

/*Dispostivos Médios (Tablets deitados, 768px para cima)

@media only screen and (min-width: 768px) {

...

/* Dispostivos Largos (laptops/desktops, 992px para cima)

@media only screen and (min-width: 992px) {

...

/* Super Largos (Telas maiores laptops, desktops e até TVs, 1200px para cima)

@media only screen and (min-width: 1200px) {

...s

media screen and (max-width:900px) and (min-width: 300px){

.exemplo{

background:red;

heigth:400px;}

/*Flexbox - responsividade do site

html

<h1>Flexbox</h1><div class="flex-pai"></div style="flex:15px">tamanho de cada

div pode se fazer nas classes.

css

.flex-pai {

background: blue;

display: flex/row/row-reverse/flex-reverse;

O item fica um do lado do outro row- linha flex-wrap: nowrap;

heigth: 600px; Para dar altura.

não leva em consideração a div pai. flex-flow: row wrap;

controle de elementos

justify-content: flex-start/center/flex-end; Para fazer alinhamento na vertical

space-between- espaçamento entre elementos/ space-around- espaçamento em
volta dos items.

align-items:center/ flex end; alinhar items na vertical.

align-content:flex-end/flex-start posicionmaento de todo bloco conteudo.

@media screen and (max-width:600px) {

.flex-pai {

flex-direction: column;

quando a largura da tela for menor que 600px o elemnto será uma coluna

.flex-pai div {

flex-grow:1; crescimeto de todas as divs dentro da div pai de forma uniforme.

background: white;

border: 1px solid black;

margin: 5px;

padding: 30px;

text-align: center;

Fazer screen da imagem no computador com fn + prt sc

*{Color picker from screen

flaticon site para encontrar icones / editar o icone com a cor do site. baixar em
formato png.

}*/

/*super css - molde utilizado para utilizar o css

para criar ficheiros mome.scss

Variaveis

Ex: s= blue

.f{

color: s;}

a cor continuara a ser azul.

Agrupamento de elementos

.header{

buttom{}

hover

button{

background:s;
}

&:hover{

background: yellow;

hover está relacionado com o elemento buttom}

importação - criando ficheiros css

criar o header.scss

pode ser para o body e o footer

depois de terminar fazer a importação com o codigo:@import'./header' quando na

mesma pasta.

mix include funções

Ex:

@mixin flexcenter(){

display:flex;

justifiy-content: center;

align-items: center;

para incluir uma função num elemento faz-se:

.header{

@includeflexcenter();}

@extend header; serve para copiar as propiedades.

.body{background-color: silver();}

.prt{

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

font-size: 20px;

.tmt{

font-size: 18px;

#ty{

font-family: "Edu AU VIC WA NT Hand", cursive;

text-align: center;

.reset{ height: 100px;

background-image:url(../css/226635-mathematics-equations-science-3D.jpg)

text-align: center;

font-size: 80px;

color: white;

.botao{

background-color: aqua;
color: azure;

padding: 10px;

border-radius: 5px;

text-decoration: none;

.botao:hover{

background: blue;

CSS

Enviado por

CSS

Enviado por

css

/*Css cascading style sheet

responsavel pela estilização da página web*/

/*1º Antes da tag head*/

/*2º Na propia tag*/

<1 style>="color:blue font-size:88px"*/

/* 1º na propia tag> 2 antes da tag head > css externo*/

/*link que serve para chamar o css no html

<link rel="stylesheet" href="./css/style.css"> */

/*Seletor - epecifica qual elemento html que se deseja estilizar

Ex: no html- classe="center" no css- .center{Text-align="center"} todas as tags que

Ex: *{color="green"} todas as tags irão ter o fundo verde*/

/*O agrupamento de seletores utiliza-se para declarar propiedades para os

/*Propiedade color - serve colorir um texto

"color picker" Para escolher os padrões de cor

Enfeitar imagem de fundo

Ex: html - "antes da tag link" <div class="exe1"></div> Css - .exe1{

*background-repeat:no-repeat; repeat-x; ;/serve para controlar a repetição da

background-position:top,center,right,left,; serve para selecionar a posição da

Ex:bacground:gray url(../) no-repeat center; fica de fora o background-size*/

/*borda* deependem do tamanho tipo de borda e a cor

Ex: border: 15px inset black;

declaração numa linha só.

marging: 30pxtop 70pxright 150left 20bottom;

Espaçamento entre paragrafos.

/*padding é o mesmo que preenchimento

declaração numa linha só.

padding: 30pxtop 70pxright 150left 20bottom;

preenchimento de todos os lados:

para colocar outra cor no botao quando o mouse estiver em cima

max-width:800px;largura maxima; adaptação a qualquer tela.*/

direction: rtl/lrt;direção de texto

unicode-bidi:bide-override; inversão das palavras

text-decorrection: none;tirar o sublinhado dos links.

letter-spacing:5px;Espaçamento entre em letras.

word-spacing:3px;Espaçamento entre palavras.

/*font- tipos de fontes para palavras

font-size:34px; Tamanho da fonte.

obs:Para achar outras fonte/-google fonts

1-escolher fonte/colocar @import/ colocar no inicio da tag/copiar a font familiy e

font-style:italic/oblique.Inclinação das letras.

border: 4px solid greenyellow;

border-radius:5px;}- este seletor significa que só irá ser acionado em links

Quando o mouse passar por cima

border: 4px solid greenyellow;

border:5px doubble blue;

border-bottom:3px solid black;}

/*Display- utilizado para controlar o layout

As tags span/a/img têm a propiedade display inline(uma ao lado da outra em

display:inline; fica tudo na mesma linha, é sequenciado e ajustado ao tamanho

display:none; oculta o conteudo mais deixa ativo a tag.

Ex: html(<ul class="borda">

css(.borda{border:1px solid red;}

Ex: html(<div class="Azul"></div><div class="red"></div><div

para ocultar uma div no html(style:visibility;)

/*Max width- largura maxima

/*position-posição do elemento na pagina

Ex: html(<div class="container"></div><div class="div1">Primeiro</div><div

Position relativo utilizado para fazer camadas.

Pode se especificar também a posição: left,top,rigth e etc.

Fixed - em relação a tela ele fica preso num posicionamento.

Absolute - posiçao de um conteudo na tag pai/ o body

position: relative; relativo ao body

pode se colocar um background de imagem para o site ficar mais bonito.

width: 100% para centralizar;

overflow: visible; mostra o conteudo mesmo que ultrapasse o elemento.

overflow: hidden; mostra só o conteudo que enquadra no elemento.

overflow: scroll; coloca o conteudo num layout com barra de rolagem

overflow: auto; acrescenta a barra de rolagem quando o conteudo nao se

para retirar a barra de rolagem do corpo.

para colocar classes mais rapido no html- div.ola - ENTER*/

Ex: <br /><br /><div class="container"><img width=20px" src=" ./img/fundo 2.jpg"

border: 1px solid black;

clear: both;- para limpar um ponto de flutuação.

shift+alt+seta para baixo copia elementos

Para fazer menu.

/1º Antes da tag head/

/2º Na propia tag/

Ex: {color="green"} todas as tags irão ter o fundo verde/

/borda deependem do tamanho tipo de borda e a cor