Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Trabalho de Introdução A Informática

    Загружено:

    ivo_soares_1
    7 просмотров27 страниц

    Оригинальное название

    TRABALHO DE INTRODUÇÃO A INFORMÁTICA(1)

    Авторское право

    © Attribution Non-Commercial (BY-NC)

    Доступные форматы

    PPT, PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    7 просмотров27 страниц

    Trabalho de Introdução A Informática

    Загружено:

    ivo_soares_1

    Авторское право:

    Attribution Non-Commercial (BY-NC)
    Скачайте в формате PPT, PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 27

    TRABALHO DE INTRODUO A INFORMTICA

    CSS

    O que CSS?

    O Cascading Style Sheets (CSS) uma "folha de estilo" composta por camadas e utilizada para definir a apresentao (aparncia) em pginas da internet que adotam para o seu desenvolvimento linguagens de marcao (como XML, HTML e XHTML). O CSS define como sero exibidos os elementos contidos no cdigo de uma pgina da internet e sua maior vantagem efetuar a separao entre o formato e o contedo de um documento.

    Porque foi criado?

    Com a evoluo dos recursos de programao as pginas da internet estavam adotando cada vez mais estilos e variaes para deix-las mais elegantes e atrativas para os usurios. Com isto, linguagens de marcao simples como o HTML, que era destinada para apresentar os contedos tambm precisou ser aprimorada.

    Porque foi criado?

    A partir destas complicaes, nasceu o CSS. Primariamente, foi desenvolvido para habilitar a separao do contedo e formato de um documento (na linguagem de formatao utilizada) de sua apresentao, incluindo elementos como cores, formatos de fontes e layout. Esta separao proporcionou uma maior flexibilidade e controle na especificao de como as caractersticas sero exibidas, permitiu um compartilhamento de formato e reduziu a repetio no contedo estrutural de uma pgina.

    APLICAO

    Ele utilizado para definir layouts de documentos HTML. Por exemplo, pode controlar fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos. Saber pelo menos o bsico sobre CSS muito importante para poder desenvolver layouts de pginas web e ou Templates para Diversos CMS, como WordPress, Joomla, Drupal e etc.

    MODOS DE APLICAO

    Existem 3 maneiras diferentes de se aplicar CSS em um documento HTML, so eles:

    Mtodo 1: In-line (o atributo style) Mtodo 2: Interno (a tag style) Mtodo 3: Externo (link para uma folha de estilos)

    Mtodo 1: In-line

    Uma maneira de aplicar CSS pelo uso do atributo style do HTML.

    <html> <head> <title>Exemplo</title> </head> <body style="background-color: #0099FF;"> <p>Esta uma pgina com fundo azul</p> </body> </html> O que normalmente ficaria assim: <body bgcolor="#0099FF">

    Mtodo 2: Interno
    Uma outra maneira de aplicar CSS e pelo uso da tag <style> do HTML:

    <html> <head> <title>Exemplo</title> <style type="text/css"> body {background-color: #0099FF;} </style> </head> <body> <p>Esta uma pgina com fundo azul</p> </body> </html>

    Mtodo 3: Externo
    Este o mtodo mais recomendado e utilizado. Voc usar esta maneira para construir seus layouts e templates. Uma folha de estilos externa um simples arquivo de texto com a extenso.css. Vamos supor que criamos um arquivo CSS com o nome de estilos dentro de uma pasta com nome de CSS. Devemos cham-lo atravs do seguinte cdigo: <link rel="stylesheet" href"=css/estilos.css" /> Notar que o caminho para a folha de estilos indicado no atributo href.

    Esta linha de cdigo deve ser inserida na seo header do documento HTML, isto , entre as tags <head> e </head>. Conforme mostrado abaixo: <html> <head> <title>Meu documento</title> <link rel="stylesheet" href="css/estilos.css" /> </head> <body> ... Este link informa ao navegador para usar o arquivo CSS na renderizao e apresentao do layout do documento HTML

    CORES E FUNDOS

    color background-color background-image background-repeat background-attachment background-position

    Color
    h1 { color: #ff0000; }

    Background Color
    body { background-color: #FFCC66;} h1 { color: #990000; background-color: #FC9804; }

    Background-image
    body { background-color: #FFCC66; background-image: url("background.gif");} h1 { color: #990000; background-color: #FC9804; }

    Background-Repeat
    body { background-color: #FFCC66; background-image:url("background.gif"); background-repeat: no-repeat;} h1 { color: #990000; background-color: #FC9804; }

    Background-attachment
    body { background-color: #FFCC66; background-image: url("Background.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }

    Background

    background-color: #FFCC66; background-image: url("background.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom;

    TEXTO

    font-family font-style font-variant font-weight font-size font

    text-indent text-align text-decoration letter-spacing text-transform

    FONT-FAMILY
    h1 {font-family: arial, verdana, sans-serif;} h2 {font-family: "Times New Roman", serif;}

    FONT-STYLE

    h2 { font-family: "Times New Roman", serif; font-style: italic; }

    FONT SIZE
    PODE SER EM:
    PONTOS PIXELS PORCENTAGEM h1 {font-size: 30px;} h2 {font-size: 12pt;} h3{font-size: 120%;}

    TEXT-ALIGN th { text-align: right;} td { text-align: center;} p { text-align: justify;}


    Th clula de cabealho Td clula de dados P - texto

    TEXT-TRANSFORM
    Capitalize falando ti Falando Ti , uppercase: Falando ti

    FALANDO TI
    lowercase: FALANDO TI Falando ti

    EXEMPLOS

    CONSIDERAES

    Esta tcnica pode economizar uma grande quantidade de trabalho. Se por exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a folha de estilos evita que voc edite manualmente uma a uma as pginas para fazer a mudana nos 100 documentos HTML. Usando CSS a mudana se far em uns poucos segundos trocando-se a cor em uma folha de estilos central.

    Вам также может понравиться