前端入门-css 样式表简介

叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化

那css网页HTML有什么关系?

通俗的讲你可以把HTML比作是组成网页的框架，而css则是装饰美化网页的工具。一个没有任何css的网页是排版混乱，杂乱无章的，没有美感的。

本文下来主要介绍下如何在网页中使用css，以及css包括哪些知识点，具体的css知识点会在以后逐一介绍，一篇文章很难讲完。

回顾下HTML基础

css是作用于HTML标签上的，如果你还不是很熟悉HTML，请先学习HTML的知识，再来学习css。

一个HTML标签如下结构：

标签（Tag）—— 元素名称，如a, div
属性（Attribute）—— 元素属性，如href
值（Value）—— 属性值
元素（Element）—— HTML标记中所有的东西：属性、值和内容。

网页中如何使用css

网页中使用css一般有三种，行内样式，内部样式表及外部样式表。

1、行内样式

在html标签的style属性中写css代码，这样的方式就是行内样式。行内样式有个缺点就是对于页面中相同的元素必须每个元素都写一遍css代码，很不方便，所以这时需要使用内部样式表或外部样式表。

如下示例：

<html>
  <head>
		<title>行内样式</title>
  </head>
<body>
    <p style="color:red;font-size:14px;">hello world!</p>
  </body>
  </html>

2、内部样式表

使用<style></style> 标签之间写css代码，就是内部样式表。内部样式表缺点就是当页面复杂的时候，不利于组织代码，把不同模块功能的css代码组织成不同的css文件，这样更加清晰，便于组织维护代码。

如下示例：

<html>
  <head>
  <title>内部样式表</title>
  	<style type="text/css>
  			h1{
        	color: red;
        }
				p{
        	color: bule;
        }
    </style>
  </head>
<body>
  	<h1>标题1</h1>
    <p>hello world!</p>
  </body>
  </html>

3、外部样式表

使用<link href="css文件路径"> 的方式引入外部css 文件，这就是外部样式表，除此之外，在一个css 文件中还可以使用 @import "css文件路径" 引入另外一个css文件。

示例1：

<html>
  <head>
  <title>内部样式表</title>
  <link href="style.css" rel="stylesheet">
  </head>
  <body>
  	<h1>标题1</h1>
    <p>hello world!</p>
  </body>
  </html>

style.css

h1{
  color: red;
}
p{
  color: bule;
}

示例2：

如下代码，在style.css 中使用@import引入一个home.css文件，

style.css

@import "home.css"
h1{
  color: red;
}
p{
  color: bule;
}

home.css

div{
	color: #ff00ff;
}
p{
  color: red;
}

这里特别注意下，home.css 里面的css 选择器如果和style.css 的一样，那么style.css 的样式效果会覆盖home.css 的效果，比如这里p标签最终显示为蓝色，而不是红色。

css语法

css有三个部分组成：选择器、属性和值。

选择器 —— 用来查询选择HTML标签的
属性 —— 设置HTML元素的各种样式
值 —— 应用的样式值

例子：

#id{
	color: red;
}
p{
	color: green;
}
.head{
	color: blue;
  font-size: 12px;
}

如上#id,p,.head 就是选择器，大括号里面冒号前面是属性，冒号后面是值，每行以分号结束。

css 注释

cs样式表中注释语句以“/*”开始，以“*/”结束，如下所示：

/*这是注释*/
/*这是注释，可以多行
 这是注释，可以多行
*/
p{
	color: red; /*黑色字体*/
}

css 的继承和冲突

css 的继承规则是一个html元素的子元素会继承它的所有上级元素样式，有时会把很多外层的的样式叠加在一起，如下示例：

<html>
  <style>
  body{
  	color:red;
    font-size: 12px;
  }
div{
	 background-color: #0000ff;
}
  </style>
  <body>
  <div>
  	<p>段落文字</p>
  </div>
  </body>
  </html>

如上示例中，p段落包含在body中的div元素里，所以p段落继承了body 和 div 的样式，它将显示蓝色背景和红色字体。

