外貿建站的 常用CSS設置

時間：2023-07-07 05:48:02 | 來源：網站運營

時間：2023-07-07 05:48:02 來源：網站運營

外貿建站的 常用CSS設置：今天我們來說說外貿建站的 常用CSS設置 。CSS設置這方面的內容比較側重于代碼技術類，有些同學會覺得去研究這方面的東西太費事費力，投入產出比不高。事實上，當你掌握了這方面的相關技術，你對網站的前端構建會有全新的認識。一般情況下外貿建站的前端效果會涉及到三大方面的代碼內容，分別是HTML5,CSS和Javascript。

1.Html
HTML稱為超文本標記語言，是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

2.CSS
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。CSS不僅可以靜態(tài)地修飾網頁，還可以配合各種腳本語言動態(tài)地對網頁各元素進行格式化.

3.JavaScript（簡稱“JS”）
是一種具有函數優(yōu)先的輕量級，解釋型或即時編譯型的編程語言。雖然它是作為開發(fā)Web頁面的腳本語言而出名的，但是它也被用到了很多非瀏覽器環(huán)境中，JavaScript 基于原型編程、多范式的動態(tài)腳本語言，并且支持面向對象、命令式和聲明式（如函數式編程）風格

上面的三段話來自百度百科，是不是太復雜太拗口了，那么我們來換種簡單的說法：

HTML是網頁內容的載體（包含文字、圖片、視頻）； CSS樣式是表現（標題字體、顏色變化）；JavaScript是用來實現網頁上的特效效果

今天我們側重講解CSS的相關內容，先來學習一下CSS的語法構成，css 樣式由選擇符和聲明組成，而聲明又由屬性和值組成，如下圖所示：

p{cloor:red} 這里的p就是選擇符，整個大挎號的內容（包含大挎號）就是聲明，color就是屬性，red就是屬性值

我們來舉個對照的例子：

我喜歡Jack老師的外貿建站課程

我喜歡Jack老師的外貿建站課程

第一段是正常情況下的文章展現效果，第二段我們發(fā)現文字變大了，而且字體變成了紅色？那么為什么會出現這樣的結果，我們去文本編輯狀態(tài)下截圖看一下：







我們可以清楚的看到，在第二段中Jack老師為這段話加了2個CSS的特效，分別是font-size:25px（作用是將字體大小設置為25像素）；color:red(將字體設置為紅色)。通過這樣的對比，相信同學們對CSS代碼能夠有更直觀的理解了。

那么還有哪些常用的CSS代碼呢？以下就是Jack老師羅列出的常用CSS代碼

1.CSS注釋代碼

語法：/*注釋語句*/ 作用：給網站設計人員看的讓其了解這段代碼的設置目的，網頁前端不會現實

2.文字字體代碼

語法：body{font-family:”宋體” ;} 作用:對某一段文字設置自己想要的字體，注意不要選擇特殊字體，客戶在你網站前端能否看到你設置的字體取決于客戶電腦上的字體庫中是否有你設置的該字體存在。另外要注意的是，同一種字體可能有不同的名稱，比方說同樣是“微軟雅黑”字體，可以用以下兩種CSS代碼形式：

body{font-family:”Microsoft Yahei”;}
body{font-family:”微軟雅黑”;}

但是相對來說，第一種比第二種的兼容性更好一些，特別是在不同的電腦操作系統(tǒng)和不同的瀏覽器上，兼容性差異較大的情況下，有時候第二種是無法正常顯示的。

3.文字字號和顏色

語法：body{font-size:12px;color:#666} 作用：設定字體的大小和顏色
注意：文字大小用像素值表示，字體顏色除了常規(guī)的顏色對應的英文外，還可以用16進制的顏色標號進行設定，不知道具體顏色的16進制數值的話可以用PS軟件點選色區(qū)，然后會顯示對應的該色區(qū)16進制數值（不懂的同學可以私下咨詢一下JACK老師）

4.文字字體排版—加粗

語法：p span{font-weight:bold;} 作用：為特定詞匯加粗顯示，以達到強調的作用，但是如果單純是為了強調某些關鍵詞的話，可以用<strong>關鍵詞</strong>進行設置。對于瀏覽器而已，strong的強調性比Bold的更加強烈。


5.文字字體排版—斜體
語法：p a{font-style:italic;} 作用：將特定的詞匯或字段用斜體表示，此外我們也可以用<em>關鍵詞</em>來設置，<em>也含有一定的強調意思，但沒有<strong>的語義那么強烈，只不過在網頁的前端頁面中呈現斜體的效果.


6.文字排版—下劃線
語法：p a{text-decoration:underline;} 作用：在特定的詞匯或者字段下方出現一條下劃線
注意：如果是對某一段文字用下劃線，那么語法可以用<p>需要加下劃線的文字</p>；如果針對的是某幾個字，那么建議用<span>需要加下劃線的文字</span>


7.文字排版—刪除線
語法：{text-decoration:line-through;} 作用：一般情況下刪除線常見于在價格頁面上刪除老價格。


8.文字排版—段落縮進
語法：p{text-indent:2em;} 作用：為每一段的起始文字縮進2個文字的距離。
注意：這里可以任意設定縮進距離，只需要改動em前面的數值即可，一個em就是一個文字的距離。


9.文字排版—行間距設定
語法：p{line-height:2em;} 作用：實現段落間行間距的距離寬窄
注意：在em前面設置行間距的倍數的時候，要注意到前端的行間距實際效果，1em就是一個漢字的寬度


10.文字排版—字間距設定
語法：p{letter-spacing:50px;} 作用：實現段落中文字的彼此空隙大小
注意：注意：這個樣式使用在英文單詞時，是設置字母與字母之間的間距，如果需要設置英文單詞之間的距離，需要用{word-spacing:**px}來進行設置


11.文字排版—對齊設定
語法：p{text-align:center;} 作用：實現文字的左中右對齊
注意：左中右的對齊方式分別是在屬性值中更改為：left；center；right
以上就是本章關于外貿建站的常用CSS設置的相關內容，本章內容專業(yè)性要求比較高，但內容部分比較淺顯易懂，重點就在于不斷的練習和熟練掌握，

如果對本章內容還有不理解的地方，歡迎用百度或者谷歌搜索關鍵詞---Jack外貿建站

排名首頁首位的就是我的網站，網站上有更多免費的外貿建站、谷歌SEO優(yōu)化、外貿客戶開發(fā)等方面的實操干貨內容等著你哦！