Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Cascading Style SheetsWeb Technologies I.
Zsolt Tóth
University of Miskolc
2018
Zsolt Tóth (UM) Cascading Style Sheets 2018 1 / 37
Introduction
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 2 / 37
Introduction
Content vs Visualization
Content
Device independentLogical units
Chapters, sections,paragraphsLists, enumerationsTables, figures
Datatextnumeric, integer, realcategorydate, time
Visualization
Device dependentIn print
colorcolor free
PDFWeb
PCTabletMobil
Define the style &appearance
Fonts, margincolor
Zsolt Tóth (UM) Cascading Style Sheets 2018 3 / 37
Introduction
Content vs Visualization
Useful 6= fancyRe-usability
Same content differentvisualization.Unified style
Professional look.Clothes make the man.CSS make the web app.
Zsolt Tóth (UM) Cascading Style Sheets 2018 4 / 37
Introduction
Visualization
Proper representation isessentialRaw data
+ processing+ few records+ sample, example- reading- hide the trends
Chartsbarpieline
logarithmicdate
3rd party libsData Driven Document (JS)
Zsolt Tóth (UM) Cascading Style Sheets 2018 5 / 37
CSS Cascading
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 6 / 37
CSS Cascading
Cascading Style Sheet
HTML 4.0Define stylestyle attributeHierarchicalEncapsulationCascading
Zsolt Tóth (UM) Cascading Style Sheets 2018 7 / 37
CSS Cascading
Cascading
Merge Style SheetsPriority basedOrderingExtensionOverriding
Order (Priority)1 Browser2 External CSS3 Internal CSS (head)4 Inline
External can override the Internal CSS!
Zsolt Tóth (UM) Cascading Style Sheets 2018 8 / 37
CSS Cascading
Browser CSS
Lowest priorityBrowser defaultUser’s Settingsone computer – manybrowsers
Zsolt Tóth (UM) Cascading Style Sheets 2018 9 / 37
CSS Cascading
External CSS
head
Different (linked) fileReusableone page – many ExternalCSSCascading Order
1 <linkrel="stylesheet"
3 type="text/css"href="mystyle.css
"/>
<!--[if IE]>2 Non-IE browsers ignore this<![endif]-->
Zsolt Tóth (UM) Cascading Style Sheets 2018 10 / 37
CSS Cascading
Internal CSS
head
<style> tagPart of the HTML documentNot reusable
1 <style>h1 {color: red;}
3 h2 {text-transform: uppercase
;5 color: #ff0000;text-decoration: blink;}
7 p {background-color: pink;}
</style>
Zsolt Tóth (UM) Cascading Style Sheets 2018 11 / 37
CSS Cascading
Inline Style
style attributeDefined for a single tagHighest prioritySpecial cases X
CSS XUse class attribute
Zsolt Tóth (UM) Cascading Style Sheets 2018 12 / 37
CSS Syntax
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 13 / 37
CSS Syntax
Syntax
Plain textElements
Selectortagidclass
Decoration
/* comment */
Decorationsfontstextlinklisttablesmargin, padding, bordercolor
h1 {color: red; text-decoration: underline;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 14 / 37
CSS Syntax
id
id attributeUniqueDefines part of the documentusually.#id
1 #importantStuff{color: #FF0000;
3 font-size: 24px;background: black;
5 }
1 <p id="importantStuff">Lorem ipsum dolor ... </p>
Zsolt Tóth (UM) Cascading Style Sheets 2018 15 / 37
CSS Syntax
class
class attributeone element – many classesone class – many elements.className
Denotes role, function, etc.
1 .warning{color: yellow;
3 background-color: black;font-size: 24px;
5 }.error{
7 color: red;text-transform: uppercase
;9 }
1 <div class="warning">Warning 1</div><br/>
3 <div class="warning error">Warning 2</div>
Zsolt Tóth (UM) Cascading Style Sheets 2018 16 / 37
CSS Syntax
class
1 .important{text-decoration:
3 underline;}
5 p.important{color: red;
7 text-transform:uppercase;
9 }
1 div.important{color: yellow;
3 background-color: black;font-size: 24px;
5 }
1 <div class="important">Important Div</div><br/>
3 <p class="important">Important Paragraph</p>
Zsolt Tóth (UM) Cascading Style Sheets 2018 17 / 37
Decorations Range
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 18 / 37
Decorations Range
Range
Possible values of the decorationsfixed value set Xcolor ?size ?width, height ?
Decoration defines
decoration : value;
Zsolt Tóth (UM) Cascading Style Sheets 2018 19 / 37
Decorations Range
Color
*color
Defined colorsblackcyanblueyellow
RGB X#RRGGBB
CMYKCyan, Magenta, Yellow, Key(black)Prints
red #FF0000
green #00FF00
blue #0000FF
black #000000
white #FFFFFF
yellow #FFFF00
magenta #FF00FF
cyan #00FFFF
Zsolt Tóth (UM) Cascading Style Sheets 2018 20 / 37
Decorations Range
Width, Height
Relative% of what?px pixel, device
dependentem depends on font sizeEx hight of the ’x’ char
Absolutecm 10−2 meter
mm 10−3 meterin 1 inch (≈ 2,54cm)pt 1 point = 1/72 inchpc 1 pica = 12 point =
1/6 inch
Zsolt Tóth (UM) Cascading Style Sheets 2018 21 / 37
Decorations Text, Link
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 22 / 37
Decorations Text, Link
background
Property groupbackground-colorbackground-imagebackground-repeat
background-attachmentbackground-position
1 body{
3 background-image:url("img_tree.png");
background-repeat:no-repeat;
5 background-position:righttop;
}
Short hand format
body {background:#ffffff url("img_tree.png") no-repeat right top;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 23 / 37
Decorations Text, Link
font
Characters aloneFamilies
font-familySans-serfi, serif,monospaceArial, Times New Roman
Stylesfont-stylenormal, italic, oblique
font-size
font-weight
1 p{font-size: 12px;
3 font-style: italic;font-family: serif
5 }
7 p{font: 12px italic serif;
9 }
Zsolt Tóth (UM) Cascading Style Sheets 2018 24 / 37
Decorations Text, Link
text
Text (characters together)Property group
text-aligntext-decorationtext-transformtext-indent
color
1 .warning{color: red;
3 text-decoration:underline;
text-tansform: uppercase;5 }
Zsolt Tóth (UM) Cascading Style Sheets 2018 25 / 37
Decorations Text, Link
anchor
linksone tag - many states
unvisitedvisitedmouse overselected (clicked)
pseudo selectorsfixed order
1 /* unvisited link */a:link {color:#FF0000;}
3 /* visited link */a:visited {color:#00FF00
;}5 /* mouse over link */a:hover {color:#FF00FF;}
7 /* selected link */a:active {color:#0000FF;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 26 / 37
Decorations Lists, Tables
Lists
Unordered Listlist-style-type
circlesquarediscnone
Ordered Listlist-style-type
decimallower-alphalower-greeklower-romanupper-{greek, latin,roman}
ol.math { list-style: lower-roman; }2 ul { list-style-image:url(’sqpurple.gif’); }
Zsolt Tóth (UM) Cascading Style Sheets 2018 27 / 37
Decorations Lists, Tables
Tables
tableth, trborder
style, width, colortop, left, bottom,rightcollapse
width, heightpadding
table th tr{2 %border: solid 2px yellow
;font-size: 12px;
4 text-align: left;}th{
6 color: black;background: yellow;}
8 tr{color: yellow;
10 background-color: black;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 28 / 37
Positioning Box Model
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 29 / 37
Positioning Box Model
Box Model
Zsolt Tóth (UM) Cascading Style Sheets 2018 30 / 37
Positioning Box Model
Box Model
MarginOuter partDistancetop, right, bottom,left
PaddingInner partDistancetop, right, bottom,left
BorderSame as tablesstyle, widthborder-color
OutlineOuter border
Zsolt Tóth (UM) Cascading Style Sheets 2018 31 / 37
Positioning Layout, Floating
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 32 / 37
Positioning Layout, Floating
Positioning
Fixposition:fixed;
Browser windowtop, left, right, bottom
Relativeposition:relative;
relative to its default position
Absoluteposition:absolute;
parent elementLayer stackz-index
Zsolt Tóth (UM) Cascading Style Sheets 2018 33 / 37
Positioning Layout, Floating
Float
"Floating" objectsHorizontal positioningImagesText boxesLayout !!!<div> + CSSclear:both;
1 #leftMenu {min-width: 200px;
3 min-height: 450px;
max-width: 200px;5 float: left;
background-color:purple;
7 color: yellow;}
Zsolt Tóth (UM) Cascading Style Sheets 2018 34 / 37
Positioning Layout, Floating
@media
Same pageDifferent type of devicesStyle per device type
allscreenhandheldprintprojectiontv
@media screen2 {
p.test {4 font-family:
verdana,sans-serif;
font-size:14px;}6 }@media print
8 {p.test {
10 font-size:20px;color:red;}
12 }
Zsolt Tóth (UM) Cascading Style Sheets 2018 35 / 37
CSS 3
Table of Contents
1 Introduction
2 CSSCascadingSyntax
3 DecorationsRangeText, LinkLists, Tables
4 PositioningBox ModelLayout, Floating
5 CSS 3
Zsolt Tóth (UM) Cascading Style Sheets 2018 36 / 37
CSS 3
CSS 3
Current standardBackward compatibilityGood news
border-radiuslinear-gradienttext-shadowtext-justify
font-face
2D & 3D transformationsAnimationscolumn-count
Other new UI elements
Zsolt Tóth (UM) Cascading Style Sheets 2018 37 / 37