GTK3中使用CSS最佳实践

ScaleButton的比例

我的项目 ​​https://gitee.com/dgwcode/gtk_training_design​​ 

在阅读了官方文档后,我有两个小部件的演示程序：
GtkScaleButton,提供了刻度的控制, 还有  ​​​GtkVolumeButton
我只需要设置GtkScaleButton的样式，即使我为两个都设置了名称，也可以：
​

需要注意的是:我们通过css 文件设置 需要指明 css 的 class 或者 #id

下面的代码 指明他的属性

gtk_widget_set_name（）

这是程序的图片：

下面我们写个代码实践下

C语言Code

#include <gtk/gtk.h>

void load_css ( void );
GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title );

int main ( void )
{
    GtkWidget *window;
    GtkWidget *grid;
    GtkAdjustment *adjustment;
    GtkWidget *scale;
    GtkWidget *scaleButton;
    
    /// *** Initialize GTK and load CSS
    gtk_init ( NULL, NULL );
    load_css();

    /// *** Create a Window
    window = createWindow ( 300, 300, "ScaleButton" );

    /// *** Create a Grid
    grid = gtk_grid_new();
    gtk_container_add ( GTK_CONTAINER ( window ), grid );

    /// *** Create an Adjustment
    adjustment = gtk_adjustment_new ( 0, 0, 10, 1, 2, 0 );

    /// *** Create a Scale
    scale = gtk_scale_new ( GTK_ORIENTATION_HORIZONTAL, adjustment );
    gtk_widget_set_name ( scale, "myScale" );
    gtk_widget_set_size_request ( scale, 150, 40 );
    g_object_set ( scale, "margin", 25, NULL );

    /// *** Create a ScaleButton
    scaleButton = gtk_scale_button_new ( GTK_ICON_SIZE_DIALOG, 0, 5, 1, NULL );
    gtk_widget_set_name ( scaleButton, "myScaleButton" );
    gtk_widget_set_size_request ( scaleButton, 50, 50 );
    g_object_set ( scaleButton, "margin", 25, NULL );

    /// *** attach...
    gtk_grid_attach ( GTK_GRID ( grid ), scale,       0, 0, 1, 1 );
    gtk_grid_attach ( GTK_GRID ( grid ), scaleButton, 0, 1, 1, 1 );
    /// ***
    gtk_widget_show_all ( window );
    gtk_main ();
}

void load_css ( void )
{
    GtkCssProvider *provider;
    GdkDisplay     *display;
    GdkScreen      *screen;
    /// ***
    const gchar *css_style_file = "style.css";
    GFile *css_fp               = g_file_new_for_path ( css_style_file );
    GError *error               = 0;
    /// ***
    provider = gtk_css_provider_new ();
    display  = gdk_display_get_default ();
    screen   = gdk_display_get_default_screen ( display );
    /// ***
    gtk_style_context_add_provider_for_screen   ( screen, GTK_STYLE_PROVIDER ( provider ), GTK_STYLE_PROVIDER_PRIORITY_APPLICATION );
    gtk_css_provider_load_from_file             ( provider, css_fp, &error );
    /// ***
}

GtkWidget *createWindow ( const gint width, const gint height, const gchar *const title )
{
    GtkWidget *window;
    window = gtk_window_new         ( GTK_WINDOW_TOPLEVEL );
    gtk_window_set_title ( GTK_WINDOW ( window ), title );
    g_signal_connect                ( window, "destroy", gtk_main_quit, window );
    gtk_window_set_default_size     ( GTK_WINDOW ( window ), width, height );
    gtk_container_set_border_width  ( GTK_CONTAINER ( window ), 25 );
    return window;
}

css 代码

#myScaleButton
{
    background-color: red;
    border:           2px solid black;
}

#myScaleButton:hover
{
    background-color: green;
    border:           2px solid black;
}

scale
{
    background-color: black;
    color: yellow;
}

scale slider
{
    background-color: red;
    color: yellow;
}

scale > contents > trough 
{
    background-color: blue;
}

scale > contents > trough > highlight 
{
    background-color: red;
}

.flat
{
    background-color: magenta;
    color: yellow;
}

.image-button
{
    background-color: yellow;
    color: red;
}