css cascading style sheets n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CSS – CASCADING STYLE SHEETS PowerPoint Presentation
Download Presentation
CSS – CASCADING STYLE SHEETS

Loading in 2 Seconds...

play fullscreen
1 / 16

CSS – CASCADING STYLE SHEETS - PowerPoint PPT Presentation


  • 138 Views
  • Uploaded on

CSS – CASCADING STYLE SHEETS. Separera utseenden från struktur och innehåll. CSS 2 & CSS 3 http://www.w3.org/TR/CSS2/ http://www.css3.info/. CSS – CASCADING STYLE SHEETS. Anpassa stilmallar efter användare och plattform Exempel på specialanpassade befintliga kategorier:

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CSS – CASCADING STYLE SHEETS' - mercury


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
css cascading style sheets

CSS – CASCADING STYLE SHEETS

Separera utseenden från struktur och innehåll.

CSS 2 & CSS 3

http://www.w3.org/TR/CSS2/

http://www.css3.info/

css cascading style sheets1

CSS – CASCADING STYLE SHEETS

  • Anpassa stilmallar efter användare och plattform
  • Exempel på specialanpassade befintliga kategorier:
  • Aural – röst & ljudstyrd
  • Braille – punktskrift
  • Embossed – releiftext
  • Handheld – små portabla enheter
  • Print – för vanlig utskrift på papper
  • Projection - projektorer
  • Screen – för datormonitorer
  • Tv – för visning på TV-apparater

http://www.w3.org/TR/CSS2/media.html

css koppla mot html

CSS – KOPPLA MOT HTML

Direkt i HTML dokumentet

<head>

<style>

…din CSS kod

</style>

<head>

Direkt i HTML taggarna

<p style=”font-size: 150%”>Hej</p>

Externa stillmallar

<link rel=“stylesheet” href=“default.css" type="text/css” media=“screen, tv”>

<link rel=“stylesheet” href=“print.css" type="text/css” media=“print”>

<link rel=“stylesheet” href=“mobile.css" type="text/css” media=“handheld”>

css syntax

h1 {

color: blue;

}

#logo {

background-image: url(logo.gif); 

}

.newsItem {

font-family: courier, sans-serif;

}

a:visited {

color:red;

font-weight: bold;

}

Referens till HTML element

Referens till unikt ID

Referens till en klass

Egenskap

Värde

Referens till en pseudoklass

CSS – SYNTAX

http://www.howtocreate.co.uk/tutorials/css/syntax

css syntax1

CSS – SYNTAX

<div id="header">

<h1>Kurts bilskrot</h1>

</div>

<div id="content">

<h1>Välkommen!</h1>

</div>

<div id="sidebar">

<h1>Länkar</h1>

</div>

h1 {

font-size: 30pt;

color: green;

}

css syntax n stlade element

CSS – SYNTAX NÄSTLADE ELEMENT

<div id="header">

<h1>FacePage</h1>

</div>

<div class=news">

<div>

<h1>Bad news</h1>

<img src=“pic.jpg”>

</div>

</div>

<div id="sidebar">

<p>Zvoschh</p>

<div>

<p>Hej</p>

</div>

</div>

#header h1 {

color: green;

}

.news div img {

max-height: 40px;

}

#sidebar p {

color: green;

}

css f rger

CSS – FÄRGER

  • Färger kan anges på fyra sätt:
    • Färgnamn: blue, red, purple, orange, olive…
    • 1-byte hexadecimalt: #FFF, #006, #0A0
    • 2-byte hex: #FFFFFF, #000066, #00AA00
    • Decimalt: rgb(255,255,255), rgb(0,0,0)

http://ficml.org/jemimap/style/color/wheel.html

css text

CSS – TEXT

fet eller vanlig stilfont-weight: bold;

kursiv eller vanlig stilfont-style: italic;

Understruken texttext-decoration: underline;

Anger textfärgcolor: #fff;

  • font-family anger vilket typsnitt som ska användas
  • Typsnitten anges som en lista
  • Ange alltid en generisk familj på slutet!

EX.

  • font-family: helvetica, arial, sans-serif;
css text font size

CSS – TEXT – FONT-SIZE

Textstorlek – standardvärde 16px

Dynamiska

em en relativ textstorlek utgår från 16px = 1em

% storleken sätts procentuellt 100% = 16px

Statiska storlekar

pt används främst för stilmallar för utskrift 16px = 12pt

px sätter textstorleken statiskt exakt på pixelnivå

EX.

font-size: 1em;

http://www.alistapart.com/articles/howtosizetextincss

css positionering

CSS – POSITIONERING

Relative

Placerar elementet relativt till föregående element.

Static

Placerar element som det vanligtvis hamnar utifrån HTML koden.

Absolute

På ett bestämt avstånd från det element som är en nivå ovanför. (parent)

Fixed

Placerar elementet utifrån från webbläsar fönstret

http://www.quirksmode.org/css/position.html

css box modellen

top/right

top/left

margin

padding

height

width

CSS – BOX MODELLEN

<!--[if IE]>

<link rel="stylesheet" type="text/css" href="all-ie.css" />

<![endif]-->

http://virtuelvis.com/archives/2004/02/css-ie-only

css box model ie problem

CSS – BOX MODEL – IE problem

WC3 standard

total width = margin-left + border-left +

padding-left + width + padding-right +

border-right + margin-right

IE explorer

total width = margin-left + width + margin-right

http://www.456bereastreet.com/archive/200612/internet_explorer_and_the_css_box_model/

css html tagg

CSS – HTML TAGG

CSS

HTML

<h1>Rubrik 1</h1>

h1 {

font-size: 200%;

Color: #cc0011;

}

+

=

css klasser id

CSS – KLASSER & ID

CSS

HTML

#gallery {

border: 2px solid black;

padding: 20px;

width: 130px;

}

.imageHolder {

position: relative;

float: left;

width: 40px;

height: 40px;

background-color: Olive;

border: 2px solid black;

margin: 5px;

}

#galleryEnd {

clear:both;

}

<div id="gallery">

<div class="imageHolder">1</div>

<div class="imageHolder">2</div>

<div class="imageHolder">3</div>

<div class="imageHolder">4</div>

<div class="imageHolder">5</div>

<div class="imageHolder">6</div>

<div class="imageHolder">7</div>

<div class="imageHolder">8</div>

<div class="imageHolder">9</div>

<div class="imageHolder">10</div>

<div id="galleryEnd"></div>

</div>

=

+

css planera

CSS – PLANERA

  • RITA UPP PÅ PAPPER & NAMNGE
  • ANVÄND ”DIV”-taggar för uppdelning & positionering
  • RELEVANT NAMNGIVNING
  • BEGRÄNSA ANTAL FÄRGER & TYPSNITT
css debug

CSS – DEBUG

<div id="heading">

<h1>Merry Christmas!

<br />&<br />

A Happy New Year</h1>

</div>

  • Syntax fel
  • Logiska fel

.heading {

position: absolute;

margin-top: 50 px;

margin-left: 95 px;

widht: 370 px;

text-align: center;

color: white;

font-family; "MS Serif“. "New York", serif;

font-size: 140;

}