Màu sắc thiết kế website thường dùng
WRAPPER------------------------------------------------------------------------------------------
.wg_lvtm_wrapper{ width:100%; marin:auto; position:relative; }
.wg_lvtm_wrapper_1170px{ width:1170px; height:auto; margin:auto; position:relative; }
.wg_lvtm_wrapper_1024px{ width:1024px; height:auto; margin:auto; position:relative; }
.wg_lvtm_wrapper_1000px{ width:1024px; height:auto; margin:auto; position:relative; }
.wg_lvtm_width_100{ width:100%; }
.wg_lvtm_width_90{ width:90%; }
.wg_lvtm_width_10{ width:10%; }
.wg_lvtm_width_80{ width:80%; }
.wg_lvtm_width_20{ width:20%; }
.wg_lvtm_width_70{ width:70%; }
.wg_lvtm_width_30{ width:30%; }
.wg_lvtm_width_60{ width:60%; }
.wg_lvtm_width_40{ width:40%; }
.wg_lvtm_width_50{ width:50%; }
.wg_lvtm_width_50{ width:50%; }
.wg_lvtm_width_40{ width:40%; }
.wg_lvtm_width_60{ width:60%; }
.wg_lvtm_width_30{ width:30%; }
.wg_lvtm_width_70{ width:70%; }
.wg_lvtm_width_20{ width:20%; }
.wg_lvtm_width_80{ width:80%; }
.wg_lvtm_width_10{ width:10%; }
.wg_lvtm_width_90{ width:90%; }
.wg_lvtm_width_33{ width:33.333333%; }
.wg_lvtm_width_33{ width:33.333333%; }
.wg_lvtm_width_33{ width:33.333333%; }
.wg_lvtm_width_25{ width:25%; }
.wg_lvtm_width_25{ width:25%; }
.wg_lvtm_width_25{ width:25%; }
.wg_lvtm_width_25{ width:25%; }
FLOAT - CLEAR------------------------------------------------------------------------------------------
.float_left
.float_right
.clear_both (Delete float)
.float_none (Default left)
BACKGROUND------------------------------------------------------------------------------------------
.bg_primary
.bg_success
.bg_info
.bg_warning
.bg_danger
.bg_white
.bg_red
.bg_blue
.bg_orange
.bg_cyan
.bg_black
.bg_efefef
.bg_aaa
.bg_bbb
.bg_ccc
.bg_ddd
.bg_6ed3cf
.bg_9068be
.bg_e1e8f0
.bg_e62739
.bg_c9c9c9
.bg_e3e3e3
.bg_9ad3de
.bg_89bdd3
.bg_c9d8c5
.bg_a8b6bf
.bg_7d4627
.bg_c0dfd9
.bg_e9ece5
.bg_b3c2bf
.bg_3b3a36
.bg_1d2120
.bg_5a5c51
.bg_ba9077
.bg_bcd5d1
.bg_729f98
.bg_283018
.bg_aa863a
.bg_6534ff
.bg_62bcfa
.bg_fccdd3
.bg_bbc4ef
.bg_dbc3d0
.bg_5e0231
.bg_c7a693
.bg_e6af4b
.bg_e05038
.bg_f2cbbc
.bg_334431
.bg_856046
.bg_300032
.bg_06000a
.bg_c43235
.bg_e6e6e8
COLOR------------------------------------------------------------------------------------------
.color_white
.color_black
.color_red
.color_green
.color_blue
.color_cyan
.color_orange
.color_yellow
.color_pink
.color_muted
.color_primary
.color_success
.color_info
.color_warning
.color_danger
.color_e95f04
.color_ffffff
.color_000
.color_696969
.color_808080
.color_a9a9a9
.color_c0c0c0
.color_d3d3d3
.color_dcdcdc
.color_f5f5f5
.color_d8bfd8
.color_dda0dd
.color_ee82ee
.color_da70d6
.color_ba55d3
.color_ff00ff
.color_8b008b
.color_800080
.color_9370db
.color_8a2be2
.color_9932cc
.color_9400d3
.color_4b0082
.color_000080
.color_191970
.color_00008b
.color_483d8b
.color_0000cd
.color_0000ff
.color_6a5acd
.color_7b68ee
.color_e6e6fa
.color_4682b4
.color_708090
.color_00bfff
.color_778899
.color_1e90ff
.color_4169e1
.color_6495ed
.color_87ceeb
.color_87cefa
.color_b0c4de
.color_f0f8ff
TEXT-ALIGN------------------------------------------------------------------------------------------
.text_align_left Using these validation using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users
.text_align_center Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users
.text_align_right Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users
.text_align_justify Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users
VERTICLE-ALIGN------------------------------------------------------------------------------------------
This example demonstrates different vertical-aligns template / .vertical_align_baseline
This example demonstrates different vertical-aligns template / .vertical_align_sub
This example demonstrates different vertical-aligns template / .vertical_align_super
This example demonstrates different vertical-aligns template / .vertical_align_top
This example demonstrates different vertical-aligns template / .vertical_align_text_top
This example demonstrates different vertical-aligns template / .vertical_align_middle
This example demonstrates different vertical-aligns template / .vertical_align_bottom
This example demonstrates different vertical-aligns template / .vertical_align_text_bottom
This example demonstrates different vertical-aligns template / .vertical_align_0
This example demonstrates different vertical-aligns template / .vertical_align_3
This example demonstrates different vertical-aligns template / .vertical_align_5
This example demonstrates different vertical-aligns template / .vertical_align_10
This example demonstrates different vertical-aligns template / .vertical_align_15
This example demonstrates different vertical-aligns template / .vertical_align_18
This example demonstrates different vertical-aligns template / .vertical_align_20
This example demonstrates different vertical-aligns template / .vertical_align_24
This example demonstrates different vertical-aligns template / .vertical_align_25
This example demonstrates different vertical-aligns template / .vertical_align_10d
This example demonstrates different vertical-aligns template / .vertical_align_15d
This example demonstrates different vertical-aligns template / .vertical_align_18d
This example demonstrates different vertical-aligns template / .vertical_align_20d
This example demonstrates different vertical-aligns template / .vertical_align_24d
This example demonstrates different vertical-aligns template / .vertical_align_25d
LINE-HEIGHT------------------------------------------------------------------------------------------
.line_height_1_1 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_1_5 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_2_1 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_2_5 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_10 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_11 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_12 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_13 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_14 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_15 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_16 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_17 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_18 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_19 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_20 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_21 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_22 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_23 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_24 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_25 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_26 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_27 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_28 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_29 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_30 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_40 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_50 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_60 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_70 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
.line_height_80 This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height.
TEXT-DECORATION------------------------------------------------------------------------------------------
.text_decoration_none (Default)
.text_decoration_underline
.text_decoration_overline
.text_decoration_through
.text_decoration_initial (Reset css)
FONT SIZE------------------------------------------------------------------------------------------
.font_size_10 .font_size_11 .font_size_12 .font_size_13 .font_size_14 .font_size_15 .font_size_16 .font_size_17 .font_size_18 .font_size_19 .font_size_20 .font_size_21 .font_size_22 .font_size_23 .font_size_24 .font_size_25 .font_size_26 .font_size_27 .font_size_28 .font_size_29 .font_size_30 .font_size_31 .font_size_32 .font_size_33 .font_size_34 .font_size_35 .font_size_36 .font_size_37 .font_size_38 .font_size_39 .font_size_40 .font_size_41 .font_size_42 .font_size_43 .font_size_44 .font_size_45 .font_size_46 .font_size_47 .font_size_48 .font_size_49 .font_size_50 .font_size_51 .font_size_52 .font_size_53 .font_size_54 .font_size_55 .font_size_56 .font_size_57 .font_size_58 .font_size_59 .font_size_60 .font_size_61 .font_size_62 .font_size_63 .font_size_64 .font_size_65 .font_size_66 .font_size_67 .font_size_68 .font_size_69 .font_size_70 .font_size_71 .font_size_72 .font_size_73 .font_size_74 .font_size_75 .font_size_76 .font_size_77 .font_size_78 .font_size_79 .font_size_80 .font_size_81 .font_size_82 .font_size_83 .font_size_84 .font_size_85 .font_size_86 .font_size_87 .font_size_88 .font_size_89 .font_size_90 .font_size_91 .font_size_92 .font_size_93 .font_size_94 .font_size_95 .font_size_96 .font_size_97 .font_size_98 .font_size_99 .font_size_100
FONT WEIGHT------------------------------------------------------------------------------------------
.font_weight_normal
.font_weight_bold
.font_weight_bolder
.font_weight_lighter
.font_size_ceil_110 (110%)
.font_size_ceil_120 (120%)
.font_size_ceil_130 (130%)
.font_size_ceil_140 (140%)
.font_size_ceil_150 (150%)
.font_size_ceil_160 (160%)
.font_size_ceil_170 (170%)
.font_size_ceil_180 (180%)
.font_size_ceil_190 (190%)
.font_size_ceil_200 (200%)
.font_size_ceil_220 (220%)
.font_size_ceil_240 (240%)
.font_size_ceil_260 (260%)
.font_size_ceil_280 (280%)
.font_size_ceil_300 (300%)
.font_size_ceil_350 (350%)
.font_size_ceil_400 (400%)
.font_size_ceil_450 (450%)
.font_size_ceil_500 (500%)
BUTTON------------------------------------------------------------------------------------------
.btn_default .btn_primary .btn_success .btn_info .btn_warning .btn_danger .btn_saddlebrown .btn_gold .btn_black .btn_darkorange .btn_red .btn_olivedrab .btn_darkgreen .btn_seagreen .btn_lightcyan .btn_darkturquoise .btn_darkcyan .btn_darkslategrey .btn_lightskyblue .btn_dodgerblue .btn_deepskyblue .btn_navy .btn_indigo .btn_magenta .btn_darkmagenta .btn_yellowgreen .btn_darkkhaki .btn_orchid .btn_lightseagreen .btn_maroon .btn_tan
FORM------------------------------------------------------------------------------------------
DISPLAY------------------------------------------------------------------------------------------
.display_block (Show) | .display_none (Hide)
OVERFLOW------------------------------------------------------------------------------------------
.
overflow_hidden
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
.
overflow_auto
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
.
overflow_initial
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
.
overflow_visible
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
.
overflow_x_hidden
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
.
overflow_y_hidden
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'
FIELDSET - LEGEND ------------------------------------------------------------------------------------------
Personalia: Name: Email: Date of birth:
TABLE------------------------------------------------------------------------------------------
.table_temp
thead tr th1 width:50% thead tr th2 width:50%
Col 1 row 1
Col 2 row 1
Col 1 row 2
Col 2 row 2
tfoot tr td1 width:50%;
tfoot tr td2 width:50%;
.table_temp2
Col 1 row 1
Col 2 row 1
Col 1 row 2
Col 2 row 2