Upload
others
View
8
Download
0
Embed Size (px)
Citation preview
Client-Side Web TechnologiesCSS Part III
Topics
• Color and background properties
• Font and text properties
• Table properties
• Transforms
• Transitions and Animations
Color Property• Specifies the color of an element’s text content
• color
• Value: color | inherit
• Initial: varies among browsers
• Inherited: yes
• Examples:• color: red;
• color: #efefef;
• color: rgb(255, 0, 0)
Background Color Property• Specifies the color of an element’s background
• background-color
• Value: color | inherit
• Initial: transparent
• Inherited: no
• Examples:• background-color: red;
• background-color: #efefef;
• background-color: rgb(255, 0, 0)
Background Image Property• Specifies the background image(s) of an element
• background-image
• Value: [ image | none [ , image | none ]* ] | inherit
• Initial: none
• Inherited: no
• Examples:• background-image: url(‘sompic.jpg’);
• background-image: url(‘abc.jpg’), url(‘123.jpg’);
Background Repeat Property• Specifies how background images are tiled
• <repeat-style> = repeat-x | repeat-y | [ repeat | no-
repeat ]{1,2}
• background-repeat
• Value: [ <repeat-style> [ , <repeat-style> ]* ] | inherit
• Initial: repeat
• Inherited: no
• repeat: image is tiled to fill area
• no-repeat: image is placed once and not repeated
Background Size Property• Specifies the size of background images
• <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover
| contain
• background-size
• Value: [ <bg-size> [ , <bg-size> ]* ] | inherit
• Initial: auto
• Inherited: no
• contain: scale image to largest size such that width and
height fit and aspect ratio is maintained
• cover: scale image to smallest size such that width and
height completely cover and aspect ratio is maintained
• When length or percentages are given, first value is width
and second value is height
Background Attachment Property• Specifies whether a background image is fixed with respect
to viewport or the element
• <attachment> = scroll | fixed
• background-attachment
• Value: [ <attachment> [ , <attachment> ]* ] | inherit
• Initial: scroll
• Inherited: no
• fixed: background is fixed with respect to viewport
• scroll: background is fixed with respect to element
Background Position Property• Specifies the position of a background image
• Has somewhat elaborate syntax:
• http://www.w3.org/TR/css3-background/#background-position
Other Background Properties
• http://www.w3.org/TR/css3-background/#background-clip
• http://www.w3.org/TR/css3-background/#background-origin
Background Shorthand Property• <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> ||
<attachment>
• <final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? ||
<repeat-style> || <attachment> || <background-color>
• background
• Value: [ [ <bg-layer> , ]* <final-bg-layer> ] | inherit
• See:• http://codepen.io/jmussitsch/pen/ad72e67429e52816768eae3a2cc516f2
• http://codepen.io/jmussitsch/pen/8775b40e02f5a9083f83c69b4657ae76
Gradients• Can use gradients where an image is expected
• E.g. background-image property
• http://www.w3.org/TR/css3-images/#gradients
• Linear gradients
• Radial gradients
• See http://codepen.io/jmussitsch/pen/a31a7ec53d6dcd3bedf85abf8cd0fd30
Font Family Property• Prioritized list of fonts
• font-family
• Value: [ [ family | generic ] [, family | generic ]* ] | inherit
• Initial: depends on user agent
• Inherited: yes
• Family
• The name of a specific font family
• E.g. Verdana, Times, Helvetica, Courier, etc.
• Generic
• The name of a generic family
• E.g. serif, sans-serif, monospace
• Interesting resource on CSS typography:
http://sixrevisions.com/css/css-typography-01/
Font Style Property• Selects between normal, italic, and oblique font faces
• font-style
• Value: normal | italic | oblique | inherit
• Initial: normal
• Inherited: yes
Font Weight Property• Selects the weight of the font
• font-weight
• Value: normal | bold | bolder | lighter | 100 | 200 | 300 | 400
| 500 | 600 | 700 | 800 | 900 | inherit
• Initial: normal
• Inherited: yes
• The values from 100 to 900 form an order sequence where
each number indicates a weight that is at least as dark as
the one before it
• normal = 400
• bold = 700
• bolder and lighter values select font weights that are
relative to the weight inherited from the parent
Font Size Property• Specifies the size of the font
• font-size
• Value: absolute | relative | length | percentage | inherit
• Initial: medium
• Inherited: yes
• Absolute are values of font sizes kept by the user agent that map to actual sizes (small, medium, large, etc.)
• Relative values (larger | smaller) are relative to the
parent element’s font size
Web Fonts• The @font-face at-rule allows for linking to local or
external font resources
• Example:@font-face {
font-family: ‘Gentium’;
src: url(‘http://example.com/fonts/
Gentium.ttf’);
}
p { font-family: ‘Gentium’, serif; }
• More information: http://www.w3.org/TR/css3-fonts/#font-resources
• Google Fonts: https://fonts.google.com/
• There are UX and performance considerations to keep in mind
Font Shorthand Property• font
• Value: [ [ font-style || font-weight ]? font-size [ / line-height ]?
font-family ] | inherit
• Examples:
• font: 12px/14px sans-serif
• font: italic bold 14px Verdana
• font: 16px “Times New Roman”
• See http://codepen.io/jmussitsch/pen/92f84c04b2d9638c38fcd10fa5975367
Line Box Height Calculations• Remember, in an inline formatting context the rectangular
areas that contain the boxes that form lines are called line
boxes
Containing Block
Line Box
Line Box Height Calculations• There are rules that determine the height of these line boxes
1. The height of each inline-level box is calculated (replaced and inline-
block elements use the height of their margin box, inline boxes use
their line-height)
2. Inline-level boxes are aligned vertically according to their vertical-align
property
3. The height of the line box is the distance between the uppermost box
top and the lowermost box bottom
Line Box Height Calculations (continued)• CSS assumes that every font has metrics that define a
characteristic height above the baseline (A) and a depth below it
(D)
• AD = A + D, the distance from the top to the bottom (font size)
• The leading (L) to add = line-height property value – AD
• Half the leading is added above A and the other half below D
Source: http://www.w3.org/Talks/2008/0911-CSS-Amsterdam/
Line Height Property• On a block container element, specifies the minimal height of
line boxes within the element
• On a non-replaced inline element, specifies the height used
in the calculation of the line box height
• line-height
• Value: normal | number | length | percentage | inherit
• Initial: normal
• Inherited: yes
• A value of normal tells a user agent to use a “reasonable”
value based on the font of the element (recommended 1.0 to
1.2)• See http://codepen.io/jmussitsch/pen/902a9941a4e519b481206675cb540639
Vertical Align Property• Specifies the vertical positioning inside a line box
• vertical-align
• Value: baseline | sub | super | text-top | middle |
bottom | text-bottom | length | percentage | inherit
• Initial: baseline
• Inherited: no
• A value of baseline aligns the baseline of the box with the
baseline of the parent box (the baseline of an inline-block
element is generally the baseline of its last line box)
• Other values are explained in detail here:
• http://www.w3.org/TR/CSS2/visudet.html#leading
• See http://codepen.io/jmussitsch/pen/cdd3d96f8044f822444b29a3e3a680b2/
Text Indent Property• Specifies indentation of the first box in a block container
box’s first line box
• text-indent
• Value: length | percentage | inherit
• Initial: 0
• Inherited: yes
Text Align Property• Specifies how inline-level content of a block container box is
horizontally aligned
• text-align
• Value: left | right | center | justify | inherit
• Initial: left (for left-to-right text direction)
• Inherited: yes
Text Decoration Property• Specifies decorations added to text
• text-decoration
• Value: none | [ underline || overline || line-through || blink ]
| inherit
• Initial: none
• Inherited: sometimes (see the specification)
• A value of none produces no text decoration
• A value of underline underlines each line of text
• A value of overline causes a line to be rendered above each line of text
• A value of line-through causes each line of text to have a line through
the middle
• A value of blink may cause text to alternate between visible and
invisible
Text Shadow Property• Attaches one or more drop-shadows to text
• <shadow> = [ length{2,3} && color? ]
• text-shadow
• Value: none | <shadow> [, <shadow> ]*
• Initial: none
• Inherited: yes
• Length values:
• The 1st length is the horizontal offset of the shadow (+ is right, - is left)
• The 2nd length is the vertical offset (+ is down, - is up)
• The 3rd length is the blur radius (the > the value the more blur)
• Color is the color of the shadow
Letter Spacing Property• Specifies spacing between text characters
• letter-spacing
• Value: normal | length | inherit
• Initial: normal
• Inherited: yes
• A value of normal is the normal spacing for the current font
• Length is inter-character spacing in addition to the default space
between characters
Word Spacing Property• Specifies spacing between words
• word-spacing
• Value: normal | length | inherit
• Initial: normal
• Inherited: yes
• A value of normal is the normal inter-word spacing for the current font
• Length is inter-word spacing in addition to the default space between
words
White Space Property• Specifies how white space inside the element is handled
• white-space
• Value: normal | pre | nowrap | pre-wrap | pre-line | inherit
• Initial: normal
• Inherited: yes
• A value of normal collapses sequences of white space and breaks lines as
necessary to fill line boxes
• A value of pre will not collapse sequences of white space and will only break lines
at preserved newline characters
• A value of nowrap collapses white space but suppresses line breaks
• A value of pre-wrap will not collapse sequences of white space and lines are
broken at preserved newline characters and to fill line boxes as necessary
• A value of pre-line will collapse sequences of white space and lines are broken at
preserved newline characters and to fill line boxes as necessary
• See http://codepen.io/collection/81101b92f534224b445f1afa25fa1b8c/
Tables
• We will briefly go over a few table-related styles
• More information:
• http://www.w3.org/TR/CSS2/tables.html
Table Layout Property• Specifies the table layout algorithm to use
• table-layout
• Value: auto | fixed | inherit
• Initial: auto
• Inherited: no
• The fixed layout algorithm determines the horizontal layout of the table
using the width of the table, the width of the columns, borders, and cell
spacing
• The automatic layout algorithm determines the horizontal layout based on
the widest cell in each column (plus borders)
Border Collapse Property• Specifies how borders are rendered for the table
• border-collapse
• Value: collapse| separate | inherit
• Initial: separate
• Inherited: yes
• The separate value indicates that a border should be drawn around the
table and around each cell
• The collapse value indicates that borders should not be drawn on every
edge of adjacent elements in the table
• See http://codepen.io/jmussitsch/pen/0b2c1e002f651a827e91c78a90d534d9/
Transforms
• Allows elements to be transformed in 2D or 3D
space
• Generally applies to block-level or atomic inline-level
elements
• http://www.w3.org/TR/css3-2d-transforms/• See http://codepen.io/jmussitsch/pen/1fabbae1becfa47e0b2246f6dfd6c17b
Transitions
• Allow property changes in CSS values to occur
smoothly over a specified duration without using
scripts
• http://www.w3.org/TR/css3-transitions/• See http://codepen.io/jmussitsch/pen/ef4616e32cb925ea9d52af681d229ad9
Animations
• Allows animating of CSS property values over time
• http://www.w3.org/TR/css3-animations/• See http://codepen.io/jmussitsch/pen/140a1d5294337698c29c05010c9d3e07
We have only scratched the
surface...
More Stuff!• SASS
• CSS extension language
• http://sass-lang.com/
• Bootstrap
• Very popular HTML/CSS/JS framework for
developing responsive web apps
• http://getbootstrap.com/
• CSS Tricks
• Blog site for all things CSS
• http://css-tricks.com/