eg-146:lecture16
Differences
This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
eg-146:lecture16 [2012/03/19 19:12] – [Formatting Text with Styles] eechris | eg-146:lecture16 [2012/03/19 20:57] – [Changing the Cursor] eechris | ||
---|---|---|---|
Line 32: | Line 32: | ||
---- | ---- | ||
- | The complete set of examples is here http:// | + | The complete set of examples is here http:// |
+ | Here is the HTML: | ||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | </ | ||
+ | < | ||
+ | |||
+ | <header role=" | ||
+ | <nav> | ||
+ | <ul class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | <article class=" | ||
+ | <h1 id=" | ||
+ | | ||
+ | < | ||
+ | | ||
+ | < | ||
+ | |||
+ | <section class=" | ||
+ | <h2 id=" | ||
+ | |||
+ | <!-- You could mark these images in an unordered list, too --> | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | |||
+ | <section class=" | ||
+ | <h2 id=" | ||
+ | | ||
+ | <!-- You could mark these images in an unordered list, too --> | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | <img src=" | ||
+ | |||
+ | < | ||
+ | |||
+ | < | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | Here is the final CSS: | ||
+ | <code css> | ||
+ | @charset " | ||
+ | |||
+ | body { | ||
+ | background: #eef; | ||
+ | color: #909; | ||
+ | font: 100% " | ||
+ | } | ||
+ | |||
+ | h1, | ||
+ | h2 { | ||
+ | color: navy; | ||
+ | font: 1.375em "Arial Black", | ||
+ | letter-spacing: | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | text-transform: | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 1.15em; | ||
+ | font-variant: | ||
+ | } | ||
+ | |||
+ | p { | ||
+ | font-size: .875em; | ||
+ | line-height: | ||
+ | text-align: justify; | ||
+ | text-indent: | ||
+ | } | ||
+ | |||
+ | em { | ||
+ | font-weight: | ||
+ | } | ||
+ | |||
+ | /* Links */ | ||
+ | a:link { | ||
+ | color: #74269d; | ||
+ | font-weight: | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | a:visited { | ||
+ | color: #909; | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | a:hover { | ||
+ | color: #c3f; | ||
+ | font-weight: | ||
+ | text-decoration: | ||
+ | } | ||
+ | |||
+ | /* Table of Contents navigation */ | ||
+ | .toc { | ||
+ | background: #ebc6f9; | ||
+ | } | ||
+ | |||
+ | .toc a { | ||
+ | font-size: .75em; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Constructing a Style Stylesheet ===== | ||
+ | Add your own notes! | ||
+ | * [[#Font Families and Shapes]] | ||
+ | * [[#Font Size and Line Height]] | ||
+ | * [[#Colour, Spacing and Indents]] | ||
+ | * [[#White Space and Other Decorations]] | ||
+ | |||
+ | ===== Font Families and Shapes ===== | ||
+ | |||
+ | * [[#Choosing a Font Family]] | ||
+ | * [[# | ||
+ | * [[#Creating Italics]] | ||
+ | * [[#Applying Bold Formatting]] | ||
+ | |||
+ | |||
+ | ===== Choosing a Font Family ===== | ||
+ | ===== Specifying Alternate Fonts ===== | ||
+ | ===== Creating Italics ===== | ||
+ | ===== Applying Bold Formatting ===== | ||
+ | |||
+ | |||
+ | |||
+ | ===== Font Size and Line Height ===== | ||
+ | |||
+ | * [[#Setting the Font Size]] | ||
+ | * [[#Setting the Line Height]] | ||
+ | * [[#Setting All Font Values at Once ]] | ||
+ | |||
+ | ===== Setting the Font Size ===== | ||
+ | ===== Setting the Line Height ===== | ||
+ | ===== Setting All Font Values at Once ===== | ||
+ | |||
+ | * This is an advanced technique. | ||
+ | * The order is important and you may find it easier to build font declarations up step by step. | ||
+ | |||
+ | |||
+ | ==== Colour, Spacing and Indents ===== | ||
+ | |||
+ | * [[#Setting the Colour]] | ||
+ | * [[#Changing the Text's Background]] | ||
+ | * [[# | ||
+ | * [[#Adding Indents]] | ||
+ | |||
+ | ===== Setting the Colour ===== | ||
+ | ===== Changing the Text's Background ===== | ||
+ | ===== Controlling Spacing ===== | ||
+ | ===== Adding Indents ===== | ||
+ | |||
+ | |||
+ | ===== White Space and Other Decorations ===== | ||
+ | |||
+ | * [[#Setting White Space Properties]] | ||
+ | * [[#Aligning Text]] | ||
+ | * [[#Changing the Text Case]] | ||
+ | * [[#Using Small Caps]] | ||
+ | * [[# | ||
+ | |||
+ | ===== Setting White Space Properties ===== | ||
+ | ===== Aligning Text ===== | ||
+ | ===== Changing the Text Case ===== | ||
+ | ===== Using Small Caps ===== | ||
+ | ===== Decorating Text ===== | ||
===== Layout with Styles ===== | ===== Layout with Styles ===== | ||
+ | * [[# | ||
+ | * [[#Another Example Document]] | ||
+ | * [[#The Box Model]] | ||
+ | * [[#Types of Positioning]] | ||
+ | * [[#Box Formatting]] | ||
+ | * [[#Example 2: Developing a Positioning Style Sheet]] | ||
+ | |||
+ | ===== Introducing Layout with Styles ===== | ||
+ | |||
+ | * Layout with CSS has advantages over other methods (such as tables and frames) | ||
+ | * Good for liquid layouts (which resize with browser) | ||
+ | * Lots of Advnatages (See notes) | ||
+ | * Disadvantages | ||
+ | * Some older browsers are buggy((Notably IE 6 and IE 7)) | ||
+ | * Really old browsers provide no support for layout. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | < | ||
+ | Advantages of Layout with Styles | ||
+ | * Can apply layout to all documents and change with one style sheet | ||
+ | * Smaller files: HTML+CSS usually less than HTML with lots of font tags, tables, etc. Plus CSS file can be cached so loaded only once for a whole site. | ||
+ | * HTML code is cleaner and easier to edit. | ||
+ | * Standard so supported in future. | ||
+ | </ | ||
+ | |||
+ | |||
+ | |||
+ | ===== Another Example Document ===== | ||
+ | The same [[http:// | ||
+ | |||
+ | * Only the style sheet changes | ||
+ | * Different effects are achieved with style sheets alone. | ||
+ | |||
+ | ---- | ||
+ | |||
+ | View (edited) source | ||
+ | <code html> | ||
+ | < | ||
+ | <!--[if lt IE 7 ]> <html lang=" | ||
+ | <!--[if IE 7 ]> <html lang=" | ||
+ | <!--[if IE 8 ]> <html lang=" | ||
+ | <!--[if gt IE 8]>< | ||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | <link rel=" | ||
+ | <!--[if lt IE 9]> | ||
+ | <script src=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | NOTE: The conditional comments near the top of this page apply a class to | ||
+ | the < | ||
+ | if a visitor views the page with Internet Explorer, class=" | ||
+ | in the < | ||
+ | when that browser needs a different style rule to display the page nicely. | ||
+ | See base.css for a few instances in which a selector begins with | ||
+ | .ie6 or .ie7 to target IE6 or IE7, respectively. There are no IE8-specific | ||
+ | styles required, but if there were, they would begin with .ie8. | ||
+ | | ||
+ | All other browsers ignore these rules. | ||
+ | --> | ||
+ | </ | ||
+ | < | ||
+ | <div id=" | ||
+ | <div id=" | ||
+ | <!-- ==== START MASTHEAD ==== --> | ||
+ | <header id=" | ||
+ | <p class=" | ||
+ | | ||
+ | <div> | ||
+ | <nav role=" | ||
+ | <ul class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | | ||
+ | <form method=" | ||
+ | <label for=" | ||
+ | <input type=" | ||
+ | <input type=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | <!-- end #masthead --> | ||
+ | | ||
+ | <!-- ==== START MAIN CONTENT ==== --> | ||
+ | <div id=" | ||
+ | < | ||
+ | | ||
+ | <!-- Start Entry #1 --> | ||
+ | <section class=" | ||
+ | < | ||
+ | <h2 lang=" | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | | ||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | <!-- end .entry #1 --> | ||
+ | | ||
+ | <!-- Start Entry #2 --> | ||
+ | <section class=" | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | <!-- end .entry #2 --> | ||
+ | | ||
+ | <!-- Start Entry #3 --> | ||
+ | <section class=" | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | <p class=" | ||
+ | |||
+ | <div class=" | ||
+ | < | ||
+ | | ||
+ | <p>I never get tired of coming here. There are rows and rows of busy stalls with fresh fruit and vegetables, and spices and nuts. And more than a couple of crazy tourists like me taking pictures. I confuse the locals by talking to them in Catalan, but& | ||
+ | |||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | <!-- end .entry #3 --> | ||
+ | </ | ||
+ | <!-- end #main content --> | ||
+ | | ||
+ | <!-- ==== START SIDEBAR ==== --> | ||
+ | <div id=" | ||
+ | <aside class=" | ||
+ | < | ||
+ | | ||
+ | < | ||
+ | | ||
+ | < | ||
+ | |||
+ | < | ||
+ | | ||
+ | <p class=" | ||
+ | </ | ||
+ | |||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <ol reversed=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ol> | ||
+ | | ||
+ | <p class=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | | ||
+ | <!-- ==== START FOOTER ==== --> | ||
+ | <footer id=" | ||
+ | < | ||
+ | |||
+ | < | ||
+ | | ||
+ | <ul class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | </ul> | ||
+ | </ | ||
+ | <!-- end #footer --> | ||
+ | </ | ||
+ | <!-- #page --> | ||
+ | </ | ||
+ | <!-- #container --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | ===== Structuring your Page ===== | ||
+ | |||
+ | * Have a plan | ||
+ | * Use semantic elements, id and class to classify parts of your content. | ||
+ | * Arrange the order of content so that it will reproduce in old browsers and satisfy requirements for Search Engines((Known as Search Engine Optimization or SEO)) | ||
+ | |||
+ | |||
+ | |||
+ | ===== The Box Model ===== | ||
+ | |||
+ | * CSS treats your web page as if every element is enclosed in an invisible [[# | ||
+ | * Box //height//, //width//, // | ||
+ | |||
+ | **Table heading links to w3schools references on this subject.** | ||
+ | ^The CSS Box^[[http:// | ||
+ | |||
+ | < | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | <div style=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ===== Consequences of the Box Model ===== | ||
+ | |||
+ | * CSS can be used to determine the appearance and position of each element' | ||
+ | * Gives considerable control over layout. | ||
+ | * Element' | ||
+ | * Default representation can be changed by a style declaration. | ||
+ | * Elements are displayed in the order that the HTML flows from top to bottom | ||
+ | * Line breaks at the beginning and end of every block-level box. | ||
+ | |||
+ | |||
+ | |||
+ | ===== Types of Positioning ===== | ||
+ | |||
+ | * Leave the box in the flow -- the default (called //static//) | ||
+ | * Remove the box from the flow and specify its exact coordinates with respect either to: | ||
+ | * Its parent element (absolute) | ||
+ | * The browser window (fixed) | ||
+ | * Its default position in the flow (relative) | ||
+ | * If boxes overlap, their relative position (stacking order) can be specified using the so-called '' | ||
+ | |||
+ | |||
+ | |||
+ | ===== Box Formatting ===== | ||
+ | |||
+ | * Once its position is decided the following properties can be set: | ||
+ | * Size (height and width) | ||
+ | * Padding | ||
+ | * Border | ||
+ | * Margins | ||
+ | * Alignment | ||
+ | * Colour | ||
+ | * Some properties, particularly '' | ||
+ | |||
+ | ===== Case Study: Developing a Positioning Style Sheet ===== | ||
+ | This is the document as we want it to appear when it is finished | ||
+ | [http:// | ||
+ | |||
+ | ===== Document Structure ===== | ||
+ | |||
+ | * Open the [[http:// | ||
+ | * Examine the structure. | ||
+ | |||
+ | |||
+ | ===== The HTML5 display-role reset ===== | ||
+ | |||
+ | * For older browsers, ensures that new elements are set as blocks | ||
+ | * For IE browsers, we also need a JavaScript HTML5 fix (see the HTML5) | ||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code css> | ||
+ | charset " | ||
+ | |||
+ | /* Style new " | ||
+ | article, aside, figcaption, figure, footer, header, hgroup, menu, nav, section { | ||
+ | display: block; | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== The CSS Reset ===== | ||
+ | |||
+ | * Common technique, ensures that design starts from a blank slate on all browsers | ||
+ | * [[http:// | ||
+ | |||
+ | ---- | ||
+ | |||
+ | <code css> | ||
+ | /* CSS RESET | ||
+ | ------------------------------------------------ */ | ||
+ | /* http:// | ||
+ | v2.0 | 20110126 | ||
+ | | ||
+ | */ | ||
+ | |||
+ | html, body, div, span, applet, object, iframe, | ||
+ | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
+ | a, abbr, acronym, address, big, cite, code, | ||
+ | del, dfn, em, img, ins, kbd, q, s, samp, | ||
+ | small, strike, strong, sub, sup, tt, var, | ||
+ | b, u, i, center, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td, | ||
+ | article, aside, canvas, details, embed, | ||
+ | figure, figcaption, footer, header, hgroup, | ||
+ | menu, nav, output, ruby, section, summary, | ||
+ | time, mark, audio, video { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | font-size: 100%; | ||
+ | font: inherit; | ||
+ | vertical-align: | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | ===== Changing the Background ==== | ||
+ | |||
+ | To use a background image: | ||
+ | <code css> | ||
+ | #container { | ||
+ | background: url(../ | ||
+ | } | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | |||
+ | ==== To change the background colour ==== | ||
+ | |||
+ | <code css> | ||
+ | #page { background: #fef6f8 } | ||
+ | a: | ||
+ | a: | ||
+ | a:active { background: #F3CFB6; } | ||
+ | .logo a:hover { background: transparent; | ||
+ | .sidebar { background: #f5f8fa; } | ||
+ | </ | ||
+ | |||
+ | [[http:// | ||
+ | |||
+ | ===== Setting the Height or Width for the Element ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | |||
+ | |||
+ | |||
+ | ===== Setting the Margins around an Element ===== | ||
+ | |||
+ | ===== Adding Padding around an Element ===== | ||
+ | |||
+ | * Padding is extra space around the contents of an element but within the border. You can change the padding' | ||
+ | * When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right: | ||
+ | |||
+ | |||
+ | ===== Making Elements Float ===== | ||
+ | |||
+ | |||
+ | ===== Controlling Where Elements Float ===== | ||
+ | |||
+ | ===== Setting the Border ===== | ||
+ | |||
+ | ===== Offsetting Elements in the Natural Flow ===== | ||
+ | |||
+ | ===== Positioning Elements Absolutely ===== | ||
+ | |||
+ | ===== Positioning Elements in 3d ===== | ||
+ | |||
+ | ===== Determining How to Treat Overflow ===== | ||
+ | |||
+ | ===== Aligning Elements Vertically ===== | ||
+ | |||
+ | ===== Changing the Cursor ===== | ||
+ | |||
+ | |||
+ | |||
+ | ===== Displaying and Hiding Elements ===== | ||
+ | |||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | * [[http:// | ||
+ | ===== Positioning Elements Absolutely ===== | ||
+ | |||
+ | Affixing an Element to the Browser Window | ||
+ | |||
+ | When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed. | ||
+ | CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up and down. | ||
+ | |||
+ | #sidebar { position: fixed; width: 26%; } | ||
+ | |||
+ | #main { padding: 4px; } | ||
+ | |||
+ | [Affixing an element to the browser window] | ||
+ | |||
+ | This example can only really be appreciated by seeing it in action. | ||
+ | |||
+ | Notes | ||
+ | |||
+ | Making Elements Float | ||
+ | |||
+ | You can make elements float in a sea of text (or other elements). | ||
+ | You can use this technique to crete multi-column layouts, to create callout quotes, and more. | ||
+ | We already pushed the sidebar off to the right, now we'll float the main content to its left. | ||
+ | The navbuttons div will float next to the description rather than just under it. | ||
+ | |||
+ | #main { width: 75%; float: left; } | ||
+ | |||
+ | #navbuttons { width: 22em; float: right; } | ||
+ | |||
+ | [Floating elements] | ||
+ | Notes | ||
+ | |||
+ | Controlling Where Elements Float (1) | ||
+ | |||
+ | You can control which elements an element can float next to an which cannot. | ||
+ | Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise. | ||
+ | |||
+ | [The footer shouldn' | ||
+ | |||
+ | Controlling Where Elements Float (2) | ||
+ | |||
+ | Here we clear the float so that the footer div no longer floats next to the main div | ||
+ | |||
+ | #footer { clear: both; } | ||
+ | |||
+ | [The footer doesn' | ||
+ | Notes | ||
+ | |||
+ | Positioning Elements in 3D | ||
+ | |||
+ | When we floated the navbuttons they slid under the description. This means that you can't click the links (try it!). | ||
+ | We set the z-index level to 1 which pulls the navbuttons div above the description. | ||
+ | We also have to position the navbuttons div relatively so that the z-index property can work. | ||
+ | |||
+ | #navbuttons { position: relative; z-index: 1; } | ||
+ | |||
+ | [After z-index has been added, links will work] | ||
+ | |||
+ | Once the navbuttons div is on top, the links work as expected. | ||
+ | |||
+ | |||
+ | |||
+ | Setting the Border | ||
+ | |||
+ | You can create a border around an element and then set this for thickness, style and colour. | ||
+ | If you've specified any padding, the border encloses both the padding and the contents of the element. | ||
+ | |||
+ | .entry { border-right: | ||
+ | |||
+ | .photo img { border: none; } | ||
+ | |||
+ | #footer { border-top: 2px dotted #B74E07; } | ||
+ | |||
+ | [Setting the border] | ||
+ | Notes | ||
+ | [Setting the border] | ||
+ | More notes | ||
+ | |||
+ | ===== Changing the Cursor ====== | ||
+ | |||
+ | * When you point to a link, the cursor changes to a pointing hand and the link is highlighted | ||
+ | |||
+ | Determining Where Overflow Should Go | ||
+ | |||
+ | Elements are not always contained in their boxes. You can control the area outside an elements' | ||
+ | Here we use overflow to restrict the collection of mini photos at the bottom of this blog page to a single line. | ||
+ | When the page is resized, images are removed from the display rather than scrolling or re-flowing to a second line. | ||
+ | |||
+ | p.miniphotos { height: 33px; overflow: hidden; } | ||
+ | |||
+ | [Controlling the overflow] | ||
+ | Notes | ||
+ | |||
+ | Aligning Elements Vertically | ||
+ | |||
+ | You can align elements in many different ways to make them look neater on the page. | ||
+ | here we align the img elements in the miniphotos class to align on the centre line. | ||
+ | |||
+ | .miniphotos img { vertical-align: | ||
+ | |||
+ | [Aligning images vertically] | ||
+ | |||
+ | Introduction | ||
+ | Another Example Document | ||
+ | The Box Model | ||
+ | Types of Positioning | ||
+ | Box Formatting | ||
+ | Case Study: Developing a Positioning Style Sheet | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | slide show | ||
+ | |||
+ | Introducing Layout with Styles | ||
+ | |||
+ | Layout with CSS has advantages over other methods (such as tables and frames) | ||
+ | Good for liquid layouts (which resize with browser) | ||
+ | Can apply layout to all documents and change with one style sheet | ||
+ | Smaller files: XHTML+CSS usually less than HTML with lots of font tags, tables, etc. Plus CSS file can be cached so loaded only once for a whole site. | ||
+ | XHTML code is cleaner and easier to edit. | ||
+ | Standard so supported in future. | ||
+ | Disadvantage | ||
+ | Current browsers are buggy, old browsers provide no support for layout. | ||
+ | |||
+ | |||
+ | |||
+ | Another Example Document | ||
+ | Note: the same XHTML copy is used in all the slides that follow. | ||
+ | |||
+ | Only the style sheet changes | ||
+ | Different effects are achieved with style sheets alone. | ||
+ | Structuring your Page | ||
+ | Have a plan | ||
+ | Use id/class to classify parts of your content. | ||
+ | Arrange the order of content so that it will reproduce in old browsers | ||
+ | |||
+ | |||
+ | View (edited) source | ||
+ | |||
+ | The Box Model | ||
+ | |||
+ | CSS treats your web page as if every element is enclosed in an invisible box. | ||
+ | Box height, width, padding, border and margin can all be set by the style sheet. | ||
+ | |||
+ | Table heading links to w3schools references on this subject. | ||
+ | The CSS Box Border Margin Padding | ||
+ | margin | ||
+ | border | ||
+ | padding | ||
+ | content | ||
+ | <- | ||
+ | -> | ||
+ | CSS ' | ||
+ | |||
+ | |||
+ | Consequences of the Box Model | ||
+ | |||
+ | CSS can be used to determine the appearance and position of each element' | ||
+ | Gives considerable control over layout. | ||
+ | Element' | ||
+ | Default representation can be changed by a style declaration. | ||
+ | Elements are displayed in the order that the XHTML flows from top to bottom | ||
+ | Line breaks at the beginning and end of every block-level box. | ||
+ | |||
+ | |||
+ | |||
+ | Types of Positioning | ||
+ | |||
+ | Leave the box in the flow. | ||
+ | The default (called static) | ||
+ | Remove the box from the flow and specify its exact coordinates with respect either to: | ||
+ | Its parent element (absolute) | ||
+ | Browser window (fixed) | ||
+ | Its default position in the flow (relative) | ||
+ | If boxes overlap, their relative position (stacking order) can be specified using the so-called z-index. | ||
+ | |||
+ | |||
+ | |||
+ | Box Formatting | ||
+ | |||
+ | Once its position is decided the following properties can be set: | ||
+ | Size (height and width) | ||
+ | Padding | ||
+ | Border | ||
+ | Margins | ||
+ | Alignment | ||
+ | Colour | ||
+ | Some properties, particularly em and percentage values, depend on an element' | ||
+ | |||
+ | |||
+ | |||
+ | Case Study: Developing a Positioning Style Sheet | ||
+ | This is the document as we want it to appear when it is finished | ||
+ | [Finshed result.] | ||
+ | |||
+ | Document Structure | ||
+ | |||
+ | This is the logical structure of the document: indentation is used to show structure and for clarity, the closing tags are not shown. | ||
+ | |||
+ | <div id=" | ||
+ | <div id=" | ||
+ | < | ||
+ | < | ||
+ | <p id=" | ||
+ | <a class=" | ||
+ | <p class=" | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | < | ||
+ | <p class=" | ||
+ | < | ||
+ | <p class=" | ||
+ | [[more entries]] | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | < | ||
+ | <p class=" | ||
+ | [[lots of thumbnail images]] | ||
+ | |||
+ | You should note that most document sections are marked up as div elements and the order is such that the XHTML will be usable on older browsers and mobile devices. | ||
+ | |||
+ | |||
+ | |||
+ | Visual design elements | ||
+ | This picture shows how the various div elements are to be layed out on the screen. Note that the order of display can be (and in this case is) different from the order in the XHTML file. | ||
+ | [Box-model layout of the document] | ||
+ | |||
+ | Changing the Background | ||
+ | |||
+ | To use a background image: | ||
+ | |||
+ | #wrap { | ||
+ | background-image: | ||
+ | background-position: | ||
+ | background-repeat: | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | Notes | ||
+ | |||
+ | To change the background colour: | ||
+ | |||
+ | # wrap { background: url(bench.jpg) left top repeat; } | ||
+ | #screen { background: #FEF6F8; } | ||
+ | a:focus a:hover a:active { background: #F3CFB6; } | ||
+ | #sidebar { background: #F5F8FA; } | ||
+ | |||
+ | |||
+ | Notes | ||
+ | |||
+ | Setting the Height or Width for the Element | ||
+ | |||
+ | To set the height or width for an element: | ||
+ | |||
+ | #wrap { width: 90%; max-width: 900px; min-width: 480px; } | ||
+ | |||
+ | #main {width: 75%; } | ||
+ | |||
+ | .photo { width: 100px; height: 75px; } | ||
+ | |||
+ | |||
+ | |||
+ | [Setting the width and height of an element] | ||
+ | |||
+ | Notes | ||
+ | |||
+ | Setting the Margins around an Element (1) | ||
+ | |||
+ | The margin is the amount of transparent space between one element and the next, in addition to and outside any padding or border around an element. It is used to increase (or decrease) the white space around an element. | ||
+ | When you set two values, the first is applied to the top and bottom margins, the second is applied to the left and right margins. Here we give the design a little extra space at the top and bottom. | ||
+ | The auto margin setting centres the layout in the window by dividing the leftover 10% of the browser window width that is not used by the wrap div between the right and left margins. | ||
+ | |||
+ | #wrap { margin: 20px auto } | ||
+ | |||
+ | [Setting the wrap margin to 20 pixels] | ||
+ | |||
+ | |||
+ | Setting the Margins around an Element (2) | ||
+ | |||
+ | The sidebar div will have a left margin of 74% which will overlap the space for the main content just enough to allow for some padding around the sidebar text. | ||
+ | The 110 pixel margin to the left of the main content will give us room for the photo later. | ||
+ | |||
+ | #sidebar { margin-left: | ||
+ | .photo_text { margin-left: | ||
+ | |||
+ | [Setting the margins for sidebar and photo text] | ||
+ | |||
+ | Adding Padding around an Element (1) | ||
+ | |||
+ | Padding is extra space around the contents of an element but within the border. You can change the padding' | ||
+ | When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right: | ||
+ | |||
+ | #wrap { padding: 30px 20px 0 0 } | ||
+ | |||
+ | [Adding padding to the wrap] | ||
+ | |||
+ | Adding Padding around an Element (2) | ||
+ | |||
+ | Now we add padding to the contents of the screen div — to the top, left and bottom, but not the right: | ||
+ | When you set four values for padding they are assigned to the top, right, bottom, and left, in that order. Here there will only be padding on the top and right: | ||
+ | |||
+ | #wrap { padding: 10px 10px 10px 0; } | ||
+ | |||
+ | [Adding padding to the screen] | ||
+ | |||
+ | Adding Padding around an Element (3) | ||
+ | |||
+ | When the screen background is set to white, we can see why no padding was needed on the left. | ||
+ | |||
+ | [Making the screen background white] | ||
+ | |||
+ | Offsetting Elements In the Natural Flow | ||
+ | |||
+ | Each element has a natural location in a page's flow. | ||
+ | Moving the element with respect to this original location is called relative positioning. | ||
+ | The surrounding elements are not affected — at all. | ||
+ | |||
+ | .date { position: relative; top -1.1em; } | ||
+ | .description { position: relative; left: 1em; margin bottom: 0.2 em; } | ||
+ | |||
+ | [Offsetting elements in the natural flow] | ||
+ | |||
+ | Positioning Elements Absolutely | ||
+ | |||
+ | You can take elements out of the natural flow — and position the absolutely — by specifying their precise position with respect to the nearest positioned ancestor or to the body. | ||
+ | First we set the position for the photo_text class so that photos will be positioned with respect to it (and not the body). | ||
+ | |||
+ | .photo_text { position: relative; } | ||
+ | |||
+ | The negative left offset will pull the photo left and out of the photo_text box. | ||
+ | |||
+ | .photo { position: absolute; left: -112px; top: 3px; } | ||
+ | |||
+ | [Positioning elements absolutely] | ||
+ | Notes. | ||
+ | |||
+ | Affixing an Element to the Browser Window | ||
+ | |||
+ | When a visitor scrolls in the browser window, the contents of the window usually move up or down while the Back and Forward buttons, for example, stay stationary or fixed. | ||
+ | CSS allows you to affix elements to the browser window so that they don't move when the visitor scrolls up and down. | ||
+ | |||
+ | #sidebar { position: fixed; width: 26%; } | ||
+ | |||
+ | #main { padding: 4px; } | ||
+ | |||
+ | [Affixing an element to the browser window] | ||
+ | |||
+ | This example can only really be appreciated by seeing it in action. | ||
+ | |||
+ | Notes | ||
+ | |||
+ | Making Elements Float | ||
+ | |||
+ | You can make elements float in a sea of text (or other elements). | ||
+ | You can use this technique to crete multi-column layouts, to create callout quotes, and more. | ||
+ | We already pushed the sidebar off to the right, now we'll float the main content to its left. | ||
+ | The navbuttons div will float next to the description rather than just under it. | ||
+ | |||
+ | #main { width: 75%; float: left; } | ||
+ | |||
+ | #navbuttons { width: 22em; float: right; } | ||
+ | |||
+ | [Floating elements] | ||
+ | Notes | ||
+ | |||
+ | Controlling Where Elements Float (1) | ||
+ | |||
+ | You can control which elements an element can float next to an which cannot. | ||
+ | Since it is the main div that is floating, all of the other elements, including the footer, flow around it unless we say otherwise. | ||
+ | |||
+ | [The footer shouldn' | ||
+ | |||
+ | Controlling Where Elements Float (2) | ||
+ | |||
+ | Here we clear the float so that the footer div no longer floats next to the main div | ||
+ | |||
+ | #footer { clear: both; } | ||
+ | |||
+ | [The footer doesn' | ||
+ | Notes | ||
+ | |||
+ | Positioning Elements in 3D | ||
+ | |||
+ | When we floated the navbuttons they slid under the description. This means that you can't click the links (try it!). | ||
+ | We set the z-index level to 1 which pulls the navbuttons div above the description. | ||
+ | We also have to position the navbuttons div relatively so that the z-index property can work. | ||
+ | |||
+ | #navbuttons { position: relative; z-index: 1; } | ||
+ | |||
+ | [After z-index has been added, links will work] | ||
+ | |||
+ | Once the navbuttons div is on top, the links work as expected. | ||
+ | |||
+ | |||
+ | |||
+ | Setting the Border | ||
+ | |||
+ | You can create a border around an element and then set this for thickness, style and colour. | ||
+ | If you've specified any padding, the border encloses both the padding and the contents of the element. | ||
+ | |||
+ | .entry { border-right: | ||
+ | |||
+ | .photo img { border: none; } | ||
+ | |||
+ | #footer { border-top: 2px dotted #B74E07; } | ||
+ | |||
+ | [Setting the border] | ||
+ | Notes | ||
+ | [Setting the border] | ||
+ | More notes | ||
+ | |||
+ | Changing the Cursor | ||
+ | |||
+ | When you point to a link, the cursor changes to a pointing hand and the link is highlighted | ||
+ | |||
+ | [Normal link behaviour] | ||
+ | |||
+ | Because we are on the home page, the home link will be part of the current class. | ||
+ | We can then change the cursor and the background of the home link so that it doesn' | ||
+ | |||
+ | a: | ||
+ | |||
+ | [Changing the link style and cursor] | ||
+ | |||
+ | Notes | ||
+ | |||
+ | Determining Where Overflow Should Go | ||
+ | |||
+ | Elements are not always contained in their boxes. You can control the area outside an elements' | ||
+ | Here we use overflow to restrict the collection of mini photos at the bottom of this blog page to a single line. | ||
+ | When the page is resized, images are removed from the display rather than scrolling or re-flowing to a second line. | ||
+ | |||
+ | p.miniphotos { height: 33px; overflow: hidden; } | ||
+ | |||
+ | [Controlling the overflow] | ||
+ | Notes | ||
+ | |||
+ | Aligning Elements Vertically | ||
+ | |||
+ | You can align elements in many different ways to make them look neater on the page. | ||
+ | here we align the img elements in the miniphotos class to align on the centre line. | ||
+ | |||
+ | .miniphotos img { vertical-align: | ||
+ | [Aligning images vertically] | ||
Line 47: | Line 1106: | ||
===== Next ===== | ===== Next ===== | ||
- | * | + | * |
eg-146/lecture16.txt · Last modified: 2012/03/19 21:30 by eechris