0% acharam este documento útil (0 voto)

12 visualizações14 páginas

Python Tema4 Parte4 BR v2

Python 4

Enviado por

biblioteamo

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

12 visualizações14 páginas

Python Tema4 Parte4 BR v2

Python 4

Enviado por

biblioteamo

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 14

IBM SkillsBuild | Introducción a Python

Desenvolvimento Web
Fundamentos do CSS

1
IBM SkillsBuild | Introducción a Python

Índice
Introdução 3
Sintaxe da etiqueta CSS 4
Onde vai o código CSS? 4
Declaração externa 4
Declaração interna 4
Declaração online 5
Comentários 5
Fontes personalizadas 5
Modelo de caixa-contentor 6
Float, margin e padding 7
Selecionadores 8
Seletor de etiquetas 8
Seletor de clase 8
Seletor de ID 9
Seletor do grupo 10
Seletor universal 10
Seletor de irmãos 10
Seletor filho 11
Estilos para o texto 11
Cores 11
Cores RGBA 11
Gradientes 12
Estilos para links 12
Unidades no CSS 13
Comprimentos absolutos 13
Comprimento relativo 14

2
IBM SkillsBuild | Introducción a Python

Introdução

A razão de ser do CSS é dar às nossas páginas uma

certa aparência.

Antes do aparecimento do CSS, o que era feito era

escrever tags HTML com seus atributos. Por
exemplo, altura, largura, cor... etc.

Atualmente separamos a estrutura (HTML) da

aparência (CSS).

3
IBM SkillsBuild | Introducción a Python

Sintaxe da etiqueta CSS Declaração externa

Consiste em criar uma página com extensão CSS e
"linkarla" à nossa página HTML.
Todas as etiquetas CSS terão duas partes:
Uma vez criada a página CSS, vamos para o head de
• Um seletor: que determinará a área da página
nossa página HTML e a ligamos com uma <link> tag.
WEB que queremos modificar, ou seja, a etiqueta
a ser modificada. Em nosso cabeçalho, ou seja, na <head> de nossa
• As instruções: Eles se referem ao formato que página, vamos colocar:
vamos aplicar a essa zona.

• Declaração externa. Em um arquivo separado A partir deste momento podemos usar os seletores
com extensão .CSS que será "linkado" à nossa para fazer as modificações que nos interessam nas
página HTML. Desta forma, podemos modificar tags de nossa página HTML.
todas as páginas do meu site. Esta é a melhor
Este seria um exemplo de <head> com a etiqueta
opção para melhorar o posicionamento SEO.
.css anexada:
• Aplicação em estilo interno. No cabeçalho do
documento HTML dentro da head. Desta forma,
modificaremos a aparência de uma única página <head>
da web em particular. <meta charset="UTF-8">
• Estilo in-line. Dentro de uma etiqueta. Com isso, <title>Ejemplo de HTML</title>
modificamos a aparência do conteúdo dessa <link rel="stylesheet"
etiqueta. Opção não recomendada, SEO não lhe href="Hoja_Estilos.css" >
parece favorável. O ideal é utilizá-lo apenas em </head>
casos muito específicos.

Ao aplicar estilos em linha, temos que repetir a

aplicação de estilos em cada uma das linhas que Declaração interna
queremos modificar e cada vez que afetamos apenas
Para criar uma folha de estilo interna, teremos que
uma linha. Com a aplicação de estilos internos é
usar a tag <style></style> no head de nossa página
suficiente declarar uma vez o estilo e o tipo de
HTML. No interior, criaremos nossos estilos CSS
elemento ao qual é aplicado, e será automaticamente
usando os seletores CSS disponíveis no CSS.
aplicado a todos os elementos desse tipo dentro da
página web.

4
IBM SkillsBuild | Introducción a Python

<head> Comentários
<meta charset="utf-8">
<title>Pagina2</title>
No CSS, a sintaxe para comentários é;
<meta name="Description"
content="Pagina2">
/*Aquí va el comentario*/
<meta name="Keywords" content="Curso,
HTML, CSS, programacion WEB"> Como em qualquer linguagem de programação, os
<style type="text/css"> comentários serão ignorados ao executar o código.
h1 { São simplesmente anotações que o HTML não levará
text-align: center; em conta.
font-family: "Lucida Grande";

Fontes personalizadas
font-size: 32px
}
</style>
</head>
Se quisermos usar um tipo de fonte específico que
tenha que ser baixado, temos que usar a propriedade
Desta vez dissemos html que as tags h1 terão que ter @font-face e temos que especificar o caminho onde
um alinhamento centralizado, a fonte será "Lucida o arquivo do true-type dessa fonte está localizado:
Grande" e terá um tamanho de fonte de 32px. Desta
forma, todas as etiquetas h1 em nossa página terão
este formato.
@font-face {

font-family: 'miFuente';
Declaração online
src: url('Bauhaus.ttf');
Desta vez usaremos <style></style> tags em
qualquer tag em nosso documento HTML. O estilo }
que escolhemos só alterará essa etiqueta.

Se a fonte estiver localizada localmente, ou seja, em

<body> nosso disco rígido, ela tem que estar na raiz. Se o
<h1 style="color: aqua">Titulo de colocarmos em uma pasta, normalmente não
la página</h1> funciona.
<h2>Subtítulo de la página</h2>
<h2>Subtítulo2 de la página</h2> E então usaremos o tipo de fonte que criamos:
</body>

Neste exemplo, modificamos o estilo de apenas uma p{

tag h1 em particular, mudando sua cor. font:bold 32px 'miFuente';

Caso uma etiqueta seja afetada por vários estilos de }

CSS, o navegador aplicará os seguinte critério:

Declaração on-line > Declaração interna >

Nesta ocasião, dissemos html para usar esta fonte
Declaração externa
particular para <p> tags.
5
IBM SkillsBuild | Introducción a Python

Modelo de caixa-contentor

Há dois tipos de tags em HTML:

• Etiquetas block. Elas causam uma quebra de

linha acima e abaixo da etiqueta e ocupam 100%
da largura da página. A maioria das etiquetas de
estrutura são deste tipo.
• Etiquetas in-line. Eles não geram uma quebra de
linha.

6
IBM SkillsBuild | Introducción a Python

Para fazer um elemento de "block" se torne um "in- Margin: Define o espaço entre a borda da caixa-
line" usamos o imóvel: contentor e o que quer que esteja ao redor dela
(elementos com propriedade de float não contam
display: inline para isso).

Cada elemento de nosso site terá uma margem no

topo (margin top), da direita (margin right), embaixo
Float, margin e padding de (margin bottom) e, à esquerda (margin left).

Ao trabalhar com a posição dos elementos de nossa Padding: Define o espaço entre o conteúdo da caixa-
página HTML, há várias propriedades a serem contentor e sua borda.
conhecidas:
Análogo à propriedade do imóvel margin, cada
Float: Altera a forma como os elementos são elemento de nosso site terá um acolchoamento na
colocados em uma página da web. Ao aplicar este parte superior (padding top), da direita (padding
imóvel, poderemos colocar um elemento onde right), embaixo de (padding bottom) e, à esquerda
quisermos na página, ele não ocupará mais toda a (padding left).
largura da página e o resto dos elementos será
Border: Modifica a borda de um elemento, por
distribuído ao redor dele, em vez de acima ou abaixo
exemplo, uma imagem, uma caixa de texto, etc.
dele. Para que o elemento retorne a ter propriedades
de caixa-contentor, usamos a propriedade clear.

7
IBM SkillsBuild | Introducción a Python

Selecionadores
Ela pode ir em uma folha de estilo externa ou interna,
na interna iria na head.

Sua sintaxe em uma folha interna seria a seguinte:

