SS層疊樣式表
其實CSS并不難學。最主要的是要掌握方法。
就個人經驗而言,學習任何一門專業知識都是有一定步驟的:
首先,你需要了解該專業知識的一般概念、用途、用法,甚至也要了解一下其歷史沿革。比如CSS的概念是層疊樣式表,英文是“Cascading Style Sheets”,用于給網頁添加樣式,類似于給房屋粉刷墻壁、鋪地磚、打吊頂。等等……
其次,你需要對該專業知識的各詳細參數屬性有大概的了解,知道各屬性是用來做什么的。比如CSS中的選擇器有哪幾種,在何種情況下使用,CSS對文本的樣式有哪些控制屬性,對盒子模型又有哪些控制屬性等等……我在剛開始了解這些屬性的時候,是邊理解邊在腦中想象其在網頁中呈現的樣子的,這樣記憶這些屬性和參數就會更形象而且牢固。
然后,你就可以找一臺配置不用很好的電腦,來動手實踐一下,寫一些樣式,來感知一下CSS的效果,以及印證之前學習中對CSS中各屬性呈現樣子的想象了。
在平時可以多看看網上別人寫得樣式,在瀏覽網頁時,可以按F12查看頁面中各控件的CSS代碼,不斷加深對代碼的熟悉感。
最后就是不斷實踐,多練習。不出一年,甚至更短時間,你就會成為CSS中等水平的Front-End-Engineer了
我最近在編寫《精通CSS》系列文章,趕緊去看看:
CSS屬性值函數(1)概述及語法
CSS屬性值函數(2)calc()數值計算
CSS屬性值函數(3)clamp()限值函數
CSS屬性值函數(4)極值函數min()、max()
未完待續……
加油吧……
1)背景樣式屬性,用于定義 HTML 元素的背景色、背景圖片,同時還可以進行背景定位、背景圖片重復、背景圖片固定。
background-color 屬性可以給指定標簽元素設置背景色。
舉個例子! 我們給 body 元素設置一個背景顏色:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-color: yellowgreen;
}
</style>
</head>
<body></body>
</html>
background-image 屬性可以把圖像插入背景。background-size 屬性可以給背景圖設置大小。
舉個例子! 我們給 body 元素設置一個背景圖像。
wget https://labfile.oss.aliyuncs.com/courses/3773/moon.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
}
</style>
</head>
<body></body>
</html>
通過 background-position 屬性,可以改變圖像在背景中的位置。
background-position 屬性,設置屬性值為居中:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
background-position: center;
}
</style>
</head>
<body></body>
</html>
background-repeat 屬性是用來設置背景圖像是否平鋪。
下表列出了 background-repeat 屬性的一些可取值以及每個可取值的含義。
可 取 值 | 描 述 |
repeat | 背景圖像將在垂直方向和水平方向重復(默認值) |
repeat-x | 背景圖像將在水平方向重復 |
repeat-y | 背景圖像將在垂直方向重復 |
no-repeat | 背景圖像將僅顯示一次 |
我們規定應該從父元素繼承 background-repeat 屬性的設置。
background-repeat 屬性并設置值為不平鋪:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
background-image: url("moon.jpg");
background-size: 300px 300px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body></body>
</html>
(2)文本相關的屬性:
文本屬性用于定義文本的樣式,通過文本屬性,可以改變文本的顏色、字間距、對齊方式、文本修飾和文本縮進等。常用文本屬性如下表所示:
屬 性 | 可 取 值 | 描 述 |
line-height | normal、number、length、% | 設置行高 |
text-indent | length、% | 設置文本縮進 |
text-align | left、right、center、justify、start、end | 設置對齊方式 |
letter-spacing | normal、length | 設置字符間距 |
text-decoration | line、color、style、thickness | 設置文本修飾 |
white-space | normal、pre、nowrap、pre-wrap、pre-line、break-spaces | 規定如何處理空白 |
line-break | auto、loose、normal、strict、anywhere、unset | 處理如何斷開帶有標點符號的文本的行 |
line-height 用于設置多行元素的空間量,可取值具體說明如下:
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>line-height 的使用</title>
<style>
div {
width: 300px;
height: 400px;
border: 1px solid;
font-size: 15px;
display: inline-block;
vertical-align: top;
}
.div1 {
line-height: 2; /*15 * 2*/
}
.div2 {
line-height: 30%; /*15 * 30% */
}
</style>
</head>
<body>
<div class="div1">
<p>“海水呀,你說的是什么?”</p>
<p>“是永恒的疑問。”</p>
<p>“天空呀,你回答的話是什么?”</p>
<p>“是永恒的沉默。”</p>
</div>
<div class="div2">
<p>“海水呀,你說的是什么?”</p>
<p>“是永恒的疑問。”</p>
<p>“天空呀,你回答的話是什么?”</p>
<p>“是永恒的沉默。”</p>
</div>
</body>
</html>
顯示為,
這里是云端源想IT,幫你輕松學IT”
嗨~ 今天的你過得還好嗎?
我們總是先揚起塵土
然后抱怨自己看不見
- 2024.04.17 -
JavaScript是一種輕量級的編程語言,通常用于網頁開發,以增強用戶界面的交互性和動態性。然而在HTML中,有多種方法可以嵌入和使用JavaScript代碼。
本文就帶大家深入了解如何在HTML中使用JavaScript。
要在HTML中使用JavaScript,我們需要使用<script>標簽。這個標簽可以放在<head>或<body>部分,但通常我們會將其放在<body>部分的底部,以確保在執行JavaScript代碼時,HTML文檔已經完全加載。
使用 <script> 標簽有兩種方式:直接在頁面中嵌入 JavaScript 代碼和包含外部 JavaScript 文件。
包含在 <script> 標簽內的 JavaScript 代碼在瀏覽器總按照從上至下的順序依次解釋。
所有 <script> 標簽都會按照他們在 HTML 中出現的先后順序依次被解析。
HTML 為 <script> 定義了幾個屬性:
1)async:可選。表示應該立即下載腳本,但不妨礙頁面中其他操作。該功能只對外部 JavaScript 文件有效。
如果給一個外部引入的js文件設置了這個屬性,那頁面在解析代碼的時候遇到這個<script>的時候,一邊下載該腳本文件,一邊異步加載頁面其他內容。
2)defer:可選。表示腳本可以延遲到整個頁面完全被解析和顯示之后再執行。該屬性只對外部 JavaScript 文件有效。
3)src:可選。表示包含要執行代碼的外部文件。
4)type:可選。表示編寫代碼使用的腳本語言的內容類型,目前在客戶端,type 屬性值一般使用 text/javascript。不過這個屬性并不是必需的,如果沒有指定這個屬性,則其默認值仍為text/javascript。
1.1 直接在頁面中嵌入JavaScript代碼
內部JavaScript是將JavaScript代碼放在HTML文檔的<script>標簽中。這樣可以將JavaScript代碼與HTML代碼分離,使結構更清晰,易于維護。
在使用<script>元素嵌入JavaScript代碼時,只須為<script>指定type屬性。然后,像下面這樣把JavaScript代碼直接放在元素內部即可:
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
如果沒有指定script屬性,則其默認值為text/javascript。
包含在<script>元素內部的JavaScript代碼將被從上至下依次解釋。在解釋器對<script>元素內部的所有代碼求值完畢以前,頁面中的其余內容都不會被瀏覽器加載或顯示。
在使用<script>嵌入JavaScript代碼的過程中,當代碼中出現"</script>"字符串時,由于解析嵌入式代碼的規則,瀏覽器會認為這是結束的</script>標簽。可以通過轉義字符“\”寫成<\/script>來解決這個問題。
1.2 包含外部 JavaScript 文件
外部JavaScript是將JavaScript代碼放在單獨的.js文件中,然后在HTML文檔中通過<script>標簽的src屬性引用這個文件。這種方法可以使代碼更加模塊化,便于重用和共享。
如果要通過<script>元素來包含外部JavaScript文件,那么src屬性就是必需的。這個屬性的值是一個指向外部JavaScript文件的鏈接。
<script type="text/javascript" src="example.js"></script>
與解析嵌入式JavaScript代碼一樣,在解析外部JavaScript文件(包括下載該文件)時,頁面的處理也會暫時停止。
注意:帶有src屬性的<script>元素不應該在其<script>和</script>標簽之間再包含額外的JavaScript代碼。如果包含了嵌入的代碼,則只會下載并執行外部腳本文件,嵌入的代碼會被忽略。
通過<script>元素的src屬性還可以包含來自外部域的JavaScript文件。它的src屬性可以是指向當前HTML頁面所在域之外的某個域中的完整URL。
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>
于是,位于外部域中的代碼也會被加載和解析。
1.3 標簽的位置
在HTML中,所有的<script>標簽會按照它們出現的先后順序被解析。在不使用defer和async屬性的情況下,只有當前面的<script>標簽中的代碼解析完成后,才會開始解析后面的<script>標簽中的代碼。
通常,所有的<script>標簽應該放在頁面的<head>標簽中,這樣可以將外部文件(包括CSS和JavaScript文件)的引用集中放置。
然而,如果將所有的JavaScript文件都放在<head>標簽中,會導致瀏覽器在呈現頁面內容之前必須下載、解析并執行所有JavaScript代碼,這可能會造成明顯的延遲,導致瀏覽器窗口在加載過程中出現空白。
為了避免這種延遲問題,現代Web應用程序通常會將所有的JavaScript引用放置在<body>標簽中的頁面內容的后面。這樣做可以確保在解析JavaScript代碼之前,頁面的內容已經完全呈現在瀏覽器中,從而加快了打開網頁的速度。
JavaScript 解析過程包括兩個階段:預處理(也稱預編譯)和執行。
1、執行過程
HTML 文檔在瀏覽器中的解析過程是:按照文檔流從上到下逐步解析頁面結構和信息。
JavaScript 代碼作為嵌入的腳本應該也算做 HTML 文檔的組成部分,所以 JavaScript 代碼在裝載時的執行順序也是根據 <script> 標簽出現的順序來確定。
你是不是厭倦了一成不變的編程模式?想要突破自我,挑戰新技術想要突破自我,挑戰新技術?卻遲遲找不到可以練手的項目實戰?是不是夢想打造一個屬于自己的支付系統?那么,恭喜你,云端源想免費實戰直播——《微實戰-使用支付寶/微信支付服務,網站在線支付功能大揭秘》正在進行,點擊前往獲取源碼!云端源想
2、預編譯
當 JavaScript 引擎解析腳本時候,他會在與編譯期對所有聲明的變量和函數預先進行處理。當 JavaScript 解析器執行下面腳本時不會報錯。
alert(a); //返回值 undefined
var a=1;
alert(a); //返回值 1
由于變量聲明是在預編譯期被處理的,在執行期間對于所有的代碼來說,都是可見的,但是執行上面代碼,提示的值是 undefined 而不是 1。
因為變量初始化過程發生在執行期,而不是預編譯期。在執行期,JavaScript 解析器是按照代碼先后順序進行解析的,如果在前面代碼行中沒有為變量賦值,則 JavaScript 解析器會使用默認值 undefined 。
由于第二行中為變量 a 賦值了,所以在第三行代碼中會提示變量 a 的值為 1,而不是 undefined。
fun(); //調用函數,返回值1
function fun(){
alert(1);
}
函數聲明前調用函數也是合法的,并能夠正確解析,所以返回值是 1。但如果是下面這種方式則 JavaScript 解釋器會報錯。
fun(); //調用函數,返回語法錯誤
var fun=function(){
alert(1);
}
上面的這個例子中定義的函數僅作為值賦值給變量 fun 。在預編譯期,JavaScript 解釋器只能夠為聲明變量 fun 進行處理,而對于變量 fun 的值,只能等到執行期時按照順序進行賦值,自然就會出現語法錯誤,提示找不到對象 fun。
總結:聲明變量和函數可以在文檔的任意位置,但是良好的習慣應該是在所有 JavaScript 代碼之前聲明全局變量和函數,并對變量進行初始化賦值。在函數內部也是先聲明變量,后引用。
通過今天的分享,相信大家已經對JavaScript在HTML中的應用有了一定的了解。這只是冰山一角,JavaScript的潛力遠不止于此。希望這篇文章能激發大家對編程的熱情,讓我們一起在編程的世界里探索更多的可能性!
我們下期再見!
END
文案編輯|云端學長
文案配圖|云端學長
內容由:云端源想分享
*請認真填寫需求信息,我們會在24小時內與您取得聯系。