整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          感覺CSS難學,怎么辦?

          感覺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

          文案編輯|云端學長

          文案配圖|云端學長

          內容由:云端源想分享


          主站蜘蛛池模板: 久久高清一区二区三区| 国产精品亚洲一区二区三区久久| 天天爽夜夜爽人人爽一区二区 | 国产精品一区二区久久| 色婷婷一区二区三区四区成人网| 国产一区二区中文字幕| 久久久无码精品国产一区| 亚洲欧洲一区二区| 日本中文一区二区三区亚洲| 精品无码人妻一区二区三区品| 香蕉久久av一区二区三区| 国产AV一区二区精品凹凸| 国产在线一区二区三区在线| 日本免费精品一区二区三区| 免费播放一区二区三区| 久久精品国产亚洲一区二区| 日产亚洲一区二区三区| 中文无码一区二区不卡αv| 少妇一夜三次一区二区| 一区在线观看视频| 无码人妻精品一区二区三| 国精产品999一区二区三区有限| 精品无码国产AV一区二区三区| 亚洲一区二区三区国产精品| 无码人妻一区二区三区免费看 | 一色一伦一区二区三区 | 无码精品人妻一区二区三区免费 | 日本一区中文字幕日本一二三区视频 | 99久久精品国产高清一区二区 | 亚洲一区二区女搞男| 全国精品一区二区在线观看| 精产国品一区二区三产区| 少妇激情av一区二区| 99国产精品欧美一区二区三区| 一区二区三区亚洲视频| 日韩精品无码一区二区三区| 无码人妻一区二区三区免费看| 99精品高清视频一区二区| 在线观看午夜亚洲一区| 久久久国产精品一区二区18禁| 亚洲AV无码一区二区乱孑伦AS|