如果在上面的示例代码中，再加上 p{color: #ffffff;} ,这个时候，p元素中的文字显示什么颜色？答案是白色，为什么，这就是css 产生冲突了。

在同一个元素上使用了同一个css属性但不同值的时候，就会产生冲突，浏览器会按照最后定义的样式为准。

css知识点

1、css 选择器

2 、css优先级

3、css 间距 —— margin、padding

4、css 盒子模型

5、css字体和文本 —— font

6、css链接样式

7、css颜色和背景 —— color 、background

8、css边框和圆角 —— border

9、css显示 —— display

10、css定位 —— position

11、css浮动 —— float

12、css布局：flex弹性盒子

13、css响应式：媒体查询

14、css 过渡和动画

15、css渐变和阴影

16、css网格

最后

css （层叠样式表）它有很多属性，但是平时只会用到一小部分，学习css不能死记硬背一大堆属性语法，这样没有多大用处，只需要掌握基本的概念和常用语法，基本上就够用了，对于其它的属性在用的时候再查询文档就可以了。

关于css详细内容，后面会按知识点介绍，感谢关注。

下一篇：前端入门——css 选择器

SS样式表可以通过内联样式、内部样式和外部样式来指定样式，也可以使用ID选择器、类选择器、属性选择器等方式来选择元素并指定样式。在CSS中，一些样式属性会被子元素继承，可以充分利用这个特性来简化代码。通过合理选择样式指定方式，可以更方便地编写优雅、易维护的CSS代码。

CSS样式表有三种类型的样式：内联样式、内部样式和外部样式。

1、内联样式：将样式属性直接添加到HTML元素的"style"属性中，如下例所示：

<p style="color: red; font-size: 16px;">这是一段内联样式的文字</p>

2、内部样式：将样式规则放在HTML文档的<head>标签中的<style>标签中。这种方式可以用于一组或多组相关的样式，如下例所示：

<head>

<style>

p {

color: red;

font-size: 16px;

}

</style>

</head>

<body>

<p>这是一段内部样式的文字</p>

</body>

3、外部样式：将样式规则放在一个单独的.css文件中，然后在HTML文档中通过<link>标签引用它，如下例所示：

<head>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>

<body>

<p class="red-text">这是一段外部样式的文字</p>

</body>

在这个例子中，样式规则位于名为"styles.css"的文件中，然后在HTML文档中引用这个文件。该文件中的样式可以应用于文档中的所有元素。

除了这三种样式外，CSS还支持其他一些方式来指定样式，例如：

4、ID选择器：通过元素的ID属性来指定样式，使用"#"符号加上ID名来指定，如下例所示：

<head>

<style>

#my-id {

color: blue;

font-size: 20px;

}

</style>

</head>

<body>

<p id="my-id">这是一个ID选择器的段落</p>

</body>

5、类选择器：通过元素的class属性来指定样式，使用"."符号加上类名来指定，如下例所示：

<head>

<style>

.red-text {

color: red;

font-size: 16px;

}

</style>

</head>

<body>

<p class="red-text">这是一个类选择器的段落</p>

</body>

6、属性选择器：通过元素的属性来指定样式，使用方括号"[属性名]"来指定，如下例所示：

<head>

<style>

[title="my-title"] {

color: green;

font-size: 18px;

}

</style>

</head>

<body>

<p title="my-title">这是一个属性选择器的段落</p>

</body>

7、继承样式：某些样式属性会被子元素继承，例如color、font-size等属性。这意味着如果一个元素没有直接指定某个样式属性的值，则会继承父元素的该属性值。

CSS提供了多种方式来指定样式，可以根据具体需求选择合适的方式来编写样式。

. QSS简介

Qt样式表(style sheet)是用于定制用户界面的强有力的机制，其概念、术语是收到HTML中的级联样式表(Cascading Style Sheets,CCS)启发而来，只是Qt样式表是用用于窗体界面的

与HTML的CSS类似，Qt的样式表是纯文本的格式定义，在应用程序运行时可以载入和解析这些样式定义。使用样式表可以定义各种界面组件(QWidget类及其子类)的样式，从而使应用程序的界面呈现不同的效果。很多软件具有换肤功能，使用Qt的样式表就可以很容易的实现这样的功能

多多翻看Qt官方文档，所有控件都有案例：在索引栏输入Qt style

