CSS

Logotyp för CSS - Cascading Stylesheet

Förkortningar

Logotyp för FA - Font Awesome

Namn och kodpunkt för ikoner från Font Awesome 4.7.0 (den sista versionen som var helt gratis)

  • fa-css3

Filändelser

  • .css

Prefix

Element

Syntax

selektor { egenskap: värde; }

Enheter för värden

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

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

W3.org Style Examples units

Pseudo-element

  • :before
  • :after

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

  • :focus
  • :focus-ring

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

Selektorer

Longhand versus shorthand notation

Shorthand

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

CSS kan användas på tre olika sätt i HTML

<link rel="stylesheet" href="stylesheet.css"> <style></style> <tagg style="">

Tagg i HTML

  • style

Attribut i HTML

  • style

  • class
  • id

Kommentarer

/* En kommentar */ Kopp med texten CSS is awesome

Färger kan skrivas på flera än ett sätt

Format för värdeExempel på kod
Namnred
HEX#ff0000
RGBrgb(255,0,0) (upp till 255)
RGBA (för genomskinlighet)rgba(255,0,0,0.5)
HSLhsl()

Vill du veta mer om färger, se vilka som finns namngivna och vilka som är webbsäkra? Läs mer på vår sida som handlar om färger.

Vendor prefix

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

@-rules

  • @font-face
  • @keyframes
  • @media
  • @supports
  • @import
Media Queries Level 5

Exempel på hur en media query för mörkt tema kan se ut i CSS

@media (prefers-color-scheme: dark) {

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;

  • mix-blend-mode: hard-light;
  • object-fit: cover;
  • text-overflow: ellipsis;
  • -webkit-overflow-scrolling: touch;
  • html {touch-action: manipulation;}
  • backdrop-filter: saturate(180%) blur(20px)
  • clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2vw), 0 100%)

Nyheter i CSS 3

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

Exempel på grid

display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); grid-gap: 0 12px;

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 Logotyp för Sass Logotyp för Sass Logotyp för BEM - Block Element Modifier Logotyp för BEM - Block Element Modifier Logotyp för tailwind CSS Logotyp för tailwind CSS Logotyp för tailwind CSS

Ramverk

Sass

Logotyp för Less

Less

  • Variables
  • Mixins
  • Nested rules
  • Media query bubbling and nested media queries
  • Operations
  • a href="funktioner">Functions
  • Namespaces and Accessors
  • Scope
  • Comments
//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js

Filer

normalize.css reset.css NES.css Logotyp för CSS-TRICKS Logotyp för CSS-TRICKS Logotyp för Smashing magazine David Walsh Logotyp för Can I use Logotyp för Can I use Omslagsbild för låten Gangnam style av PSY

Externa länkar

Logotyp för för CCS hudvård ® Logotyp för för CCS hudvård ®

Kuriosa

Grid layout

Conditional CSS rule targeting Firefox Quantum

Targeting only Firefox with CSS

body::before { content: 'Not Fx'; } @-moz-document url-prefix() { body::before { content: 'Fx legacy'; } @supports (animation: calc(0s)) { body::before { content: 'Fx Quantum'; } } }

Sätt header för CSS med PHP

header('Content-Type: text/css');