藍光濾波的電腦科學研究所

2019年8月3日星期六

css選擇器是什麼？該怎麼用

css又被稱為網頁的美容/化妝師，今天來介紹一下怎麼給html添加樣式

閱讀這篇文章前需要對標籤選擇器，類選擇器和ＩＤ選擇器有基本概念，並且閱讀過上一篇文（css優先級）

如果已經有概念或是曾經使用過，那麼就達到學習門檻囉

這是一個html標籤的結構圖

當我們想要給hello,world添加顏色的時候，我們可以選擇這樣做

沒錯，這就是所謂的行內樣式，這樣做的缺點就是如果有很多

個div，就要寫很多次行內樣式，如果要修改的話會找很久，

而優點就是立即見效，因為他的優先級很高，也不用考慮結構

問題，如果配上ＵＩ庫來使用的話，能夠很快的產出東西，對

維護性不要求的場合非常方便，這也是一般初學者最先接觸的

設置樣式的方法

如果遇到很多個div，他們有共通的樣式，就可以考慮標籤選

擇器，只要把標籤名寫上去就大功告成，他的效果為全部的

div都套用紅色字體

再來是比較進階一點的情境，div一層包一層的時候，上圖可

以發現一層包了一層又包一層，在html裡面，標籤是有關係

的，包來包去的關係，就叫父子級，我們把最外層的div命名

為outer（外），而裡面（中），就叫做outer的子級，而更裡面

（內）就叫做outer的孫子級，今天我們只想給子元素（中）添

加顏色，不想動到孫子級（內）的時候，這時就可以選用 >

這個符號，叫做子級選擇器，他的效果就是輩份比自己小一

階的元素能夠得到效果，而小兩階或三階等孫輩份元素都套用

不到

那麼，如果我想讓所有我的後代都能得到效果呢，這時可以這

樣寫，只要加個空格就ＯＫ，意思就是輩份比outer小的div都

能得到效果

如果我想讓某個元素有顏色，但我又不想用行內樣式，我能怎麼做呢？

可以選擇類選擇器或ＩＤ選擇器，而類選擇器的優點是效能高

速度快，可複用性強，ＩＤ選則器的優點是優先級高，立即見

效，缺點是這個元素在網頁上的身份必須獨一無二（比方說Ｌ

ＯＧＯ圖，或主標題），如果我只是想添加藍色，而且我確定

我會使用很多次藍色，那麼就不是獨一無二的元素，所以這裡

用類選擇器比較適合

類選擇器和ＩＤ選擇器我都知道了，還有沒有其他方法？

有，li:nth-child(２)

意思就是li元素裡的所有子元素的第二個，套用效果

當使用這種方法的時候，可能會遇到一些問題，比方說新增

或刪除標籤結構的時候，這時原本的第二個元素可能就變成

第三個元素或第一個元素，要怎麼辦呢？

這時就可以使用nth-of-type，就不是ul內的所有子元素的第二

個，而是ul內class相同或tag相同的元素的第二個，這樣一

來，就算新增元素，只要他不是相同的類型，就不會影響計

數

而數字可以寫成n，2n，3n-1等等的方式，製作有規律樣式的表格很方便，比方說條紋顏色

接下來介紹的這個我都稱呼為兄弟選擇器，或比鄰選擇器，他

就是可以選到鄰居，範例的意思就是.first後面（只有後面，前

面沒用）緊跟著的span元素能得到效果（對，只能對一個元素

有效），需要注意的地方是他們是兄弟關係，不是父子關係

＊，這個東西叫做通配符，或是通用選擇器，意思就是，全部，我全都要.jpg

不管你是tag還是class還是id啥的，只要你在文檔裡面，就連

html和body標籤都無法倖免，通通都設為藍色文字顏色，但

相對的，這個選擇器的優先級很低

＊除了拿來初始化tag的margin和border和padding以外就沒有用了？

are you sure?

其實可以這麼用，就是某個部分裡面的全部我都一次設定，也是相當實用的寫法

有時候，我需要選擇一大包東西，但有些不是我想要的，怎麼辦呢？

這時候就輪到not選擇器出場了，not的括號裡面可以寫各種

條件，讓你過濾掉不想要的元素

最後再來介紹一下中括號三兄弟，他的缺點是效能差，但優點

是對付表單元素很好用，有時候也會有class取的沒有那麼統一

的時候，總體來說還是非常有機會能派上用場的

*=的意思就是 "包含" class*='funny'就是class裡面有包含funny的元素都能套用到效果

而 ^= 的意思就是，開頭為，也就是funny開頭的都套用效果

