CSS PRINCIPAIS PROPRIEDADES FONTES

Transcrição

1 CSS PRINCIPAIS PROPRIEDADES FONTES font-family Para definir que tipo de fonte vamos usar em qualquer trecho de nosso código HTML, através do CSS, devemos usar a propriedade font-family com o nome da fonte como o valor. font-family: "times new roman"; font-family: "arial"; font-family: "courier new"; font-family: "verdana"; font-size Usamos para definir o tamanho das fontes que vamos usar no CSS. font-size: número px pixel font-size: número % porcentagem font-size: número em em funciona como porcentagem mas de maneira mais abreviada color Usamos para alterar a cor da fonte color="#xxxxxx" Cor definida por 6 dígitos hexadecimais color="rgb(x,x,x)" Cor definida por 3 números do RGB color="nome DA COR" Cor definida pelo nome font-style: Define o estilo da fonte normal: fonte normal (em pé) italic: fonte inclinada oblique: fonte obliqua TEXTOS text-indent Esta propriedade destina-se a definir um espaçamento horizontal a ser deixado antes do início da primeira linha do texto, ou seja, define a indentação (ou tabulação) da primeira linha do texto. text-indent: 50px; text-indent: 10%;

2 text-indent: 3em; text-align Esta propriedade destina-se a definir o alinhamento horizontal do texto. left Alinha o texto à esquerda do box. Este é o valor inicial (ou default). right Alinha o texto à direita do box. center Alinha o texto no centro do box. justify Alinha o texto de modo que cada linha estenda-se da esquerda à direita do box. text-transform Esta propriedade destina-se a definir os efeitos de capitalização (maiúsculas, minúsculas) do texto. Trata-se de uma propriedade herdada. Os valores possíveis para esta propriedade são. capitalize Causa o efeito de transformar as primeiras letras das palavras do texto em maiúscula. uppercase Causa o efeito de transformar todas as letras das palavras do texto em maiúscula. lowercase Causa o efeito de transformar todas as letras das palavras do texto em minúsculas. text-decoration Esta propriedade destina-se a definir uma linha decorativa para o texto ou fazer com que o texto "pisque". Trata-se de uma propriedade que se propaga para elementos descendentes, mas não pode ser classificada como propriedade herdada, pois não é possível sobrescrever a "herança" como acontece com propriedades herdadas. Os valores possíveis para esta propriedade são. underline Causa o efeito sublinhado. A linha decorativa é desenhada sob o texto. overline Causa o efeito superlinhado. A linha decorativa é desenhada sobre o texto. line-through Causa o efeito riscado. A linha decorativa é desenhada riscando o texto. none Não desenha uma linha decorativa no texto.

