Respostas - RESUMO: Questionário CSS. 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web?

Transcrição

1 Faculdade de Informática de Taquara Disciplina: Autoria e Design na Internet I Profa. Flavia Pereira de Carvalho Respostas - RESUMO: Questionário CSS 1) O padrão CSS nasceu para tentar minimizar quais problemas ligados à gestão de conteúdos na web? Separar a linguagem de marcação da estilização (formatação). Desta necessidade, nasceu a CSS (Cascading Style Sheet) = Folha de Estilo em Cascata. O uso dos elementos (tags) HTML é exclusivamente para marcar e estruturar o conteúdo do documento. Nenhum elemento ou atributo HTML será usado para alterar a apresentação, ou seja, estilizar o conteúdo. A tarefa de estilização ficará a cargo da CSS que nada mais é do que um arquivo independente do arquivo HTML no qual são declarados propriedades e valores de estilização para os elementos da HTML. 2) Explique o efeito cascata. Que estilo será aplicado, quando há conflito de estilos para um mesmo elemento HTML? Efeito Cascata: estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento. Os estilos inline (dentro de um elemento HTML) tem a prioridade mais elevada, isto é, prevalecerá sobre a folha de estilo definida na seção head, e, esta prevalecerá sobre uma folha de estilo externa. 3) As regras CSS são escritas por meio de declarações que seguem a sintaxe abaixo: seletor { propriedade: valor; Descreva cada um dos 3 elementos constantes na sintaxe dessa declaração. Seletor: é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>,.minhaclasse etc...). Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background etc...). Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde etc...). No exemplo a seguir, o seletor é o "documento todo" (body - a página web), a propriedade é a cor do fundo do documento e o valor é a cor branca. body { background-color: #fff;

2 4) Qual será o efeito de agrupar seletores, como na regra abaixo: h1, h2, h3, h4, h5, h6 { color: #00FF00; Uma regra CSS quando válida para vários seletores, estes podem ser agrupados. Separe cada seletor com uma vírgula. No exemplo abaixo agrupamos todos os elementos cabeçalho. A cor de todos os cabeçalhos será verde. h1, h2, h3, h4, h5, h6 { color: #0f0; 5) Explique as diferenças existentes entre "seletores de classe" e "seletores de ID". O seletor classe Você pode "inventar" um nome e com ele criar uma classe a qual definirá as regras CSS. E o mais interessante das classes, é que elas podem ser aplicadas a qualquer elemento HTML. E mais ainda, você pode aplicar estilos diferentes para o mesmo tipo de elemento da HTML, usando classes diferentes para cada um deles. A sintaxe para o seletor classe é mostrada a seguir. Elemento HTML mais um nome qualquer que você "inventa" precedido de. (ponto): elemento.minhaclasse { propriedade: valor; Por exemplo: suponha que você precisa de dois estilos para parágrafos em seu documento: um parágrafo com letras na cor preta e um parágrafo com letras na cor azul. Crie duas classes conforme mostrado a seguir. p.cor-um { color:#000; p.cor-dois { color:#0ff; No seu documento HTML as classes seriam aplicadas conforme abaixo: <p class ="cor-um"> este parágrafo será na cor preta.</p> <p class ="cor-dois">este parágrafo será na cor azul.</p>

3 Ao criar uma classe você talvez queira que ela seja aplicável a qualquer elemento HTML. Neste caso basta que se omita o nome do elemento antes da classe. Por exemplo: a regra CSS a seguir pode ser aplicada a qualquer elemento HTML ao qual você deseja atribuir cor azul:.cor-tres { color: #00f; No exemplo a seguir tanto o cabeçalho <h2> como o parágrafo <p> serão na cor azul: <h2 class="cor-tres"> Este cabeçalho é na cor azul. </h2> <p class="cor-tres"> Este parágrafo é na cor azul. </p > O seletor ID O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode ser aplicado a UM e somente UM elemento HTML dentro do documento. Você pode "inventar" um nome e com ele criar um ID ao qual definirá as regras CSS. Um determinado ID só pode ser aplicado a UM elemento HTML. A sintaxe para o seletor ID é mostrada a seguir. Um nome qualquer que você "inventa" precedido do sinal # ("sustenido" ou "jogo-da-velha"): #meuid { propriedade: valor; 6) Suponha que você queira ter dois tipos de parágrafos (elemento <p>) em seu documento: um parágrafo com letras na cor preta e um parágrafo com letras na cor azul. Elabore uma regra CSS capaz de realizar tal efeito. p.cor-um { color:#000; p.cor-dois { color:#0ff; No seu documento HTML as classes seriam aplicadas conforme abaixo: <p class ="cor-um"> este parágrafo será na cor preta.</p> <p class ="cor-dois">este parágrafo será na cor azul.</p>

4 7) Existem 3 estratégias para vincular o código HTML ao código CSS (veja abaixo), explique com suas palavras cada uma dessas formas: Folha de estilo EXTERNA (importadas ou linkadas) Quando as regras CSS estão declaradas em um documento à parte do documento HTML. A folha de estilo é um arquivo separado do arquivo html. O arquivo de folha de estilo deve ser gravado com a extensão.css Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa, você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo.css). O arquivo css da folha de estilo externa deverá ser linkado ao documento HTML, dentro da seção head do documento. A sintaxe geral para linkar uma folha de estilo chamada estilo.css é mostrada a seguir: <head> <link rel="stylesheet" type="text/css" href="estilo.css"> </head> Folha de estilo incorporada ou INTERNA: Quando as regras CSS estão declaradas no próprio documento HTML. Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada. As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir. <head> <style type="text/css"> body { background: #000; h3 { color: #f00; p { margin-left: 15px; padding:1.5em; </style> </head>

5 Folha de estilo INLINE: Quando as regras CSS estão declaradas dentro da tag do elemento HTML com uso do atributo style. Um estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens de folhas de estilo, pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento. A sintaxe para aplicar estilo inline é mostrada a seguir: <p style="color:#000; margin: 5px;"> Aqui um parágrafo de cor preta e com 5px nas 4 margens. </p> 8) Suponha, uma folha de estilo externa com as seguintes propriedades para o seletor h2: h2 { color: #FFCC00; text-align: center; font: italic 9pt Verdana, Sans-serif; e, uma folha de estilo interna com as seguintes propriedades para o seletor h2: h2 { color: #FFCC00; text-align: center; font: italic 10pt Verdana, Sans-serif; Se ambas as páginas estiverem vinculadas ao mesmo documento, como será resolvido o conflito no tamanho das letras para <h2>? No exemplo acima o elemento <h2> terá que tamanho? Se alguma propriedade for definida para um mesmo elemento em folhas de estilo diferentes, entrará em ação, o EFEITO CASCATA e prevalecerão os valores da folha de estilo mais específica (mais próxima do conteúdo). Prevalecerá a folha interna e a fonte de h2 terá o tamanho igual a 10 pt.

6 9) O que é Tableless? O que deve-se usar nos layouts de páginas web no lugar de Tables (tabelas)? HTML é uma linguagem estrutural, ou seja, é - ou deveria ser - usada para estruturar textos através de tags. A tag table deveria ser usada tão somente com a finalidade de apresentar dados dentro de uma tabela com linhas e colunas. Mas desde que as tabelas foram implementadas no HTML elas têm sido amplamente usadas para montagem de layouts e muito comumente para compartimentar uma página web em colunas. O uso das tabelas para layouts contraria sua finalidade (seu propósito semântico). Os sites que seguem os Padrões Web utilizam uma metodologia de desenvolvimento baseado em 3 camadas, são elas: 1. Informação HTML. 2. Formatação CSS (Folhas de Estilo). É com CSS que comandamos todo o visual do site. Tudo que é visual e decorativo deve ser feito por CSS. 3. Comportamento Definido por JavaScript. É a camada que define como os elementos irão se comportar de acordo com as ações do usuário. Em poucas palavras: um site tableless é um site que não utiliza tables para a estruturação do Layout. É um site que segue os Padrões Web.