精华内容
下载资源
问答
  • Qt/Qss样式表基础

    2017-01-13 13:45:26
    基本语法 1. 样式表单由一系列样式规则组成。...2. Qt的样式表语法不区分大小写,所以color,Color,coLor,coloR都表示同样的颜色属性。 但是指代类的类名的时候,是区分大小写的。 3. 多个选择器可以并列
    基本语法
    1.  样式表单由一系列样式规则组成。
    每条规则可以分成两部分:选择器(selector)和声明(declaration)
    选择器:表示规则作用到哪些控件上
    声明则:详细说明了是什么规则

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


    3. 多个选择器可以并列使用,它们之间用逗号隔开,
    例如:
             QPushButton,QLineEdit, QComboBox{ color: red }
             设置三个控件的字体颜色为红色


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






    使用方法:
    1. 建立qss样式表,更改文件后缀名为qss,内容如下
      QPushButton 
      {
    background-color: qlineargradient(spread:pad, x1:0.522124, y1:0, x2:0.506, y2:1,
    stop:0 rgba(85, 170, 127, 255),
    stop:1 rgba(255, 255, 255, 255));
        }
    QComboBox 
    {
      background: green;
        }


    2. 在工程中新建资源文件*.qrc,将qss文件加入资源文件qrc中,此处注意prefix最好为"/",否则在调用qss文件时会找不到文件;


    3. 增加相应头文件 #include <QFile>
    通过传入路径/文件名的方式创建一个QFile对象,
    以readonly的方式打开,然后readAll,
    最后qApp->setStyleSheet就可以使qss生效。


    4. 在相关的项目中的main()函数中,增加如下内容(加粗斜体部分):
    int main(int  argc,char  *argv[])
    {
        QApplication  a(argc,argv);
        MainWidget   w;
        QFile  qss(":/new/prefix1/style.qss");  //引号内为资源文件的路径,根据需要更改
        qss.open(QFile::ReadOnly);
        a.setStyleSheet(qss.readAll());
       qss.close();
       w.show();
        returna.exec();
        }
    展开全文
  • CSS与JS紧密配合,为我们的页面增添了很多别致的效果。为了达到某种特殊的效果我们需要用...CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-botto
  • CSS语法 (不区分大小写) JavaScript语法 (区分大小写)  border border  border-bottom borderBottom  border-bottom-color borderBottomColor  border-bottom-style borderBottomStyle...
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写) 
    border border 
    border-bottom borderBottom 
    border-bottom-color borderBottomColor 
    border-bottom-style borderBottomStyle 
    border-bottom-width borderBottomWidth 
    border-color borderColor 
    border-left borderLeft 
    border-left-color borderLeftColor 
    border-left-style borderLeftStyle 
    border-left-width borderLeftWidth 
    border-right borderRight 
    border-right-color borderRightColor 
    border-right-style borderRightStyle 
    border-right-width borderRightWidth 
    border-style borderStyle 
    border-top borderTop 
    border-top-color borderTopColor 
    border-top-style borderTopStyle 
    border-top-width borderTopWidth 
    border-width borderWidth 
    clear clear 
    float floatStyle 
    margin margin 
    margin-bottom marginBottom 
    margin-left marginLeft 
    margin-right marginRight 
    margin-top marginTop 
    padding padding 
    padding-bottom paddingBottom 
    padding-left paddingLeft 
    padding-right paddingRight 
    padding-top paddingTop
    background background 
    background-attachment backgroundAttachment 
    background-color backgroundColor 
    background-image backgroundImage 
    background-position backgroundPosition 
    background-repeat backgroundRepeat 
    color color 
    display display 
    list-style-type listStyleType 
    list-style-image listStyleImage 
    list-style-position listStylePosition 
    list-style listStyle 
    white-space whiteSpace 
    font font 
    font-family fontFamily 
    font-size fontSize 
    font-style fontStyle 
    font-variant fontVariant 
    font-weight fontWeight 
    letter-spacing letterSpacing 
    line-break lineBreak 
    line-height lineHeight 
    text-align textAlign 
    text-decoration textDecoration 
    text-indent textIndent 
    text-justify textJustify 
    text-transform textTransform 
    vertical-align verticalAlign

     

    展开全文
  • js设置css样式对照

    2016-05-19 13:44:09
    CSS语法 (不区分大小写) JavaScript语法 (区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width
    盒子标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
    border   border
    border-bottom   borderBottom
    border-bottom-color   borderBottomColor
    border-bottom-style   borderBottomStyle
    border-bottom-width   borderBottomWidth
    border-color   borderColor
    border-left   borderLeft
    border-left-color   borderLeftColor
    border-left-style   borderLeftStyle
    border-left-width   borderLeftWidth
    border-right   borderRight
    border-right-color   borderRightColor
    border-right-style   borderRightStyle
    border-right-width   borderRightWidth
    border-style   borderStyle
    border-top   borderTop
    border-top-color   borderTopColor
    border-top-style   borderTopStyle
    border-top-width   borderTopWidth
    border-width   borderWidth
    clear   clear
    float   floatStyle
    margin   margin
    margin-bottom   marginBottom
    margin-left   marginLeft
    margin-right   marginRight
    margin-top   marginTop
    padding   padding
    padding-bottom   paddingBottom
    padding-left   paddingLeft
    padding-right   paddingRight
    padding-top   paddingTop


    颜色和背景标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
    background   background
    background-attachment   backgroundAttachment
    background-color   backgroundColor
    background-image   backgroundImage
    background-position   backgroundPosition
    background-repeat   backgroundRepeat
    color   color
    样式标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
    display   display
    list-style-type   listStyleType
    list-style-image   listStyleImage
    list-style-position   listStylePosition
    list-style   listStyle
    white-space   whiteSpace
    文字样式标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
    font   font
    font-family   fontFamily
    font-size   fontSize
    font-style   fontStyle
    font-variant   fontVariant
    font-weight   fontWeight
    文本标签和属性对照
    CSS语法 (不区分大小写)   JavaScript语法 (区分大小写)
    letter-spacing   letterSpacing
    line-break   lineBreak
    line-height   lineHeight
    text-align   textAlign
    text-decoration   textDecoration
    text-indent   textIndent
    text-justify   textJustify
    text-transform   textTransform
    vertical-align   verticalAlign


    如:document.getElementByIdx_x('tipDiv').style.lineHeight ="150%";

    转载于:http://blog.sina.com.cn/s/blog_61c9c41e0100va07.html

    展开全文
  • 样式表可以是外部的、内联的或嵌入的;...这要写在 Head 标签内, 其内容不区分大小写, 其中的双引号也可以是单引号、也可省略; 逐个解释一下: link: 是 HTML 的常用标签, 它的作用可不仅仅是链接外部样...
    样式表可以是外部的、内联的或嵌入的; 链接外部样式文件一般是:
    <link rel="stylesheet" type="text/css" href="xxx.css" media="all">

    这要写在 Head 标签内, 其内容不区分大小写, 其中的双引号也可以是单引号、也可省略; 逐个解释一下:

    link: 是 HTML 的常用标签, 它的作用可不仅仅是链接外部样式, 譬如指定地址栏的图标:
    <link rel="shortcut icon" type="image/ico" href="my.ico">

    rel="stylesheet": (rel 是 relation 的缩写)说明 Link 的文件用于样式表, 所以样式表的后缀未必一定要是 css.

    type="text/css": 说明 Link 的文件是文本格式; 现在应该都是文本格式, 说不定以后会有二进制的.

    href="xxx.css": 的路径可以是绝对的、相对的、远程的、本地的.

    media="all": media 的取值多了(all、aural、braille、embossed、handheld、print、projection、screen、tty、tv), 但现在得到广泛支持也就是: all、screen(用于屏幕呈现)、print(用于打印).
    如果给 media 指定多个值可用逗号隔开, 如: media = "print, screen".
    它的默认值应该是 all(没经资料核对), 所以可以省略.

    它最简单的写法可以是: <link rel=stylesheet href=xxx.css> 不能再省了!

    也有给它扩展的, 譬如:
    <link rel="stylesheet" id="css1" title="FirstCSS" type="text/css" href="xxx.css" media="all">

    在 js 脚本中, 可以通过下面方式读出这些值(假如这是第一个 Link 标签):
    document.getElementsByTagName("link").item(0).rel;
    document.getElementsByTagName("link").item(0).id;
    document.getElementsByTagName("link").item(0).title;
    document.getElementsByTagName("link").item(0).href;
    document.getElementsByTagName("link").item(0).media;
    document.getElementsByTagName("link").length; // Link 标签总数.
    

    曾见到有些实现动态切换样式的脚本就是利用了其 title 属性.

    如果 Link 了多个外部样式表, 会优先使用哪个呢?
    答案简单, 不同的样式: 设定都起作用、相同的样式: 后者覆盖前者; 后面的 @import 和其中的元素也是如此.

    内联样式也要写在 Head 标签内, 书写格式:
    <style type="text/css"> ... </style>; 常被写做: <style> ... </style> 在内联样式内可用 @import 引入外部文件, 如:
    <style>
    @import url(xxx.css);
    @import url(xxx.css) screen, print; /* 也可同时指定用途 */
    /* 本页的其他样式 */
    </style>
    

    因为 @import 来的比较晚(老浏览器不支持)、也不容易被 js 控制, 所以不如 Link 普及.
    不过设定页内样式用内联样式很方便了.



    嵌入样式, 如: <div style="font: bold; color: #f00;"> ... </div>
    这种用法很普及, 指定个性化的元素也方便, 只是让本来非常宏观的 CSS 小气了一点.

    设定的样式用于哪个标签? 哪些标签? 基本分为:
    标签选择、ID选择、类选择、包含选择、通配选择、伪类选择(本来还有更多, 现在没有得到普遍支持, 学也无用).

    标签选择:
    span {color: red;} 会作用于所有 span 标签;
    span, div {color: red;} 会作用于所有 span 和 div 标签;

    ID选择:
    #ID1 {color: red;} 会作用于所有 id=ID1 的标签;
    #ID1, #ID2 {color: red;} 会作用于所有 id=ID1 和 id=ID2 标签;

    类选择:
    .c1 {color: red;} 会作用于所有 class=c1 的标签;
    .c1, .c2 {color: red;} 会作于到所有 class=c1 和 class=c2 标签;

    值得一提的是: 一个标签也可以同时指定多个类(空格隔开), 如:


    包含选择:
    div span {color: red;} 会作用于所有父元素是 div 的 span 标签;
    div p a {color: red;} 会作用于所有 div 中的 p 中的所有链接;

    把上面混一下:
    span, div p #ID1 {color: red;} 会作用于 div 下的 p 下的 id=ID1 的标签、和所有的 span 标签.
    div.c1 {color: red} 会作用与 div 下 class=c1 的标签; 若多个空格: div .c1 {color: red} 会更好理解.

    通配选择:
    如: *{background: #ddd; color: #f00;} 它作用与所有元素.
    这比 html {background: #ddd; color: #f00;} 厉害, 下面是对比图:



    继续研究通配符:
    如果把 .c1 写做 *.c1; 或者把 #ID1 写做 *#ID1 应该不难理解(它们没有区别);

    但 div{...} 和 div*{...} 就有区别了! div* 是指 div 下的元素, 不包含直属内容. 看图:



    同样 body * a {...} 不会作用到 body 下的直属链接:


    伪类选择, 如:
    a:visited {...} (已访问的链接);
    div:first-letter {...} (div 中的第一个字).
    之所以叫 "伪类", 是因为它们是不确定的.

    还有一个优先级的问题, 前面稍有提到.
    定义位置的优先顺序是(由高到低): 嵌入 - 内联 - 外部;
    选择方式的优先顺序是(由高到低): ID选择 - 类选择 - 标签选择;
    如果定义不重复就都有效、重复定义的后者会覆盖前者.

    如果前面定义的样式, 不想被后面覆盖怎么办? 使用 !important (它具有最高优先级). 如:


    总结:
    基本顺了一遍样式表, 寒假也算没有虚度;
    因为不常用它, 感觉还是接触了不少新东西;
    博客园上朋友好像大都是搞网络编程的, 对 css 应该没得说; 斗胆把它发在首页上, 以期待得到指正和补充.

    相关链接:
    图解 CSS (1): 先做一个样式表测试工具

    图解 CSS (2): border - 边框

    图解 CSS (3): padding(内边距)、margin(外边距)

    图解 CSS (4): background - 背景

    图解 CSS (5): font - 字体

    图解 CSS (6): text - 文本格式

    图解 CSS (7): 大小、定位、剪切、滚动条

    图解 CSS (8): 浮动、显示、隐藏

    图解 CSS (9): 列表

    图解 CSS (10): 链接、继承、放缩、鼠标指针、其他(待补充...)

    图解 CSS (11): 理解样式表的逻辑

     

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html

    转载于:https://www.cnblogs.com/jacklaw/archive/2009/05/09/1453059.html

    展开全文
  • 原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html样式表可以是外部的、内联的或嵌入的; 链接外部样式文件一般是:<...这要写在 Head 标签内, 其内容不区分大小写, 其中的双引号也可以是...
  • 1,使用子选择器,可以帮助你节约大量的class定义; 2,取消class和id前的元素限定; 3,默认值;通常padding的默认值为0,background-color的默认值是transparent。...5,区分大小写; 6,明确定义单位,除非值
  • 样式表可以是外部的、内联的或嵌入的;...这要写在 Head 标签内, 其内容不区分大小写, 其中的双引号也可以是单引号、也可省略; 逐个解释一下: link: 是 HTML 的常用标签, 它的作用可不仅仅是链接外部样...
  • 它将尽最大努力将其转换为专有名称大小写。 发展 克隆存储库并执行您的操作。 如果您添加代码以涵盖其他转化,请确保将其添加到测试中。 测验 npm运行测试 文件test-data.js包含要转换的名称和预期结果的列表。 ...
  • CSS样式

    2020-12-13 22:27:21
    定义CSS样式的方式共有三种:标签内部,style标签属性;style标签内部或者CSS文件内。 无论使用哪一种方式定义CSS样式表样式表中的declaration都由一个样式属性(非标签属性,即...样式属性值不区分大小写; 参考
  • js 控制 style 大全 各种 document.getElementById("div01").style.height; document.getElementById("div01").style.lineHeight;  document.getElementById("div01").style....CSS语法(不区分大小写) 
  • CSS和JS对照

    2012-01-07 11:16:48
    CSS语法(不区分大小写) JavaScript语法(区分大小写) 颜色和背景标签和属性对照 CSS 语法(不区分大小写) JavaScript 语法(区分大小写) 样式标签和属性对照 CSS语法(不区分大小写) JavaScript 语法(区分大...
  • 在CSS中元素样式属性名称如果是由两个或多个单词组成,则每个单词间用中短线,即 "-" 进行连接, 字符不区分大小写; 在JS中元素样式属性名称如果有两个或多个单词组成则每个单词的首字母要大写,但第一个单词(即最左边...
  • 1、html:不区分大小写 html:显示数据 <html> <head> <title></title> <style></style> </head> <body> hello! </body> </html> 设置标题...
  • js 设置 style 样式

    2014-10-24 11:46:37
    首先,把CSS和JS标签style属性对照了解了: CSS 和 JavaScript 标签 style 属性对照:   ...CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom
  • JS 对应CSS 样式

    2013-07-29 16:47:00
    首先,把CSS和JS标签style属性对照了解了: CSS 和 JavaScript 标签 style 属性对照: ...CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom...
  • 运用CSS3设置网页样式

    2020-06-10 07:20:21
    CSS样式中的选择器严格区分大小写,声明不区分大小写; 多个属性之间必须用英文分号隔开; 属性的属性值由多个单词组成且中间包含空格,则必须为这个属性值加上英文引号; CSS注释:/*注释语句 ~; CSS代码中空格是...
  • QT样式表语法

    2021-01-24 12:06:12
    QT样式表语法 样式规则 每个样式规则由选择器和声明组成。 选择器:指定收该规则影响的部件。...声明:指定这个部件上要设置的属性。...样式表一般不区分大小写,如color 与coLOR表示相同的属性。但类
  • CSS 和 JavaScript 标签 style 属性对照:盒子标签和属性对照颜色和背景标签和属性对照...CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom ...
  • week6---10月16日 CSS样式

    2015-10-15 14:36:41
    一、复习 1、选择器的种类 2、作业讲解 二、新课 (一)伪类选择符 伪类是将条件和事件考虑在内的样式表类型,它不是真正意义上的类或标记对象,可以看作是从某一... CSS的伪类名不区分大小写,目前常见的伪类有:
  • CSS和JS属性对照

    2018-04-10 09:16:21
    有时我们需要通过JS的代码动态改变html元素的样式,...具体对照如下:CSS语法(不区分大小写)JavaScript语法(区分大小写)borderborderborder-bottomborderBottomborder-bottom-colorborderBottomColorborder-botto...
  • 在写javascript中,经常要用到style对象的css属性,很多不记得 其实很好记,基本就是CSS中的“-”转化为javascript的驼峰写法,除了注意下float ... CSS语法(不区分大小写) JavaScript语法(区分大小写)...
  • css // 基础

    2018-12-04 17:16:00
    css层叠样式表 css可以定义HTML 页面显示...比如:字体的大小,图片的宽高,版面的布局等等 ... ...注意:css 样式选择器严格区分大小写。属性和属性值不区分大小写。 css 样式引入规则  样式引入优先级 :行内样...
  • 首先,把CSS和JS标签style属性对照了解了: CSS 和 JavaScript 标签 style 属性对照: ...盒子标签和属性对照 颜色和...CSS语法(不区分大小写) JavaScript语法(区分大小写) border border b

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 158
精华内容 63
关键字:

样式表不区分大小写