+ All Categories
Home > Documents > Cascading Style Sheets CSS2 - a bit more advanced.

Cascading Style Sheets CSS2 - a bit more advanced.

Date post: 18-Jan-2018
Category:
Upload: morgan-horn
View: 219 times
Download: 0 times
Share this document with a friend
Description:
CSS use in html Internally … …css… … Externally
28
Cascading Style Sheets CSS2 - a bit more advanced
Transcript
Page 1: Cascading Style Sheets CSS2 - a bit more advanced.

Cascading Style Sheets

CSS2 - a bit more advanced

Page 2: Cascading Style Sheets CSS2 - a bit more advanced.

Import@import “…”; or @import url( … );

media types can follow it@media media_type {…css…}

akin to: if( media_type == true ) { }

example:@import “fancy.css” print, screen;

Page 3: Cascading Style Sheets CSS2 - a bit more advanced.

CSS use in htmlInternally

<head>…<style>…css…</style>…</head><tag style=”…”>

Externally<link rel="Stylesheet" href= "ICS255.css" media="screen" />

Page 4: Cascading Style Sheets CSS2 - a bit more advanced.

Displaydisplay: none; (hide)display: inline; (fits in the line)display: block; (alone on its own line)display: table-row, table-column, table-cell, inline-table

Page 5: Cascading Style Sheets CSS2 - a bit more advanced.

Printingpage-break-beforepage-break-afterpage-break-inside

auto, always, avoid, left, right@page {margin properties…}

Page 6: Cascading Style Sheets CSS2 - a bit more advanced.

pseudo-class selectors

selector:pseudoClassused for generic situations and events:link :visited :hover :active :focus :first-child :lang etca:visited

anchor tags the user clicked on before

Page 7: Cascading Style Sheets CSS2 - a bit more advanced.

Example.myclass:hover

the pseudo-class is PART of the selector

Browser’s search:Find all tags with class=”myclass”Is the mouse ‘hovering’ over that tag?

Page 8: Cascading Style Sheets CSS2 - a bit more advanced.

text pseudo-element selectors

:before = before the content:after = after the content

{content: “text”} = lets you insert text!

:first-letter :first-line

Page 9: Cascading Style Sheets CSS2 - a bit more advanced.

event pseudo-element selectors

:visited (visited anchor link):active (working anchor link):hover (mouse over):focus (forms)

Page 10: Cascading Style Sheets CSS2 - a bit more advanced.

Box Model

All Elements (tags) have a box around them.

width, heightmargin, padding,border

position: top,left,bottom,right

Page 11: Cascading Style Sheets CSS2 - a bit more advanced.
Page 12: Cascading Style Sheets CSS2 - a bit more advanced.

Positions & Dimensions

width, heighttop,left,bottom,right

must be positioned to useauto or inherit (used in CSS cascades)##% = relative to parentunits: mm,cm,in,px,pt,pc,em,ex

Page 13: Cascading Style Sheets CSS2 - a bit more advanced.

Relative UnitsSave YOU time long-term% percentage of available sizeem

1= size of 1 (one) line of parent’s textex

1= half of em = 0.5 em

Page 14: Cascading Style Sheets CSS2 - a bit more advanced.

exampleh1{font-size: 0.5em;}ALL <h1> tags are now half size (50%)note - text height based

Page 15: Cascading Style Sheets CSS2 - a bit more advanced.

absolute Positioningpositions relative to PARENT positionscrolls with the PARENT positionbottom is the bottom of documentgoing off the page can cause browser to make document largernegative positions (left/right/top/bottom) are allowed

Page 16: Cascading Style Sheets CSS2 - a bit more advanced.

video

Page 17: Cascading Style Sheets CSS2 - a bit more advanced.

fixed Positioningpositioned ON THE WINDOWbottom is the bottom of the window’s page viewing areadoes NOT scroll with the the pageadjusts to when the window does

Page 18: Cascading Style Sheets CSS2 - a bit more advanced.

video

Page 19: Cascading Style Sheets CSS2 - a bit more advanced.

z-indexLayering controlMultiple positioned boxes overlapping cause a layering problem, this solves itonly works on boxes that are positioned0 and up back to frontauto = default behavior

Page 20: Cascading Style Sheets CSS2 - a bit more advanced.

video

Page 21: Cascading Style Sheets CSS2 - a bit more advanced.

float Positioningleft or rightThe box moves to the left or right of the area (contained by parent)text flows around the boxworks diagrams or photos in text documents

Page 22: Cascading Style Sheets CSS2 - a bit more advanced.

video

Page 23: Cascading Style Sheets CSS2 - a bit more advanced.

relative PositioningPosition relative to the text flow (sibling text and tags)If the text moves, it movesExample: sub-text or super-text (1st 2nd X² )negative positions allowed

Page 24: Cascading Style Sheets CSS2 - a bit more advanced.

video

Page 25: Cascading Style Sheets CSS2 - a bit more advanced.

tricksbugs (look up the Acid Tests for CSS)

there are IE specific comments that help in coding around IE bugs

Absolute positioning inside a PARENT with relative positioning can be usefulCombining positioning, tables, float can create interesting situations (bugs too)

Page 26: Cascading Style Sheets CSS2 - a bit more advanced.

Inspectors & Editors

Most desktop browsers have add-ons for developers to do layoutFirefox’s Web Developer add-on has LIVE CSS editing that displays changes instantlyFireBug provides an inspector for firebug

Page 27: Cascading Style Sheets CSS2 - a bit more advanced.

HINTInspectors like FireBug

View properties of a tagView built-in browser CSS properties of a tag

You can change any CSS property you can see and copy them from other tags

Page 28: Cascading Style Sheets CSS2 - a bit more advanced.

video


Recommended