大家好，我是小Bob,一個關注軟件領域而又執著于計算機底層的開發者~

相信每個學理工科的都懷有一個理工科的夢。

我也不例外，自從入門計算機，從開始學習C語言到數據結構C++和數據結構等。還記得去年的暑假，我自己搭建了一個屬于自己的博客，也很好奇它的實現。于是，漸漸的對前端也是更加好奇。

在華為云這里，我看到了華為云的全棧學習，剛好學校也還沒教前端，于是趁著暑假便開始了前端學習之旅。

前端三大件分別為HTML、CSS、JS。這里小編給大家介紹的是CSS。

一.什么是CSS？

CSS英文全稱為Cascading Style Sheets，中文名為級聯樣式單，一般也稱為層疊樣式表單。

簡單來說，CSS是一種樣式表現語言，它是對網頁結構語言（HTML）的補充，就和好朋友一樣一起完成對網頁的布局。主要用于對網頁樣式的定義，例如布局、顏色、文本等的設計，從而精確控制頁面中的每一個元素。

比如在代碼中，我們會學到一些背景屬性：color、image、repeat等等；還有字體大小、邊框設置以及效果渲染。

二.CSS入門

這里小編帶大家進行簡單的入門。

1.下載VScode

首先推薦一款宇宙級好用的編輯器，用它來敲代碼、寫文檔、甚至上班摸魚看股票都行，它就是微軟的VScode，此VScode不是VS哦。此前小編以為它們是一樣的，然后下載下來不僅很大也木有小編想要的效果，所以一定要下VScode哦~

首先，找到VScode的官網：https://code.visualstudio.com/

然后點擊上圖中的Download下載：

在上圖中選擇合適自己的版本下載即可。

最后便是傻瓜式安裝啦~這里小編提醒大家下載后可以下一個中文簡體的插件，如下。在搜索欄中搜索Chinese便會找到簡體中文的插件啦~

到這里我們便把寫前端需要的編輯器下載好啦！

2.CSS簡單入門

接下來我們便可以開始寫一個簡單的CSS程序啦~

首先，我們先介紹CSS的引入。至于為什么要先介紹CSS的引入呢？之前我們也有介紹過，HTML是網頁的框架，那么CSS和JS其實更多的是修飾和美觀的作用。所以一般寫前端會將HTML、CSS、JS的代碼分別寫在不同的文件里，方便我們在后期的修改和整理。

那么我們在HTML代碼里就要嵌入CSS和一些JS的代碼，即引入。

CSS的引入

內聯模式

將CSS樣式直接寫到HTML元素的style屬性中

內部樣式

將CSS樣式寫到?-->

>

>

?????>

CSS的style標簽

現在新建一個CSS文件，如：demo.css文件。并寫入以下代碼：

h1{

color:?pink;

}

保存后我們用游覽器打開上面的test.html文件即可。在CSS文件中，我們將h1的標題的顏色有所修改。

三.CSS進階

關于CSS的進階，包括CSS的選擇器和盒模型。

關于選擇器的種類也是有很多，以后有機會再給大家一一描述。這里我們大致了解一下什么是盒模型。

1.盒子模型

盒子模型是對頁面進行布局所需要使用的非常重要的一部分。盒子模型本質上就是一個盒子，它包括邊距（margin）、邊框（border）、填充（padding）、內容（content）、背景（backbround），下面對每一部分進行簡單的說明。

margin：清除邊框外的區域，外邊距是透明的。

border：圍繞在內邊距和內容外的邊框。

padding：清除內容周圍的區域，內邊距是透明的。

content：盒子的內容，顯示文本和圖像。

backbround：背景包含背景顏色（background-color）、背景圖（background-image），給整個盒子添加上背景樣式。

比如：

我們來簡述一下這張圖：圖中最內部的框是元素的實際內容，也就是元素框，緊挨著元素框外部的是內邊距padding，其次是邊框，然后最外層是外邊距，整個構成了框模型。通常我們設置的背景顯示區域，就是內容、內邊距、邊框這一塊范圍。而外邊距margin是透明的，不會遮擋周邊的其他元素。

那么，元素框的總寬度 = 元素的width + padding的左邊距和右邊距的值 + margin的左邊距和右邊距的值 + border的左右寬度；

元素框的總高度 = 元素的height + padding的上下邊距的值 + margin的上下邊距的值 ＋ border的上下寬度。

2.盒子模型的設置

其次，我們需要了解的便是對盒子模型的設置。當我們在編寫代碼時，只要一個盒子被選中，就要考慮它的屬性問題，比如盒子需要設置哪些屬性，并且考慮是否需要并排顯示，最后再考慮美化問題。

內容區域：width 和 height

內填充區域： padding

邊框： border

外填充區域：margin

背景： background

好比一張網頁就是一堆的盒子堆積起來的。這里說的盒子就是標簽，也是矩形。

CSS的學習相較于其它的比如C、C++或者Python，沒有那么繁瑣，但也各有各自不同的地方，比起學習其它語言，CSS能給我最直接的效果便是可以自己可以獨自修改博客了，也可以根據自己的喜好去創建一個你自己喜歡的博客風格。

最后，我想你肯定也想自己去新建一個屬于自己的博客了吧，那順便也可以將我的CSS也學了哦~嘿嘿，最后的最后，關于CSS的學習入門介紹暫時就到這里了，后續還會繼續更新哦，敬請期待~

備注：本文來自于華為云內容共創系列。

CSS HTML

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。