前端入門-css 樣式表簡(jiǎn)介

疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁(yè)，還可以配合各種腳本語(yǔ)言動(dòng)態(tài)地對(duì)網(wǎng)頁(yè)各元素進(jìn)行格式化

那css網(wǎng)頁(yè)HTML有什么關(guān)系?

通俗的講你可以把HTML比作是組成網(wǎng)頁(yè)的框架，而css則是裝飾美化網(wǎng)頁(yè)的工具。一個(gè)沒有任何css的網(wǎng)頁(yè)是排版混亂，雜亂無(wú)章的，沒有美感的。

本文下來(lái)主要介紹下如何在網(wǎng)頁(yè)中使用css，以及css包括哪些知識(shí)點(diǎn)，具體的css知識(shí)點(diǎn)會(huì)在以后逐一介紹，一篇文章很難講完。

回顧下HTML基礎(chǔ)

css是作用于HTML標(biāo)簽上的，如果你還不是很熟悉HTML，請(qǐng)先學(xué)習(xí)HTML的知識(shí)，再來(lái)學(xué)習(xí)css。

一個(gè)HTML標(biāo)簽如下結(jié)構(gòu)：

標(biāo)簽（Tag）—— 元素名稱，如a, div
屬性（Attribute）—— 元素屬性，如href
值（Value）—— 屬性值
元素（Element）—— HTML標(biāo)記中所有的東西：屬性、值和內(nèi)容。

網(wǎng)頁(yè)中如何使用css

網(wǎng)頁(yè)中使用css一般有三種，行內(nèi)樣式，內(nèi)部樣式表及外部樣式表。

1、行內(nèi)樣式

在html標(biāo)簽的style屬性中寫css代碼，這樣的方式就是行內(nèi)樣式。行內(nèi)樣式有個(gè)缺點(diǎn)就是對(duì)于頁(yè)面中相同的元素必須每個(gè)元素都寫一遍css代碼，很不方便，所以這時(shí)需要使用內(nèi)部樣式表或外部樣式表。

如下示例：

<html>
  <head>
		<title>行內(nèi)樣式</title>
  </head>
<body>
    <p style="color:red;font-size:14px;">hello world!</p>
  </body>
  </html>

2、內(nèi)部樣式表

使用<style></style> 標(biāo)簽之間寫css代碼，就是內(nèi)部樣式表。內(nèi)部樣式表缺點(diǎn)就是當(dāng)頁(yè)面復(fù)雜的時(shí)候，不利于組織代碼，把不同模塊功能的css代碼組織成不同的css文件，這樣更加清晰，便于組織維護(hù)代碼。

如下示例：

<html>
  <head>
  <title>內(nèi)部樣式表</title>
  	<style type="text/css>
  			h1{
        	color: red;
        }
				p{
        	color: bule;
        }
    </style>
  </head>
<body>
  	<h1>標(biāo)題1</h1>
    <p>hello world!</p>
  </body>
  </html>

3、外部樣式表

使用<link href="css文件路徑"> 的方式引入外部css 文件，這就是外部樣式表，除此之外，在一個(gè)css 文件中還可以使用 @import "css文件路徑" 引入另外一個(gè)css文件。

示例1：

<html>
  <head>
  <title>內(nèi)部樣式表</title>
  <link href="style.css" rel="stylesheet">
  </head>
  <body>
  	<h1>標(biāo)題1</h1>
    <p>hello world!</p>
  </body>
  </html>

style.css

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

示例2：

如下代碼，在style.css 中使用@import引入一個(gè)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 的樣式效果會(huì)覆蓋home.css 的效果，比如這里p標(biāo)簽最終顯示為藍(lán)色，而不是紅色。

css語(yǔ)法

css有三個(gè)部分組成：選擇器、屬性和值。

選擇器 —— 用來(lái)查詢選擇HTML標(biāo)簽的
屬性 —— 設(shè)置HTML元素的各種樣式
值 —— 應(yīng)用的樣式值

例子：

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

如上#id,p,.head 就是選擇器，大括號(hào)里面冒號(hào)前面是屬性，冒號(hào)后面是值，每行以分號(hào)結(jié)束。

css 注釋

