1. HTML: <head> <link rel="stylesheet" type="text/css" href="example.css"> </head> <body> <p>this is a paragraph</p> </body> CSS: p{ color: red;

Size: px

Start display at page:

Download "1. HTML: <head> <link rel="stylesheet" type="text/css" href="example.css"> </head> <body> <p>this is a paragraph</p> </body> CSS: p{ color: red;"

Ambrose Bond
6 years ago
Views:

1 1

2 2

3 3

4 1. HTML: <head> <link rel="stylesheet" type="text/css" href="example.css"> </head> <body> <p>this is a paragraph</p> </body> CSS: p{ color: red; foto-size: 120%; 2. <head> <style> p { color: red; font-size:120%; </style> </head> <body> <p>this is a paragraph</p> </body> 3. <p style="color: red; font-size:120%; ">This is a paragraph</p> 4

5 /* This is a comment */ 5

6 1:A type selector is the name of HTML Tag. Html: <p>this is a paragraph</p> CSS: p{ color: orange; font-size: 22px; 2:Class selector is used for one or more elements. Apply the style to all the element matching the classname Html: <p class="red">this is a paragraph</p> <p class="blue">this is a paragraph</p> <h1 class="red">this is a heading</h1> <h1>this is normal heading without red color</h1> CSS: p{ font-size: 12px;.red{ color: red; 6

7 .blue{ color: blue; We can also combine type selector and class selector h1.red{ color:red; 3:ID selector is used for unique element. NOTE: Do NOT start an ID name with a number! <p class="red">this is a paragraph</p> <p class="blue">this is a paragraph</p> <p class="red" id="small">this is a paragraph</p> <p id="strong">my ID is Strong </p> <h1 id="strong">my ID is Strong also </h1> <h1 id="chapter1">h1 and chapter 1<h1> <p id="chapter1">i'm not belong to Chapter1</p> <p class="red" id="strong">this is a paragraph</p> CSS: p{ font-size: 12px;.red{ color: red;.blue{ color: blue; #strong{ font-size: 40px; h1#chapter1{ text-align:center; 6

8 You can try rearranging the lines in your CSS file to show that the order has no effect. The class selectors.carrot and.spinach have priority over the tag selector strong. The ID selector #first has priority over the class and tag selectors. 7

9 pseudo-class is a keyword added to selectors that specifies a special state of the element to be selected. For example :hover will apply a style when the user hovers over the element specified by the selector. <a href= to google</a> a:link {color: green; a:hover {color: red; <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>picnic-under Construction</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="description content="picnic Under Construction Page"> </head> <body> <div id="header_nav"> 8

10 <ul> <li><a href=" " title="blog">blog</a></li> <li><a href="about.html" title="about Me">About Me</a></li> </ul> </div> <div id="top_container"> <h3>introduction</h3> <p>each week Picnic whips up seasonal recipes to share with you. Get excited to craft some creative food without the hassle of meal planning or remembering what to buy at the store. We ll help you cook seasonally, eat consciously, and live well.</p> <hr> </div> <div id="box"> <h1>picnic</h1> <h2>seasonal Recipes, Enjoy every minute.</h2> <strong >Thanks for visiting!</strong> <p>we are working very hard on a new website now. While you are waiting, why not send a message for updates?</p> </div> <div id="form"> <form> <table> <tr> <td>name</td> <td><input type="text" id="name"></td> </tr> <tr> <td>gender</td> <td> <input type="radio" id="m" name="gender">male<br/> <input type="radio" id="f" name="gender">female </td> </tr> <tr> <td> </td> <td><input type=" " id=" "></td> </tr> 8

11 <tr> <td>kind of contact</td> <td> <select> <option value="update">ask for update</option> <option value="membership">membership Questions</option> <option value="other">others</option> </select> </td> </tr> <tr> <td>message</td> <td><textarea></textarea></td> </tr> </table> </div> <div id="footer"> <p>follow us on <a href=" " title="twitter"><img src=" alt="twitter" width="48" height="36"></a></p> <a href="/faq" title="questions we answer a lot of the time">frequently Asked Questions</a> <p>picnic: Owned & Copyright by <a href=" <footer> </body> </html> body{ background-color:#fff; padding:20px; font-family: helvetica, arial, sans-serif; a:hover { padding: 1px 10px 1px 10px; color: #fff; background: #555; border-radius: 3px; border: 1px outset rgba(50,50,50,.5); font-family: georgia, serif; 8

12 font-size: 14px; font-style: italic; text-decoration: none; 8

13 <div id="top_container"> <h3>introduction</h3> <right><p>each week Picnic whips up seasonal recipes to share with you. Get excited to craft some creative food without the hassle of meal planning or remembering what to buy at the store. We ll help you cook seasonally, eat consciously, and live well.</p> <right> <hr> </div> #top_container p{color:green; #top_container right{float:right; width:200px 9

14 10

15 h1,p{font-family:fantasy; 11

16 p#green{color:green; p#right{text-align: right; p#un{ text-decoration: underline; p#ind{text-indent: 2em; p#ab{ font-size: small; p#px{ font-size: 24px; p#em{ font-size: 1.2em; p#per{ font-size: 180%; p#se{ font-family: "Time New Roman", Garamond, serif; p#sa{ font-family: Helvetica, "MS Verdana", sans-serif; p#no{ font-style: normal; p#i{ font-style: italic; p#ob{ font-style: oblique; p#eight{ font-weight: 800; p#nine{ font-weight: 900; ul{ list-style-image: url(images/list.gif); <ul> <li>list item1</li> 12

17 <li>list item2</li> <li>list item3</li> </ul> a:link, a:visited{ color: #ff0000; text-decoration: underline; a:hover, a:active{ color: #0000ff; text-decoration: none; <p>jump to <a href=" <p>jump to <a href=" 12

18 To calculate the full size of an element, you must also add the padding, borders and margins. The total width of the element in the example below is 300px: width:250px; padding:10px; border:5px solid gray; margin:10px; The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin 13

19 In our Picnic example: <!DOCTYPE html> <html lang="en-gb"> <head> <meta charset="utf-8"> <title>picnic-under Construction</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="description content="picnic Under Construction Page"> </head> <body> <div id="header_nav"> <ul> <li><a href=" " title="blog">blog</a></li> <li><a href="about.html" title="about Me">About Me</a></li> </ul> </div> <div id="top_container"> <h3>introduction</h3> 14

20 <p>each week Picnic whips up seasonal recipes to share with you. Get excited to craft some creative food without the hassle of meal planning or remembering what to buy at the store. We ll help you cook seasonally, eat consciously, and live well.</p> </div> <div id="box"> <h1>picnic</h1> <h2>seasonal Recipes, Enjoy every minute.</h2> <strong >Thanks for visiting!</strong> <p>we are working very hard on a new website now. While you are waiting, why not send a message for updates?</p> </div> <div id="form"> <form> <table> <tr> <td>name</td> <td><input type="text" id="name"></td> </tr> <tr> <td>gender</td> <td> <input type="radio" id="m" name="gender">male<br/> <input type="radio" id="f" name="gender">female </td> </tr> <tr> <td> </td> <td><input type=" " id=" "></td> </tr> <tr> <td>kind of contact</td> <td> <select> <option value="update">ask for update</option> <option value="membership">membership Questions</option> <option value="other">others</option> </select> 14

21 </td> </tr> <tr> <td>message</td> <td><textarea></textarea></td> </tr> </table> </div> <div id="footer"> <p>follow us on <a href=" " title="twitter"><img src=" alt="twitter" width="48" height="36"></a></p> <a href="/faq" title="questions we answer a lot of the time">frequently Asked Questions</a> <p>picnic: Owned & Copyright by <a href=" <footer> </body> </html> IN CSS, we add: #top_container{ padding:20px; margin:10px; background-color:beige; #box { padding:20px; margin:10px; background-color:greenyellow; We can add border: border-style: solid; border-color: yellow; margin: auto; /* box is horizontally centered, 0 margin on top and bottom */ You can also try these in the empty test file: CSS: 14

22 p{ width: 300px; height: 100px; background-color: red; p#pad{ padding: 10px 20px; HTML: <p>this is a paragraph</p> <p id="pad">this is a parapraph with padding</p> Css: p{ width: 300px; height: 100px; border-style: solid; border-color: red; HTML: <p>this is a paragraph</p> p#thin{ border-width: thin; p#med{ border-width: medium; p#thick{ border-width: thick; p{ width: 300px; height: 100px; background-color: red; p#mar{ margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; <p>this is a paragraph</p> <p id="mar">this is a parapraph with margin</p> 14

23 #box { padding:20px; margin:10px; /*background-color:greenyellow;*/ background-image:url( background-repeat: no-repeat; 15

24 static The default. The element's box is laid out automatically according to the normal flow. The top, right, bottom, and left properties do not apply. relative The box's position is calculated according to the normal flow. Plus, the 'top', 'right', 'bottom', and 'left' properties apply. This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect ofposition:relative on table-*-group, tablerow, table-column, table-cell, and table-caption elements is undefined. Note:For relatively positioned elements, the top or bottom property specifies the vertical offset from the normal position and the left or right property specifies the horizontal offset. absolute The box is taken out of the normal flow. The box's position (and possibly size) is specified with the 'top', 'right', 'bottom', and 'left' properties. Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block that has its position property set to relative, absolute, or fixed. If a positioned ancestor doesn't exist, the initial container is used. Absolutely positioned boxes can have margins, they do not collapse with any 16

25 other margins. Note:For absolutely positioned elements, the top, right, bottom, and left properties specify offsets from the edge of the element's containing block (what the element is positioned relative to). The margin of the element is then positioned inside these offsets. Most of the time, absolutely positioned elements have auto values of height and width computed to fit the contents of the element. However, non-replaced absolutely positioned elements can be made to fill the available space by specifying (as other than auto) both top and bottom and leaving height unspecified (that is, auto). Likewise for left, right, and width. Except for the case just described of absolutely positioned elements filling the available space: If both top and bottom are specified (technically, not auto), top wins. If both left and right are specified, left wins when direction is ltr (English, horizontal Japanese, etc.) and right wins when direction is rtl (Persian, Arabic, Hebrew, etc.). fixed According to the 'absolute' model, the box is taken out of the normal flow but does not move when scrolled. The box's position is specified with the 'top', 'right', 'bottom', and 'left' properties. Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and doesn't move when scrolled. When printing, position it at that fixed position on every page. Inherit Takes the same specified value as the property for the element's parent. <!DOCTYPE HTML > <html> <head> <title>html Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> div {position: relative; border: thin solid; background-color: beige; margin-bottom: 10px; h1 {border: thin solid; background-color: greenyellow; font-size: 28px; p {border: thin solid; background-color: #CCCCCC; #tst1 {position: static; #tst2 {position: relative; top: 20px; left: 50px; #tst3 {position: absolute; top: 30px; left: 20px; #tst4 {position: fixed; top: 445px; left: 60px; </style> 16

26 </head> <body> <div> <p id="tst1">this text box position = static.</p> <h1>this text box follows the static positioned text box.</h1> </div> <div> <p id="tst2">this text box position = relative. Top = 20px and Left = 50px.</p> <h1>this text box follows the relative positioned text box.</h1> </div> <div> <p id="tst3">this text box position = absolute. Top = 30px and Left = 20px.</p> <h1>this text box follows the absolute positioned text box.</h1> </div> <div> <p id="tst4">this text box position = fixed. This box will not move when the test window is scrolled.</p> <h1>this text box follows the fixed positioned text box.</h1> </div> </body> </html> 16

27 17

28 Once boxes are generated, the CSS engine needs to position them on the layout. In order to do that, it will use one of the following algorithm: The normal flow in which it will lay each box one after the other. The floats algorithm which will extract the box from the normal flow and put it to the side of the current box, creating typographic pull quotes on the side of the containing box. The absolute positioning scheme in which a box is absolutely, though the coordinate system origin may vary on the document. The absolute positioned element can cover other elements positioned using other schemes. Normal flow In the normal flow boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS position is set to the value static or relative, and if the CSS float is set to the value none. There is two sub-cases in the normal flow: static positioning and relative positioning: In static positioning, triggered by the value static of the position property, the boxes are drawn at the exact position defined by the normal flow layout. In relative positioning, triggered by the value relative of the position property, the boxes are drawn with an offset defined by the top, bottom, left and right CSS properties. 18

29 Floats In the float positioning scheme, boxes, called floating boxes or simply floats, are positioned at the beginning or end of the current line. This leads to the property that text, and more generally boxes part of the normal flow flow along the edge of these boxes, except if told differently by the clear CSS property. The float positioning scheme is selected by setting the float CSS property to a value different than none when position is set to static orrelative. If float is set to left, the float is positioned at the beginning of the line box, shrinking it; if set to right, the float is positioned at the end of the line box, shrinking it too. Absolute positioning In the absolute positioning scheme, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block using the top, bottom, left and right CSS properties. An element is absolutely positioned if the position is set to absolute or fixed. A fixed positioned element is an absolutely positioned element that its containing block is the viewport. Such element will be fixed on the screen when scrolling as the viewport is not moving. 18

<!DOCTYPE HTML > <html> <head> <title>html Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> </style> </head> <body> <img src="http://hektor.

30 <!DOCTYPE HTML > <html> <head> <title>html Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <style type="text/css"> </style> </head> <body> <img src=" alt= Picnic_Logo"> <p>seasonal Recipes, Enjoy every minute.</p> <p >We are working very hard on a new website now. While you are waiting, why not send a message for updates?</p> </body> </html> If we add these in to style between<style type="text/css"> </style> p {background-color:beige; text-align:center;width:430px; margin-left:auto; marginright:auto; 19

31 img{margin-left:auto; margin-right:auto;display:block; 3 must setting in Centering things: 1. Block level element 2. Setting the width 3. Left, right margin set to auto A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements:<h1><p><div>, An inline element only takes up as much width as necessary, and does not force line breaks. Examples of inline elements: <span>, <a>,<image> Image element is a inline element, not a block level element, that s why we need to set it to {display:block; 19

32 20

33 A floated box is taken out of the document flow and shifted as far as possible to the left or to the right, depending on the specified floating direction. As far as possible usually means until the outer edge of the float touches the edge of the containing block (the inside of its padding, if any). Thus, for float:left the box is moved to the left until the left margin of the float touches the left edge of the parent. If there is already a box floated to the left when we float another box in the same direction, the second box will stop when it touches the first box. In other words, floats don t climb on top of one another. A very simple example: Add float:right; clear: both; to example 1 the p element style. (p {float:right; clear: both; background-color:beige; text-align:center;width:430px; margin-left:auto; margin-right:auto;) Because these part contain so much information, there is a recommend reading I would like to give it to you: 21

34 Start with html: <!DOCTYPE html > <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <titl>3 column example</title> <link rel="stylesheet" type="text/css" href="layout.css"> </head> <body> <div id="header">header</div> <div id="main">main content</div> <div id="sidebar">sidebar</div> <div id="nav">navigation</div> <div id="footer">footer</div> </body> </html> layout.css: body { background-color:white; font-size:25px; 22

35 #header { background-color: #369; color: #fff; #sidebar { background-color: #ff6; #nav { background-color: #ddd; #footer { border-top: 1px solid #369; Add wrap that wraps around the three columns. <div id="header">header</div> '''<div id="wrapper">''' <div id="main">main content</div> <div id="sidebar">sidebar</div> <div id="nav">navigation</div> '''</div>''' <div id="footer">footer</div> Then assign the widths to the navigation and the sidebar and set the width constraints and general centering body { margin: 0 auto; min-width: 40em; max-width: 56em; background-color:white; font-size:25px; #sidebar { '''width: 13em;''' '''padding: 0 0.5em;''' background-color: #ff6; #nav { 22

36 '''width: 11em;''' '''padding: 0 0.5em;''' background-color: #ddd; Now,you have your basic building blocks, but they just appear one after the other. You want three columns, so you need to start floating them. #main { '''float: left;''' #sidebar { '''float: left;''' width: 13em; padding: 0 0.5em; background-color: #ff6; #nav { '''float: left;''' width: 11em; padding: 0 0.5em; background-color: #ddd; That floats them, all right, but they re in the wrong order. Also, the main content column is too narrow. And what happened to our footer? The problem is that the three columns are floated, which takes them out of the document flow. The footer is pushed up against the header and the line box containing the text is shortened so that the word Footer appears to the right of the floats. You can remedy this by making sure the footer is cleared from all the floated columns. Add the following rule to the CSS file: #footer { '''clear: left;''' border-top: 1px solid #369; Now for the three columns. The key to this whole trick is the wrapper element. We will set a left and right margin on it that corresponds to the widths of your side columns (the navigation and the sidebar). The main content column will occupy the whole width of the wrapper, while the side columns will be shifted into the space vacated by the margins. First, set up the margins for the wrapper #wrapper { 22

37 margin: 0 14em 0 12em; padding: 0 1em; make the main content column take up the full width of its wrapper parent #main { float: left; '''width: 100%;''' '''background-color:greenyellow ;''' since the #main column is 100% wide, it pushes the sidebar down. How do you get it to go up and stay next to #main, although #main occupies the whole width? Let s do it in two small steps: first, you ll move it up; then you ll shift it out into the margin. #sidebar { float: left; width: 13em; padding: 0 0.5em; background-color: #ff6; '''margin-left: -14em;''' By setting a negative left margin equal to the width of the sidebar, we move the element back into the wrapper and it isn t pushed down. The problem is that it overlaps the content. You need to shift it out into the margin without making it drop down again, and this is where relative positioning finally comes in. It does precisely what we want: it shifts the generated box without moving the element itself. #sidebar { float: left; width: 13em; padding: 0 0.5em; background-color: #ff6; margin-left: -14em; '''position: relative;''' '''left: 15em;''' Note that you had to shift it 15em, not 14em that s because there s 1em of right padding on the wrapper that you need to get past. Now you need to do the same with the navigation this is done in a similar way, but it has a twist of its own. Moving and shifting the sidebar was easy, because the movements were essentially the same as the column s width: 14em negative margin and a 14em+1em shift to the right. But the navigation column needs to be moved all the way across the content column and then be shifted even further out into the margin. Our friend here is percentages. A percentage value on the margins of the navigation column will be relative to the width of its parent, the wrapper. You want to move the column all the way across the wrapper add the property highlighted 22

38 below to the rule for #nav: #nav { float: left; width: 11em; padding: 0 0.5em; background-color: #ddd; '''margin-left: -100%;''' shift it out into the margin #nav { float: left; width: 11em; padding: 0 0.5em; background-color: #ddd; margin-left: -100%; '''position: relative;''' '''right: 13em;''' 22

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties