CSS CSS - cascading style sheets CSS - permite separar num - - PowerPoint PPT Presentation

▶
css
SMART_READER_LITE
LIVE PREVIEW

CSS CSS - cascading style sheets CSS - permite separar num - - PowerPoint PPT Presentation

Sep 18, 2023 261 likes •550 views

CSS CSS - cascading style sheets CSS - permite separar num documento HTML o contedo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline <h1 style="color: blue; font-style: italic"> texto em

slide-1
SLIDE 1

ADI css 1/28

CSS

  • CSS - cascading style sheets
  • CSS - permite separar num documento HTML o conteúdo do estilo
slide-2
SLIDE 2

ADI css 2/28

Cascaded Style Sheets

Por ordem de prioridade:

  • Inline

<h1 style="color: blue; font-style: italic"> texto em azul</h1>

  • Document level

<head> <style type="text/css"> H1 {color: blue; font-style: italic} </style> </head>

  • Linked

<head> <link rel=stylesheet type="text/css" href="http://www.site.com/styles/mystyle.css" </link> </head>

slide-3
SLIDE 3

ADI css 3/28

Style Syntax

Tag-selector {property:value1; property:value1 value2; …}

  • Tag names in uppercase (convenção)
  • Property in lowercase (convenção)
  • Comentarios: /*

isto é um comentário */

slide-4
SLIDE 4

ADI css 4/28

Selectores

  • Múltiplos

H1,H2,H3 {text-align: center}

  • Contexto

OL LI {list-style: upper-alpha} OL OL LI { list-style: upper-roman} OL OL OL LI{ list-style: lower-alpha} H1 EM, P STRONG {color: red}

  • Herança

Propriedades de uma tag específica são herdadas da tag mãe, excepto as que são definidas específicamente Exemplo: BODY {color: blue}

slide-5
SLIDE 5

ADI css 5/28

Classes

  • Associadas a tags

P.abstract {font-style: italic; left-margin: 0.5cm} P.equation {font-family: Symbol; text-align: center}

  • Classes genéricas

.italic {font-style: italic}

  • exemplo de aplicação:

<p class=italic> <h1 class=italic>

slide-6
SLIDE 6

ADI css 6/28

Usando a tag id em vez da tag class

P1#italic {font-style: italic} #italic {font-style: italic}

  • exemplo de aplicação:

<p id=italic> <h1 id=italic>

  • limitação: não pode haver duas tag id iguais no documento HTML
  • Evitar usar
slide-7
SLIDE 7

ADI css 7/28

Pseudo-classes

  • Estão ligadas ao estado da tag
  • Três estão associadas à tag <a>

A:link {color: blue} A:active {color: red} A:visited {color: green}

  • Duas estão associadas à tag <p>

P:first-line {font-style:small-caps} P:first-letter {font-size: 200%; float: left}

slide-8
SLIDE 8

ADI css 8/28

Example: Setting the page margins

body { margin-left: 10%; margin-right: 10%; }

slide-9
SLIDE 9

ADI css 9/28

Setting left and right indents

body { margin-left: 10%; margin-right: 10%; } h1 { margin-left: -8%;} h2,h3,h4,h5,h6 { margin-left: -4%; }

slide-10
SLIDE 10

ADI css 10/28

First-line indent

p { text-indent: 2em; margin-top: 0; margin-bottom: 0; }

slide-11
SLIDE 11

ADI css 11/28

Controlling the font

  • Font styles

em { font-style: italic; font-weight: bold; } strong { text-transform: uppercase; font-weight: bold; }

  • Setting the font size

h1 { font-size: 200%; } h2 { font-size: 150%; } h3 { font-size: 100%; }

  • Setting the font family

body { font-family: Verdana, sans-serif; } h1,h2 { font-family: Garamond, "Times New Roman", serif; }

slide-12
SLIDE 12

ADI css 12/28

Adding borders and backgrounds

div.box { border: solid; border-width: thin; width: 100% }

  • Exemplo:

<div class="box"> The content within this DIV element will be enclosed in a box with a thin line around it. </div>

slide-13
SLIDE 13

ADI css 13/28

Setting Colors

body { color: black; background: white; } strong { color: red }

slide-14
SLIDE 14

ADI css 14/28

Setting Link Colors

a:link { color: rgb(0, 0, 153) } /* for unvisited links */ a:visited { color: rgb(153, 0, 153) } /* for visited links */ a:active { color: rgb(255, 0, 102) } /* when link is clicked */ a:hover { color: rgb(0, 96, 255) } /* when mouse is over link */

slide-15
SLIDE 15

ADI css 15/28

A Real Example!

