MIT Paskaita 2 - Css
Transcript of MIT Paskaita 2 - Css
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 1/26
CSS
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 2/26
2010.09.05 Linas Butenas, MIF, VU2
Tutorial
http://www.w3schools.com/css/default.asp
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 3/26
2010.09.05 Linas Butenas, MIF, VU3
What is CSS?
CSS stands for C ascading Style SheetsStyles define how to display HTML elementsStyles were added to HTML 4.0 to solve a
problem External Style Sheets can save you a lot of work
Multiple style definitions will cascade into one
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 4/26
2010.09.05 Linas Butenas, MIF, VU4
Examples
CSS Zen Gardenhttp://www.csszengarden.com/ http://www.mezzoblue.com/zengarden/alldesigns/
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 5/26
2010.09.05 Linas Butenas, MIF, VU5
Examples
CSS contents
<p class="center">This paragraph will be center-aligned.
</p>
p.right {text-align: right}
HTML contents
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 6/26
2010.09.05 Linas Butenas, MIF, VU6
More exciting ideas
What is possible to do with CSS?Image galleryWeb site with user chosen style…
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 7/262010.09.05 Linas Butenas, MIF, VU7
CSS inserting stratagies
External Style Sheet
<head>
<link rel="stylesheet" type="text/css “ href="mystyle.css" /></head>
Internal Style Sheet
<head> <style type="text/css">
hr {color: sienna}p {margin-left: 20px}body {background-image: url("images/back40.gif")}
</style>
</head>
Inline Styles
<p style="color: sienna; margin-left: 20px"> This is a paragraph</ p>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 8/262010.09.05 Linas Butenas, MIF, VU8
Cascading Order
Browser defaultExternal Style SheetInternal Style Sheet (inside the <head> tag)
Inline Style (inside HTML element)
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 9/262010.09.05 Linas Butenas, MIF, VU9
CSS syntax
The CSS syntax is made up of three parts:selectorpropertyvalue
selector {property: value}
body {color: black}
p {
text-align: center;color: black;font-family: arial
}
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 10/262010.09.05 Linas Butenas, MIF, VU10
Grouping & Class
Grouping
h1,h2,h3,h4,h5,h6 { color: green }
Class selector
p.right {text-align: right}p.center {text-align: center}
.right {text-align: right}
<p class="center">This paragraph will be center-aligned.</p>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 11/262010.09.05 Linas Butenas, MIF, VU11
Grouping & Class (2)
Multiple Class
p.right {text-align: right; color: red;}p.green1 {color: green;}
<p class =“green1 right">This paragraph will be center-aligned.
</p>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 12/262010.09.05 Linas Butenas, MIF, VU12
Class essence
Separates information using structure:TitleContentsMenuHeader, footer…
Reuses same styles if structure has a modelExample: title-content block
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 13/262010.09.05 Linas Butenas, MIF, VU13
ID & comments
id selector
p#para1 { text-align: center; color: red }
#right {text-align: right}
<p id =“para1">This paragraph will be center-aligned.</p>
comments /* This is a comment */
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 14/262010.09.05 Linas Butenas, MIF, VU14
Pseudo-Class
It is possible to use pseudo-classes in CSS
selector:pseudo-class {property: value}
a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */
a.red:visited {color: #FF0000}
<a class="red" href=“… ">CSS Syntax</a>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 15/262010.09.05 Linas Butenas, MIF, VU15
Pseudo-element
Pseudo-element
p:first-letter {color: #FF0000}p:first-line {color: #00FF00}
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 16/262010.09.05 Linas Butenas, MIF, VU16
Media types
Media Type Description
all all media type devices
aural speech and sound synthesizers
braille braille tactile feedback devices
embossed paged braille printers
handheld small or handheld devicesprint printers
projection projected presentations, like slides
screen computer screens
tty media using a fixed-pitch character grid, like teletypes andterminals
tv television -type devices
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 17/262010.09.05 Linas Butenas, MIF, VU17
Combining
div p { text-indent:25px }
<div><p>
First paragraph in div. This paragraph will be indented.</p><p>
Second paragraph in div. This paragraph will not be indented.</p>
</div>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 18/262010.09.05 Linas Butenas, MIF, VU18
CSS Attribute Selectors
[onclick]{color: blue;
}
<p onclick=“...”>This paragraph is blue.
</p>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 19/262010.09.05 Linas Butenas, MIF, VU19
Problems
Browsers has different default CSSBrowsers interpret CSS differently
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 20/262010.09.05 Linas Butenas, MIF, VU20
Hints
Always force refresh if style sheet is in .css fileCSS Debuggers
Firebug (Firefox add-in)IE developer toolbar
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 21/262010.09.05 Linas Butenas, MIF, VU21
Future
Min-width, min-heightOutlinecounter-increment
…
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 22/262010.09.05 Linas Butenas, MIF, VU
22
CSS Box model
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 23/262010.09.05 Linas Butenas, MIF, VU
23
Įvairūs a tvejai
div.a { color: red; }div.b { color: green; }
<div class=”b a”> Tekstas </div>
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 24/262010.09.05 Linas Butenas, MIF, VU
24
CSS Aural
Can be used:by blind peopleto help users learning to read
to help users who have reading problemsfor home entertainmentin the car
by print-impaired communities
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 25/262010.09.05 Linas Butenas, MIF, VU
25
Klausimai?
Kokie būtų privalumai ir trūkumai jeineatskirtume duomenų nuo stiliaus?
T.y. HTML ir CSS?Duokite pavyzdį iš kitos srities
7/31/2019 MIT Paskaita 2 - Css
http://slidepdf.com/reader/full/mit-paskaita-2-css 26/26
26
Klausimai
CSS stands for C ascading Style SheetsKodėl yra žodis “Cascading” ir ką jis reiškia?
Ar galima pakeisti elemento stilių, pagal tai,kokius atributus jis turi?