對于新人來說想要了解css，就要從最基本的入手了解，講真的學習css入門很簡單，學習html和css短時間后你就可以制作一個網(wǎng)頁，深入的去學習的話，就會很難。他就是從簡——深——深——簡的一個過程，如果你真正熟悉掌握之后，就可以輕松對付日常工作。

不管是傳統(tǒng)的Web開發(fā)或者是現(xiàn)代的Web應用開發(fā)，至少到今天為止還是離不開CSS。這篇文章帶你們認識一下css.

什么是CSS？

CSS(Cascading Style Sheets)層疊樣式表，又叫級聯(lián)樣式表，簡稱就是樣式表，

1、 用于html文檔中元素樣式的定義，實現(xiàn)了將內容與變現(xiàn)分離，提高了代碼的可重用性和可維護性

例如：

效果圖片：

html:頁面結構

css:頁面美容

2、 文件后綴是.css

3、 樣式通常存儲在樣式表中

4、 外部樣式表可以極大提高工作效率

5、 外部樣式通常存儲在CSS文件中

6、 多個樣式定義可層疊為一

CSS與HTML之間的關系是什么？

1、 HTML用于構建網(wǎng)頁的結構

2、 CSS用于構建HTML元素的樣式

3、 HTML是頁面的內容組成，CSS是頁面的變現(xiàn)

結構層：HTML 表示層：CSS 行為層：JavaScript

怎樣使用CSS樣式表的方式？

1、內聯(lián)方式

使用style屬性，只是對當前標簽有效，頁面內容和樣式高度耦合(直接把CSS代碼用style屬性添加到開始標簽中)

紅色字體

2、內部樣式表

在head中使用style標簽，當前頁面有效，內容和樣式一定程度分離，但是不徹底(直接把CSS代碼添加到頭部的style標簽中)

P{color:red;}

3、 外部樣式表

將樣式寫到一個單獨CSS文件中，需要用到HTML文件，引用它即可。

StyleSheet,的意思就是樣式調用

4、 導入式

@import url(my.css);

優(yōu)先級：行內樣式>內部樣式>外部樣式>導入樣式

css加載方式link和@import的區(qū)別，為什么不推薦使用@import？

1、@import是CSS提供加樣式的一種方式，只能用于加載CSS。Link標簽除了可以加載CSS外，還可以做很多其他的事情，比如定義rel連接屬性等。

2、加載順序的差別。當一個頁面被加載的時候，link引用的CSS會同時被加載，@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽器@import加載CSS的頁面時開始會沒有樣式(就是閃爍)，網(wǎng)速慢的時候會比較明顯。

3、兼容性的差別。@import在IE5以上才能識別，而link標簽無此問題。

4、使用dom控制樣式時的差別。當時用JavaScript控制dom去改變樣式的時候，只能使用link標簽，因為dom操作元素的樣式時，用@import方式的樣式也許還未加載完成。

5、使用@import方式會增加html請求，會影響加載速度，所以謹慎使用該方法。

CSS語法

CSS規(guī)則由兩個主要的部分構成：選擇器以及一條或多條聲明。

1、 css是以屬性/值對形式出現(xiàn)

2、 屬性(property)是您希望設置的樣式屬性(style atribute)。每個屬性都有一個值，屬性和屬性值之間用冒號(：)連接

如：selector{property：value}

3、 多對屬性之間用分號(；)隔開

如：h1{color:red;font-size:14px;}

注釋格式：

/*css注釋語句 */

Html/css注釋快捷鍵：Ctrl+/ 單行注釋/取消注釋

Ctrl+shift+/ 多行注釋/取消注釋

基本屬性：

字體屬性：

font-style：字體(斜體)

font-variant ：字體的變化(大小寫)

font-weight ：字體粗細

font-size：字體大小

font –family：字體名稱

文本相關屬性：主要包含顏色color、對齊方式text-algin、修飾效果text-decorationt

尺寸屬性：

height：設置元素的高度

line-height：設置行高

max-height：設置元素的最大高度

max-width：設置元素的最大寬度

min-height：設置元素的最小高度

min-width：設置元素的最小寬度

width：設置元素的寬度

背景相關：

CSS說簡單也很簡單，無非就是記和練。記得全了，練習的多了，自然而然就會用了。說難也難，因為它涉及面比較廣。所以說先從簡單的學起，邊學邊記邊練，只要把最常用的牢記并且熟練應用，基本的任務也就可以輕松應對。

(ps:如果您覺得有用，請點贊轉發(fā)，讓更多人看到哦)

總結

以上是生活随笔為你收集整理的css字体样式代码大全_这都2020年了，还没了解CSS？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。