cs樣式表中注釋語(yǔ)句以“/*”開始，以“*/”結(jié)束，如下所示：

/*這是注釋*/
/*這是注釋，可以多行
 這是注釋，可以多行
*/
p{
	color: red; /*黑色字體*/
}

css 的繼承和沖突

css 的繼承規(guī)則是一個(gè)html元素的子元素會(huì)繼承它的所有上級(jí)元素樣式，有時(shí)會(huì)把很多外層的的樣式疊加在一起，如下示例：

<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 的樣式，它將顯示藍(lán)色背景和紅色字體。

如果在上面的示例代碼中，再加上 p{color: #ffffff;} ,這個(gè)時(shí)候，p元素中的文字顯示什么顏色？答案是白色，為什么，這就是css 產(chǎn)生沖突了。

在同一個(gè)元素上使用了同一個(gè)css屬性但不同值的時(shí)候，就會(huì)產(chǎn)生沖突，瀏覽器會(huì)按照最后定義的樣式為準(zhǔn)。

css知識(shí)點(diǎn)

1、css 選擇器

2 、css優(yōu)先級(jí)

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浮動(dòng) —— float

12、css布局：flex彈性盒子

13、css響應(yīng)式：媒體查詢

14、css 過(guò)渡和動(dòng)畫

15、css漸變和陰影

16、css網(wǎng)格

最后

css （層疊樣式表）它有很多屬性，但是平時(shí)只會(huì)用到一小部分，學(xué)習(xí)css不能死記硬背一大堆屬性語(yǔ)法，這樣沒有多大用處，只需要掌握基本的概念和常用語(yǔ)法，基本上就夠用了，對(duì)于其它的屬性在用的時(shí)候再查詢文檔就可以了。

關(guān)于css詳細(xì)內(nèi)容，后面會(huì)按知識(shí)點(diǎn)介紹，感謝關(guān)注。

下一篇：前端入門——css 選擇器

SS樣式表可以通過(guò)內(nèi)聯(lián)樣式、內(nèi)部樣式和外部樣式來(lái)指定樣式，也可以使用ID選擇器、類選擇器、屬性選擇器等方式來(lái)選擇元素并指定樣式。在CSS中，一些樣式屬性會(huì)被子元素繼承，可以充分利用這個(gè)特性來(lái)簡(jiǎn)化代碼。通過(guò)合理選擇樣式指定方式，可以更方便地編寫優(yōu)雅、易維護(hù)的CSS代碼。

CSS樣式表有三種類型的樣式：內(nèi)聯(lián)樣式、內(nèi)部樣式和外部樣式。

1、內(nèi)聯(lián)樣式：將樣式屬性直接添加到HTML元素的"style"屬性中，如下例所示：

<p style="color: red; font-size: 16px;">這是一段內(nèi)聯(lián)樣式的文字</p>

2、內(nèi)部樣式：將樣式規(guī)則放在HTML文檔的<head>標(biāo)簽中的<style>標(biāo)簽中。這種方式可以用于一組或多組相關(guān)的樣式，如下例所示：

<head>

<style>

p {

color: red;

font-size: 16px;

}

</style>

</head>

<body>

<p>這是一段內(nèi)部樣式的文字</p>

</body>

3、外部樣式：將樣式規(guī)則放在一個(gè)單獨(dú)的.css文件中，然后在HTML文檔中通過(guò)<link>標(biāo)簽引用它，如下例所示：

<head>

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

</head>

<body>

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

</body>

在這個(gè)例子中，樣式規(guī)則位于名為"styles.css"的文件中，然后在HTML文檔中引用這個(gè)文件。該文件中的樣式可以應(yīng)用于文檔中的所有元素。

除了這三種樣式外，CSS還支持其他一些方式來(lái)指定樣式，例如：

4、ID選擇器：通過(guò)元素的ID屬性來(lái)指定樣式，使用"#"符號(hào)加上ID名來(lái)指定，如下例所示：

<head>

<style>

#my-id {

color: blue;

font-size: 20px;

}

</style>

</head>

<body>

<p id="my-id">這是一個(gè)ID選擇器的段落</p>

</body>