CSS样式表学习：http://www.w3school.com.cn/css/css_syntax.asp

1.1 盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

下面的图片说明了盒子模型(Box Model)：

Qt资料领取（视频教程+文档+代码+项目实战）

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

为了正确设置元素在所有浏览器中的宽度和高度，你需要知道的盒模型是如何工作的。

2. QSS加载方式

方式一：在代码中加载

myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
nameEdit->setStyleSheet("background-color: yellow");

方式二：读文件的方式加载

    QFile file("://qss/styles.css");
    if(!file.open(QIODevice::ReadOnly | QIODevice::Text))
    {
        qWarning("styles.css open falied");
    }
    this->setStyleSheet(file.readAll());

3.QSS选择器类型

3.1 通配选择器

匹配所有的控件

3.2 类型选择器

QPushButton

匹配所有QPushButton和其子类的实例

QPushButton {background: gray;}

3.3 属性选择器

QPushButton[flat="false"]

匹配所有flat属性是false的QPushButton实例，注意该属性可以是自定义的属性，不一定非要是类本身具有的属性

QPushButton[STYLE_KEY='dangerous'] { background: magenta; }
/*openButton->setProperty("STYLE_KEY",  "dangerous");*/

3.4 类选择器

.QPushButton

匹配所有QPushButton的实例，但是并不匹配其子类。这是与CSS中的类选择器不一样的地方，注意前面有一个点号

.RedButton { background: magenta; }
 
/*
openButton->setProperty("class",  "RedButton");
closeButton->setProperty("class", "RedButton");
*/

3.5 ID选择器

#myButton

匹配所有id为myButton的控件实例，这里的id实际上就是objectName指定的值

#openButton, #closeButton { background: magenta; }

3.6 后代选择器

QDialog QPushButton

所有QDialog容器中包含的QPushButton，不管是直接的还是间接的

QDialog {background: gray;}
/* 设置 QDialog中的 QPushButton 的 QSS */
QDialog QPushButton 
{
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}

3.7 子选择器

QFrame> QPushButton

所有QFrame容器下面的QPushButton，其中要求QPushButton的直接父容器是QFrame,注意和后代选择器的区别

QFrame {background: gray;}
QFrame > QPushButton 
{
    border: 2px solid magenta;
    border-radius: 10px;
    background: white;
    padding: 2px 15px;
}

3.8 伪类选择器

选择器:状态作为选择器，支持 ! 操作符，表示非。

QPushButton:hover { color: white }
QCheckBox:checked { color: white }
QCheckBox:!checked { color: red }

所有的这些选择器可以联合使用，并且支持一次设置多个选择器类型，用逗号隔开，这点与CSS一样，例如：

#frameCut,#frameInterrupt,#frameJoin 表示所有这些id使用一个规则。

#mytable QPushButton 表示选择所有id为mytable的容器下面的QPushButton实例

4. QSS常用属性

4.1 字体

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位：PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

字体名：

微软雅黑：Microsoft YaHei 宋体：SimSun 黑体：SimHei 仿宋： FangSong 楷体： KaiTi

隶书：LiSu 幼圆：YouYuan 华文细黑：STXihei 华文楷体：STKaiti 华文宋体：STSong

华文中宋：STZhongsong 华文仿宋：STFangsong 方正舒体：FZShuTi 方正姚体：FZYaoti 华文彩云：STCaiyun

华文琥珀：STHupo 华文隶书：STLiti 华文行楷：STXingkai 华文新魏：STXinwei

font: 15px "Segoe UI";             /* 字体:大小 名称 */  
 
font-family: "Segoe UI";           /* 字体名称 */

4.2 颜色

17种标准色：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,olive, orange, purple, red, silver, teal, white, yellow

colo:rgb(255,255,255);   
 
color: #F5F5F5;               /* 前景(文本)颜色 */  
 
color: qlineargradient();     /* 前景(文本)颜色:线性渐变*/  
 
color: qradialgradient();     /* 前景(文本)颜色:辐射渐变*/  
 
color: qconicalgradient();    /* 前景(文本)颜色:梯形渐变*/

4.3 内边距

padding: 14px 18px 20px 18px;              /*内边距 顺序上右下左 */
 
