Download as PDF, PPTX
Uploaded byMichaela Lehr
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
The document presents a guide to HTML and CSS for designers, covering key topics such as content structure, typography, layout, and graphical elements. It includes practical examples of HTML tags, CSS styles, and responsive design techniques. Additionally, it highlights the importance of JavaScript for behavior and interaction in web design.
HTML und CSS für Designer / HTML & CSS for designers (PUBKON 2014)
- 1. HTML UND CSS FÜR DESIGNER Pubkon 2014, MichaelaLehr @fischaelameer
- 5.
- 6.
- 8.
- 11.
- 12. <h1>Headline 1</h1> <h2>Headline 2</h2> <p>Paragraph</p> <footer> <p>Footerparagraph</p> </footer> <ol> <li>List item</li> <li>List item</li> </ol> <ul> <li>List item</li> <li>List item</li> </ul>
- 13. <h1>The Internet <span>hasa human face</span></h1> <h1>The Internet<br> <span>has a human face</span> </h1> <h1>The Internet<br> <span class="t-headline-decent">has a human face</span> </h1>
- 14.
- 15.
- 16. <img src="images/bt14.064.jpg" alt="Whitemouse holding a teddy bear.">
- 18.
- 19.
- 20.
- 21. <!DOCTYPE html> <html lang="en"> <head> <title>TheInternet with a human face</title> </head> <body> ... </body> </html>
- 22. <!DOCTYPE html> <html lang="en"> <head> <title>TheInternet with a human face</title> <link rel="stylesheet" href="styles/main.css"> </head> <body> ... </body> </html>
- 23.
- 26.
- 27. element { eigenschaft: wert; } .klasse{ eigenschaft: wert; } #id { eigenschaft: wert; }
- 28.
- 29. h1, h2 { font-family: 'Exo2',Sans-Serif; }
- 30.
- 31. @font-face { font-family: 'Exo2'; src:url('fonts/Exo-2/Exo2-Black.woff') format('woff'), url('fonts/Exo-2/Exo2-Black.ttf') format('truetype'); }
- 32. @font-face { font-family: 'Exo2'; src:url('fonts/Exo-2/Exo2-Black.woff') format('woff'), url('fonts/Exo-2/Exo2-Black.ttf') format('truetype'); font-style: normal; font-weight: 900; }
- 33. @font-face { font-family: 'Exo2'; src:url('fonts/Exo-2/Exo2-LightItalic.woff') format('woff'), url('fonts/Exo-2/Exo2-LightItalic.ttf') format('truetype'); font-style: italic; font-weight: 300; } h2 { font-family: 'Exo2', Sans-Serif; font-style: italic; font-weight: 300; }
- 34.
- 35.
- 36.
- 37. h2 { font-size: 20px; line-height:1.5rem; }
- 39.
- 43.
- 45. .l-copytext img { width:100%; } .l-copytext ol { margin-left: -2em; } .l-copytext ol img { margin: 1em 0; }
- 48.
- 49.
- 51. <section class="title-container"> <h1 id="title">TheInternet <br><span class="t-headline-decent">with a human face</span></h1> </section> .title-container { margin: 0 0 4rem 0; width: 100%; height: 100%; }
- 52. .title-container { background-image: url('../images/bt14.001.jpg'); background-position:50% 50%; background-size: cover; margin: 0 0 4rem 0; width: 100%; height: 100%; }
- 55. .title-container h1 { position:static | relative | absolute | fixed; }
- 56. <section class="title-container"> <h1 id="title">TheInternet <br><span class="t-headline-decent">with a human face</span></h1> </section> .title-container h1 { position: absolute; left: 10%; bottom: 10%; } .title-container { background-image: url('../images/bt14.001.jpg'); background-position: 50% 50%; background-size: cover; margin: 0 0 4rem 0; position: relative; width: 100%; height: 100%; }
- 58. <a href="https://twitter.com/anildash" target="_blank">AnilDash</a> a { color: #00a0a0; font-weight: 700; text-decoration: none; } a:hover, a:active { border-bottom: 4px solid #00a0a0; }
- 60.
- 61.
- 63.
- 64. $(document).on('ready', function (){ var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; });
- 65. $(document).on('ready', function (){ var animateElement = function (selektor) { $(selektor).hide().slideDown(1000); }; animateElement('#title'); });
- 67.
- 68. body { color: #333333; font-family:'Gentium', Serif; font-size: 125%; font-weight: 400; line-height: 1.5em; }
- 69. body { color: #333333; font-family:'Gentium', Serif; font-size: 100%; font-weight: 400; line-height: 1.5em; } @media screen and (min-width: 900px) { body { font-size: 125%; } }
- 72. a { color: #00a0a0; font-weight:700; text-decoration: none; transition: border 0.1s ease-in; } a:hover, a:active { border-bottom: 4px solid #00a0a0; } $color-primary: #00a0a0; a { color: $color-primary; font-weight: 700; text-decoration: none; transition: border 0.1s ease-in; &:hover, &:active { border-bottom: 4px solid $color-primary; } }
- 75.
- 78.
- 79.