Creative Web 2 - CSS
-
Upload
lukas-oppermann -
Category
Design
-
view
140 -
download
3
Transcript of Creative Web 2 - CSS
![Page 1: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/1.jpg)
Creative Web 2.
![Page 2: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/2.jpg)
Linking to files can be done using a relativ path or and absolute path
![Page 3: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/3.jpg)
An absolute path is…a path which starts from the domain
![Page 4: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/4.jpg)
Examples of absolute paths!"
http://domain.com/img/image.png""
btk-fh.de/css/style.css
![Page 5: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/5.jpg)
A relative path is…a path relative from the current file
![Page 6: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/6.jpg)
root
site
imgs
css
← index.html (current file)
![Page 7: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/7.jpg)
Linking from…"index.html to base.css in folder css
![Page 8: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/8.jpg)
root
site
imgs
css
index.html
base.css/css/base.css
![Page 9: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/9.jpg)
Linking from…"index.html to img.png in folder imgs
![Page 10: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/10.jpg)
root
site
imgs
css
index.html
img.png
../imgs/img.png!(../ moves one directory up)
![Page 11: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/11.jpg)
CSS
![Page 12: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/12.jpg)
Cascading Style Sheets are…"a language to define the style of HTML elements
![Page 13: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/13.jpg)
Advantages of css…separating design (css) from logic !and structure (html). This makes !the design easily reusable and !maintainable."
![Page 14: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/14.jpg)
Linking external stylesheets!"
<link rel="stylesheet" href="./libs/css/base.css" type="text/css" media="screen" charset="utf-8" />""
href is the relative or absolute path to the file.""
media is the media the stylesheet is used for, "mainly screen and print."
![Page 15: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/15.jpg)
In a css file you define a css rule!"
selector{!! attribute: value;!}
![Page 16: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/16.jpg)
A selector tells css which element to apply the styles to.
![Page 17: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/17.jpg)
#unique ID-selectors start with a # and select the element with the id unique.""
e.g. <div id=“unique”>…""
IDs can only be used once per html-page.""
IDs consist of letters A-Z, numbers and underscore _ NO spaces, or other special characters.
ID Selector
![Page 18: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/18.jpg)
.reuse class-selectors start with a . and select all elements with the class reuse.""
e.g. <div class=“reuse”>…""
Classes can be used multiple times per html-page.""
Classes consist of letters A-Z, numbers and minus - NO spaces, or other special characters
Class Selector
![Page 19: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/19.jpg)
div element-selectors name the tag name and select all elements of the type div.""
e.g. <div>…""
Element-selectors should be used with caution because they are not very specific.
Element Selector
![Page 20: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/20.jpg)
Selector weight (importance)
![Page 21: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/21.jpg)
When multiple css rules apply to an element and change the same property e.g. color the weight of the selectors defines which one will win.
![Page 22: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/22.jpg)
div{!! color: red;!}!".reuse{!! color: blue;!}!"#unique{!! color: purple;!}
<div id=“unique” class=“reuse”>Text</div>"
A class has more weight than an element-selector
An id has more weight than a class-selector
![Page 23: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/23.jpg)
.font-red{!! color: red;!}!".reuse{!! color: blue;!}
<div class=“reuse font-red”>Text</div>"
Both class-selector have the same weight, the last selector in the css file wins.
![Page 24: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/24.jpg)
.font-red.reuse{!! color: red;!}!".reuse{!! color: blue;!}
<div class=“reuse font-red”>Text</div>"
Two class-selector have more weight, than one selector, so two classes win.
![Page 25: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/25.jpg)
CSS Selectors are read from !right to left
![Page 26: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/26.jpg)
Find all li-elements
Find all of those li-elements inside an element with a class reuse
Find all of those li-elements inside an element with a class reuse which are inside the element with the id unique
#unique .reuse li{!! color: red;!}!
![Page 27: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/27.jpg)
Optimize css by being specific on the right of selector.""
You could add a class .navi to those li-elements and change the css to
.navi{!! color: red;!}!
![Page 28: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/28.jpg)
Javascript
![Page 29: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/29.jpg)
Linking a javascript files!"
<script type="text/javascript" src=“./libs/js/javascript.js“></script>""
src is the relative or absolute path to the file.""
Javascript files should always be linked just "before the closing tag of the body </body>
![Page 30: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/30.jpg)
Javascript
Inside the js file you can write javascript without "declaring any head, etc. e.g.""
alert(‘treeeees!’);""
This is a function and will create a popup with "the text treeeees! Which tells you that you "linked the file correctly.
![Page 31: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/31.jpg)
Patterns
![Page 32: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/32.jpg)
Navigations are build from lists
![Page 33: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/33.jpg)
Typically a navigation is a list of links
<ul>!! <li><a href=“index.html”>home</a></li>! !! <li><a href=“about.html”>about</a>!! ! <ul class=“sub-menu”>!! ! ! <li><a href=“me.html”>me/a></li>!! ! ! <li><a href=“cv.html”>CV</a></li>!! </li>!</ul>
![Page 34: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/34.jpg)
Navigations are build from lists
![Page 35: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/35.jpg)
Typically a navigation is a list of links
<ul>!! <li><a href=“index.html”>home</a></li>! !! <li><a href=“about.html”>about</a>!! ! <ul class=“sub-menu”>!! ! ! <li><a href=“me.html”>me/a></li>!! ! ! <li><a href=“cv.html”>CV</a></li>!! </li>!</ul>
![Page 36: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/36.jpg)
Assignments
1. Write 3 html pages with a navi <ul> linking themtogether."• Use the same stylesheet for all three files"• Add content and style it using css"• try at lest 5 css3 properties like gradient,
border-radius, transform, etc."• try to reuse css styles by using multiple classes
per element when it makes sense
![Page 37: Creative Web 2 - CSS](https://reader036.fdocuments.us/reader036/viewer/2022062419/558b3005d8b42a51468b457d/html5/thumbnails/37.jpg)
Assignments
2. Create and link a javascript file with the alert inside," so that you see the alert message when you open the html file in your browser""3. Read this article to get an idea what JSON is http://de.wikipedia.org/wiki/JavaScript_Object_Notation""4. If you know JS already read up on handlebars.js