Style Quick Start | Smartchart开发手册

Styling #

Great dashboards need great CSS. This chapter covers CSS knowledge commonly used in SmartChart.

Where to Write CSS in SmartChart #

Location	Syntax	Scope
Template `<style>` section	`#container_0 { ... }`	Current dashboard only
Container editor	Inline style attribute	Current container only
Inline style	`style="color:red"`	Current element only

CSS Basics #

CSS Introduction #

CSS (Cascading Style Sheets) defines how HTML elements are displayed. When a browser reads a stylesheet, it formats the document accordingly.

CSS Syntax #

Each CSS rule consists of selectors and declarations. Declarations include properties and values, ending with semicolons. Screenshot

CSS comments:

/* This is a comment */

Use CTRL+/ for quick commenting in SmartChart editor.

CSS Import Methods #

Inline style:

<p style="color: red">Hello world.</p>

Internal stylesheet:

<head>
 <style>
 p{ background-color: #2b99ff; }
 </style>
</head>

External stylesheet:

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS Selectors #

Basic selectors:

/* Element selector */
p {color: "red";}

/* ID selector */
#i1 { background-color: red; }

/* Class selector */
.c1 { font-size: 14px; }
p .c1 { color: red; }

Note: Class names shouldn’t start with numbers. Multiple classes in tags are space-separated.

Universal selector:

* { color: white; }

Combinator selectors:

/* Descendant */
li a { color: green; }
/* Child */
div>p { font-family: "Arial Black", arial-black, cursive; }
/* Adjacent sibling */
div+p { margin: 5px; }
/* General sibling */
#i1~p { border: 2px solid royalblue; }
/* Attribute selectors */
p[title] { color: red; }
p[title="213"] { color: green; }
[title^="hello"] { color: red; }
[title$="hello"] { color: yellow; }
[title*="hello"] { color: red; }
[title~="hello"] { color: green; }

Pseudo-class selectors:

a:link { color: #FF0000 }      /* Unvisited link */
a:hover { color: #FF00FF }     /* Mouse over link */
a:active { color: #0000FF }    /* Selected link */
a:visited { color: #00FF00 }   /* Visited link */
input:focus { outline: none; background-color: #eee; }

Selector Priority #

Weight: Inline (1000) > ID (100) > Class (10) > Element (1)

Use !important only when absolutely necessary.

CSS Common Properties #

/* Font */
font-size: 14px; font-weight: bold; color: #ffffff; text-align: center;

/* Background */
background-color: #1a1a2e; background-image: url('bg.jpg'); background-size: cover;

/* Border */
border: 1px solid rgba(255,255,255,0.2); border-radius: 8px;

/* Layout */
display: flex; justify-content: center; align-items: center;

/* Spacing */
padding: 10px 20px; margin: 0 auto;

/* Overflow */
overflow: hidden; overflow-y: auto;

CSS Box Model #

margin: Controls distance between elements
padding: Controls distance between content and border
Border: Surrounds padding and content
Content: Box content, displays text and images

Screenshot

Position #

Value	Description
`static`	Default, no positioning
`relative`	Relative to original position, still in document flow
`absolute`	Relative to nearest positioned ancestor, out of document flow
`fixed`	Relative to browser window, stays on scroll

SmartChart drag components use absolute positioning. For absolute-positioned children inside, set parent position:relative.

Z-Index #

#i2 { z-index: 999; }

Controls stacking order. Higher values cover lower. Only positioned elements can use z-index.

Opacity #

Range 0~1, where 0 is fully transparent and 1 is fully opaque.