cascading style sheets css2 - a bit more advanced
Post on 18-Jan-2018
219 Views
Preview:
DESCRIPTION
TRANSCRIPT
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;
CSS use in htmlInternally
<head>…<style>…css…</style>…</head><tag style=”…”>
Externally<link rel="Stylesheet" href= "ICS255.css" media="screen" />
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
Printingpage-break-beforepage-break-afterpage-break-inside
auto, always, avoid, left, right@page {margin properties…}
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
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?
text pseudo-element selectors
:before = before the content:after = after the content
{content: “text”} = lets you insert text!
:first-letter :first-line
event pseudo-element selectors
:visited (visited anchor link):active (working anchor link):hover (mouse over):focus (forms)
Box Model
All Elements (tags) have a box around them.
width, heightmargin, padding,border
position: top,left,bottom,right
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
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
exampleh1{font-size: 0.5em;}ALL <h1> tags are now half size (50%)note - text height based
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
video
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
video
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
video
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
video
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
video
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)
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
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
video
top related