This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).
nested into another element A A A A - B inherits the style of A B inherits the style of A unless B has an explicit style definition body { background-color: red; } div { background-color: green; }
{ background:url(img.png), url(img2.png); background-size:80px 60px; background-repeat:no-repeat; background-origin:content-box; background-origin:content-box; } repeat no-repeat | repeat repeat-x | repeat-y origin top left | top center | top right | center left | border-box | content-box etc.
use an image div { background: -webkit-gradient(linear, right top, left bottom, from(white), to(black)); } linear the type of gradient (also radial, or repeating-linear) linear the type of gradient (also radial, or repeating-linear) right-top start of the gradient left-bottom end of the gradient from starting color to final color
type type type type a { color: red; } • by id id id id #redLink { color: red; } • by class class class class • by class class class class . .. .redLink { color: red; }
p div p div p all <p> elements inside a <div> • div>p div>p div>p div>p all <p> elements where the parent is a <div> • div>p div>p div>p div>p all <p> elements where the parent is a <div> • div+p div+p div+p div+p all <p> elements that are placed immediately after <div> • [target] [target] [target] [target] all elements with a target attribute • [target=_blank] [target=_blank] [target=_blank] [target=_blank] all elements with target= "_blank“ "_blank“ • p:first p:first p:first p:first- - - -child child child child every <p> element that is the first child of its parent
src src src^="https"] ^="https"] ^="https"] ^="https"] every <a> element whose src attribute value begins with "https” attribute value begins with "https” • a[ a[ a[ a[src src src src$=". $=". $=". $=".pdf pdf pdf pdf"] "] "] "] every <a> element whose src attribute value ends with ".pdf” • a[ a[ a[ a[src src src src*=“mobile"] *=“mobile"] *=“mobile"] *=“mobile"] every <a> element whose src attribute value contains the substring “mobile“ • p:nth p:nth p:nth p:nth- - - -child(2) child(2) child(2) child(2) every <p> element that is the second • p:nth p:nth p:nth p:nth- - - -child(2) child(2) child(2) child(2) every <p> element that is the second child of its parent • p:nth p:nth p:nth p:nth- - - -last last last last- - - -child(2) child(2) child(2) child(2) every <p> element that is the second child of its parent, counting from the last child • :not(p) :not(p) :not(p) :not(p) every element that is not a <p> element
div { display: none; } The element will be hidden, and the page will be The element will be hidden, and the page will be displayed as if the element is not there
block element is an element that takes up the full width available, and has a line break before and after it inline • an inline element only takes up as much width as necessary • it can contain only other inline elements inline-block • the element is placed as an inline element (on the same line as adjacent content), but it behaves as a block element – you can set width and height, top and bottom margins and paddings
horizontally or vertically vertically box: • a new value for the display property • a new property box-orient #div { display: box; box-orient: horizontal; }
its immediate children into the opts an element and its immediate children into the flexible box model box-orient Values: horizontal horizontal horizontal horizontal | vertical | inherit How should the box's children be aligned aligned aligned aligned? box-direction Values: normal normal normal normal | reverse | inherit sets the order order order order in which the elements will be displayed
| end | center | justify Values: start start start start | end | center | justify Sets the alignment of the box along the box- orient axis box-orient: horizontal; box-pack: end; box-pack: end;
center | baseline | stretch stretch stretch stretch Values: start | end | center | baseline | stretch stretch stretch stretch Sets how the box's children are aligned in the box box-orient: horizontal; box-align: center; box-align: center;
their dimension is set according to their width box-flex can be set to any integer It sets how a child element occupy the box’s space #box1 { width: 100px; } #box2 { box-flex: 1; box-flex: 1; } #box3 { box-flex: 2; }
visible or hidden div.hidden { visibility: hidden; } The element will be hidden, but still affect the layout It can also be set to visible, collapse, inherit
positioned elements way as statically positioned elements we can adjust a relatively positioned element with offset properties: top, top, top, top, right, right, right, right, bottom, and bottom, and bottom, and bottom, and left left left left http://bit.ly/I8cEaF
of its parent element Typically, position property elements do not naturally inherit their parent’s values the static value is assigned if no position value is given http://bit.ly/I8cEaF
left or will move as far to the left or will move as far to the left or will move as far to the left or right as it can right as it can right as it can right as it can right as it can right as it can right as it can right as it can Elements are floated only horizontally horizontally horizontally horizontally The float CSS property can accept one of 4 values: left, left, left, left, right, right, right, right, none, and none, and none, and none, and inherit inherit inherit inherit
affected affected The elements after the floating element will flow around it - to avoid this, use the clear clear clear clear property Generally, a floated element should have an explicitly set explicitly set explicitly set explicitly set Generally, a floated element should have an explicitly set explicitly set explicitly set explicitly set width width width width For a deeper explanation of CSS float: http://bit.ly/I8cAb5
were already installed on the user's device already installed on the user's device With CSS3, web designers can use whatever font they like @font-face { font-family: NAME; src: url(Dimbo.ttf); font-weight normal bold src: url(Dimbo.ttf); font-weight: normal; font-style: normal; } font-style normal italic oblique bold 100 200 …
refer to the name of the font (NAME) through the font font font font- - - -family family family family of the font (NAME) through the font font font font- - - -family family family family property div { font-family: NAME; font-family: NAME; }
change shape, size, position shape, size, position shape, size, position shape, size, position, … change shape, size, position shape, size, position shape, size, position shape, size, position, … You can transform your elements using 2D or 3D transformations http://bit.ly/IroJ7S
from one style to another style to another The effect can be gradual gradual gradual gradual A transition is composed of 2 parts: 1. The CSS property to add the effect 2. The duration of the effect The effect will start when the specified CSS property changes value
property property • property property property property – the name of the CSS property the transition effect is for (can be all) • duration duration duration duration – how many seconds (or milliseconds) the transition effect takes to complete takes to complete • timing timing timing timing- - - -function function function function – linear, ease, ease-in, ease-out, ease-in-out • delay delay delay delay – when the transition effect will start
gradually element gradually element gradually element gradually change from one style to another change from one style to another change from one style to another change from one style to another You can change style in loop, repeating, etc. To bind bind bind bind an animation to an element, you have to specify at least: 1. Name of the animation 1. Name of the animation 2. Duration of the animation div { animation: test 5s ease-in; }
keyframe keyframe It splits the animation into parts, and assign a specific style to each part The various steps within an animation are given as percentuals 0% beginning of the animation (from) 100% end of the animation (to)
to a CSS property change – Transitions must be bound to a CSS property change – Animations start autonomously • States – Transitions have start and end states – Animations can have multiple states • Repeats • Repeats – Transitions can be perfomed once for each activation – Animations can be looped
Media Types Types Types Types A media type is a specification of the actual actual actual actual media media media media that is being used to access the page Examples of media types include • screen screen screen screen: computer screens • print print print print: printed document • braille braille braille braille: for Braille-based devices • tv tv tv tv: for television devices
media type: • <link> <link> <link> <link> in the HTML page • <link> <link> <link> <link> in the HTML page <link rel=“stylesheet” href=“style.css” media=“screen” /> • @media @media @media @media within the CSS file @media screen { div { color: red; } }
you you you you to to to to to to to to change style based on specific change style based on specific change style based on specific change style based on specific conditions conditions conditions conditions conditions conditions conditions conditions For example, they can be about • device’s display size display size display size display size • orientation orientation orientation orientation of the device • Resolution Resolution Resolution Resolution of the display • ...
boolean expression expression expression expression The CSS associated with the media query expression is applied only if it evaluates to true A media query consists of 1. a media type 1. a media type 2. a set of media features @media screen and orientation: portrait
hide” the CSS to older browsers that can read media types but cannot handle media queries read media types but cannot handle media queries In this case the styling information will not be visible to those browsers @media only screen @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } Smartphones (portrait and landscape)
only screen and -webkit-min-device-pixel-ratio: 2 iPad in landscape orientation @media only screen and (device-width: 768px) and (orientation: landscape) iPhone and Android devices iPhone and Android devices @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
iivanoo
ryuichikawano
glaforge
oracle4engineer
logica0419
kaminashi
sms_tech
szdr
sakaik
anatofuz
bluehats
tetsuyaooooo
risatube
pauljervisheath
hursman
garrettdimon
mza
bkeepers
paulrobertlloyd
chriscoyier
bluesmoon
lara
paigeccino
cherdarchuk
thekraken
![CSS3 Refresher Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta](https://files.speakerdeck.com/presentations/4f9eb5f009f952002201b423/slide_0.jpg){kind=link}
