整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
天給大家介紹7個(gè)值得大家關(guān)注的CSS專(zhuān)家，同時(shí)他們所分享的6個(gè)CSS相關(guān)的主題：
第一位：
Wenting Zhang，她是CSS ICON && underline.js作者、 也是Adobe Typekit的用戶(hù)體驗(yàn)設(shè)計(jì)師
CSS可不僅僅是簡(jiǎn)簡(jiǎn)單單的布局語(yǔ)言，她還是繪畫(huà)和動(dòng)畫(huà)雙料小能手！512個(gè)極簡(jiǎn)風(fēng)格的圖標(biāo)都全部用CSS實(shí)現(xiàn)，然后再細(xì)細(xì)打磨動(dòng)畫(huà)。
來(lái)自Adobe Typekit的用戶(hù)體驗(yàn)設(shè)計(jì)師Wenting Zhang將細(xì)細(xì)講述CSS的隱藏繪畫(huà)功能和高級(jí)動(dòng)畫(huà)技巧漂亮極簡(jiǎn)的CSS icon設(shè)計(jì)與描繪，讓CSS進(jìn)階學(xué)習(xí)不再枯燥。那些不廣為人知的CSS高階技巧，讓網(wǎng)頁(yè)界面設(shè)計(jì)活起來(lái)！
第二位：
大漠：CSS專(zhuān)家、阿里巴巴前端技術(shù)專(zhuān)家，由他運(yùn)營(yíng)的http://www.w3cplus.com/網(wǎng)站受到很多新同學(xué)的好評(píng)。
現(xiàn)在大量網(wǎng)頁(yè)設(shè)計(jì)基于網(wǎng)格布局。雖說(shuō)人們通常注意不到它，但雜亂無(wú)章的布局時(shí)代確實(shí)已經(jīng)過(guò)去了，現(xiàn)在是整齊結(jié)構(gòu)化的天下。無(wú)論從理論、美學(xué)和整齊來(lái)說(shuō)，這樣的布局都很好平衡。網(wǎng)格結(jié)構(gòu)是所有現(xiàn)代網(wǎng)站的基礎(chǔ)，它總能給最終用戶(hù)完美無(wú)暇的設(shè)計(jì)。他給通過(guò)給大家分享“CSS Grid Layout”這個(gè)主題來(lái)解決上面的問(wèn)題。
第三位：
陳劍鑫：阿里移動(dòng)事業(yè)群 - UC RED設(shè)計(jì)中心 高級(jí)前端工程師
第四位：
廖洧杰：臺(tái)灣六角學(xué)院的校長(zhǎng)，臺(tái)灣國(guó)立高雄大學(xué)資管前端兼任講師、業(yè)界講師。專(zhuān)注于兼容 Desktop / Mobile 網(wǎng)頁(yè)前端開(kāi)發(fā)。
來(lái)自臺(tái)灣的廖洧杰將給大家分享：Sass & CSS Design Pattern。他在這個(gè)主題中將給大家分享如何設(shè)計(jì)出靈活性高、易維護(hù)的網(wǎng)頁(yè)版型，一直都是大家憧憬的目標(biāo)，這次我會(huì)介紹自己使用 Sass 預(yù)處理器的前端開(kāi)發(fā)流程，并分享選擇 CSS/Sass 設(shè)計(jì)模式的方案策略。
第五位：
羅正燁：微信前端工程師
第六位：
方瀟儀：微信UI工程師，對(duì)各種Web動(dòng)畫(huà)感興趣
微信的羅正燁和方瀟儀兩位工程師將為大家?guī)?lái)SVG工程化與動(dòng)畫(huà)實(shí)踐的話(huà)題，如果你想在你的項(xiàng)目中使用SVG，并且讓SVG有些不一樣的效果，可以關(guān)注這個(gè)話(huà)題。
第七位：
倪栩生：微信UI工程師，對(duì)CSS有深入研究
大家對(duì)微信應(yīng)該不陌生吧？但是微信背后的故事大家了解多少呢？微信的UI工程師倪栩生將給大家?guī)?lái)微信網(wǎng)頁(yè)重構(gòu)實(shí)踐的話(huà)題，談?wù)勊侨绾巫鑫⑿啪W(wǎng)頁(yè)重構(gòu)的。
如果你對(duì)以上七位講師感興趣，或者對(duì)他們所講的主題感興趣，可以訪問(wèn)由W3C、w3ctech、前端圈聯(lián)合舉辦，由“阿里巴巴移動(dòng)事業(yè)群”冠名贊助的CSS大會(huì)官網(wǎng)：https://css.w3ctech.com 了解最新的情況。
你也可以訪問(wèn)CSS大會(huì)官網(wǎng)：https://css.w3ctech.com 報(bào)名參加12月17日在廣州的大會(huì)，來(lái)大會(huì)現(xiàn)場(chǎng)和大家交流。
有的 jQuery UI 插件都允許開(kāi)發(fā)人員無(wú)縫集成 UI 小部件到他們網(wǎng)站或應(yīng)用程序的外觀和感觀。每個(gè)插件通過(guò) CSS 定義樣式，且包含了兩層樣式信息：標(biāo)準(zhǔn)的 jQuery UI CSS 框架 樣式和具體的插件樣式。
jQuery UI CSS 框架提供了語(yǔ)義表示的類(lèi)，用來(lái)表明小部件內(nèi)元素的角色，比如標(biāo)題、內(nèi)容或可點(diǎn)擊區(qū)域。這些在所有的小部件中都是一致的，一個(gè)可點(diǎn)擊的 tab（標(biāo)簽頁(yè)）、accordion（折疊面板）或 button（按鈕）都有相同的 ui-state-defaultclass，用來(lái)表明它們是可點(diǎn)擊的。當(dāng)用戶(hù)鼠標(biāo)懸浮在這些元素上面時(shí)，這個(gè) class 就變成 ui-state-hover，當(dāng)選中這些元素時(shí)則變成 ui-state-active。這些 class 的一致性使得所有部件中具有相似角色或交互狀態(tài)的元素在外觀表現(xiàn)上一致。
CSS 框架樣式封裝在一個(gè)單獨(dú)的文件中，名為 ui.theme.css。這個(gè)文件時(shí)通過(guò) ThemeRoller 應(yīng)用程序來(lái)修改的。框架樣式只包含影響外觀和感觀的屬性，只要是顏色、背景圖像、圖標(biāo)等。所以這些是 "安全的" 樣式，不會(huì)影響到插件的功能。這種分隔意味著開(kāi)發(fā)人員可以通過(guò)在 theme.css 文件中修改顏色和圖像來(lái)創(chuàng)建一個(gè)自定義的外觀和感觀。由于未來(lái)的插件或者 bug 修復(fù)將是可用的，這些不通過(guò)修改即可與主題一起使用。
由于框架樣式只覆蓋了外觀和感觀，所以還需要包含具體的插件樣式表，這些樣式表包括了所有額外的讓小部件具有功能性的結(jié)構(gòu)樣式規(guī)則，比如尺寸、內(nèi)邊距、外邊距、定位、浮動(dòng)。每個(gè)插件的樣式表位于 themes/base 文件夾內(nèi)，且配合插件進(jìn)行命名，比如 "jquery.ui.accordion.css"。這些樣式必須認(rèn)真編輯，因?yàn)樗鼈兣c腳本一起提供了框架樣式的覆蓋。
我們鼓勵(lì)所有的開(kāi)發(fā)人員創(chuàng)建 jQuery 插件，jQuery UI CSS 框架使得最終用戶(hù)更容易定制主題和使用插件。
主題化
下面列出了三種主題化 jQuery UI 插件的一般方法：
下載 ThemeRoller 主題：最早的創(chuàng)建主題的方式是使用 ThemeRoller 來(lái)生成和下載一個(gè)主題。這個(gè)應(yīng)用程序?qū)?chuàng)建一個(gè)新的 ui.theme.css 文件和一個(gè)包含了所有必需的背景圖像及圖標(biāo)精靈的 images 文件夾。這個(gè)方法是最早的創(chuàng)建和維護(hù)主題的方式，但是它對(duì) ThemeRoller 中提供的選項(xiàng)限制了自定義。
修改 CSS 文件：為了對(duì)外觀和感觀做進(jìn)一步的控制，您可以選擇從默認(rèn)主題（Smoothness）開(kāi)始，或者從一個(gè)由 ThemeRoller 生成的主題開(kāi)始，然后調(diào)整 ui.theme.css 文件，或者任意一個(gè)獨(dú)立插件的樣式表。例如，您可以很容易地調(diào)整所有按鈕的角半徑為不同于其他 UI 組件的值，或者使用自定義設(shè)置為圖標(biāo)精靈改變路徑。通過(guò)一點(diǎn)點(diǎn)的樣式范圍，您甚至可以在一個(gè) UI 中同時(shí)使用多個(gè)主題。為了易于維護(hù)，建議只更改 ui.theme.css 文件和圖像。
重新編寫(xiě)自定義的 CSS：為了最大程度地控制外觀和感觀，可以重新開(kāi)始編寫(xiě)每個(gè)插件的 CSS，而不使用框架類(lèi)或者特定的插件樣式表。如果想要的外觀和感觀不能通過(guò)修改 CSS 來(lái)實(shí)現(xiàn)或者使用高度自定義的標(biāo)記，那么就可以采用這個(gè)方法。這個(gè)方法要求在 CSS 方面有深厚的專(zhuān)業(yè)知識(shí)，且要求手動(dòng)更新未來(lái)的插件。
使用 ThemeRoller、jQuery UI CSS 框架，以及設(shè)計(jì)自定義主題
jQuery UI ThemeRoller
jQuery UI CSS 框架 API
設(shè)計(jì)主題
疊樣式表 (CSS) 是一種編程語(yǔ)言，可用于確定電子文檔的設(shè)計(jì)。 借助簡(jiǎn)單說(shuō)明（以清晰的源代碼形式呈現(xiàn)），可以根據(jù)需要調(diào)整布局、顏色和版式等網(wǎng)站元素。 由于級(jí)聯(lián)樣式表，文檔的語(yǔ)義結(jié)構(gòu)和內(nèi)容不受影響。 CSS 出現(xiàn)于 20 世紀(jì) 90 年代中期，現(xiàn)在被認(rèn)為是萬(wàn)維網(wǎng)上的標(biāo)準(zhǔn)樣式表語(yǔ)言。
CSS 與 HTML 一樣，是萬(wàn)維網(wǎng)的核心語(yǔ)言之一。 當(dāng)您使用 HTML 將文本添加到網(wǎng)站并按語(yǔ)義構(gòu)建其結(jié)構(gòu)時(shí)，您可以使用 CSS 定義其內(nèi)容的設(shè)計(jì)。 雖然 HTML 和 CSS 結(jié)合使用，但 CSS 設(shè)計(jì)指令和 HTML 元素是分開(kāi)存在的。 這意味著即使沒(méi)有 CSS，機(jī)器也可以讀取電子文檔。 在 CSS 的幫助下，瀏覽器內(nèi)容可以在視覺(jué)上準(zhǔn)備好并以吸引人的方式呈現(xiàn)。
CSS 是一種“生活標(biāo)準(zhǔn)”，由萬(wàn)維網(wǎng)聯(lián)盟繼續(xù)開(kāi)發(fā)。 因此，總是有新的功能和實(shí)際應(yīng)用有待發(fā)現(xiàn)。 廣泛應(yīng)用的樣式表語(yǔ)言出現(xiàn)于 20 世紀(jì) 90 年代。 使用樣式表來(lái)顯示 Web 內(nèi)容的想法在當(dāng)時(shí)已不再是全新的。 但 CSS 與 HTML 中已存在的其他面向顯示的元素在一個(gè)重要方面有所不同：用戶(hù)現(xiàn)在可以選擇為跨多個(gè)文檔和單個(gè)樣式表的元素組定義設(shè)計(jì)規(guī)則。
定義：CSS（層疊樣式表）
用于網(wǎng)站視覺(jué)設(shè)計(jì)的編程語(yǔ)言。 例如，使用層疊樣式表，您可以確定顯示 HTML 元素的字體、大小或顏色。
一個(gè)成功的網(wǎng)站不僅取決于內(nèi)容，還取決于良好的設(shè)計(jì)。 用戶(hù)很快就會(huì)對(duì)不用戶(hù)友好或結(jié)構(gòu)良好的網(wǎng)站失去興趣。 在這里，CSS 提供了一系列純 HTML 中不提供的設(shè)計(jì)選項(xiàng)。
例如，CSS 允許您集中控制某些規(guī)范。 這意味著可以使用單個(gè)命令來(lái)識(shí)別單個(gè)文檔中的相似元素（例如所有超鏈接或圖像）并對(duì)其進(jìn)行格式化。 設(shè)計(jì)指令不必采用 HTML 文檔本身內(nèi)部樣式表的形式。 如果將 CSS 指令保存在外部樣式表（即單獨(dú)的文件）中，則這也可以用于其他文檔。
除了與 HTML 元素的顏色、形狀和排版相關(guān)的基本顯示指令外，CSS 中現(xiàn)在還有更復(fù)雜的模塊。 例如，使用這些，您可以根據(jù)輸出媒體定義動(dòng)畫(huà)或不同的表示形式。 這樣，可以為所有可能的媒體以相同的方式準(zhǔn)備相同的 HTML 文檔。 由于本文檔中的內(nèi)容和設(shè)計(jì)是分開(kāi)的，因此網(wǎng)站的代碼更加清晰。 相關(guān)的樣式語(yǔ)言 SASS 提供了更多的可能性，但它并沒(méi)有完全取代 CSS。
CSS 語(yǔ)句確定電子文檔中的元素應(yīng)具有的值或?qū)傩浴?在其基本結(jié)構(gòu)中，該指令由選擇器和大括號(hào)組成。 聲明列在括號(hào)內(nèi)，并用分號(hào)分隔。 每個(gè)聲明由名稱(chēng)、冒號(hào)和特定值組成。 在最終聲明之后和右括號(hào)之前，可以添加另一個(gè)分號(hào)，但這不是強(qiáng)制性的。 例如，下面示例中的 CSS 指令要求標(biāo)題 h1 以藍(lán)色顯示，字體大小為 12：
h1 {color:blue; font-size:12px}可以使用內(nèi)部和外部樣式表將 CSS 合并到電子文檔中。 此外，可以使用內(nèi)聯(lián)樣式將屬性直接放置在元素的 HTML 源代碼中。 下面，我們概述了將 CSS 集成到 HTML 中的三種方法。
在外部樣式表中，CSS 指令通過(guò)“.css”結(jié)尾在外部文件中定義，并通過(guò)“l(fā)ink”標(biāo)簽集成到 HTML 文件中。 這是最常見(jiàn)的方法，因?yàn)閮?nèi)容和設(shè)計(jì)完全分開(kāi)，并且可以輕松進(jìn)行更改。 該鏈接在 HTML 文檔的“head”區(qū)域中創(chuàng)建，如下所示：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落</p>
</body>
</html>您可以在此處將所有 CSS 指令添加到 HTML 文件中。 請(qǐng)注意，這些僅適用于相關(guān)文件。 對(duì)于內(nèi)部樣式表，將“style”元素插入 HTML 文檔的“head”區(qū)域，如下所示：
<!DOCTYPE html>
<html>
<head>
<style>
h1 {color:blue; font-size:12px;}</style></head>
<body>
<h1>這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落</p>
</body>
</html>與內(nèi)部樣式表一樣，CSS 指令包含在 HTML 文件中。 然而，有一個(gè)重要的區(qū)別：相應(yīng)的屬性直接位于元素的開(kāi)始標(biāo)記中，并且不適用于任何其他元素。 如果您不想進(jìn)行一般設(shè)計(jì)說(shuō)明，則此方法特別有用。
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue; font-size:12px;">這是一個(gè)標(biāo)題</h1>
<p>這是一個(gè)段落</p>
</body>
</html>上面的例子表明 CSS 只能與經(jīng)典的 HTML 結(jié)構(gòu)結(jié)合使用。 由于 HTML 通過(guò)段落、列表和表格構(gòu)建內(nèi)容，而 CSS 負(fù)責(zé)視覺(jué)設(shè)計(jì)，因此這兩種網(wǎng)絡(luò)語(yǔ)言相輔相成，并以這種方式緊密相連。 編寫(xiě)級(jí)聯(lián)樣式表通常圍繞設(shè)計(jì)“盒子”進(jìn)行。 HTML 文檔的結(jié)構(gòu)基于嵌套原則，其中各個(gè)元素像盒子一樣相互疊放。 網(wǎng)站上占用空間的每個(gè)“盒子”都具有以下屬性：
然后通過(guò)指定大小、形狀和顏色來(lái)格式化這些“框”。 除了這些簡(jiǎn)單的屬性之外，還有更復(fù)雜的 CSS 指令，用于在文本中插入陰影、添加圖像過(guò)濾功能以及突出顯示表單和其他元素。
一旦您了解了樣式表語(yǔ)言的基本原理，它們的應(yīng)用就足夠簡(jiǎn)單了。 了解有關(guān) CSS 頂級(jí)技巧的更多信息，這些技巧將使您的網(wǎng)站看起來(lái)更加專(zhuān)業(yè)。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
