Einbinden Beispiel CSS in html Seite funktioniert leider nicht

Diskutiere Einbinden Beispiel CSS in html Seite funktioniert leider nicht im CSS Forum im Bereich Programmierung; Hallo, bin leider totaler Anfänger, deshalb die ggf. die blöden Fragen entschuldigen. Ich möchte gerne dieses Beispiel bei in mit einet html...
L

ludger

New member
Beiträge
2
Punkte Reaktionen
0
Hallo,

bin leider totaler Anfänger, deshalb die ggf. die blöden Fragen entschuldigen.
Ich möchte gerne dieses Beispiel bei in mit einet html Seite einbinden.

Dafür habe ich die CSS Datei einfach in eine html Seite in dem tag <style> </style> eingebunden.
Was mir nicht klar ist, wie ich den .container einbinden muss. Kann mir dazu jemand einen Tipp geben?

Dank im voraus


HTML:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
    <meta name="dcterms.created" content="Mi, 10 Aug 2022 05:02:25 GMT">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <title></title>
    
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 
 <style>

// for display
html,
body {
   padding: 0px;
   margin: 0px;
   font-family: monospace;
   height: 100%;
}

body {
   display: flex;
}

.container {
   background: #FFF;
   width: 400px;
   margin: auto;
}
h1 {
   text-align: center;
   color: #222;
}

// the chart
$color-red: #f22;
$color-blue: #56a;
$color-green: #2a5;
$color-label: #FFF;
$color-background: #222;

.chart {
   position: relative;
   padding: 1em;
   background: $color-background;
   border-radius: 5px;
   font-size: 16px;
  
   * { box-sizing: border-box; }
  
   // the line
   &:after {
      content: '';
      position: absolute;
      left: 25%;
      top: 7.5%;
      transform: translateX(100%);
      width: 4px;
      background: #FFF;
      height: 86%;
      border-radius: 2px;
   }
  
   .part {
      display: flex;
      height: 3em;
      
       > .label {
         flex: 1;
         flex-basis: 25%;
         text-align: right;
         padding-right: 1em;
         margin: 0.5em 0;
         height: 2em;
         line-height: 2em;
         color: $color-label;
         font-weight: 600;
      }
      
      .bar {
         flex: 3;
         flex-basis: 75%;
         position: relative;
         margin: 0.5em 0;
        
         &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            border-radius: 0 2px 2px 0;
            animation: grow 0.5s;
         }
        
         // the colors!
         &.red:after { background: $color-red; }
         &.blue:after { background: $color-blue; }
         &.green:after { background: $color-green; }
        
         .label {
            position: absolute;
            top: 50%;
            left: 0.5em;
            transform: translateX(0%) translateY(-50%);
            z-index: 1;
            color: #FFF;
            font-weight: 600;
         }
      }
      
      @for $i from 1 through 100 {
         &.percent-#{$i} .bar:after { width: $i * 1%; }
      }
   }
}

@keyframes grow {
   from { width: 0; }
}
 
 </style>
 
  </head>
  <body>

 .container
   h1 html chart
   .chart
      .part.percent-25
         .label yes
         .bar.red aw
            .label 75%
      .part.percent-25
         .label no
         .bar.blue aw
            .label 25%
      .part.percent-38
         .label maybe
         .bar.green aw
            .label 38%
 
  </body>
</html>
 
S

Sempervivum

Well-known member
Beiträge
280
Punkte Reaktionen
43
Das Problem ist, dass in diesem Codepen SCSS für CSS und Pug für HTML verwendet wird. Beides muss kompiliert werden. Das kannst Du sehr einfach machen, indem Du im CSS-Fenster auf den Pfeil rechts oben klickst und dann "View compiled CSS" auswählst, dann wird das kompilierte CSS angezeigt, das Du direkt verwenden kannst. Beim HTML musst Du ähnlich vorgehen.
 
L

ludger

New member
Beiträge
2
Punkte Reaktionen
0
Das Problem ist, dass in diesem Codepen SCSS für CSS und Pug für HTML verwendet wird. Beides muss kompiliert werden. Das kannst Du sehr einfach machen, indem Du im CSS-Fenster auf den Pfeil rechts oben klickst und dann "View compiled CSS" auswählst, dann wird das kompilierte CSS angezeigt, das Du direkt verwenden kannst. Beim HTML musst Du ähnlich vorgehen.

Vielen Dank, hat funktioniert. Wäre ich nie drauf gekommen.
 
Thema:

Einbinden Beispiel CSS in html Seite funktioniert leider nicht

Oben Unten