pyqt5-8.qss樣式美化1

pyqt中對樣式的編輯是借鑑了css,qt的樣式美化規則是叫qss,其語法與css一樣,所以在我什麼都不瞭解的時候,要去看一下css語法是怎樣,
https://www.runoob.com/css/css-tutorial.html
菜鳥教程的css篇,看起來很多,靜下來看3-4個小時就看完了,然後再看下qss,qss就是把css的裏面類的名字換成了qt裏面的控件,其他的幾乎沒什麼變化,當然,qss是沒有css強大的,所以有些功能可能無法使用,但是美化界面應該足夠用了。
下面貼一個qss的文件,供參考:

QLineEdit#e1_serch{
    border:1px solid gray;
    width:300px;
    border-radius:10px;
    padding:2px 4px;
    background-image: url(:/icon/images/icon/fangdajing.png);
    background-repeat: no-repeat;
    background-position: left;
    padding: 2 2 2 30;
}

QPushButton#new_Button{
    font-family: "Microsoft YaHei";
    font-weight: bold;
    border:1px solid gray;
    border-radius: 14px;
    color: black;
    background-color: transparent;
}

QPushButton#new_Button:hover{
    font-family: "Microsoft YaHei";
    font-weight: bold;
    border-radius: 14px;
    color: black;
    background-color: #21aefa;
}

QPushButton#upload_Button{
    font-family: "Microsoft YaHei";
    font-weight: bold;
    border:1px solid gray;
    border-radius: 14px;
    color: black;
    background-color:transparent;
}

QPushButton#upload_Button:hover{
    font-family: "Microsoft YaHei";
    font-weight: bold;
    border-radius: 14px;
    color: black;
    background-color: #21aefa;
}

QPushButton#e1_message{
    border: none;
}

QPushButton#user_info_Button{
    border: none;
}
QPushButton#copy_Button{
    border: none;
}
QPushButton#edit_Button{
    border: none;
}
QPushButton#pushButton_2{
    border: none;
}
QPushButton#pushButton_4{
    border: none;
}

QTabWidget:pane
{
       border-top: 1px solid #E5E5E5;
       border-left:1px solid #E5E5E5;
       position: absolute;
       font-size: 14px;
}
QTabWidget:tab-bar {
        border-bottom: 2px solid #E5E5E5;
        border-left:1px solid #E5E5E5;
        alignment: left;
        font-size: 14px;
}
QTabBar:tab {
    border: none;
    border-bottom-color: #C2C7CB; /* same as the pane color */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    min-width: 60px;
    width:60px;
    padding: 2px;
       font-size: 14px;
}
QTabBar:tab:hover {
       color:#2080F7;
}
QTabBar:tab:selected {
       color:#2080F7;
       border-bottom: 2px solid #2080F7;
       font-weight:bold;
}

/* QPushButton{border:none;color:black;} */


QLabel{background:white;}
QLabel{color:rgb(100,100,100,25%);font-size:15px;font-weight:bold;font-family:Roman times;}
QLabel:hover{color:rgb(100,100,100,12%);}")



QScrollBar::handle{background:rgba(0,0,0,50%); border:2px solid transparent; border-radius:5px; }
QScrollBar::handle:hover{background:rgba(0,0,0,50%);border:0px rgba(0,0,0,25%); }

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章