SIMULADOS & TUTORIAIS

Tamanho: px

Começar a partir da página:

Download "SIMULADOS & TUTORIAIS"

Paulo Mendes Rocha
8 Há anos
Visualizações:

1 SIMULADOS & TUTORIAIS TUTORIAIS CSS O que é CSS e sua sintaxe Coyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a rerodução deste documento no todo ou em arte or quaisquer meios, seja digital, eletrônico ou imresso sem a exressa autorização do autor or escrito. Os infratores serão unidos de acordo com a Lei. Simulados & Tutoriais Tutoriais CSS Pag. 1

2 TUTORIAIS CSS O que é CSS e sua sintaxe Introdução Para você começar a trabalhar com CSS você recisa ter um conhecimento básico sobre: HTML XHTML Caso você não tenha conhecimento sobre esses dois tóicos aconselhamos a estudá-los. Para isso, você oderá utilizar nossos tutoriais. Vejamos então como utilizar as CSS no desenvolvimento de áginas web. O que é CSS? CSS significa Cascading Style Sheets, ou seja, Folhas de Estilo em Cascata. Os estilos definem como mostrar os elementos em uma ágina HTML. Os estilos foram adicionados ao HTML 4.0 ara resolver alguns roblemas não suortados elo HTML. As CSS tanto odem ser utilizadas diretamente nas áginas HTML como também imortadas de arquivos externos. Os arquivos externos CSS ossuem a extensão.css. As CSS vieram ara resolver um grande roblema Nunca foi intenção do HTML conter tags ara formatar um documento. O HTML foi criado ara definir o conteúdo de um documento, tais como: <h1>this is a heading</h1> <>This is a aragrah.</> Quando as tags <font> e os atributos referentes a cores foram adicionados no HTML 3.2, foi um verdadeiro esadelo ara os desenvolvedores. O desenvolvimento de grandes sites, onde as fontes e informações de cor foram adicionados ara cada ágina, tornou-se um rocesso longo e caro. Para resolver este roblema, o World Wide Web Consortium (W3C) criou as CSS. No HTML 4.0, todas as formatações oderiam ser removidas de um documento HTML e armazenadas simlesmente em um arquivo CSS searado. Hoje, todos os browsers suortam CSS. O uso das CSS economizam muito trabalho As CSSS definem como os elementos vão ser vistos na tela quando o arquivo for executado. As folhas de estilo são normalmente armazenadas em arquivos externos.css. As folhas de estilo externas ermitem-lhe alterar a aarência e layout de todas as áginas de um Web site simlesmente editando aenas um arquivo. A sintaxe das CSS Uma regra CSS ossui duas artes rinciais: Simulados & Tutoriais Tutoriais CSS Pag. 2

3 Um seletor e, Uma ou mais declarações, conforme mostra o exemlo a seguir: Valor Valor h1 color:yellow; font-size:12x; Proriedade Proriedade O seletor é geralmente o elemento HTML que você retende alicar o estilo. Cada declaração consiste de uma roriedade e um valor. A roriedade é o atributo do estilo que você deseja alterar. Cada roriedade tem o seu valor. Uma declaração CSS semre termina com um onto e vírgula e deve ser agruada entre chaves. Vejamos um exemlo: color:red;text-align:center; Para que o seu código fique mais organizado e mais fácil de ser lido, você ode colocar cada comando em uma linha searada. Vejamos como ficaria o exemlo anterior utilizando esse método: color:red; text-align:center; Vejamos um exemlo rático: Exemlo 1 Nesse exemlo definimos a cor de fundo da ágina e mostramos algumas roriedades de textos, como tamanho e cor. 1. Digite o código abaixo no seu editor de texto e salve-o como: css1-exemlo1.html. <!DOCTYPE html> <html> Tutorial CSS1 - Exemlo 1 - O que é CSS e sua sintaxe <head> <title>tutorial CSS1 - Exemlo 1 - O que é CSS e sua sintaxe</title><> <style> body background-color:yellow; h2 font-size:32t;color:red; h3 color:blue; margin-left:50x; </style> </head> <body> Seletor Simulados & Tutoriais Tutoriais CSS Pag. 3

4 <h2>este cabeçalho é vermelho</h2> <h3>este cabeçalho é azul</h3> <>Este arágrafo tem a margem esquerda de 50 ixels</> </body> </html> 2. Esse código aós executado no browser exibirá o seguinte: Vejamos um outro exemlo: Exemlo 2 Nesse exemlo definimos a cor de fundo da ágina, criamos um linha horizontal, um link e mostramos algumas roriedades de textos, como tamanho e cor. 1. Digite o código abaixo no seu editor de texto e salve-o como: css1-exemlo2.html. <!DOCTYPE html> <html> Tutorial CSS1 - Exemlo 2 - O que é CSS e sua sintaxe <head> <title>tutorial CSS1 - Exemlo 2 - O que é CSS e sua sintaxe</title><> body background-color:tan; h1 color:maroon;font-size:20t; hr color:navy; font-size:11t;margin-left:15x; a:link color:green; a:visited color:yellow; a:hover color:black; a:active color:blue; </style> </head> <body> <h1>isto é um cabeçalho</h1> <hr> <><a href="htt:// target="_blank">isto é um link</a></> </body> </html> 2. Esse código aós executado no browser exibirá o seguinte: Simulados & Tutoriais Tutoriais CSS Pag. 4

Como utilizar comentários em CSS Os comentários são utilizados ara exlicar o funcionamento de cada etaa do seu código, e ode também ajudá-lo no futuro quando você quiser atualizá-lo.

5 Como utilizar comentários em CSS Os comentários são utilizados ara exlicar o funcionamento de cada etaa do seu código, e ode também ajudá-lo no futuro quando você quiser atualizá-lo. Os comentários são ignorados elos browsers. Um comentário CSS começa com "/*", e termina com "*/". Veja o exemlo: /* Isso é um comentário. */ text-align:center; /* Esse é um outro comentário. */ color:black; font-family:arial; ***** Simulados & Tutoriais Tutoriais CSS Pag. 5