5、類選擇器：通過(guò)元素的class屬性來(lái)指定樣式，使用"."符號(hào)加上類名來(lái)指定，如下例所示：

<head>

<style>

.red-text {

color: red;

font-size: 16px;

}

</style>

</head>

<body>

<p class="red-text">這是一個(gè)類選擇器的段落</p>

</body>

6、屬性選擇器：通過(guò)元素的屬性來(lái)指定樣式，使用方括號(hào)"[屬性名]"來(lái)指定，如下例所示：

<head>

<style>

[title="my-title"] {

color: green;

font-size: 18px;

}

</style>

</head>

<body>

<p title="my-title">這是一個(gè)屬性選擇器的段落</p>

</body>

7、繼承樣式：某些樣式屬性會(huì)被子元素繼承，例如color、font-size等屬性。這意味著如果一個(gè)元素沒有直接指定某個(gè)樣式屬性的值，則會(huì)繼承父元素的該屬性值。

CSS提供了多種方式來(lái)指定樣式，可以根據(jù)具體需求選擇合適的方式來(lái)編寫樣式。

. QSS簡(jiǎn)介

Qt樣式表(style sheet)是用于定制用戶界面的強(qiáng)有力的機(jī)制，其概念、術(shù)語(yǔ)是收到HTML中的級(jí)聯(lián)樣式表(Cascading Style Sheets,CCS)啟發(fā)而來(lái)，只是Qt樣式表是用用于窗體界面的

與HTML的CSS類似，Qt的樣式表是純文本的格式定義，在應(yīng)用程序運(yùn)行時(shí)可以載入和解析這些樣式定義。使用樣式表可以定義各種界面組件(QWidget類及其子類)的樣式，從而使應(yīng)用程序的界面呈現(xiàn)不同的效果。很多軟件具有換膚功能，使用Qt的樣式表就可以很容易的實(shí)現(xiàn)這樣的功能

多多翻看Qt官方文檔，所有控件都有案例：在索引欄輸入Qt style

CSS樣式表學(xué)習(xí)：http://www.w3school.com.cn/css/css_syntax.asp

1.1 盒子模型

CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。

盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。

下面的圖片說(shuō)明了盒子模型(Box Model)：

Qt資料領(lǐng)取（視頻教程+文檔+代碼+項(xiàng)目實(shí)戰(zhàn)）

不同部分的說(shuō)明：

Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

為了正確設(shè)置元素在所有瀏覽器中的寬度和高度，你需要知道的盒模型是如何工作的。

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和其子類的實(shí)例

QPushButton {background: gray;}

3.3 屬性選擇器

QPushButton[flat="false"]

匹配所有flat屬性是false的QPushButton實(shí)例，注意該屬性可以是自定義的屬性，不一定非要是類本身具有的屬性

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

3.4 類選擇器

.QPushButton

匹配所有QPushButton的實(shí)例，但是并不匹配其子類。這是與CSS中的類選擇器不一樣的地方，注意前面有一個(gè)點(diǎn)號(hào)

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

3.5 ID選擇器

#myButton

匹配所有id為myButton的控件實(shí)例，這里的id實(shí)際上就是objectName指定的值

#openButton, #closeButton { background: magenta; }

3.6 后代選擇器

QDialog QPushButton

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

