CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW

Transcrição

1 CSS: Cascading Style Sheets (folhas de estilo) Pimentel, Morganna BSI - UNIRIO DPW

2 CSS: ementa Texto Fontes Links Ícones Listas Tabelas DPW / 18

3 CSS: text Definição Formatar o texto quanto à posição, distância entre letras e palavras, ao alinhamento (horizontal e vertical), à cor, etc. DPW / 18

4 CSS: text Algumas Propriedades: color cor do texto. letter-spacing espacejamento entre caracteres do texto. line-height- altura da linha. text-align alinhamento horizontal do texto. text-decoration decoração adicionada ao texto. text-indent indentação do texto. text-shadow adiciona efeito sombra ao texto. text-transform define a capitalização do texto. vertical-align define o alinhamento vertical de um elemento. white-space especifica espaço em branco dentro do elemento. word-spacing define espacejamento entre palavras no texto. DPW / 18

5 CSS: text <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> body{color:darkgreen;} h2 {text-align: center;color: darkblue;text-decoration: underline;} p {text-align: left;color: red;text-transform: uppercase; text-indent: 20px;letter-spacing: 3px;line-height: 10px;} </style> </head> <body> <h2>teste de text</h2> <p>parágrafo com formatação.</p> Texto sem formação. </body> </html> DPW / 18

6 CSS: text DPW / 18

7 CSS: fonts As propriedades de font define a família da fonte, estilo, tamanho, peso, etc. Propriedades: font especifica uma fonte. font-family especifica uma família de fontes. font-size especifica o tamanho da fonte. font-style especifica o estilo da fonte. font-variant especifica se a fonte deve ser mostrada na forma small-caps (letras maiúsculas e fonte menor). font-weight especifica o peso da fonte. DPW / 18

8 CSS: fonts Fontes Serif X Fontes Sans-serif DPW / 18

9 CSS: fonts DPW / 18

10 CSS: fonts <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> p.serif { font-family: "Times New Roman", Times, serif; font-size: 24px; font-weight: bold; color: blue;} p.sansserif { font-family: Arial, Helvetica, sans-serif; font-style: italic; font-variant: small-caps; color: red;} </style> </head> <body> <h1>teste de Fontes</h1> <p class="serif">parágrafo com Times New Roman, 24px e negrito.</p> <p class="sansserif">parágrafo com Arial, itálico e small-caps.</p> </body> </html> DPW / 18

12 CSS: fonts Uso da unidade em 1em corresponde ao tamanho padrão da fonte. O tamanho padrão dos textos nos navegadores é 16px. pixels/16=em Exemplos h1 { font-size: 2.5em; /* 40px/16=2.5em */ } h2 { font-size: 1.875em; /* 30px/16=1.875em */ } p { font-size: 0.875em; /* 14px/16=0.875em */ } O uso unidade em é recomendado pela W3C. DPW / 18

13 CSS: fonts <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> p.menor { font-size: 0.5em; } p.maior { font-size: 2em; } </style> </head> <body> <h1>teste de Fontes</h1> <p class="menor">parágrafo com 0.5em.</p> <p>parágrafo padrão. <p class="maior">parágrafo com 2em.</p> </body> </html> DPW / 18

15 CSS: icons Ícone é um pequeno símbolo gráfico, usado geralmente para representar um software ou um atalho para um arquivo específico, aplicação (software) ou diretório (pasta). Existem bibliotecas de ícones disponíveis na Internet que podem se customizadas pelo CSS. DPW / 18

16 CSS: icons Font Awesome Icons <link rel="stylesheet" href=" Veja lista em Bootstrap glyphicons <link rel="stylesheet" href=" Veja lista em Google icons <link rel="stylesheet" href=" family=material+icons"> Veja lista em DPW / 18

17 CSS: icons <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href=" </head> <body> <h1>teste de Ícones</h1> <p>ícones de Sistemas Operacionais:</p> <i class="fa fa-apple"></i> <i class="fa fa-windows"></i> <i class="fa fa-android"></i> <i class="fa fa-linux"></i> <p>mudando cor e dimensão dos ícones:</p> <i class="fa fa-apple" style="font-size:36px; color:red;"></i> <i class="fa fa-windows" style="font-size:48px; color:blue;"></i> <i class="fa fa-android" style="font-size:60px;color:green;"></i> <i class="fa fa-linux" style="font-size:72px; color:orange;"></i> </body> </html> DPW / 18

18 CSS: icons DPW / 18

19 CSS: icons <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" href=" </head> <body> <h1>teste de Ícones</h1> <i class="glyphicon glyphicon-thumbs-up" style="font-size:36px;color:orange"></i> <i class="glyphicon glyphicon-thumbs-down" style="font-size:36px;color:blue;"></i> <i class="glyphicon glyphicon-hand-left" style="font-size:36px;color:red;"></i> <i class="glyphicon glyphicon-hand-right" style="font-size:36px;color:green;"></i> </body> </html> DPW / 18

