1 / 28

6 Layout

6 Layout. Learning Outcomes. Describe & Apply the CSS Box Model Configure Float with CSS Designate Positioning with CSS Create Column Page Layouts using CSS Create Navigation Utilizing Lists with CSS Add Interactivity to Links with CSS Pseudo-classes

Download Presentation

6 Layout

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. 6 Layout

  2. Learning Outcomes • Describe & Apply the CSS Box Model • Configure Float with CSS • Designate Positioning with CSS • Create Column Page Layouts using CSS • Create Navigation Utilizing Lists with CSS • Add Interactivity to Links with CSS Pseudo-classes • Utilize Additional HTML5 Structural Elements

  3. Box Model • Describes Rectangular Boxes that Contain Content • Each Block-level Element is Displayed as a Box • Each Content Box can have Margins, Borders, & Padding

  4. Margin Properties • margin: # | % • Shorthand Property Sets All Four Individual Margins

  5. Margin Properties • margin-left | margin-right | margin-top | margin-bottom: # | % • Negative margins can be set to achieve special effects

  6. Positioning Properties • position: type position size • type = static | relative | absolute | fixed • position = top | left | bottom | right • size = height | width

  7. Positioning Properties • div {position:absolute; left:130px; top:100px;}

  8. Positioning Properties • div {position:absolute; left:130px; top:100px;width: 100px;}

  9. Positioning Properties • overflow: visible | hidden | scroll | auto • Defines Situation Where Content Overflows Allotted Space

  10. Positioning Properties • clip: rect(top, right, bottom, left) • Defines Area Through Which Content Can be Viewed

  11. Positioning Properties • visibility: visible | hidden • Specifies Whether an Element is Displayed or Hidden • z-index: auto | # • Specifies an Element’s Stacking Level

  12. Special Box Properties • width: # | % • Sets Horizontal Width of a Containing Box • height: # | % • Sets Vertical Height of a Containing Box • float: left | right | none • Sets Position of an Element to Left/Right of Parent Element • clear: none | left | right | both • Controls Flow of Text Around Floated Elements

  13. Special Box Properties • float & clear

  14. Visual Formatting Model • Three Element Display Type Categories • Block (e.g., Paragraphs) • Contain Inline Boxes that Contain Element Content • Inline • Contain Content within the Block-level Elements • Do not Form New Blocks of Content • List-item • Creates Surrounding Container and List-item Inline Boxes • display: block | inline | list-item | none

  15. CSS Two-Column Layout

  16. List Navigation • Remove List Marker, Underline, Add Padding • Configure List Items for Inline Display #nav ul { list-style-type: none; } #nav a { text-decoration: none; padding-right: 10px; } #nav li { display: inline; } … <div id="nav"> <ul> <li><a href="index.html">Home</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="directions.html">Directions</a></li> <li><a href="contact.html">Contact</a></li> </ul></div>

  17. Advanced Selection • Attribute Selector • Applies to Elements with Specific Attributes • Syntax: a[href] {color: blue;} a:hover img[src=“CODLogo.gif"] {visibility:hidden;}

  18. Advanced Selection • Pseudo-Class Selectors • Select Elements Based on Characteristics Other Than Name • Link Pseudo-Classes • :link • Allow Modification of Style Characteristics for Unvisited Links :link {color: green;} • :visited • Allow Modification of Style Characteristics for Visited Links :visited {color: green;}

  19. Advanced Selection • Pseudo-Class Selectors • Dynamic Pseudo-Classes • Apply Styles to an Element Based on User’s Actions • :hover • Applies Style When User Mouses Over Element • :active • Applies Style When User Activates Element • :focus • Applies Style When Element is Accepting User Input

  20. Advanced Selection • Pseudo-Elements Selectors • Modify Aspects of Document Not Classified by Elements • :first-letter • Apply Style Rules to the First Letter of Any Block-level Element • Initial Capitals • Drop Capitals

  21. Advanced Selection • Pseudo-Element Selectors • :first-letter

  22. Advanced Selection • Pseudo-Element Selectors • :first-line • Apply Style Rules to the First Line of Any Block-level Element

  23. Advanced Selection • Child Selector • > • Apply Style Rules to Child Elements of Any Parent div > blockquote {font-weight: bold;}

  24. Advanced Selection • First Child • :first-child • Apply Style Rules to the First Child Element of a Parent div > p:first-child {font-weight: bold;}

  25. Advanced Selection • Adjacent Sibling • + • Apply Style Rules to • Elements that Share the Same Parent • Are Adjacent in the Code

  26. Structural Elements 5 • <header>…</header> • Contains Headings of a Page, Section, or Article • <hgroup>…</hgroup> • Contains Two or More Heading Elements <header> <hgroup> <h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1> <h2>the best coffee on the coast</h2> </hgroup> </header>

  27. Structural Elements 5 • <nav>…</nav> • Contains a Section of Navigation Links • Block Display • <footer>…</footer> • Contains Footer Content • Block Display • <aside>…</aside> • Contains Sidebar, Note, or Other Tangential Content • Block Display

  28. Structural Elements 5 • <section>…</section> • Contains a “Section”, (e.g., a Chapter or Topic) • Block Display • <article>…</article> • Contains an Independent Entry, (e.g., Blog Posting or Comment) • Block Display • <time>…</time> • Represents Date or Time (e.g., Date Articles or Blogs) • Inline Display

More Related