CSS - Mind42

Birdview

CSSRegras de folhas de estilosUm usuário pode vincular uma css ao seu siteNavegadorUsuárioautor1 na tag2 no head 3 importadaImportant autorImportant usuárioCaso tenha a mesma importancia a ultima é consideradaa - InLineb - IDsqtdade de idsc- Classes, pseudoClasses, atributosd - Elementos e pseudoelementosp{} 0,0,0,1 1div p{} 0,0,0,2 2p.intro{} 0,0,1,1 11#medu{} 0,1,0,0 100

style="" 1,0,0,0 1000
Herançabody{ color:black}Tudo em body herdara este estiloTipos de mídiastyle="text/css"Diz respeito a identificação do código como cssmediascreenttytvprojectionhandheldcelularprintbrailleauralaudioallCodificaçãoRegrasBaseh1 {color:blue; font-size:12px}Seletor (h1)Proprioedade (color)Valor (blue)Comentarios/* Comentário*/No html<style>
p, h1 {
font-stlyle: "Comic Sans MS"
}
</style>Forma de escreverDireto na tag html (in line)<p style="color:blue">IncorporadasDocumento à parte<link rel="stylesheet" type="text/css href="stilo.css" media="all"><style>
p, h1 {
font-stlyle: "Comic Sans MS"
}

</style>No htmlNo html + importandoSeletorespseudo-seletoressimplesuniversalaplica-se a todosSimbolo *elementosPelo nomep, h1 ...Pelo nome + valorp[title ~=Empresa]Valores separados por espaçosEmpresa XTIp[title |=Empresa]Com ifemp[title =Empresa]Simplesatributosclass.nomeDaClasseid#nomeDoIdTipos de seletoresDescendentes<div>
<p><em></em></p>
</div>div em { color}Selector filhodiv > em{ text-decoration}Se em estiver diretamente dentro de divIrmão adjacenteA proxima tag depois do irmão<p></p>
<p>Este texto pega o css</p>Cssp + p { color: blue }Pseudo seletores/elementosdiv h1:first-child { }Aplica se o 1º elemento da div for um h1a:link {}link não visitadoa:visited {}linkds visitadosactivefirst-linefirst-letterbeforeInsere um texto ou uma efeito antes do textoafterInsere um texto ou um efeito depois do textoBox modelstem em todos os elementos inline ou em blocomargindeclarações/*margin-top: 1px;
margin-right: 51px;
margin-bottom: 20px;
margin-left: 10px;*/margin: 1px 51px 20px 10px;margin: 1px 51px 20pxvai colocar 51 para o leftmargin: 1px 51pxvai colocar 1 para botton e 51 para leftMedidasAceita valores fracionáriosNão muito utilizadascm mmptimpressão +- usadaMais utilizadasexpxemEm relação a fonte predefinida no docFontesSans-serif padrão pela w3cSerifCourcifeFantasysMonospacingAssemelha a de maquina de escreverfont-weight: boldOu valores numericos100 - 900font-variant: small-capstudo maiusculas, porem um pouco menor que a maiuscula normalTrabalhando textosletter-spacingdistancia entre as letrasword spacingentre palavrasline-heightaltura entre as linhas de um parágrafovertical-align:sub/suptext-toptext-buttontext-alignjustifycenterleftrighttext-indentapenas para a primeira linha do textobom para determinar o parágrafo de um ptext-decorationsublinharunderlinelinha a cimaoverlineCortando a linhaline-throughtPisca textoblinktext-transformcaptalizea primeira letra maiuscula de todas as palavrasupercaselowercaseDIVbackground-image: url("img/imagem.jpeg")background-positionleftleft toprighttopbuttoncenterbackground-attachmentfixedajusta a imagem do backgroundo do bodyscrolcomeça dentro da divbeckground-repead: no-repeatrepeat-yrepead-xlinks de outros mapashttp://www.mindmeister.com/pt/10437039/csshttp://labinfo.csa.com.br/material-didatico/map.mm/view?searchterm=NoneMapa do seu csshttp://www.html-kit.com/poster/css/Listaslist-style-typegeorgeanlower romanarmanysquarecirclelower-tatinlower-alphalower-greekPosicionamentoNormalPosicionamento normalBlocoEmpilhados pela orderm do htmlOcupam toda a largurapadrão staticnão aceita posicionamentosleftrightIn LinePara estes apenas usa-se lefttopLimpar floatClear:leftrightbothwidthmin-widthlargura minimaapos isso cria scroll barmarginautodivide por 2 para centralizar a div containerFloatAbsoluteZ-IndexUma div sobre a outraCss spriteSpriteurl(nome_da_imagem.jpg) repeat scroll 100 190Css 3 Div com bordas arredondadasborder-radius: 10px;
box-shadow: 10px 10px 10px #000000;