而 $= 的意思是，結尾為，也就是結尾為last的元素都套用效果

2019年7月9日星期二

[密技]解決blogger圖片模糊看不清楚的問題

在blogger上的圖片樣式明明都選擇特大張了，卻還是看不清楚。

圖片太小了，被縮放過了。

但是如果選擇原始大小的話，版面會超出去，怎麼辦呢？

有一個密技可以解決這個問題。

我們在blogger的管理介面按主題/自訂。

然後按進階/新增CSS。

在裡面輸入「.post-body img {max-width: 100%;}」

它的意思是圖片超出頁面時會自動縮放圖片為版面大小。

然後回到文章編輯區，把圖片大小設定為原始大小，然後按預覽。

這時就會發現圖片可以自動縮放為版面大小了，而且比選項中的「特大」來得大張，看得更清楚了。

2019年7月7日星期日

使用Keras卷積神經網路辨別肺部醫學影像(五)

上一張「使用Keras卷積神經網路辨別肺部醫學影像(四)」

在上一章，我們撰寫了訓練檔的程式碼，現在來執行它，請注意，第一次執行時，其中的
from keras.models import load_model
這一行請先註解掉。

執行時會出現這個畫面。

請稍等一會兒，因為它需要訓練很長的一段時間。

解析：
Epoch是目前訓練到第幾批次。
538s代表這一批次訓練花了多少時間。
loss是耗費了多少損失。
acc是準確度。

我們暫時不考慮過擬合的問題，因為這只是寫給初學者作練習用的，也只是給我這個初次寫教學文的新手練習寫文章的，我不想搞那麼複雜。

常態上來說，假設訓練模型正確，loss將會逐漸縮小，acc將逐漸增加(此圖片僅為參考，並非此程式的記錄)。

以這張圖片來說，這個訓練模型算合格的了。

由於訓練需要大量時間，而且會消耗許多運算資源，所以可以在訓練到一半時輸出權重：
model.save_weights("Fiborsis_sex.h5")

然後下次執行時把這一行取消註解：

from keras.models import load_model

這樣子下次訓練時就可以接續上次的存檔繼續訓練，不必從頭開始。

訓練到一定的程度之後，我們輸出結果：

model.save("Fiborsis_sex_result.h5")

稍後就可以在驗證檔中使用它。

我們現在建立一個check0的python檔案，程式碼如下：

import array

import sys

import numpy as np

import cv2

import glob

#設定亂數

import random

from keras.utils import np_utils

np.random.seed(0)

#設定影像的長寬

imgwidth=128

imgheight=128

#匯入需要用到的東西

from keras.models import Sequential

from keras.layers import Dense,Dropout,Activation,Flatten

from keras.layers import Conv2D,MaxPooling2D,ZeroPadding2D

model=Sequential()

from keras.models import load_model

#載入剛剛訓練好的訓練檔

model=load_model("Fiborsis_sex_result.h5")

print('載入資料')

#建立影像清單

imglist=[]

#匯入一張圖片

filestr='image_F/00001474_000.png'

img = cv2.imread(filestr,cv2.IMREAD_GRAYSCALE)

#resize它的大小

img=cv2.resize(img,(imgwidth,imgheight))

#將像素的數字縮小為0～1之間的數字

img=img/255.0

#將這張圖片加入imglist

imglist.append(img)

#轉換成numpy的array

x_img_test=np.array(imglist)

#進行reshape動作

x_img_test=np.reshape(x_img_test,(1,imgwidth,imgheight,1))

#預測這張圖是男生還是女生

prediction=model.predict(x_img_test)

#輸出機率

print("男性機率",(int)(prediction[0][0]*100),"%")

print("女性機率",(int)(prediction[0][1]*100),"%")

現在來執行這個程式。

執行結果，這張圖是女性的機率高達99%，而這張圖的確是女性沒錯，所以這次的測試是成功的。

不過記得要拿沒加入訓練檔訓練過的圖片來作測試，比較符合實際狀況，這是為了避免「過擬合」的問題，不過這不是本章所要討論的重點。

好了，本系列「使用Keras卷積神經網路辨別肺部醫學影像」教學文就在此告一段落了，以後有機會再接續著寫下去，那我們下次再見囉。

2019年6月30日星期日

在Visual Studio 2019上安裝Qt

在撰寫Qt程式時不一定需要使用Qt Creator，Visual Studio也是可以的，本章節將示範如何在Visual Studio上安裝Qt。

首先去Qt的官方網站： https://www.qt.io/
按下中間大大的綠色按鈕(Start free Qt trial)