Resumen de conocimientos de QSS

Resumen de conocimientos de QSS

Tabla de comparación de consultas de colores RGB
http://www.mgzxzs.com/sytool/se.htm

GUI hoja de estilo de aprendizaje treinta y cuatro-QSS
https://www.cnblogs.com/yinsedeyinse/p/11701466.html

Gramática básica

1.  样式表单由一系列样式规则组成。每条规则可以分成两部分：选择器和声明
   
    
   
     选择器表示规则作用到哪些控件上；声明则详细说明了是什么规则。
   

2.  Qt的样式表语法不区分大小写，所以color，Color，coLor，coloR都表示同样的颜色属性。但是指代类的类名的时候，是区分大小写的。
   

3.  多个选择器可以并列使用，它们之间用逗号隔开，例如：
   
     QPushButton,QLineEdit, QComboBox{ color: red }
   

4.  声明部分也可以有多个并列，之间用分号隔开。当我们要设置的选择器有多个属性的时候，就需要并列多个声明，例如：
   
     QPushButton{ color: red; background-color: white }
   
    这条样式规则让按钮的字体变成红色，同时背景色变成白色。
   

La
hoja de estilo Qt de categoría de selector admite todos los tipos de selector definidos en CSS2. A continuación, se muestran algunas de las definiciones de selector más utilizadas.

Selector global

Seleccionar todos los widgets

Selector de tipo específico

QPushButton

Seleccione todos los QPushButton y sus objetos de subclase derivados

Selector de atributos

QPushButton [plano = "falso"]

Seleccione todos los botones cuyo atributo plano sea falso

El selector de atributos se
puede utilizar para todos los atributos con el método toString en QT, como el texto y los atributos comprobados de QPushButton.

Cuando el atributo es un QStringList, puede usar el símbolo ~ = para hacer coincidir uno de ellos.

Debido a que los atributos suelen ser dinámicos, cuando se cambian los atributos, la hoja de estilo debe ajustarse. La práctica habitual es eliminar la hoja de estilo y volver a cargarla.

111

Explicación detallada de las propiedades del borde del margen de relleno CSS
https://www.cnblogs.com/linjiqin/p/3556497.html

Propiedades de borde, margen y relleno CSS gráfico. La

organización del W3C recomienda que todos los objetos de la página web se coloquen en un cuadro. Los diseñadores pueden controlar las propiedades de este cuadro mediante la creación de definiciones. Estos objetos incluyen párrafos, listas y encabezados. Imágenes y capas. El modelo de caja define principalmente cuatro áreas: contenido, relleno, borde y margen. Para los principiantes, a menudo no está claro el nivel, la relación y la interacción entre el margen, el color de fondo, la imagen de fondo, el relleno, el contenido y el borde. Aquí hay un diagrama esquemático en 3D del modelo de caja, con la esperanza de que sea más fácil de entender y recordar.

margen: el espacio en blanco que queda fuera del borde de la capa
color de fondo: color de
fondo imagen de fondo
: relleno de la imagen de fondo : el espacio en blanco entre el borde de la capa y el contenido de la capa
borde: borde
contenido: contenido

A continuación, hablaré sobre la clave de HTML y CSS: el modelo Box. La clave para comprender el modelo Box son los atributos de margen y relleno, y la comprensión correcta de estos dos atributos también es la clave para aprender a usar el diseño CSS.

Nota: ¿Por qué no traducir margen y relleno?
Razón 1: No hay una palabra correspondiente en chino;
Razón 2: Incluso si existen esas palabras, porque al escribir código CSS, se deben usar margen y relleno, si siempre usamos palabras en chino If se utilizan como explicación, es fácil confundir los conceptos de margen y relleno en aplicaciones prácticas.

Si tiene un poco de base Html, debe comprender algunos elementos básicos (Elemento), como p, h1 ~ h6, br, div, li, ul, img, etc. Si estos elementos se subdividen, se pueden dividir en elementos de nivel superior, elementos de nivel de bloque y elementos en línea.

Los elementos a nivel de bloque son los elementos principales y clave que constituyen un html, y el modelo Box puede explicar cualquier elemento a nivel de bloque.
Modelo de caja: cualquier elemento a nivel de bloque se compone de cinco partes: contenido (contenido), relleno, fondo (incluido el color de fondo y la imagen), borde (marco) y margen.
El diagrama tridimensional es el siguiente:
Los atributos de margen y relleno se explican a continuación:
1. Margen: Incluyendo margin-top, margin-right, margin-bottom, margin-left, controlan la distancia entre elementos a nivel de bloque, son transparente e invisible. De acuerdo con la regla de arriba, derecha, abajo e izquierda en el sentido de las agujas del reloj, se puede escribir como margen: 40px 40px 40px 40px;
para una memoria fácil, consulte la imagen a continuación:

body {
    
     padding: 36px;} //对象四边的补丁边距均为36px 
body {
    
     padding: 36px 24px; } //上下两边的补丁边距为36px，左右两边的补丁边距为24px 
body {
    
     padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px，左右两边的补丁边距为24px 
body {
    
     padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px