3 body{ font-size:16px; color:red; p{ font-family:"courier new"; font-size:100%; color:black; text-indent:40px;.p1{ font-family:"arial"; font-size:0.9em; color:blue; font-style:italic; text-align:right;.p2{ font-family:"antiqua"; font-size:110%; color:green; font-style:oblique; text-align:center;.p3{ font-family:"verdana"; font-size:110%; color:gray; text-align:justify; <html> <body> <h1>cern, o berço da internet, celebra os 30 anos da rede mundial de computadores.</h1> <p>genebra, 11 mar (EFE).- Há trinta anos, um físico britânico concebeu na Organização Europeia de Pesquisas Nucleares (Cern) a invenção que mudou a história moderna, a rede mundial de computadores (WWW, pela sigla de seu nome original, World Wide Web) ou simplesmente a internet, um aniversário que a organização celebrará nesta terça-feira.</p> <p class="p1">o pai da World Wide Web, Tim Berners-Lee (Londres, 1955), estará presente no evento, no qual revisará as coisas boas e ruins que sua invenção apresentou desde então à humanidade, e serão discutidas questões como a necessidade de fortalecer a transparência e as ameaças de censura que se multiplicam.</p> <p style="font-family:times new roman;texttransform:uppercase">este mês marca as três décadas transcorridas desde que Berners-Lee enviou a seu chefe no Cern a proposta do que seria o ponto de partida do uso da internet como se conhece hoje e que respondia à demanda para que os cientistas pudessem compartilhar informação de forma automatizada com universidades e outras instituições no mundo.</p> <p class="p2">a iniciativa se transformaria em dezembro do ano seguinte no primeiro navegador, site e servidor, que começaram a funcionar coincidindo com o Natal de 1990, para quando o físico especializado em ciências da computação já tinha definido os conceitos básicos do que seriam os códigos html, http e URL.</p> <p style="text-transform:capitalize;textindent:0">de fato, o primeiro site da história se dedicou a oferecer informação sobre o projeto da World Wide Web.</p> <p class="p3">foi assim que a WWW se transformou no programa que permitiu a utilização da internet, uma infraestrutura já existente, mas que tinha encontrado inumeráveis problemas para

4 funcionar como uma rede e que, sem a invenção de Berners-Lee, nunca teria se transformado na ferramenta que mudou a vida de praticamente todo o mundo.os desenvolvimentos posteriores foram rápidos e, em abril de 1993, o Cern decidiu que a WWW deveria ser de domínio público e, dos 500 servidores conhecidos naquele ano, passou para mais de 10 mil no seguinte, dos quais 2 mil eram de uso comercial.</p> <p style="text-decoration:overline">"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p style="text-decoration:line-through">"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p style="text-decoration:underline">"lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br><br> </body> </html> DIV E SPAN A tag div é um elemento do tipo container que acomoda outras tag's, é um divisor de espaços. Um elemento que pode ajudar a adicionar estrutura a um documento é um elemento div. Muitas pessoas acreditam equivocadamente que um elemento div não tem nenhum

5 significado semântico. Mas, na verdade, significa divisão e fornece uma maneira de dividir um documento em áreas significativas. p { margin: 20px; text-align: center; font-size: 200%; span { color: #ff8330;.primario { margin: auto; width: 90%; padding: 30px; background-color: #dddeee;.secundario { margin: auto; width: 100px; height: 100px; background-color: #ccc; <body> <p>oi sou <span>evandro</span>.moro em <span>criciúma</span>.</p> <hr> <div class="primario"> <div class="secundario"></div> </div> </body> FLOAT A propriedade float do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu contêiner, onde textos e elementos em linha irão se posicionar ao seu redor..container{ width:800px; height:350px; border:2px solid red; img { float:left; margin-right: 10px p { text-align: justify; <div class= container > <img src="img/tom-jobim.jpg" alt="tom Jobim" />

6 <p> Antônio Carlos Brasileiro de Almeida Jobim (Rio de Janeiro, 25 de janeiro de 1927 Nova Iorque, 8 de dezembro de 1994), mais conhecido como Tom Jobim, foi um compositor, maestro, pianista, cantor, arranjador e violonista brasileiro. <p> É considerado o maior expoente de todos os tempos da música brasileira pela revista Rolling Stone, e um dos criadores do movimento da bossa nova. composições, sendo a primeira gravada Incerteza", uma parceria com Newton Mendonça, na voz de Mauricy Moura. </div> <p>pensou em trabalhar como arquiteto, chegando a cursar o primeiro ano da faculdade e até a se empregar em um escritório, mas logo desistiu e decidiu ser pianista. Tocava em bares e boates em Copacabana, como no Beco das Garrafas no início dos anos 1950, até que em 1952 foi contratado como arranjador pela gravadora Continental, onde trabalhou com Sávio Silveira. Além dos arranjos, também tinha a função de transcrever para a pauta as melodias de compositores que não dominavam a escrita musical. Datam dessa época as primeiras DISPLAY É a propriedade mais importante do CSS para controlar o layout. Cada elemento tem um valor padrão para o display dependendo de seu tipo. O valor padrão na maioria dos elementos é normalmente block ou inline. Um elemento com valor block é chamado de elemento de nível de bloco ou apenas elemento de bloco. Um elemento com valor inline é sempre chamado de elemento de linha.

7 .esquerda ul { padding:0px; margin:0px; list-style:none;.esquerda ul li { display: inline;.esquerda ul li a { padding: 2px 10px; display: inline-block; /* visual do link */ background-color:#ededed; color: #333; text-decoration: none; border-bottom:3px solid #EDEDED;.esquerda ul li a:hover { background-color:#d6d6d6; color: #6D6D6D; border-bottom:3px solid #EA0000; <html> <nav> <ul> <li><a href="#">serviços</a></li> <li><a href="#">home</a></li> <li><a href="#">produtos</a></li> </ul> </nav> <br> <hr> <br> <nav class="esquerda"> <ul > <li><a href="#">serviços</a></li> <li><a href="#">home</a></li> <li><a href="#">produtos</a></li> </ul> </nav> </html>