Base Stylesheets
Notes appears as a yellow text.
(1) Text
Horizontal Alignment | Vertical Alignment | Font Family | Font Style | Font Color | Wrap | Underline |
---|---|---|---|---|---|---|
tlalign left | vertical-mvertically center | f-f-helveticaHelvetica | f-w-normalnormal | f-c-blackblack | noWrapnowrap | f-d-nonenone |
tcalign center | vertical-bvertically bottom | f-f-songsimsun | f-w-blodbold | f-c-whitewhite | autoWrapword wrap | f-d-lineunderline |
tcalign right | vertical-tvertically top | f-f-heitisimhei | f-s-italicitalic | |||
f-f-yaheiMicrosoft YaHei | f-s-normalnormal |
Font Size | Text Indent |
---|---|
f + numberE.g. f12
(unit: pixels) values range:10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,35,40,45,50,55,60,65,70,75 |
f-i + numberE.g. f-i15
(unit: pixels) values range:0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
(2) Margin
Margin with four directions | Margin top | Margin bottom | Margin left | Margin right |
---|---|---|---|---|
ma + numberE.g. ma5
(unit: pixels) values range:0,2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
ma-t + numberE.g. ma-t20
(unit: pixels) values range:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
ma-b + numberE.g. ma-b20
(unit: pixels) values range:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
ma-l + numberE.g. ma-l20
(unit: pixels) values range:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
ma-r + numberE.g. ma-r20
(unit: pixels) values range:2,3,4,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
Padding for four directions | Padding top | Padding bottom | Padding left | Padding right |
---|---|---|---|---|
pa + numberE.g. pa5
(unit: pixels) values range:0,5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
pa-t + numberE.g. pa-t20
(unit: pixels) values range:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
pa-b + numberE.g. pa-b20
(unit: pixels) values range:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
pa-l + numberE.g. pa-l20
(unit: pixels) values range:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
pa-r + numberE.g. pa-r20
(unit: pixels) values range:5,10,15,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100 |
(3) Color
Utilize the.dsure-no-hover
class to remove hover effect. Such as dsure-bg-blue dsure-no-hover
dsure-bg-blue | dsure-bg-black | dsure-bg-silver | dsure-bg-gray | dsure-bg-red | dsure-bg-purple |
dsure-bg-green | dsure-bg-aquamarine | dsure-bg-olivedrab | dsure-bg-pink | dsure-bg-indigo | dsure-bg-orange |
dsure-bg-brown | dsure-bg-yellow | dsure-bg-cadetblue | dsure-bg-lemonchiffon | dsure-bg-lavender | dsure-bg-burlywood |
(4) Container
Alignment | Display | Clear Float |
---|---|---|
flfloat to the left | blochanging an inline element to a block | clearelements after a floating element will flow around it |
frfloat to the right | clearfixa clearfix is a way for an element to automatically clear its child elements, so that you don't need to add additional markup. It's generally used in float layouts where elements are floated to be stacked horizontally. | |
box-centerelements will take up the width you specify, then the remaining space will be split evenly between the two margins. |
Minimum Height |
---|
min-h + numberE.g. min-h300
(unit: pixels) values range:100,150,200,250,300,350,400,450,500,550,600,650 |
(5) Border&fillet
Only supports up to IE 9.
Border | Fillet |
---|---|
noborderspecifies no border | dsure-radius-nonespecifies no fillet |
dsure-radius-smallround corners (small) | |
dsure-radius-mediumround corners (medium) | |
dsure-radius-medium2xround corners (double medium) | |
dsure-radius-biground corners (large) | |
dsure-radius-fullperfect circles in CSS |
(6) Demonstrate
content...
content...
content...
content...
content...
HTML Code: <div class="pa15 ma-t20 f16 dsure-no-hover dsure-bg-lemonchiffon dsure-radius-medium">content...</div> <div class="ma20 f-c-white dsure-no-hover dsure-bg-black">content...</div> <div class="pa20 ma-t10 fl">content...</div> <div class="pa-r10 ma-t10 fr">content...</div> <div class="clear"></div> <div style="width:200px" class="box-center"> content...</div>