padding-left: 5px;                 /* 文字左边距 */  
 
padding-right: 10px;               /* 文字右边距 */  
 
padding-top: 3px;                  /* 文字顶边距 */  
 
padding-bottom: 3px;               /* 文字底边距 */

4.4 外边距

margin: 14px 18px 20px 18px; /*外边距 顺序上右下左 */
 
margin-top: 14px;
 
margin-right: 18px;
 
margin-bottom: 20px;
 
margin-left: 18px;

4.5 背景

background-color: #202122;               /* 背景颜色 */  
 
background-color: qlineargradient();    /* 背景颜色:线性渐变*/  
 
background-color: qradialgradient();    /* 背景颜色:辐射渐变*/  
 
background-color: qconicalgradient();   /* 背景颜色:梯形渐变*/  
 
background-image:url(boder.png);        /* 背景图片 */  
 
background-position: ;                 /* 背景图片对齐方式 */  
 
background-repeat: ;                   /* 背景图片平铺方式 */

4.6 边框

border-style: solid;/*边框类型*/
/*===============================*/
dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框
/*===============================*/

border-width: 2px;                     /*边框宽度*/

border-color: #FDBC03;                 /*边框颜色*/

border: 1px solid #FDBC03;             /* 边框:宽度 类型 颜色*/  
 
border-image:url(boder.png) 4 8 12 16; /* 边界图 切线 */  
 
border-radius: 4px;                    /* 角弧度 */  
 
border-top-left-radius: 4px;           /* 角弧度:左上角*/  
 
border-top-right-radius: 4px;          /* 角弧度:右上角*/  
 
border-bottom-left-radius: 4px;      /* 角弧度:左下角*/  
 
border-bottom-right-radius: 4px;     /* 角弧度:右下角*/

4.7 宽高

width:12px;           /*设置宽度*/
 
height:40px;          /*设置高度*/
 
min-width:65px;       /*最小宽度*/
 
min-height:12px;      /*最小高度*/
 
max-width:12px;       /*最大宽度*/
 
max-height:12px;      /*最大高度*/

5. QSS伪状态与子控件

5.1 伪状态列表

:checked                        /*button部件被选中*/ 
:unchecked                      /*button部件未被选中*/ 
:disabled                       /*部件被禁用*/ 
:enabled                        /*部件被启用*/ 
:focus                          /*部件获得焦点*/ 
:hover                          /*鼠标位于部件上*/ 
:indeterminate                  /*checkbox或radiobutton被部分选中*/ 
:off                            /*部件可以切换，且处于off状态*/ 
:on                             /*部件可以切换，且处于on状态*/ 
:pressed                        /*部件被鼠标按下*/

5.2 子部件列表

::down-arrow        /*combo box或spin box的下拉箭头*/ 
::drop-down         /*combo box的下拉箭头*/ 
 
::indicator              /*checkbox、radio button或可选择group box的指示器*/ 
::item               /*menu、menu bar或status bar的子项目*/ 
::menu-indicator          /*push button的菜单指示器*/ 
::title              /*group box的标题*/ 
 
::down-button         /*spin box的向下按钮*/
::up-arrow           /*spin box的向上箭头*/ 
::up-button          /*spin box的向上按钮*/

文章转自博客园（BORUTO）：https://www.cnblogs.com/zhuchunlin/p/16485890.html

Qt资料领取→「链接」

在线咨询

上一篇：第5天 - 16天搞定前端，html布局，表格和大块头
下一篇：用css制作头像渐变边框

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端入门-css 样式表简介

回顾下HTML基础

网页中如何使用css

css语法

css知识点

最后

. QSS简介

1.1 盒子模型

2. QSS加载方式

3.QSS选择器类型

3.1 通配选择器

3.2 类型选择器

3.3 属性选择器

3.4 类选择器

3.5 ID选择器

3.6 后代选择器

3.7 子选择器

3.8 伪类选择器

4. QSS常用属性

4.1 字体

4.2 颜色

4.3 内边距

4.4 外边距

4.5 背景

4.6 边框

4.7 宽高

5. QSS伪状态与子控件

5.1 伪状态列表

5.2 子部件列表

您的项目需求