這可能是因為他沒有真正發揮到硬體(GPU)加速
這時有兩個解決方式
2020年1月29日 星期三
[密技]兩個解決CSS transform在chrome破圖+閃爍的方法
在chrome中使用CSS transform旋轉影像時可能會出現破圖+畫面閃爍的問題(在firefox則不會)
這可能是因為他沒有真正發揮到硬體(GPU)加速
這時有兩個解決方式
這可能是因為他沒有真正發揮到硬體(GPU)加速
這時有兩個解決方式
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年4月20日 星期六
CSS選擇器的權重大小一覽
閱讀這篇文章前 請先具備
CSS Selectors
實際撰寫與嘗試的經驗
在開發時，常常會發現給標籤添加樣式，卻沒效果的這種情況
這種情況分成兩種
1.選擇器寫錯、選錯標籤
2.選對了、但被其他的樣式覆蓋掉了
CSS的樣式被覆蓋的現象、就是權重問題
對權重問題理解不夠深的話，很容易就進入一段時間沒有產出的情況
#被覆蓋的樣式可透過F12看到，他們是被槓掉的
那麼來寫一下範例
body{
margin: 0;
}
選到了body標籤，此時的權重假設為1、代表他能幹掉權重小於1的樣式
此時打開F12，會發現body{margin: 8px;}被幹掉了，這個樣式是chrome瀏覽器的預設樣式
也就是說body本身就有預設的margin，這個樣式被稱為預設樣式，權重為0
接著
body{
margin: 0;
}
body{
margin: 5px;
}
此時，body的margin為5px
在相同權重下，後面添加的樣式會幹掉前面的，我們假設他為1.1
再來
body{
margin: 0;
}
body{
margin: 5px;
}
html body{
margin: 10px;
}
此時，body的margin為10px
標籤是有疊加權重的，選到html底下的body，也就是說途中標籤選取器經過（但不選取）html，選到底下的body，此時的權重會是2，也就是1+1，但很重要的事情是，不管這個權重怎麼加，也不會超過class或id這兩種選取器
基礎觀念都有了、那接下來就一併列出吧
body{//1
}
body{//1.1
}
html body{//2
}
html body{//2.1，因為後寫的關係，所以增加0.1
}
.body{//10，你沒看錯，就是10，但標籤選取器的權重怎麼疊加都幹不掉這個10
}
html .body{//1+10=11
}
.html .body{//10+10=20
}
.html .body{//10+10=20，與上方權重相同，因為後寫的關係，所以為20.1
}
#body{//100
}
#html .body{//100+10=110
}
.html #body{//10+100=110，與上方權重相同，因為後寫的關係，所以為110.1，如果後寫的是#html .body，那麼#html .body就能幹掉.html #body
}
#html #body{//100+100=200
}
#html #div div .body{//100+100+1+10=211
}
行內樣式//權重1000
<body margin='20px'></body>
body{
margin: 0px !important;//這樣寫，權重10000
}
2019年4月4日 星期四
標籤的秘密
上一回介紹的是h1~h6的標籤
h開頭的標籤有著標題的意思，也能達到改變文字大小與粗細的效果
標籤的秘密就是在於它有著一體雙效的力量，"意思"與"造型"
絕大多數的標籤都具有意思，比方說strong標籤的意思是重點強調，p標籤的意思是段落
造型方面，前者能讓文字變得更粗，後者能讓畫面變寬敞變好看
但是實際做網站的時候呢，造型方面會由CSS統一負責，而html只要負責意思的部分就好了。
所以說，不要為了讓畫面變寬敞而使用p標籤，不要為了讓文字變粗而使用strong標籤，不要為了讓字變大而使用h1標籤，而是要依照意義使用。
之後再統一由CSS來做造型的修改
這樣才能兼顧到網站的SEO與視覺畫面，行銷和設計師才不會哭哭喔
訂閱：
文章 (Atom)