回首頁  
帳號
 
關於博碩 博碩好讀 校園圖書 MOCC認證 下載教學 元學堂

博碩好讀
  新書推薦
  出版預告
  名家名著
  iT達人祕笈
 

分類索引
 

出版總覽
 

讀者服務
  徵求作者
 
首頁 >> 書籍介紹
 
 
點我可放大圖片
 
書名：金魚都能懂的 CSS 選取器：金魚都能懂了你還怕學不會嗎（iT邦幫忙鐵人賽系列書）
書號：MP22010 作者：李建杭 (Amos) ISBN： 978-986-434-499-4
定價：NT$560元 印刷：彩色 頁數：256頁
書籍規格：23*17 上市日：2020/7/8 譯者：(無)
學習定位：無 本書附件：無  
前往購買 >> 蝦皮購物 類別：電腦技術  
       
快速前往 快速前往        

 

 

    ☛☛☛☛☛☛☛台灣第一本CSS選取器!!!☚☚☚☚☚☚☚

    【Amos帶你搶先看】




    內容簡介

    本書內容改編自第11屆iT邦幫忙鐵人賽，Modern Web組冠軍網路系列文章《金魚都能懂的CSS 選取器 - 金魚都能懂了你還怕學不會嗎》，源於太多的網頁新手對CSS選取器不熟練，而市面上也缺乏專門探討CSS選取器的資源與項目。本書一方面能提供讀者對CSS選取器有更進一步的整理與思考；二方面讓廣大的網頁新手或老手們，有個便利查詢與了解的地方。
    在網頁的世界中，有太多對新手不友善的因素，不管是教學文章的敘述方式、專有名詞的應用、學習章節的安排、或舉例與引導過程等，Amos為了解決這問題，便開始了「金魚都能懂」的系列教學，希望能用最淺顯易懂的教學與講解方式，帶領眾新手們，在新手村中學好學滿，自信滿滿地踏出新手村。


    必看！學習路徑懶人包---CSS 選取器學習地圖

    ➠ 新手必學的CSS 選取器
    ➠ 入門進階者必學的CSS選取器
    ➠ 提升效率必學的CSS選取器
    ➠ 多國語言網站必學的CSS選取器
    ➠ 技能探究者必學的CSS選取器

    《金魚都能懂的CSS 選取器》有別於一般的書籍，這本書的閱讀方式你可以從一開始就照順序閱讀，也可以直接跳不同章節閱讀，更可以按照「必看！學習路徑懶人包---CSS 選取器學習地圖」中的分類建議來閱讀，又或者是當作字典來跳章節學習，不管使用哪一種閱讀方式，對各位來說，全部學完是必要的喔，這樣才能彈性運用在工作上，開發效益絕對翻倍。


    【Amos線上免費教學影片】

    金魚都能懂的網頁入門，可點下方logo前往：


    金魚都能懂的網頁切版，可點下方logo前往：



    讀者好評

    「看了金魚系列，讓我對HTML的觀念更加清楚，再閱讀其他文章或官方文件能夠更快解讀。而熟悉後再回來看，又會有新的發現！很多觀念在重複閱讀後更加精粹，更加精實。」------張潪榤

    「從 0 →1 建立穩固觀念，讓你遇到任何版型都能自行推導，而不是只會照抄老師教過的範例，誠心推薦給網頁新手。」------ shika

    「老師的課程除了扎實的語法講解以外，最珍貴的就是老師的思考方式以及實戰經驗。切版時常常會想起老師的防衛性切版，思考每個地方有可能會遇到的更動，該如何撰寫較有彈性，便於調整與修改。」------ Lai

    「以前的學習是死背方式，當遇到版面變化就會卡住出現BUG。金魚系列每篇簡短卻是字字珠璣、紮紮實實的基本功！一篇篇導引我學習正確觀念、推導邏輯。每段的學習、複習讓我在網頁切版的細節上更加紮實（感謝金魚系列讓我遇到好講師及一起學習的夥伴，也讓我換到新工作）。」------ 凱特

    「CSS是個看似簡單實質卻有很多「眉角」的技術。Amos老師學習CSS的方式，正是自己跌跌撞撞習得的，也因為這樣的過程，老師很清楚新手學習CSS會遇到的瓶頸到底有哪些，因此在教學的同時，自然而然的會強調那些必須注意的細節，人家說魔鬼藏在細節裡大概就是這樣的道理了！」------ 王泉富
 
    01 CSS 入門
    1-1 CSS 選取器是什麼？怎麼用？它能做些什麼事？
    關於網頁的組成
    CSS 選取器與其它技術的搭配
    CSS 選取器的基本組成與作用
    CSS 選取器能做什麼？
    1-2 學習CSS 選取器為何如此重要
    1-3 超重要的CSS 優先權
    基本CSS 優先權規則
    進階CSS 優先權
    優先權總結
    02 基本類型CSS 選取器
    2-1 Tag 元素選取器 ― 最常用到的基本設定選取器
    CSS 標籤選取器的設定方式
    實際範例一：Reset 瀏覽器預設值
    實際範例二：統一網站視覺外觀
    2-2 CSS 類別選取器 ― 切版與前端框架最常使用的CSS 選取器
    class 的語法外觀
    CSS class 名稱規則
    CSS class 命名方法
    2-3 ID 選取器 ― 程式設計最常用到的CSS 選取器
    CSS ID 選取器特性與規則
    瀏覽器對ID 的處理不同調
    ID 選取器的實際應用
    ID 選取器的效能迷思
    我到底要不要使用ID 選取器
    2-4 CSS 群組式宣告 ― 每個開發者必學的選取方式
    使用群組式宣告的重點與誤區
    實務上面的應用狀況
    實際範例一：多欄版面製作
    2-5 CSS 組合式宣告 ― 新手開發從這裡開始進步
    舉個生活一點的例子
    CSS 組合式宣告實務應用面
    實際範例一：設定超連結
    實際範例二：設定文繞圖
    實際範例三：凸顯作用中的項目
    2-6 CSS 層疊式宣告 ― 快速選到特定元素內的物件
    暗藏毒藥的層疊式選取器
    瀏覽器對CSS 的選取流程與疑惑
    層疊選取器寫幾層最好
    2-7 CSS 通用選取器 ― 你我都該熟知的老朋友
    在那個瀏覽器的戰國時代
    什麼都選！什麼都設定！什麼都長一樣！
    開發者的覺醒
    星號本無罪，只是被濫用
    2-8 CSS 屬性選取器 ― 選取自由度超高的選取器
    選取【擁有特定屬性】的物件
    選取屬性值【完全等於】特定文字的物件
    選取屬性值【開頭等於】特定文字的物件
    選取屬性值【結尾等於】特定文字
    選取屬性值中【包含特定文字】的物件
    選取屬性值中【包含特定單字】的物件
    選取屬性值【開頭等於特定文字或包括 - 號】的物件
    實際應用
    實際範例一：強迫更改頁面廣告區塊
    2-9 親代選取器 ― 妹妹選取器與鞭炮串選取器
    「+」號之跟屁蟲選取器
    「~」連接號之弟弟妹妹一起來選取
    實際範例一：變色的區塊
    實際範例二：表單選取變色
    2-10 子代選取器 ― 一個不會讓你株連九族的選取器
    美好的？還是具風險的？
    CSS 汙染是什麼
    實際範例一：多層選單
    03 偽元素
    3-1 ::before & ::after ― 無中生有的偽元素選取器
    沒了會死，有了更精彩
    有哪些貨，通通給我拿出來
    你這個中看不中用的XX
    特別注意事項
    3-2 ::first-line 首行選取器 ― 低調到不行的選取器
    3-3 ::selection 選取狀態偽元素 ― 讓你沒有選擇困難
    設定的彈性
    那些不常用到的值
    實際應用
    04 CSS 偽類選取器
    4-1 何謂偽類選取器
    偽類選取器的特性
    偽類的子分類
    4-2 常用於超連結的動態偽類選取器 ― 網頁互動變豐富
    點擊一個超連結要經過多少動作
    不是所有人都會用滑鼠
    過程的順序
    佛克斯的應用
    4-3 :checked 表單狀態選取器 ― 讓你可以開開關關好開勳
    特性應用發想
    製作一個動態改變色彩的清單
    更多範例
    4-4 :lang 語言偽類選取器 ― 多長的單字都不煩惱
    :lang 應用
    太長的困擾
    太長了？用hyphens 斬斷吧
    4-5 :first-letter 首字選取器 ― 玩轉首字設計的好功能
    首字放大的問題
    更多的應用
    4-6 :empty 空值選取器 ― 比谷關的空氣更乾淨的選取器
    實際範例：動態欄數
    實際範例：顯示缺貨
    4-7 :not() 否定選取器 ― 一個搞排擠的選取器
    學:not() 選取器要腦袋轉一下
    你想不到應用的地方是你的問題
    選取第一個以外的項目
    選取站外連結的超連結
    選取沒有加註alt 資訊的圖片
    把不是特定class 的項目隱藏
    4-8 :first-child & :last-child 頭尾選取器 ― 有頭有尾有始有終的選取器
    重點在順序
    實務應用
    4-9 :first-of-type & :last-of-type 首項分類與尾首分類選取器 ―一個不會讓你看錯男女的選取器
    實務應用
    4-10 :only-child 獨子選取器 ― 這是啥媽寶選取器
    獨子的概念
    到底可用在哪裡
    4-11 :only-of-type 類型獨子選取器
    你可能會誤會
    4-12 :nth-child() & :nth-last-child() ― 你覺得燒腦但其實根本不燒腦的選取器
    選取奇數與偶數
    選取特定單一物件
    間隔跳位選取物件
    間隔選取原理
    公式分解前段
    公式分解後段
    公式變化
    實際應用與計算技巧
    表格色彩的應用
    4-13 :nth-of-type() & :nth-last-of-type() ― 你覺得燒腦但其實根本不燒腦的選取器趴兔
    選取奇數與偶數
    選取特定單一物件
    間隔跳位選取物件
    間隔選取原理
    實際應用與計算技巧
    文章頁面前言的應用
    4-14 :disabled & :enabled 表單用偽類選取器 ― 一眼看穿那些不能按的按鈕
    實際應用
    4-15 :required & :optional 選取器 ― 必填的欄位看這邊
    實際範例：使用選取器標示必填欄位
    4-16 :valid & :invalid 選取器 ― 資料格式的糾察員
    有效與無效的資料格式
    實際應用：預先檢查欄位資料正確性的表單
    4-17 :in-range & :out-of-range 選取器 ― 你太超過囉
    不是只有上限還有下限
    實際範例：提示購買規則
    4-18 :read-only 選取器 ― 唯讀啦就是不給你改
    實際範例：讓唯讀欄位不顯示為表單外觀
    4-19 ::placeholder 選取器 ― 你就醬子寫啦
    實際範例：提醒使用者尚未填寫的欄位
    4-20 :focus-within 焦點選取器 ― 誰的孩子一清二楚
    :focus-within 與:focus 的差異
    實際範例：自動滑開的表單
    4-21 :root 根目錄選取器 ― 變幻莫測的應用
    :root 的好朋友CSS variables
    CSS 變數的使用方式
    建立變數
    套用變數
    CSS 區域變數的特性
    全域變數跟區域變數我該怎麼選擇
    05 CSS 未來
    5-1 可預見的CSS 未來
    5-2 還有哪些CSS 選取器
    5-3 後記
 
    李建杭 (Amos Li)

    一個熱血的斜槓開發者，過去從事視覺設計師，後來轉職成為前端工程師，同時也是國內知名的前端技術講師及技術研討會講者，熟稔 HTML & CSS、Bootstrap、RWD、CSS3 等，2018 年起開始成為 YouTuber，致力於使用簡單易懂的方式讓新手學習前端網頁製作相關技術。目前斜槓路亞釣魚技能與生態研究中。

    連續2年在iT邦幫忙鐵人賽獲得兩個冠軍一個佳作
    冠軍　金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎
    冠軍　金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎
    佳作　金魚都能懂的網頁切版 - 金魚都能懂了你還怕學不會嗎

    Youtube 頻道


    部落格


    臉書粉絲專頁


    Line 生活圈找到

    使用 Line 搜尋「@CSScoke」
 
 		  
     

博碩文化客服信箱
 

[email protected]
 
文教業務團隊
台北、新北、桃園、基隆、宜蘭、花蓮、金門
汪 玉 鳳
LINE ID：0925177716
0925-177716
[email protected]		 郭 南 彤
LINE ID：rgtech101
0917-727778
[email protected]
助理分機 519
新竹、苗栗、台中、彰化、南投、雲林
林 世 昌
LINE ID：0925275775
0925-275775
[email protected]
助理分機 519		 嘉義、台南、高雄、屏東、台東、澎湖
林 月 玲
LINE ID：0926858627
0926-858627
[email protected]
助理分機 238
 
MOCC 認證小組
 
  林 雯 玲 電話：02-2696-2869 分機：623 [email protected]

 

 
 

 

博碩文化股份有限公司 DrMaster Press Co., Ltd.
台灣新北市汐止區新台五路一段112號10樓A棟
Building A, 10F, No.112, Xintai 5th Rd., Sec.1,Xizhi Dist., New Taipei City 221, Taiwan
Tel：02-2696-2869　Fax：02-2696-2867　劃撥帳號：17484299

Copyright© DrMaster Press Co., Ltd. All Rights Reserved.