|
|
@@ -0,0 +1,47 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html lang="en">
|
|
|
+<head>
|
|
|
+ <meta charset="UTF-8">
|
|
|
+ <title>Inline Node styling test</title>
|
|
|
+ <style>
|
|
|
+ body {
|
|
|
+ line-height: 200%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 150px;
|
|
|
+ height: 200px;
|
|
|
+ margin: 10px;
|
|
|
+ padding: 5px;
|
|
|
+ border: 1px solid black;
|
|
|
+ }
|
|
|
+
|
|
|
+ .highlight {
|
|
|
+ background-color: orange;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-highlight {
|
|
|
+ background-image: url("tile.png");
|
|
|
+ color: white;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .br-highlight {
|
|
|
+ border: 2px solid green;
|
|
|
+ border-radius: 6px;
|
|
|
+ box-shadow: 4px 4px 4px darkgreen;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ Hello world <span class="highlight">this is some text</span> not in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span>
|
|
|
+ <div class="box" style="background-color: rgba(255, 0, 255, 0.5);">
|
|
|
+ Hello world <span class="highlight">this is some text</span> in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span>
|
|
|
+ </div>
|
|
|
+ <div class="box second">
|
|
|
+ Hello world <span class="highlight">this is some text</span> in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span>
|
|
|
+ </div>
|
|
|
+ <div style="background-color:red;width:3px">This text should only have a strip of red on the left</div>
|
|
|
+</body>
|
|
|
+</html>
|
Sam Atkins