/** * * TITLE : Gila Screen Stylesheet * AUTHOR: http://www.oswd.org/userinfo.phtml?user=haran * * Modified by Steve for various reasons. * */ /* ##### Common Styles ##### */ body { color: black; background-color: white; font-family: verdana, helvetica, arial, sans-serif; font-size: 73%; /* Enables font size scaling in MSIE */ margin: 0; padding: 0; } html > body {

slide-16
SLIDE 16

ADI css 16/28

font-size: 9pt; } acronym, .titleTip { border-bottom: 1px dotted rgb(168,140,83); cursor: help; margin: 0; padding: 0; } .doNotDisplay { display: none !important; } .smallCaps { font-size: 117%; font-variant: small-caps; } /* ##### Header ##### */ .superHeader { color: rgb(130,128,154);

slide-17
SLIDE 17

ADI css 17/28

background-color: rgb(33,50,66); text-align: right; margin: 0; padding: 0.5ex 10px; } .superHeader span { color: rgb(195,196,210); background-color: transparent; font-weight: bold; text-transform: uppercase; } .superHeader a { color: rgb(195,196,210); background-color: transparent; text-decoration: none; margin: 0; padding: 0 0.25ex 0 0; } .superHeader a:hover { color: rgb(193,102,90); background-color: transparent; text-decoration: none;

slide-18
SLIDE 18

ADI css 18/28

} /* Colour here is for the menu */ .midHeader { color: black; background-color: #de0451; margin: 0; padding: 0.26ex 10px; } .headerTitle { font-size: 300%; margin: 0; padding: 0; } .headerSubTitle { font-size: 125%; font-weight: normal; font-style: italic; margin: 0 0 1ex 0; padding: 0; } .headerLinks {

slide-19
SLIDE 19

ADI css 19/28

text-align: right; margin: 0; padding: 0 0 2ex 0; position: absolute; right: 1.5em; top: 3.5em; } .headerLinks a { color: white; background-color: transparent; text-decoration: none; margin: 0; padding: 0 0 0.5ex 0; display: block; } .headerLinks a:hover { color: rgb(195,196,210); background-color: transparent; } .subHeader { color: white; background-color: #ce0441;

slide-20
SLIDE 20

ADI css 20/28

margin: 0; padding: 0.5ex 10px; } .subHeader a, .subHeader .highlight { color: white; background-color: transparent; font-size: 110%; font-weight: bold; text-decoration: none; margin: 0; padding: 0 0.25ex 0 0; } .subHeader a:hover, .subHeader .highlight { color: rgb(255,204,0); background-color: transparent; text-decoration: none; } /* ##### Left Side Bar ##### */ .leftSideBar { }

slide-21
SLIDE 21

ADI css 21/28

.leftSideBar .sideBarTitle { color: rgb(64,64,64); background-color: rgb(230,223,207); font-weight: bold; margin: 0; padding: 0.8ex 1ex; } .leftSideBar ul { list-style-type: none; list-style-position: outside; margin: 0 0 1em 0; padding: 0; } .leftSideBar li { margin: 1ex; padding: 0 0 1.25ex 0.75ex; font-size: 95%; } .leftSideBar p { font-size: 95%; }

slide-22
SLIDE 22

ADI css 22/28

.leftSideBar a { color: rgb(166,140,83); background-color: transparent; text-decoration: none; } .leftSideBar a:hover { color: rgb(64,64,64); background-color: transparent; text-decoration: none; } .leftSideBar .sideBarText { color: rgb(166,140,83); background-color: transparent; line-height: 1.25em; margin: 1ex 0.25ex 1.5em 0.75ex; padding: 0; display: block; } .leftSideBar .sideBarText a:hover { text-decoration: none; }

slide-23
SLIDE 23

ADI css 23/28

.leftSideBar .thisPage { color: rgb(64,64,64); background-color: transparent; font-weight: bold; } /* ##### Right Side Bar ##### */ .rightSideBar { padding: 0; } [class~="rightSideBar"] { margin-right: 1.5ex; } .rightSideBar .sideBarTitle { color: black; background-color: rgb(230,223,207); font-weight: bold; margin: 1.25ex 1ex; padding: 0.9ex 1ex; }

slide-24
SLIDE 24

ADI css 24/28

.rightSideBar a { color: rgb(166,140,83); background-color: transparent; font-weight: bold; } .rightSideBar a:hover { text-decoration: none; } .rightSideBar .sideBarText { line-height: 1.5em; margin: 0; padding: 0 2ex 1em 2ex; } .rightSideBar .more { text-decoration: none; text-align: right; margin: 0; padding: 2em 2ex 2em 2ex; display: block; }

slide-25
SLIDE 25

ADI css 25/28

/* ##### Main Copy ##### */ #main-copy { color: black; background-color: white; text-align: justify; line-height: 1.5em; padding: 0.5ex 0.5ex 1em 1em; border-left: 1px solid rgb(216,210,195); } #main-copy h1 { background-color: transparent; font-family: arial, verdana, helvetica, sans-serif; font-size: 175%; font-weight: bold; font-style: italic; text-align: left; margin: 1em 0 0 0; padding-top: 0; padding: 1em 0 0 0; } #main-copy h3 {

slide-26
SLIDE 26

ADI css 26/28

border-bottom: 1px solid #aaaaaa; } #main-copy a { color: rgb(168,140,83); background-color: transparent; } #main-copy a:hover { text-decoration: none; } #main-copy a[name] { color: black; } p { margin: 1em 0 1.5em 0; padding: 0; } dt { font-weight: bold; margin: 0; padding: 0 0 0.5ex 0;

slide-27
SLIDE 27

ADI css 27/28

} dd { margin: 0 0 1.5em 1.5em; padding: 0; } /* ##### Footer ##### */ #footer { color: black; font-size: 92%; text-align: center; line-height: 1.25em; margin: 0; padding: 1em 4mm 1em 4mm; clear: both; border-top: 1px solid rgb(216,210,195); } #footer div { margin: 0; padding: 0 0 1ex 0; }

slide-28
SLIDE 28

ADI css 28/28

#footer a { color: black; background-color: transparent; font-weight: bold; } #footer a:hover { text-decoration: none; } pre {

  • verflow:

auto; width: 90%; background: rgb(230,230,230); border: solid; border-width: thin; } #comments table,td,tr { color: black; background-color: white; text-decoration: none; }