標籤: css

CKEditor 4 粗體、斜體、底線、顏色沒有效果的原因及解決方案

在CKEditor 4 編輯器中，設定粗體，回到前端秀出來的文字粗體、斜體、底線都沒有效果，
應該是在做前端網站設計，都習慣用reset.css來重新設置每個標籤的樣式
而在CKEditor 4 我們將某段文字設定為粗體，
切到原始碼來看，CKEditor預設將該用<strong></strong>包裹，用HTML標籤產生粗體效果，

<strong>HELLO WORLD!!</strong>

不過<strong>已經被reset.css重設了，所以在前端<strong>並起不了粗體作用，
在網路上找到一個方法，在CKEditor 4 的config.js設定檔中加上

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };

這時候粗體就會用<span>來包裹透過CSS來產生粗體效果，而不是<strong>標籤：

<span style=”font-weight:bold;”>HELLO WORLD!!</strong>

這樣就正常顯示了粗體了，粗體、斜體、底線方法同理：

config.coreStyles_bold = { element: ‘span’, styles: { ‘font-weight’ : ‘bold’ } };
config.coreStyles_italic = { element: ‘span’, styles: { ‘font-style’ : ‘italic’ } };
config.coreStyles_underline = { element: ‘span’, styles: { ‘text-decoration’ : ‘underline’ } }

若有更好的作法再請各位大大提出囉~^^

自己的題目自己解

使用reset.css來重設所以HTML預設樣式
有reset就有unreset就是反重設HTML預設樣式
跟reset.css一樣，網路上有流傳很多版本，
可以參考一下下列網址版本。
https://github.com/binarystash/unreset-css
其優點是他有設定class，也就是說我可以指定容器的去做反重設HTML預設樣式的動作

例：
<div class=”unreset”>
     <strong>HELLO WORLD!!</strong>
</div>

這樣就OK囉~這樣即使是使用<stong>也一樣有效果

針對顏色的部份，如果你有習慣下列這方式設定整個網頁的預設樣式

body *{
color:#000;
text-decoration:none;
font-family:  “微軟正黑體”,Arial, “新細明體”;
}
可能要建議你把color這樣式拿掉，才不會影響CKEditor編輯好的文字秀在前端
顏色不會變的問題

[……]

閱讀更多

CSS Google Fronts 強大的Googe大神，居然還有推出字型的服務

天呀!!我今天才發現，強大的Googe大神，居然也有提供字型的服務，
這對於做網站設計真的是增加非常多的彈性，Google倒了該怎麼辦呀呀呀呀!!!!

Google Fronts
https://www.google.com/fonts

可以一次加入多種字型
還可以選擇多種字體樣式
並且右方能告訴你載入的速度

還教你如何使用你選擇的字型，可說是非常大心，
提供三種使用的方式：
1.HTML LINK 標籤載入。
2.CSS @import 方式載入。
3.Javascript 方式載入。

[……]

閱讀更多

CSS 載入字型

以前一直有個觀念是網頁只能用系統字型，

今天看了一下國外網站，為什麼字型這麼豐富，
我就偷看了一下CSS檔，原來可以載入字型，
打破我舊有的觀念，在版型設計上相信可以更彈性的運用，
語法如下：

@font-face {
    font-family: myFirstFont;
    src: url(sansation_bold.woff);
    font-weight: bold;
}

其他運用

@font-face {
font-family: Lato;
src: local(“Lato Regular”), local(“Lato-Regular”), url(https://fonts.gstatic.com/s/lato/v11/nQhiC-wSiJx0pvEuJl8d8A.eot) format(“embedded-opentype”), url(https://fonts.gstatic.com/s/lato/v11/9k-RPmcnxYEPm8CNFsH2gg.woff) format(“woff”);
font-weight: 400;
font-style: normal;

}

相關網址
https://vector.cool/css-load-font/
http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

不過，
我想中文字型如果非必要，還是別了吧，因為中文字型檔通常很大，
雖然沒實際測過，但我相信一定會影響載入速度

[……]

閱讀更多

CSS em標籤失效 em,strong,em tag not working

我們習慣在CSS編寫前引入reset.css來重設所有標籤的預設樣式，
但引入reset.css後，透過編輯器如CKEditor，可能產生斜體<em>標籤，
此時<em>標籤便失去原本html應該會呈現的斜體，另外粗體<b>..等，也會有此現象，
解決方法在引入reset.css後加入下面兩行CSS，問題解決
strong, b, strong *, b * { font-weight: bold !important; }
em, i, em *, i * { font-style: italic !important; }
[……]
閱讀更多
CSS 項目符號
   
list-style-type:none;　《不編號》
list-style-type:decimal;　《阿拉伯數字》
list-style-type:lower-roman;　《小寫羅馬數字》
list-style-type:upper-roman;　《大寫羅馬數字》
list-style-type:lower-alpha;　《小寫英文字母》
list-style-type:upper-alpha;　《大寫英文字母》
list-style-type:disc;　《實心圓形符號》
list-style-type:circle;　《空心圓形符號》
list-style-type:square;　《實心方形符號》
list-style-image:url(dot.gif);　《圖片式符號》
list-style-position:outside;　《凸排》
list-style-position:inside;　《縮排》
原文出處
http://stenlyho.blogspot.tw/2008/07/css.html
[……]
閱讀更多
CSS 直式文字中英文編排 相容 IE 及 Chrome
   
writing-mode: tb-rl;
-ms-writing-mode: tb-lr;
-webkit-writing-mode: vertical-lr;
-moz-writing-mode: vertical-lr;
-ms-writing-mode: vertical-lr;
writing-mode: vertical-lr;
延申閱讀
http://generatedcontent.org/post/45384206019/writing-modes[……]
閱讀更多