精华内容
参与话题
问答
  • rel='stylesheet' 什么意思?

    万次阅读 2011-01-09 21:35:00
    <link type='text/css' href='Example 2-1.css' rel='stylesheet' />  rel是Relations的所写 指关联到一个stylesheet(样式表单) 只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值,所以...

    <link type='text/css' href='Example 2-1.css' rel='stylesheet' />

         rel是Relations的所写 指关联到一个stylesheet(样式表单)

    只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属性值,所以没有办法给不同关系的链接提供不同的样式,所以现在rel与rev只是用来使得网页的语义性更为完善

         在<link>标签中,“rel=stylesheet”,rel是关联的意思,关联的是一个样式表(stylesheet)文档,它表示这个link在文档初始化时将被使用。一般这里是不需要改动的.

     

    展开全文
  • link 标签中“rel=stylesheet”的作用

    万次阅读 多人点赞 2016-11-29 17:10:37
    最近在用link标签引入外部css文件的时候,忘记加上rel=stylesheet,结果css样式显示不出来,疑惑万分。加上这个css效果就出现了。  那rel=stylesheet又是何方神圣呢?  首先,我们要知道Link标签有两个作用:1. ...

           最近在用link标签引入外部css文件的时候,忘记加上rel=stylesheet,结果css样式显示不出来,疑惑万分。加上这个css效果就出现了。

           那rel=stylesheet又是何方神圣呢?

           首先,我们要知道Link标签有两个作用:1. 定义文档与外部资源的关系;2. 是链接样式表。

           link标签是用于当前文档引用外部文档的,其次,这个标签的rel属性用于设置对象和链接目的间的关系,说白了就是指明你链进来的对象是个什么东西的,

           rel各个属性值配置的意思:

                  Alternate -- 定义交替出现的链接 
                  Stylesheet -- 定义一个外部加载的样式表 
                  Start -- 通知搜索引擎,文档的开始 
                  Next -- 记录文档的下一页.(浏览器可以提前加载此页) 
                  Prev -- 记录文档的上一页.(定义浏览器的后退键) 
                  Contents 
                  Index -- 当前文档的索引 
                  Glossary -- 词汇 
                  Copyright -- 当前文档的版权 
                  Chapter -- 当前文档的章节 
                  Section -- 作为文档的一部分 
                  Subsection -- 作为文档的一小部分 
                  Appendix -- 定义文档的附加信息 
                  Help -- 链接帮助信息 
                  Bookmark -- 书签 


        所以说,我们用这样的方式<link rel="stylesheet" href="css/bootstrap.css">,引入外部的css文件时,一定不能忘记rel属性的配置。

    展开全文
  • 【Qt开发】StyleSheet使用总结

    千次阅读 2019-04-23 13:33:19
    概述 ...很麻烦的,自定义类继承Button,新手估计还搞不定,怎么也有上百行代码,实在不友好,Qt诞生大大简化了这些工作,只需要使用QSS(QtStyleSheet)就可以轻松做到,最近详细了解了QSS,做了个百度网盘的登录界面...

    概述

    转眼七年过去了,我是一个彻底拥抱过MFC的人,记得老大的一个需求要把按钮做成圆角,并添加背景颜色,做前端html的可能认为很简单,然而放到MFC上那可真的是很...很麻烦的,自定义类继承Button ,新手估计还搞不定,怎么也有上百行代码,实在不友好,Qt诞生大大简化了这些工作,只需要使用QSS(Qt Style Sheet)就可以轻松做到,最近详细了解了QSS,做了个百度网盘的登录界面,整理好我会把源码放出来,供大家参考。

    QSS语法

    background-color:rgb(6, 168, 255);      背景色

    color:red;                  字体颜色

    border-radius:5px;              边框圆角半径

    border:2px solid green;         边框2像素,实现,绿色

    font:10pt;               字体大小10

     

    设置QSS方法

    方法一:UI界面设置

    鼠标到按钮上右键,"改变样式表",在编辑样式表对话框中添加QSS样式。

    方法二:程序添加

    每一个控件都有setStyleSheet(const QString &styleSheet)方法,样式字符串直接传参即可,例:

    ui.pushButton1->setStyleSheet("QPushButton{background-color: white;  color: rgb(100, 100, 100) ;}");

     

    方法三:通过QSS文件添加

    新建文件StyleSheet.qss文件,添加内容如下:

     

    /*按钮静止无操作样式*/
    QPushButton 
    {
        background-color:rgb(255,255,255); 
        color:rgb(6,168,255); 
        border:2px solid rgb(6,168,255); 
        font-size:14px; 
        border-radius:10px;
    }
    
    /*鼠标悬停在按钮*/
    QPushButton:hover
    {
        background-color: rgb(212,243,255); 
        color:rgb(6,168,255);
        border:2px solid rgb(6,168,255); 
        border-radius:14px;
    }
    
    /*鼠标按下按钮*/
    QPushButton:pressed
    {
        background-color: rgb(175,232,255); 
        color:white; 
        border:2px solid rgb(6,168,255); 
        border-radius:14px;
    }

     

    读取配置文件设置指定按钮样式:

     

    StyleDialog::StyleDialog(QWidget *parent)
        : QDialog(parent)
    {
        ui.setupUi(this);
        QString strStyle = ReadQssFile("StyleSheet.qss");
        ui.pushButton2->setStyleSheet(strStyle);
    }
    
    StyleDialog::~StyleDialog()
    {
    }
    
    
    QString StyleDialog::ReadQssFile(const QString& filePath)
    {
        QString strStyleSheet = "";
        QFile file(filePath);
        file.open(QFile::ReadOnly);
        if (file.isOpen())
        {
            strStyleSheet = QLatin1String(file.readAll());
        }
        return  strStyleSheet;
    }

     

    实际项目中一般qss文件直接添加到资源里面,一起打包到EXE文件中,这样文件不会直接暴露给用户。

     

    Selector

    一个UI界面有很多控件,使用一个qss文件来指定样式时,可以使用Selector来分别设置控件的样式

    1.属性覆盖,一个qss文件里,后面定义的style会覆盖先前的style。

    2.同一行中多个类型需要用逗号分隔。

    QPushButton, QLineEdit, QCheckBox
    {
        background: color: black;
    }

    3.属性分类

    例如:有6个PushButton控件,3个设置为样式一,另外三个设置为样式二

    方法一:

    设置前3个控件的whatsThis为style1,后三个控件为style2

    修改StyleSheet.qss文件内容

     

    QPushButton[whatsThis="style1"]
    {
        background-color: rgb(63,141,215);
        color:green;
    }
    
    QPushButton[whatsThis="style2"]
    {
        background-color: rgb(63,141,215);
        color:red;
    }

     

    方法二:

    直接在qss文件里指定object name,不推荐这种方式,6个控件需要些六遍,分别指定object name。

    QPushButton#pushButton1
    {
        background-color: rgb(63,141,215);
        color:red;
    }

    最后在程序的入口函数设置如下代码:

        QApplication a(argc, argv);
    
        StyleDialog styleDialog;
        a.setStyleSheet(styleDialog.ReadQssFile(":/qtlearn/Resources/StyleSheet.qss"));

     最后附上一张使用QSS技术仿的百度网盘界面:

    展开全文
  • 目录 0、相关链接 1、在设计师界面上直接添加 1.1 注意事项 2、用程序添加样式 2.1 用程序语句添加 ...官网的样式表链接:http://doc.qt.io/archives/qt-4.8/stylesheet.html 各种控件的样式...

    目录

    0、相关链接

    1、在设计师界面上直接添加

    1.1 注意事项

    2、用程序添加样式

    2.1 用程序语句添加

    2.2 用qss文件添加

    2.2.1引用qss文件的外部路径

    2.2.2引用qss文件的资源路径

    3、样式表选择器


     

    0、相关链接

    官网的样式表链接:http://doc.qt.io/archives/qt-4.8/stylesheet.html

    各种控件的样式:http://doc.qt.io/archives/qt-4.8/stylesheet-reference.html

    QSS语法:http://www.w3school.com.cn/css/css_syntax.asp

    使用样式表的3种方法:《Qt 之 样式表的使用——设置样式的方法 》https://blog.csdn.net/goforwardtostep/article/details/60884870

    其实本质上就两种:1、在设计师界面上直接添加,2、用程序设置

     

    1、在设计师界面上直接添加

    举例,在设计师界面拖入一个QPushButton,右击这个按钮,选择改变样式表,就会弹出添加样式的窗口;

    或者,左键选中这个按钮,在右侧的属性对话框中找到StyleSheet属性,点击...按钮也可打开样式表窗口,如下图所示

    在打开的编辑样式表窗口直接输入“样式语句”,点击应用apply即可实时看到样式的效果,如下图所示:

    编辑样式表这个窗口可以实时提示,我们输入的qss语句语法是否正确,如果正确会在左下角提示:有效样式表,当然,这个语法检查功能非常有限,只能检查语法的格式,例如是否缺少了大括号、是否漏了冒号、分号。

    1.1 注意事项

        1、这里有一点比较另类,设定背景颜色background-color时,必须要同时把设置一下边框属性:如边框圆角border-radius、边框粗细等,否则背景色无法生效。

        2、如上图所示,样式表可以用大括号限定作用的控件类型,比如QPushButton{  },如果不用大括号限定控件类型,那么该控件的所有子控件都会显示为父控件的样式,最典型的例子,使用容器类控件时,

    例如QGroupBox,我们不用QGroupBox{  }限定qss语句的作用范围,而是直接设置其样式,那么该容器中的任何子控件(按钮、单选框、label等)都会显示为QGroupBox的样式,如下图所示:

    由此我们还可以联想到,主窗口是所有控件的父控件,

    (1)如果我们设置了主窗体的样式,而不指定作用范围,那么窗体内的所有控件都会按照主窗体的设置的样式来显示;

    (2)如果我们在主窗体中设置样式时指定作用范围为QPushButton,那么该窗体内的所有QPushButton就都会显示为所设置的样式。

    (3)如果父控件和子控件都设置了样式,那么子控件就按照自己的样式来显示,这是覆盖机制,因为父控件总是在子控件之前构造,子控件在构造时,会把原先的设置给覆盖掉。

     

    2、用程序添加样式

    2.1 用程序语句添加

        这种方法更简单粗暴,每一个控件都有自己的setStyleSheet(QString &)成员函数,直接把方法一里面的样式语句,作为形参传入该方法即可,例如:

     

    QString pushButton_SS = "QPushButton{border-radius: 10px; /*圆角半径*/color:green;/*字体颜色*/}";
    ui->pushButton_SerialSend->setStyleSheet(pushButton_SS);

     

    2.2 用qss文件添加

    跟2.1节的方法基本一样,唯一的不同就是,样式表的语句是从文件中读入的,而2.1节的样式语句是直接写在程序里的。

    步骤如下:

    1、新建一个txt文本文档,并修改后缀名为.qss,文件名任取,例如:myStyleSheet.qss,

    2、在这个qss文件中写qss语句

    3、在程序中用QFile类读取该文件,并把读出的内容传递给setStyleSheet()函数

    下面是从别处抄来的例程:

     

    MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        ui->setupUi(this);
        this->loadStyleSheet(":/qss/myStyleSheet.qss");
    }
    void MainWindow::loadStyleSheet(const QString &styleSheetFile)
    {
        QFile file(styleSheetFile);
        file.open(QFile::ReadOnly);
        if (file.isOpen())
        {
            QString styleSheet = this->styleSheet();
            styleSheet += QLatin1String(file.readAll());//读取样式表文件
            this->setStyleSheet(styleSheet);//把文件内容传参
            file.close();
        }
        else
        {
            QMessageBox::information(this,"tip","cannot find qss file");
        }
    }

    给MainWindow添加成员函数loadStyleSheet(),直接在构造函数中调用它即可

     

    myStyleSheet.qss文件的内容如下:

     

    QPushButton
    {/*按钮无任何操作时*/
         background-color: green;/*背景色*/
    }
    QPushButton:hover
    { /*鼠标悬停在按钮上时*/
        background-color:red;
    }
    
    QPushButton:pressed
    { /*按钮被按下时*/
         background-color:green;
    }

     

    2.2.1引用qss文件的外部路径

     

        加载qss文件时,需要指定文件路径(一般是相对路径),如果把qss文件放在磁盘上,文件暴露在用户眼皮底下,可能会被用户随意修改,解决方法就是把qss文件作为资源,一起打包进exe文件中

    2.2.2引用qss文件的资源路径

    步骤如下:

    1、在qt左侧目录树的顶层文件夹上右击->添加新文件->选择QT->QT resource file->choose,输入自定义资源文件的名字res->选择资源文件的存放路径->下一步->ok,这样就可以在目录树中看到一个文件 res.qrc。(如果已经创建过资源文件,则跳过该步)

    2、右击res.qrc文件->open in editor,如果打不开则选->open with->资源编辑器,在打开的资源编辑器中,点击添加->前缀->修改前缀为/qss,  再点击添加->添加现有文件->添加上选中我们上面做好的qss文件。完成后效果如下图所示。

    3、写程序时需要读取该文件时,右击这个qss文件,选择复制url,即可复制本文件的资源路径,非常方便。

     

     

    附:如何设置qss语法高亮?百度上有很多相关答案,自行搜索即可。

     

    3、样式表选择器

     

    样式表选择器,是为了给某一类控件统一设置样式,内容比较多,自行搜索学习吧

     

     

     

     

    展开全文
  • StyleSheet

    2017-07-10 07:32:18
    // 定义组件 var AwesomeProject = React.createrclass({  render: function() {  return (                  );  } }); var styles =
  • Qt StyleSheet详解

    2019-01-22 11:02:22
    在涉及到Qt 美工的时候首先需要掌握CSS 级联样式表。 下面将通过几个例子来介绍一下怎样使用Qt中的部件类型设计。自定义的前台背景与后台背景的颜色: 如果需要一个文本编辑器的背景变为黄色, 下面是代码行: ...
  • React Native之StyleSheet样式表

    千次阅读 2017-01-24 17:11:44
    概述在React Native中,StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下,先定一个StyleSheet的样式表,然后在View中引用样式。var styles = StyleSheet.create({ container: { borderRadius: 4, ...
  • qt stylesheet

    千次阅读 2016-04-08 13:19:53
    Qtstylesheet 用法, QSS实例 规则见帮助文档 背景图片九宫格 border-width: 5px;  border-image: url(./run/images/news/group_normal.png) 5 5 5 5 stretch stretch; border-width必须要加上,用...
  • https://stackoverflow.com/questions/4458201/unable-to-set-the-background-image-in-qt-stylesheet 把图片加入资源用 setStyleSheet("background-image: url(:/images/sunset.jpg);"); 没加入资源,使用相对...
  • Qt Creator stylesheet 简单应用

    千次阅读 2016-06-30 18:41:29
    Qt Creator stylesheet 简单应用 先说说自己的情况吧,大龄转行,凭借自己的爱好,依然转到IT 圈,本来学的嵌入式,到现在驱动不会写,后来到了现在的公司,烧写内核,Qt 移植,串口程序编写,后来竟让我写开了...
  • QT creator 中stylesheet的几种用法

    千次阅读 2014-11-25 20:08:23
     QT Create中,对button或者window等部件设置背景、颜色、透明等样式时,需要用到style sheet,可以直接在代码里写,也可以在ui设计师里通过右键change style sheet的方法来设置,本人是使用的后面的方式,下面介绍...
  • 要点每项后面的下拉菜单,为所加入样式表选择一个前缀。
  • A background-image does not scale with the size of the widget. To provide a "skin" or background that scales along with the widget size, one must use border-image. Since the border-image property prov
  • 关于QtStyleSheet作用范围

    千次阅读 2012-08-23 11:30:01
    QtStyleSheet是很方便的一个设置各种控件风格形态的属性,但是默认的StyleSheet会作用于所有的子控件,容易带来麻烦,以下几种情况,可以限制作用范围 以QTextEdit为例,实体名为edTest 一:作用于所有子控件  ...
  • 右键点你的项目 “Add New”->"QT Resource file" 生成一个qrc文件 然后双击它 点add 然后Add Prefix 再Addfile 完事之后build一下 在你的ui上点右键 ->ChangeStyleSheet ->add Resource->backgroud-image 顺...
  • qt中添加背景图片(stylesheet

    万次阅读 2012-07-24 15:39:38
    右键点你的项目 “Add New”->"QT Resource file" 生成一个qrc文件 然后双击它 点add 然后Add Prefix 再Add file 完事之后build一下 在你的ui上点右键 ->Change StyleSheet ->add Resource ->backgroud-...
  • QT设置背景透明

    千次阅读 2019-04-30 17:05:51
    1.将页面UI设置成栅栏布局。 2.将栅栏变形为QFram,再改变样式表 background-color: rgba(252,252,252,70%);//70%为透明度 3.将页面内控件改变样式表,设为透明 background-color: rgba(200,200,200,0); ....
  • PyQt Stylesheet使用
  • Qt设置窗体透明度的几种方法

    千次阅读 2016-01-01 16:43:48
    1、设置窗体的背景色 在构造函数里添加代码,需要添加头文件qpalette或qgui  QPalette pal = palette();  pal.setColor(QPalette::Background, QColor(0x00,0xff,0x00,0x00));...窗口整体透明,但窗口
  • QT QPushButton 通过stylesheet 设置样式

    万次阅读 2018-11-06 14:05:01
    1.QT QPushButton 通过stylesheet 设置样式 ui-&gt;pushButton-&gt;setStyleSheet("QPushButton{background-color:rgba(255,178,0,100%);\ color: white; border-radius:...

空空如也

1 2 3 4 5 ... 20
收藏数 290,113
精华内容 116,045
关键字:

stylesheet