感覺CSS難學，怎么辦？

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
background-image
background-size
background-position
background-repeat

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 屬性
text-indent 屬性
text-align 屬性
letter-spacing 屬性
text-decoration 屬性
white-space 屬性
line-break 屬性

文本屬性用于定義文本的樣式，通過文本屬性，可以改變文本的顏色、字間距、對齊方式、文本修飾和文本縮進等。常用文本屬性如下表所示：

屬性	可取值	描述
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 用于設置多行元素的空間量，可取值具體說明如下：

normal：取決于用戶端。
number：數字乘以元素的字體大小。
length：指定長度用于計算高度。
%：計算值是給定的百分比值乘以元素計算出的字體大小。

例子，

<!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。

一、使用 script 標簽

要在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>

外部文件example.js將被加載到當前頁面中。
外部文件只須包含通常要放在開始的<script>和結束的</script>之間的那些JavaScript代碼即可。

與解析嵌入式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 程序

JavaScript 解析過程包括兩個階段：預處理（也稱預編譯）和執行。

在編譯期，JavaScript 解析器將完成對 JavaScript 代碼的預處理操作，把 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小時內與您取得聯系。

整合營銷服務商

感覺CSS難學，怎么辦？

一、使用 script 標簽

二、執行JavaScript 程序

您的項目需求