QDialog {background: gray;}
/* 設(shè)置 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,注意和后代選擇器的區(qū)別

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

3.8 偽類選擇器

選擇器:狀態(tài) 作為選擇器，支持 ! 操作符，表示非。

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

所有的這些選擇器可以聯(lián)合使用，并且支持一次設(shè)置多個(gè)選擇器類型，用逗號(hào)隔開，這點(diǎn)與CSS一樣，例如：

#frameCut,#frameInterrupt,#frameJoin 表示所有這些id使用一個(gè)規(guī)則。

#mytable QPushButton 表示選擇所有id為mytable的容器下面的QPushButton實(shí)例

4. QSS常用屬性

4.1 字體

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

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

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

粗細(xì) {font-weight: bold;}(粗體) lighter;(細(xì)體) normal;(正常)

變體 {font-variant: small-caps;}(小型大寫字母) normal;(正常)

大小寫 {text-transform: capitalize;}(首字母大寫) uppercase;(大寫) lowercase;(小寫) none;(無(wú))

修飾 {text-decoration: underline;}(下劃線) overline;(上劃線) line-through;(刪除線) blink;(閃爍)

字體名：

微軟雅黑：Microsoft YaHei??宋體：SimSun??黑體：SimHei??仿宋： FangSong??楷體： KaiTi

隸書：LiSu??幼圓：YouYuan??華文細(xì)黑：STXihei??華文楷體：STKaiti??華文宋體：STSong

華文中宋：STZhongsong??華文仿宋：STFangsong??方正舒體：FZShuTi??方正姚體：FZYaoti??華文彩云：STCaiyun

華文琥珀：STHupo??華文隸書：STLiti??華文行楷：STXingkai??華文新魏：STXinwei

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

4.2 顏色

17種標(biāo)準(zhǔn)色：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 內(nèi)邊距

padding: 14px 18px 20px 18px;              /*內(nèi)邊距 順序上右下左 */
 
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: ;                 /* 背景圖片對(duì)齊方式 */  
 
background-repeat: ;                   /* 背景圖片平鋪方式 */

4.6 邊框

border-style: solid;/*邊框類型*/
/*===============================*/
dotted - 定義點(diǎn)線邊框
dashed - 定義虛線邊框
solid - 定義實(shí)線邊框
double - 定義雙邊框
groove - 定義 3D 坡口邊框。效果取決于 border-color 值
ridge - 定義 3D 脊線邊框。效果取決于 border-color 值
inset - 定義 3D inset 邊框。效果取決于 border-color 值
outset - 定義 3D outset 邊框。效果取決于 border-color 值
none - 定義無(wú)邊框
hidden - 定義隱藏邊框
/*===============================*/

border-width: 2px;                     /*邊框?qū)挾?/

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;           /*設(shè)置寬度*/
 
height:40px;          /*設(shè)置高度*/
 
min-width:65px;       /*最小寬度*/
 
min-height:12px;      /*最小高度*/
 
max-width:12px;       /*最大寬度*/
 
max-height:12px;      /*最大高度*/

5. QSS偽狀態(tài)與子控件

5.1 偽狀態(tài)列表

:checked                        /*button部件被選中*/ 
:unchecked                      /*button部件未被選中*/ 
:disabled                       /*部件被禁用*/ 
:enabled                        /*部件被啟用*/ 
:focus                          /*部件獲得焦點(diǎn)*/ 
:hover                          /*鼠標(biāo)位于部件上*/ 
:indeterminate                  /*checkbox或radiobutton被部分選中*/ 
:off                            /*部件可以切換，且處于off狀態(tài)*/ 
:on                             /*部件可以切換，且處于on狀態(tài)*/ 
:pressed                        /*部件被鼠標(biāo)按下*/

5.2 子部件列表

::down-arrow        /*combo box或spin box的下拉箭頭*/ 
::drop-down         /*combo box的下拉箭頭*/ 
 
::indicator              /*checkbox、radio button或可選擇group box的指示器*/ 
::item               /*menu、menu bar或status bar的子項(xiàng)目*/ 
::menu-indicator          /*push button的菜單指示器*/ 
::title              /*group box的標(biāo)題*/ 
 
::down-button         /*spin box的向下按鈕*/
::up-arrow           /*spin box的向上箭頭*/ 
::up-button          /*spin box的向上按鈕*/

文章轉(zhuǎn)自博客園（BORUTO）：https://www.cnblogs.com/zhuchunlin/p/16485890.html

Qt資料領(lǐng)取→「鏈接」

在線咨詢

上一篇：第5天 - 16天搞定前端，html布局，表格和大塊頭
下一篇：用css制作頭像漸變邊框

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

前端入門-css 樣式表簡(jiǎn)介

回顧下HTML基礎(chǔ)

網(wǎng)頁(yè)中如何使用css

css語(yǔ)法

css知識(shí)點(diǎn)

最后

. QSS簡(jiǎn)介

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 內(nèi)邊距

4.4 外邊距

4.5 背景

4.6 邊框

4.7 寬高

5. QSS偽狀態(tài)與子控件

5.1 偽狀態(tài)列表

5.2 子部件列表

您的項(xiàng)目需求