[WebTech #61] CSS > 4. CSS 範例 > 4-1 文字相關實例
CSS 事實上就是「匹配規則（Selector）」+「套用屬性（Properties）」而已！如果您在 [WebTech #59] 看過所有 30 種常見的匹配規則，也在 [WebTech #60] 看完了所有可供套用的屬性，那麼您的 CSS 語法已經全部學完了！
接下來想要精通 CSS，只有看大量的範例了！看的越多，您越能了解剛剛那兩篇學的「匹配規則」與「套用屬性」，到底要用在哪個場合上。所以，接下來我將會分門別類地提供大量的 CSS 範例給各位參考。這些範例大多附有「解說」、「原始碼」、「線上示範」三樣東西。您只要點進去，看完解說，把原始碼貼到我今天推薦的 CodePen 上去試試看，或者直接看線上範例即可。需要的話參考一下我在每篇最下方提供的「CSS Selector & Properties 參考手冊」，刷新記憶，相信您的 CSS 一定可以學得很好！
首先上場的是「文字相關屬性」。坐穩囉！我們就開始吧！
文字相關變化：
- 會旋轉的文字： http://tympanus.net/codrops/2012/04/17/rotating-words-with-css-animations/
- 跑馬燈： http://www.hongkiat.com/blog/css3-animation-advanced-marquee/
- 項目編號： http://www.red-team-design.com/css3-ordered-list-styles
- 圖說文字（游標移上去，會額外出現的說明文字）
* 文字型： http://webdesign.tutsplus.com/tutorials/site-elements/how-to-create-link-tooltips-using-css3-and-jquery/
* 圖片型： http://webdesign.tutsplus.com/tutorials/how-to-create-script-free-css3-tooltips/
最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp
codepen範例 在 Re: [問題] 請問codepen範例中RWD的元素上下排列 的推薦與評價
※ 引述《articulation (...)》之銘言：
: 大家好
: 就是我在RWD的 max-width: 768px 中
: 要怎麼樣讓 left-col和 right-col 不是像桌面版本一樣並排(兩者排成一列)
: 而是希望讓兩者上下排列( left-col 在上，right-col在下
: 請參考 https://codepen.io/anon/pen/NvEEwM
: 我是在後面的原始碼中加了
: @media only screen and (max-width: 768px){
: .left-col{
: width:100%;
: }
: .right-col{
: width:100%;
: position: relative;
: left:0%;
: top:100%;
: }
: }
: 可是沒有運作成我想要的樣子，反而是right-col 蓋在 left-col之上
: 不知大家有沒有什麼建議呢?
: 謝謝大家~
先附上我小作修改的
https://codepen.io/anon/pen/brQZQj?
首先點出你css撰寫使用了sass(scss)的nested寫法
但在codepen css setting沒有做相關設定
然後善用開發者模式去看你所撰寫的css有沒有被吃到
position我全拿掉了
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 122.116.227.102
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1504090483.A.AD5.html
... <看更多>