21 CSS: icons <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link href=" rel="stylesheet"> </head> <body> <h1>teste de Ícones</h1> <i class="material-icons" style="font-size:36px;color:red">brightness_1</i> <i class="material-icons" style="font-size:36px;color:red">brightness_2</i> <i class="material-icons" style="font-size:36px;color:red">brightness_3</i> <i class="material-icons" style="font-size:36px;color:red">brightness_4</i> <i class="material-icons" style="font-size:36px;color:red">brightness_5</i> <i class="material-icons" style="font-size:36px;color:red">brightness_6</i> <i class="material-icons" style="font-size:36px;color:red">brightness_7</i> </body> </html> DPW / 18

23 CSS: links Os quatro estados em que um link pode estar: a:link um link normal, ainda não visitado. a:visited um link já visitado pelo usuário. a:hover um link com o mouse em cima. a:active um link no momento em que é clicado. DPW / 18

24 CSS: links A propriedade color é usada para definir cores para cada estado do link. a:link {color: red;} a:visited {color: green;} a:hover {color: blue;} a:active {color: orange;} DPW / 18

25 CSS: links A propriedade text-decoration pode ser usada para remover a linha que aparece embaixo dos links. a:link {text-decoration: none;} a:visited {text-decoration: none;} a:hover {text-decoration: underline;} a:active {text-decoration: underline;} DPW / 18

26 CSS: links A propriedade background-color pode ser usada para especificar um cor de fundo para o link. a:link {background-color: red;} a:visited {background-color: cyan;} a:hover {background-color: blue;} a:active {background-color: green;} DPW / 18

27 CSS: links <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> a:link {color: red; text-decoration: none;} a:visited {color: green; text-decoration: none;} a:hover {color: blue; text-decoration: underline; background-color: gray;} a:active {color: orange; text-decoration: underline; background-color: red;} </style> </head> <body> <p>link para a página do <b><a href=" target="_blank">bsi</a></b></p> </body> </html> DPW / 18

28 CSS: links <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; } a:hover, a:active {background-color: red;} </style> </head> <body> <p>link para a página do <b><a href=" target="_blank">bsi</a></b></p> </body> </html> DPW / 18

29 CSS: lists Propriedades list-style-type especifica o tipo do marcador. list-style-image especifica uma imagem como marcador da lista. list-style-position especifica a posição do marcador (dentro ou fora do conteúdo do modelo). list-style define todas as propriedades em uma única declaração. DPW / 18

30 CSS: lists <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> ul.a {list-style-type: square;} ol.b {list-style-type: lower-roman;} </style></head><body> <p>exemplos de listas</p> <ul class="a"> <li>praia</li> <li>cinema</li> <li>livros</li> </ul> <ol class="b"> <li>praia</li> <li>cinema</li> <li>livros</li> </ol> </body> </html> DPW / 18

31 CSS: lists Veja outros valores para list-style-type em DPW / 18

32 CSS: lists <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> body{margin:40px;} ul {list-style-image: url('bl.png');} </style> </head> <body> <p>examplos de lista: <ul class="a"> <li>praia</li> <li>cinema</li> <li>livros</li> </ul> </p> </body> </html> DPW / 18

33 CSS: lists <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> ul.a {list-style-position:inside;} ul.b {list-style-position:outside;} </style> </head> <body> <p>exemplos de listas</p> <ul class="a"> <li>praia</li> <li>cinema</li> <li>livros</li> </ul> <ul class="b"> <li>praia</li> <li>cinema</li> <li>livros</li> </ul> </body> </html> DPW / 18

34 CSS: lists <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> body{width: 300px;} ul {background: #3399ff; padding: 20px;} ul li {background: #cce5ff; margin: 5px;} </style> </head> <body> <ul> <li>unirio</li> <li>ccet</li> <li>eia</li> </ul> </body> </html> DPW / 18

35 CSS: tables <!DOCTYPE html> <html> <head> <title>exemplo CSS</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style> table{border: 2px solid red;} th{border: 2px solid orange; text-align: center; width: 20%;background-color: lightblue} td{border: 2px solid blue; text-align: left; width: 20%;} tr:nth-child(odd){background-color: #f2f2f2} </style> </head> <body> <table> <tr><th>nome</th><th>sobrenome</th></tr> <tr><td>joão</td><td>alves</td></tr> <tr><td>maria</td><td>lopes</td></tr> <tr><td>roberto</td><td>tales</td></tr> <tr><td>sandra</td><td>neves</td></tr> </table> DPW / 18

36 CSS: tables DPW / 18