CSS

CSS 3 logotyp

Förkortningar

Font Awesome

  • fa-css3

Filändelser

  • .css

CSS

selector {property: value;}

Enheter

Can I use Viewport units: vw, vh, vmin, vmax

W3.org Style Examples units

  • %
  • rem
  • em
  • px
  • rem
  • vh
  • vw
  • vmin
  • vmax

Pseudo

  • :before
  • :after

  • :link
  • :visited
  • :hover
  • :active

  • :lang
  • :has
  • :emptyt
  • :root
  • :first-line
  • :nth-child(2n+1)
  • :target

Selektorer

  • .
  • #
  • +
  • >
  • ~
Longhand versus shorthand notation

Shorthand

  • background
  • border
  • font
  • margin
  • padding
Tidning om CSS

CSS kan infogas på tre olika sätt

  • <style="">
  • <style type="text/css"></style>
  • <link href="stylesheet.css" rel="stylesheet" type="text/css">
Kopp med texten CSS is awesome

Färger kan skrivas på flera olika sätt

  • Name "red"
  • Hex "#ff0000"
  • Rgb "rgb(255,0,0)" (upp till 255)
  • Rgba "rgba(255,0,0,0.5)" (för genomskinlighet)

Vendor prefix

  • -webkit
  • -moz
  • -o
  • -ms

@-rules

  • @font-face
  • @keyframes
  • @media
  • @supports
  • @import

Exempel

-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; -webkit-filter: blur(2px);
box-sizing: border-box; box-ordinal-group: 1; clear: both; float: none; text-transform: capitalize;
align-items: center; display: flex; justify-content: center;
-moz-hyphens: auto; word-wrap: break-word; pointer-events: none;
object-fit: cover; text-overflow: ellipsis; -webkit-overflow-scrolling: touch; html {touch-action: manipulation;}

CSS 3

  • Animation
  • Transform (translate, rotate, scale)
  • Transition
  • Rounded corners
  • Shadow

Styling för iOS Safari

-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ Sass - style with attitude Sass logotyp

Sass

  • Preprocessing
  • Variables
  • Nesting
  • Partials
  • Import
  • Mixins
  • Extend/Inheritance
  • Operators
Less logotyp

Less

  • Variables
  • Mixins
  • Nested rules
  • Media query bubbling and nested media queries
  • Operations
  • Functions
  • Namespaces and Accessors
  • Scope
  • Comments
//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js normalize.css reset.css NES.css CSS-tricks logotyp CSS-tricks logotyp Smashing magazine logotyp David Walsh Can I use logotyp Can I use logotyp

Externa länkar

Grid layout