JSS是CSS的創(chuàng)作工具,它允許你使用JavaScript以聲明,無沖突和可重用的方式描述樣式。它可以在瀏覽器,服務(wù)器端或在構(gòu)建時(shí)在Node中編譯。JSS與框架無關(guān)。它由多個(gè)包組成:核心部分,插件以及框架集成等。
https://github.com/cssinjs/jss stars:5.1k
如果你已經(jīng)對(duì)使用JSS感興趣,可以使用在線代碼編輯器。在CodeSandbox(一個(gè)非常實(shí)用的在線編輯器,可以用來學(xué)習(xí)各種編程技能)上嘗試Hello World示例。以下是三種不同框架下的用法(代碼圖片生成自carbon網(wǎng)站):
JSS生成實(shí)際的CSS,而不是內(nèi)聯(lián)樣式。它支持每個(gè)現(xiàn)有的CSS功能。CSS規(guī)則只創(chuàng)建一次,并使用其類名與元素重復(fù)使用,與內(nèi)聯(lián)樣式相反。此外,當(dāng)DOM元素更新時(shí),將應(yīng)用先前創(chuàng)建的CSS規(guī)則。
JSS默認(rèn)生成唯一的類名。它允許避免典型的CSS問題,默認(rèn)情況下一切都是全局的。它完全消除了命名約定的需要。
使用JavaScript作為宿主語言使我們有機(jī)會(huì)以常規(guī)CSS無法實(shí)現(xiàn)的方式重用CSS規(guī)則。您可以利用JavaScript模塊,變量,函數(shù),數(shù)學(xué)運(yùn)算等。如果做得好,它仍然可以完全聲明。
CSS規(guī)則的明確使用允許您跟蹤消費(fèi)者并確定是否可以安全地刪除或修改它。
使用JavaScript函數(shù)和Observable可以在瀏覽器中動(dòng)態(tài)生成樣式,使有機(jī)會(huì)訪問應(yīng)用程序狀態(tài),瀏覽器API或遠(yuǎn)程數(shù)據(jù)以進(jìn)行樣式設(shè)置。你不僅可以定義一次樣式,還可以在任何時(shí)間點(diǎn)以有效的方式更新樣式。
JSS可以高效地處理CSS更新,可以使用它創(chuàng)建復(fù)雜的動(dòng)畫。使用函數(shù)值,Observables并將它們與CSS過渡相結(jié)合,可以為用戶控制的動(dòng)畫提供最大的性能。對(duì)于預(yù)定義的動(dòng)畫,使用@keyframes和transition更好,因?yàn)樗鼈儗⑼耆∠柚笿avaScript線程。
要優(yōu)化第一次繪制的時(shí)間,你可以使用服務(wù)器端渲染并提取關(guān)鍵CSS??梢詫SS的呈現(xiàn)與HTML的呈現(xiàn)結(jié)合起來,這樣就不會(huì)生成未使用的CSS。它將導(dǎo)致在服務(wù)器端呈現(xiàn)期間提取的最小關(guān)鍵CSS,并允許內(nèi)聯(lián)它。
JSS核心實(shí)現(xiàn)了基于插件的架構(gòu)。它允許您創(chuàng)建可以實(shí)現(xiàn)自定義語法或其他強(qiáng)大功能的自定義插件。JSS有許多官方插件,可以單獨(dú)安裝或使用默認(rèn)預(yù)設(shè)。社區(qū)插件的一個(gè)很好的例子是jss-rtl。
由于各種插件,JSS允許您使用現(xiàn)有的全局類名來嵌套,全局選擇器和組合。例如,允許您以比CSS更可讀的方式表達(dá)屬性。如果要直接從瀏覽器開發(fā)工具復(fù)制粘貼樣式,也可以使用模板字符串。jss-plugin-expandbox-shadow
另一個(gè)有用的插件示例是,它允許您完全隔離元素與全局級(jí)聯(lián)規(guī)則,并可能覆蓋不需要的屬性。在創(chuàng)建應(yīng)該在第三方文檔內(nèi)部呈現(xiàn)的窗口小部件時(shí)尤其有用。jss-plugin-isolate
React-JSS包提供了一些額外的功能:
CSS不需要額外的構(gòu)建管道配置。無論你選擇構(gòu)建JavaScript的工具是什么,它都可以與JSS一起使用。
yarn add jss
yarn add jss-preset-default //使用默認(rèn)設(shè)置
import jss from 'jss' import preset from 'jss-preset-default' jss.setup(preset()) // 創(chuàng)造你的style. const style={ myButton: { color: 'green' } } //編譯樣式,應(yīng)用插件。 const sheet=jss.createStyleSheet(style) //如果要在客戶端上呈現(xiàn),請(qǐng)將其插入DOM。 sheet.attach() //如果要渲染服務(wù)器端,請(qǐng)獲取CSS文本。 sheet.toString()
import jss from 'jss' import camelCase from 'jss-plugin-camel-case' import somePlugin from 'jss-some-plugin' //使用插件。 jss.use(camelCase(), somePlugin()) // Create your style. const style={ myButton: { color: 'green' } } //編譯樣式,應(yīng)用插件。 const sheet=jss.createStyleSheet(style) // 如果要在客戶端上呈現(xiàn),請(qǐng)將其插入DOM sheet.attach() // 如果要渲染服務(wù)器端,請(qǐng)獲取CSS文本。 sheet.toString()
<head> <title>JSS</title> <!-- 自定義插入點(diǎn) --> </head>
import jss from 'jss' jss.setup({insertionPoint: 'custom-insertion-point'})
<head> <title>JSS in body</title> </head> <body> <div id="insertion-point"> 這可能是你選擇的任何DOM節(jié)點(diǎn),可以作為插入點(diǎn)。 </div> </body
import jss from 'jss' jss.setup({ insertionPoint: document.getElementById('insertion-point') })
通過兩張圖片來體驗(yàn):
JSS的功能是十分強(qiáng)大的,不僅僅讓寫css的方式放到了JavaScript,這樣對(duì)更加喜愛編寫javascript的小伙伴來說是值得嘗試的,而且還支持服務(wù)器端渲染等更多高級(jí)的特性,前端技術(shù)百花齊放,但目前仍然不變的是掌握J(rèn)avaScript者得天下的時(shí)代!
設(shè)計(jì)網(wǎng)頁(yè)中,錨點(diǎn)滾動(dòng)是不可或缺的,現(xiàn)在分享給大家,好好看看。
為了好復(fù)制,插入整個(gè)demo源碼
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>js錨點(diǎn)滾動(dòng)效果</title>
<style>
ul>li{float: left;margin: 10px ;}
.clearfix:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfix{zoom:1}
.step{width:80%;height:1300px;border:10pxsolidred;margin:0auto;}
</style>
</head>
<body>
<ulclass="clearfix">
<li><ahref="#step1">#step1</a></li>
<li><ahref="#step2">#step2</a></li>
<li><ahref="#step3">#step3</a></li>
</ul>
<div>
<divid="step1"class="step">step1</div>
<divid="step2"class="step">step2</div>
<divid="step3"class="step">step3</div>
</div>
</body>
<scriptsrc="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
//頁(yè)面錨點(diǎn)滾動(dòng)js
$('a[href*=#],area[href*=#]').click(function {
if (location.pathname.replace(/^//, '')==this.pathname.replace(/^//, '') &&location.hostname==this.hostname) {
var$target=$(this.hash);
$target=$target.length &&$target||$('[name='+this.hash.slice(1) +']');
if ($target.length) {
vartargetOffset=$target.offset.top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
returnfalse;
}
}
});
//頁(yè)面錨點(diǎn)滾動(dòng)js結(jié)束
</script>
</html>
ps:希望喜歡我的朋友點(diǎn)贊,關(guān)注,轉(zhuǎn)發(fā)一下。
網(wǎng)站開發(fā),程序設(shè)計(jì),UI等相關(guān)問題,編程技巧以及其他你想向我問的問題,來者不拒。
疊樣式表(Cascading Style Sheet,簡(jiǎn)稱:CSS)是為網(wǎng)頁(yè)添加樣式的代碼。本節(jié)將介紹 CSS 的基礎(chǔ)知識(shí),并解答類似問題:怎樣將文本設(shè)置為黑色或紅色?怎樣將內(nèi)容顯示在屏幕的特定位置?怎樣用背景圖片或顏色來裝飾網(wǎng)頁(yè)?
和 HTML 類似,CSS 也不是真正的編程語言,甚至不是標(biāo)記語言。它是一門樣式表語言,這也就是說人們可以用它來選擇性地為 HTML 元素添加樣式。舉例來說,要選擇一個(gè) HTML 頁(yè)面里所有的段落元素,然后將其中的文本改成紅色,可以這樣寫 CSS:
p {
color: red;
}
不妨試一下:首先新建一個(gè) styles 文件夾,在其中新建一個(gè) style.css 文件,將這三行 CSS 保存在這個(gè)新文件中。
然后再將該 CSS 文件連接至 HTML 文檔,否則 CSS 代碼不會(huì)對(duì) HTML 文檔在瀏覽器里的顯示效果有任何影響。(如果你沒有完成前幾節(jié)的實(shí)踐,請(qǐng)復(fù)習(xí)處理文件 和 HTML 基礎(chǔ)。在筆記本里有這個(gè)方面的內(nèi)容!)
1、打開 index.html 文件,然后將下面一行粘貼到文檔頭(也就是 <head> 和 </head> 標(biāo)簽之間)。
<link href="styles/style.css" rel="stylesheet">
2、保存 index.html 并用瀏覽器將其打開。應(yīng)該看到以下頁(yè)面:
如果段落文字變紅,那么祝賀你,你已經(jīng)成功地邁出了 CSS 學(xué)習(xí)的第一步。
讓我們來仔細(xì)看一看上述CSS:
整個(gè)結(jié)構(gòu)稱為 規(guī)則集(通常簡(jiǎn)稱“規(guī)則”),各部分釋義如下:
注意其他重要的語法:
如果要同時(shí)修改多個(gè)屬性,只需要將它們用分號(hào)隔開,就像這樣:
p {
color: red;
width: 500px;
border: 1px solid black;
}
也可以選擇多種類型的元素并為它們添加一組相同的樣式。將不同的選擇器用逗號(hào)分開。例如:
p, li, h1 {
color: red;
}
選擇器有許多不同的類型。上面只介紹了元素選擇器,用來選擇 HTML 文檔中給定的元素。但是選擇的操作可以更加具體。下面是一些常用的選擇器類型:
選擇器名稱 | 選擇的內(nèi)容 | 示例 |
元素選擇器(也稱作標(biāo)簽或類型選擇器) | 所有指定(該)類型的 HTML 元素 | p 選擇 <p> |
ID 選擇器 | 具有特定 ID 的元素(單一 HTML 頁(yè)面中,每個(gè) ID 只對(duì)應(yīng)一個(gè)元素,一個(gè)元素只對(duì)應(yīng)一個(gè) ID) | #my-id 選擇 <p id="my-id"> 或 <a id="my-id"> |
類選擇器 | 具有特定類的元素(單一頁(yè)面中,一個(gè)類可以有多個(gè)實(shí)例) | .my-class 選擇 <p class="my-class"> 和 <a class="my-class"> |
屬性選擇器 | 擁有特定屬性的元素 | img[src] 選擇 <img src="myimage.png"> 而不是 <img> |
偽(Pseudo)類選擇器 | 特定狀態(tài)下的特定元素(比如鼠標(biāo)指針懸停) | a:hover 僅在鼠標(biāo)指針懸停在鏈接上時(shí)選擇 <a>。 |
選擇器的種類遠(yuǎn)不止于此,更多信息請(qǐng)參閱 選擇器。
譯注:再一次說明,中文字體文件較大,不適合直接用于 Web Font。
在探索了一些 CSS 基礎(chǔ)后,我們來把更多規(guī)則和信息添加至 style.css 中,從而讓示例更美觀。首先,讓字體和文本變得更漂亮。
第一步:找到之前Google Font 輸出的地址。并以<link>元素的形式添加進(jìn)index.html文檔頭(<head>和</head>之間的任意位置)。代碼如下:
<link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css">
以上代碼為當(dāng)前網(wǎng)頁(yè)下載 Open Sans 字體,從而使自定義 CSS 中可以對(duì) HTML 元素應(yīng)用這個(gè)字體。
第二步:接下來,刪除 style.css 文件中已有的規(guī)則。雖然測(cè)試是成功的了,但是紅字看起來并不太舒服。
第三步:將下列代碼添加到相應(yīng)的位置,用你在 Google Fonts 找到的字體替代 font-family 中的占位行。( font-family 意味著你想要你的文本使用的字體。)這條規(guī)則首先為整個(gè)頁(yè)面設(shè)定了一個(gè)全局字體和字號(hào)(因?yàn)?<html> 是整個(gè)頁(yè)面的父元素,而且它所有的子元素都會(huì)繼承相同的 font-size 和 font-family):
html {
/* px 表示 “像素(pixels)”: 基礎(chǔ)字號(hào)為 10 像素 */
font-size: 10px;
/* Google fonts 輸出的 CSS */
font-family: 'Open Sans', sans-serif;
}
注:CSS 文檔中所有位于 /* 和 */ 之間的內(nèi)容都是 CSS 注釋,它會(huì)被瀏覽器在渲染代碼時(shí)忽略。你可以在這里寫下對(duì)你現(xiàn)在要做的事情有幫助的筆記。
譯注:/*``*/ 不可嵌套,/*這樣的注釋是/*不行*/的*/。CSS 不接受 // 注釋。
接下來為文檔體內(nèi)的元素(<h1> (en-US)、<li>和<p>)設(shè)置字號(hào)。將標(biāo)題居中顯示,并為正文設(shè)置行高和字間距,從而提高頁(yè)面的可讀性。
h1 {
font-size: 60px;
text-align: center;
}
p, li {
font-size: 16px;
/* line-height 后而可以跟不同的參數(shù),如果是數(shù)字,就是當(dāng)前字體大小乘上數(shù)字 */
line-height: 2;
letter-spacing: 1px;
}
可以隨時(shí)調(diào)整這些 px 值來獲得滿意的結(jié)果,以下是大體效果:
編寫 CSS 時(shí)你會(huì)發(fā)現(xiàn),你的工作好像是圍繞著一個(gè)一個(gè)盒子展開的——設(shè)置尺寸、顏色、位置,等等。頁(yè)面里大部分 HTML 元素都可以被看作若干層疊的盒子。
并不意外,CSS 布局主要就是基于盒模型的。每個(gè)占據(jù)頁(yè)面空間的塊都有這樣的屬性:
這里還使用了:
開始在頁(yè)面中添加更多 CSS 吧!大膽將這些新規(guī)則都添加到頁(yè)面的底部,而不要糾結(jié)改變屬性值會(huì)帶來什么結(jié)果。
html{
background-color:#00539f;
}
這條規(guī)則將整個(gè)頁(yè)面的背景顏色設(shè)置為 所計(jì)劃的顏色。
body{
width:600px;
margin:0 auto;
background-color:#ff9500;
padding:0 20px 20px 20px;
border:5px solid black;
}
現(xiàn)在是 <body> 元素。以上條聲明,我們來逐條查看:
h1{
margin: 0;
padding:20px 0;
color: #00539f;
text-shadow:3px 3px 1px black
}
你可能發(fā)現(xiàn)頁(yè)面的頂部有一個(gè)難看的間隙,那是因?yàn)闉g覽器會(huì)在沒有任何 CSS 的情況下 給 <h1>en-US等元素設(shè)置一些默認(rèn)樣式。但這并不是個(gè)好主意,因?yàn)槲覀兿M粋€(gè)沒有任何樣式的網(wǎng)頁(yè)也有基本的可讀性。為了去掉那個(gè)間隙,我們通過設(shè)置margin: 0;來覆蓋默認(rèn)樣式。
至此,我們已經(jīng)把標(biāo)題的上下內(nèi)邊距設(shè)置為 20 像素,并且將標(biāo)題文本與 HTML 的背景顏色設(shè)為一致。
需要注意的是,這里使用了一個(gè) text-shadow 屬性,它可以為元素中的文本提供陰影。四個(gè)值含義如下:
不妨嘗試不同的值看看能得出什么結(jié)果。
img{
display:block;
margin:0 auto;
}
最后,我們把圖像居中來使頁(yè)面更美觀??梢詮?fù)用 body 的margin: 0 auto,但是需要一點(diǎn)點(diǎn)調(diào)整。<body>元素是塊級(jí)元素,意味著它占據(jù)了頁(yè)面的空間并且能夠賦予外邊距和其他改變間距的值。而圖片是內(nèi)聯(lián)元素,不具備塊級(jí)元素的一些功能。所以為了使圖像有外邊距,我們必須使用display: block 給予其塊級(jí)行為。
注:以上說明假定所選圖片小于頁(yè)面寬度(600 pixels)。更大的圖片會(huì)溢出 body 并占據(jù)頁(yè)面的其他位置。要解決這個(gè)問題,可以:
1)使用 圖片編輯器 來減小圖片寬度; 2)用 CSS 限制圖片大小,即減小 <img> 元素 width 屬性的值(比如 400 px)。
注:如果你暫時(shí)不能理解 display: block 和塊級(jí)元素與行內(nèi)元素的差別也沒關(guān)系;隨著你對(duì) CSS 學(xué)習(xí)的深入,你將明白這個(gè)問題。
如果你按部就班完成本文的實(shí)踐,那么最終可以得到以下頁(yè)面
相關(guān)推薦:
前端新手看過來,手把手帶你輕松上手html的實(shí)操
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。