C#迴圈解數獨（非遞迴）
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文件進行格式化（渲染）。
CSS的語法規範
使用HTML時，要遵從一定的語法規範，CSS也是一樣。
CSS規則由兩個主要的部分構成：選擇器以及一條或多條宣告，宣告又包括屬性和屬性值。每個宣告之後用分號結束。
CSS的幾種引入方式
行內樣式
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
<p style="color: red">Hello world.</p>
內部樣式
嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS的語法規範</title> <style> /* 選擇器 {樣式} */ /* 也可以理解成：給誰修改樣式 { 修改什麼樣式} */ p { /* 修改顏色為藍色 */ color: blue; /* 修改字型大小為15px */ font-size: 15px; } </style> </head> <body> <p>我要修改p標籤裡文字的顏色為藍色</p> </body> </html>
外部樣式
外部樣式就是將css寫在一個單獨的檔案中，然後在頁面進行引入即可。推薦使用此方式。
<link rel="stylesheet" href="mycss.css">
選擇器就是根據不同的需求把不同的標籤選出來。簡單來說，就是選擇標籤來使用的。
選擇器的分類
選擇器分為基礎選擇器和組合選擇器兩個大類
基礎選擇器是由單個選擇器組成的。
基礎選擇器包括：標籤選擇器、類選擇器、id選擇器和通用選擇器
1. 標籤選擇器(直接按照標籤名查詢標籤)
標籤選擇器是指用HTML標籤名作為選擇器，按標籤名稱分類，為頁面中某一類標籤指定統一的CSS樣式。
① 作用
標籤選擇器可以把某一類的標籤全部選擇出來
② 優點
能夠快速為頁面中同類型的標籤統一設定樣式
③ 缺點
不能設計差異化樣式，只能選擇全部的當前標籤
<head> <style> /* 選擇器 {樣式} */ /* 也可以理解成：給誰修改樣式 { 修改什麼樣式} */ p { /* 修改顏色為藍色 */ color: blue; /* 修改字型大小為15px */ font-size: 15px; } </style> </head> <body> <p>我要修改p標籤裡文字的顏色為藍色</p> <p>我要修改p標籤裡文字的大小為15px</p> </body>
2. 類選擇器(按照標籤的class值查詢標籤)
如果想要差異化選擇不同的標籤，單獨選一個或者某幾個標籤，可以使用類選擇器
<head> <style> .green { color: aqua; font-size: 15px; } .se { color: blue; font-size: 15px; } </style> </head> <body> <ol> <li class="green">我可以呼叫類選擇器</li> <li class="se">我可以呼叫類選擇器</li> </ol> </body>
注意：
① 類選擇器使用"."(英文點號)進行標識，後面緊跟類名（自定義，我們自己命名的）
② 長名稱或片語可以使用中橫線為選擇器命名
③ 不要使用純數字、中文等命名，儘量使用英文字母來表示
④ 命名要有意義，儘量讓別人一眼就知道這個類名的目的
3.id選擇器(根據標籤的id之精準查詢標籤)
id選擇器可以為標有特定id的HTML元素指定特定的樣式
HTML元素以id屬性來設定id選擇器，CSS中的id選擇器以"#"來定義
id選擇器只允許一個被呼叫一次
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d3 {
color: yellow;
}
</style>
</head>
<body>
<span class="c1" id="d3">span</span>
</body>
4. 通用選擇器(直接選擇頁面所有的標籤)
在CSS中，通用選擇器使用"*"來定義，它表示選取頁面中所有元素的標籤
通用選擇器不需要呼叫，自動給所有的元素使用樣式
<style> * { color: blue; } </style>
CSS組合選擇器
預知知識點——我們對標籤的巢狀有另外一套說辭
1. 後代選擇器(空格)
div span { # 查詢div裡的所有後代span
color: red;
}
2. 兒子選擇器(大於)
div>span { # 查詢div裡的所有第一級span
color: yellow;
}
3. 毗鄰選擇器(加號)
div+span { # 查詢與div同級別的毗鄰的span標籤
color: yellow;
}
4.弟弟選擇器(小波浪號)
div~span { # 查詢div的所有弟弟標籤
color: yellow;
}
分組與巢狀
分組
當多個元素的樣式相同的時候，我們沒有必要重複地為每個元素都設定樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設定元素樣式。
例如：
div,p,span {
color: yellow;
}
# 將div,p,span多個標籤字型統一設定為黃色
選擇器可以混合使用
#d1,.c1,span {
color: green;
}
巢狀
div.c1 {
color: red;
}
# 查詢class含有c1的div
div#d1 {
color: red;
}
# 查詢id是d1的div
.c1 p.c2 {
color: antiquewhite;
}
# 查詢含有c1樣式值裡面的含有c2樣式值的p標籤
屬性選擇器
<head> <meta charset="UTF-8"> <title>Title</title> <style> [username] { color: red; } # 將含有usernamer屬性的標籤都設定為紅色 </style> </head> <body> <div username="jason">div</div> <span username="kevin" age=18>span</span> <p username="jason">p</p> </body>
<head> <meta charset="UTF-8"> <title>Title</title> <style> /*[username='jason'] {*/ /* color: yellow;*/ /*}*/ # 將username為jason的標籤設定為黃色 div[username='jason'] { color: darkcyan; } # 將div標籤中username為jason的標籤設定為darkcyan </style> </head> <body> <div username="jason">div</div> <span username="kevin" age=18>span</span> <p username="jason">p</p> </body>
偽類選擇器
a標籤補充說明：針對沒有點選過的網址，預設是藍色，點選過的則為紫色
<style> a:link { /* 把未訪問過的連結選出來，連結沒有點開之前的顏色*/ color: #333; text-decoration: none; } /* 把已經訪問過的連結選出來，連結點開後會變色*/ a:visited { color: chartreuse; } /* 滑鼠懸停會變色 */ a:hover { color: red; } /* 正在開啟連結且還未開啟連結會變色 */ a:active { color: yellow; } </style>
input框獲取焦點事件：當input框被滑鼠選中之後，框的顏色變成我們設定的顏色
input:focus {
background-color: red;
}
# input獲取焦點(被點選)之後變為紅色
偽元素選擇器
first-letter
常用的給首字母設定特殊樣式：
p:first-letter {
font-size: 48px;
color: red;
}
# 將p標籤首字母大小設定為48px,顏色設定為紅色
before
p:before { content:"*"; color:red; } /*在每個<p>元素之前插入內容*，並且把顏色設定為紅色/
after
p:after { content:"？？？"; color:blue; } /*在每個<p>元素之後插入內容？？？，並把顏色設定為藍色*/
css新增文字無法正常選中
1.選擇器相同，匯入方式不同
就近原則
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { color: red; } </style> <link rel="stylesheet" href="mycss.css"> # 就近選擇此選擇器 </head> <body> <div id="d1" class="c1" style="color: blue">好好學習，天天向上</div> </body>
2.選擇器不同，匯入方式相同
內聯樣式 > id選擇器 > 類選擇器 > 標籤選擇器
<head> <meta charset="UTF-8"> <title>Title</title> <style> #d1 { color: red; } .c1 { color: coral; } div { color: brown; } </style> </head> <body> <div id="d1" class="c1" style="color: blue">好好學習，天天向上</div> </body>
字型屬性
字型大小
font-size用來設定字型大小
font-size:14px 24px 28px 36px
字型粗細
font-weight用來設定字型粗細
| 值 | 描述 |
| normal | 預設值，標準粗細 |
| bold | 粗體 |
| bolder | 更粗 |
| lighter | 更細 |
| 100~900 | 設定具體粗細，400等同於normal，而700等同於bold |
| inherit | 繼承父元素字型的粗細值 |
文字顏色
顏色屬性被用來設定文字的顏色。
顏色是通過CSS最經常的指定：
- 十六進位制值 color: ＃FF0000
- 一個RGB值 color: RGB(255,0,0)
- 顏色的名稱 color: red
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的範圍為0.0到1.0之間。
ps: 可以利用取色器工具來獲取相關的十六進位制和RGB值
- pycharm
- 截圖功能
文字屬性
文字對齊
text-align 屬性規定元素中的文字的水平對齊方式。
| 值 | 描述 |
| left | 左邊對齊 預設值 |
| right | 右對齊 |
| center | 居中對齊 |
| justify | 兩端對齊 |
文字裝飾
text-decoration 屬性用來給文字新增特殊效果。
| 值 | 描述 |
| none | 預設,定義標準的文字 |
| underline | 定義文字下的一條線 |
| overline | 定義文字上的一條線 |
| line-through | 定義穿過文字下的一條線 |
| inherit | 繼承父元素的text-decoration屬性的值 |
常用的為去掉a標籤預設的自劃線：
a {
text-decoration: none;
}
首行縮排
將段落的第一行縮排 32畫素：
p {
text-indent: 32px;
}
背景屬性
背景顏色
background-color: red;
背景圖片
background-image: url('1.jpg'); # 括號裡為圖片路徑
背景重複
repeat(預設):背景圖片平鋪排滿整個網頁
background-repeat: repeat-x; 背景圖片只在水平方向上平鋪
background-repeat: repeat-y; 背景圖片只在垂直方向上平鋪
background-repeat: no-repeat; 背景圖片不平鋪
背景位置
background-position: left top; 位於左上
background-position: 200px 200px; 距離左側200px, 距離上邊200px
background-position: center center; 位於中心位置
支援簡寫：
background:#336699 url('1.png') no-repeat left top; # 多個屬性空格隔開