No CSS, os seletores são padrões usados para
selecionar os elementos que você deseja modificar.
<head>
Os seguintes seletores estão disponíveis no CSS. <meta charset="utf-8">
<title>Pagina2</title>
• Selecionadores de rótulos.
<meta name="Description"
• Selecionadores de classe. content="Pagina2">
• Selecionador de identificação. <meta name="Keywords" content="Curso,
• Selecionador de grupo. HTML, CSS, programacion WEB">
• Selecionador universal. <style type="text/css">
p{color: aqua}
Há mais tipos de selecionadores, mas estes são os </style>
mais usados. </head>

Desta vez, mudamos a cor de todas as etiquetas <p>

em nossa página.

Em uma folha de estilo externa (um arquivo CSS):

p{color: aqua}

Isto também mudaria o estilo de todas as etiquetas

<p> na página.
Quando se trata de criar nossos estilos, as instruções
são divididas em dois grupos:

• Selecionadores; Eles estão acostumados a

especificar dentro de nossa página web, a quais Seletor de clase
elementos da mesma vamos aplicar o estilo.
Com eles, aplicamos um formato de estilo a um ou
• Bloco de declaração;
1 mais elementos específicos. Pode ser em uma folha
Selecionador p{color:#3333 Bloco de de estilo externa ou na head de uma folha de estilo
declarações. interna, então a aplicamos ao elemento que
necessita.

Começa sempre com um ponto ".", seguido do nome

que queremos.
Seletor de etiquetas
Nota: O nome tem que começar com uma letra e é
Ele muda o estilo de todos os elementos do tipo de
case sensitive, ou seja, é sensível a maiúsculas e
etiqueta que especificamos.
minúsculas.

8
IBM SkillsBuild | Introducción a Python

Folha de estilo interno: Seletor de ID

É semelhante ao seletor de rótulos, mas este se
<head> aplica apenas a um elemento específico para
<meta charset="utf-8"> diferenciá-lo dos outros. Em vez de começar com um
<title>Pagina2</title>
ponto, ele começa com um #.
<meta name="Description"
content="Pagina2"> Podemos dar-lhe um nome, não é essencial.
<meta name="Keywords" content="Curso,
HTML, CSS, programacion WEB"> Pode ser em uma folha de estilo externa ou no head
<style type="text/css"> de uma folha de estilo interna.:
.miEstilo {color: aqua}
</style> Folha interna:
</head>

<head>
Folha de estilo externo: <meta charset="utf-8">
<title>Pagina2</title>
<meta name="Description"
.miEstilo {color: aqua} content="Pagina2">
<meta name="Keywords" content="Curso,
HTML, CSS, programacion WEB">
<style type="text/css">
Então, na etiqueta (ou rótulos) em questão,
#miEstilo {color: aqua}
colocamos; </style>
</head>

<p class= "miEstilo ">Párrafo</p>

Em uma folha externa:

Neste caso, aplicamos o estilo a uma etiqueta <p>,

se quiséssemos aplicá-lo a uma única palavra ou a #miEstilo {color: aqua}
qualquer outro elemento não marcado na página, o
faríamos com a etiqueta <span>. Esta etiqueta não
faz nada, mas me permite colocar um identificador e
Então, na etiqueta (ou etiquetas) em questão,
estilo, por exemplo:
colocamos;

Vamos a resaltar una <spam class=

"miEstilo">palabra</spam> de nuestro <p id= "miEstilo ">Párrafo</p>
texto

Podemos atribuir várias classes a um elemento: Lembre-se de que um elemento pode ter apenas
uma ID e que cada IDdeve ser única.

<p class="clase1 clase2"></p>

9
IBM SkillsBuild | Introducción a Python

Seletor do grupo Seletor universal

Com ela, aplicamos algumas características a todas Aplique as características desejadas a todos os
as etiquetas que escolhemos. elementos da página web.

Em nossa folha de estilo, colocaremos:

<head>
<meta charset="utf-8">
P[name="miEstilo"] { <title>Pagina2</title>
color: aqua <meta name="Description"
} content="Pagina2">
<meta name="Keywords" content="Curso,
HTML, CSS, programacion WEB">
<style type="text/css">
* {color: aqua}
Então, na etiqueta (ou etiquetas em questão,
</style>
colocamos;
</head>

<p name="miEstilo">Párrafo</p> Neste caso, aplicamos a cor "aqua" a todos os

elementos de nosso website.

Há três modificadores disponíveis aqui para

especificar a quais atributos o estilo será aplicado.
Eles seguiriam imediatamente o name:
Seletor de irmãos
Ela modifica os elementos que seguem o que eu lhes
^ : Aplica-se a todos os elementos que começam
digo para modificar.
com…

<head>
<p name^= "mi">Párrafo</p> <meta charset="utf-8">
<title>Pagina2</title>
<meta name="Description"
content="Pagina2">
$ : Aplica-se a todos os elementos que terminam <meta name="Keywords" content="Curso,
em… HTML, CSS, programacion WEB">
<style type="text/css">
h1+p {color: aqua}
<p name$= "ilo">Párrafo</p> </style>
</head>

* : Aplica-se a todos os itens que contenham…

Isto mudaria a cor de <p> parágrafos após uma <h1>
tag.

<p name*= "Est">Párrafo</p>

10
IBM SkillsBuild | Introducción a Python

Seletor filho Estilos para o texto

Aplica um estilo às etiquetas que são elas próprias
dentro de outras etiquetas. Tomando como pai a
etiqueta contendo e como filha a etiqueta contida Cores
dentro dela.
Para mudar as cores de um elemento de nossa
página web, temos várias opções:

<head>
• Cores pré-definidas: Teremos acesso direto
<meta charset="utf-8">
digitando seu nome em inglês.:
<title>Pagina2</title>
p {color:blue}
<meta name="Description"
content="Pagina2"> • Rgb (vermelho, verde, azul): Onde vermelho,
<meta name="Keywords" content="Curso, verde e azul são números inteiros desde 0 a 255
HTML, CSS, programacion WEB"> ou porcentagens de 0% a 100%:
<style> p {color:rgb(42,44,156)}
Li a {color: aqua} • #RGB: Onde R, G e B são números hexadecimais
</style> de 0 a F:
</head> p {color: #353E9A}

O que conseguimos aqui é aplicar o estilo apenas aos

links <a> que estão dentro de uma etiqueta <li>, Cores RGBA
excluindo todos os outros links que possam existir na Os valores de cor RGBA são uma extensão dos
página. valores de cor RGB com um canal alfa, que especifica
a opacidade do objeto.

Uma cor RGBA é especificada com a função rgba(),

Nota: Se eu quiser estilizar apenas uma palavra ou
que tem a seguinte sintaxe:
um grupo de palavras dentro de um texto, lembre-se
que temos que usar a tag <span></span> rgba(red, green, blue, alpha).

O parâmetro alfa é um número entre 0,0 (totalmente

transparente) e 1,0 (totalmente opaco).

#p1 {background-color: rgba(255, 0, 0,

0.3);} /*Rojo con transparencia*/
#p2 {background-color: rgba(0, 255, 0,
0.3 /*Verde con transparencia*/ #p3
{background-color: rgba(0, 0, 255, 0.3);}
/*Azul con transparencia*/

11
IBM SkillsBuild | Introducción a Python

Gradientes Estilos para links

Podemos aplicar um gradiente de cor a um elemento.
Neste caso devemos especificar em ordem, tipo de
Uma etiqueta de link <a>;
gradiente, direção do gradiente, cor inicial e cor final.

div {
<a href="http://www.google.es">Ir a
background: linear-gradient(to
google</a>
bottom, #33ccff 0%, #ff99cc 100%);
}

div { Pode ter diferentes estatutos:

background: linear-gradient(to right,
#33ccff 0%, #ff99cc 100%); • Link; Em repouso, eles são exibidos apenas no
} página, não estamos passando o mouse sobre
ela, etc.
div { • Visited; Quando o link já tiver sido visitado e
background: linear-gradient(to top
estiver no cache do navegador.
left, #33ccff 0%, #ff99cc 100%);
• Hover; Quando o mouse está pairando sobre ele.
}
Isto também pode ser usado em outro lugar na
página, por exemplo, para destacar um parágrafo
div {
background: linear-gradient(to top quando pairando sobre ele.
right, #33ccff 0%, #ff99cc 100%); • Active; Quando você está fazendo “click”.
}
Se todos os quatro estados forem usados ao mesmo
div { tempo, devem ser usados nesta ordem, caso
background: linear-gradient(to top, contrário não funcionarão. (regra LoVe HAte). Em
#33ccff 0%, #ff99cc 100%); outras palavras, Link => Visited => Hover => Active
}
A sintaxe para dar um status ao nosso estilo de link:
div {
a:estado{….}
background: linear-gradient(to left,
#33ccff 0%, #ff99cc 100%);
} a:visited{color:red}

div {
background: linear-gradient(to bottom Muda a cor de todos os links já visitados para
left, #33ccff 0%, #ff99cc 100%); vermelho.
}

div {
background: linear-gradient(to bottom
left, #33ccff 0%, #ff99cc 100%);
}

12
IBM SkillsBuild | Introducción a Python

Unidades no CSS Comprimentos absolutos

As unidades de comprimento absoluto são fixas e um
comprimento expresso em qualquer uma delas
O CSS tem várias unidades diferentes para expressar
aparecerá exatamente como aquele tamanho.
um comprimento, pixels, porcentagens e em escala.
Confira o vídeo neste tópico para saber mais sobre As unidades de comprimento absoluto não são
eles. recomendadas para uso na tela, porque os tamanhos
das telas variam muito. Entretanto, eles podem ser
Muitas propriedades do CSS assumem valores de
usados se o meio de saída for conhecido, por
"comprimento", tais como
exemplo, para layout de impressão.
width, margin, padding, font-size, etc.

O comprimento é um número seguido por uma

unidade de comprimento, tal como 10px, 2em, etc. Unidad Descripción
cm centimetres
Diferentes valores de comprimento são definidos,
usando px (pixels): mm milímetros
in Polegadas (1in = 96px = 2.54cm)
px * pixels (1px = 1/96th of 1in)
h1 {
font-size: 60px; pt Puntos (1pt = 1/72 of 1in)
} pc picas (1pc = 12 pt)

p {
font-size: 25px;
line-height: 50px;
}

Nota: Um espaço em branco não pode aparecer

entre o número e a unidade. Entretanto, se o valor for
0, a unidade pode ser omitida.

Para algumas propriedades do CSS, são permitidos

comprimentos negativos.

Há dois tipos de unidades de comprimento: absoluto

e relativo.

13
IBM SkillsBuild | Introducción a Python

Comprimento relativo
As unidades de comprimento relativo especificam um
comprimento em relação a outra propriedade de
comprimento. As unidades de comprimento relativo
escalam melhor entre os diferentes meios de
renderização.

Unidades Descripción
em Em relação ao tamanho da fonte do
elemento (2em significa 2 vezes o
tamanho da fonte atual)
ex Em relação à altura x da fonte atual
(raramente utilizada)
ch Em relação à largura do "0" (zero)
rem Em relação ao tamanho da fonte do
elemento raiz
vw Em relação a 1% da largura da janela
gráfica *
vh Em relação a 1% da altura da janela
gráfica *
vmin Relativo a 1% da menor dimensão da
janela gráfica
vmax Em relação a 1% da maior dimensão da
janela gráfica
% Relativo ao elemento pai