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

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

什么是CSS？

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

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

例如：

效果圖片：

html:頁面結(jié)構(gòu)

css:頁面美容

2、 文件后綴是.css

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

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

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

6、 多個(gè)樣式定義可層疊為一

CSS與HTML之間的關(guān)系是什么？

1、 HTML用于構(gòu)建網(wǎng)頁的結(jié)構(gòu)

2、 CSS用于構(gòu)建HTML元素的樣式

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

結(jié)構(gòu)層：HTML 表示層：CSS 行為層：JavaScript

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

1、內(nèi)聯(lián)方式

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

紅色字體

2、內(nèi)部樣式表

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

P{color:red;}

3、 外部樣式表

將樣式寫到一個(gè)單獨(dú)CSS文件中，需要用到HTML文件，引用它即可。

StyleSheet,的意思就是樣式調(diào)用

4、 導(dǎo)入式

@import url(my.css);

優(yōu)先級：行內(nèi)樣式>內(nèi)部樣式>外部樣式>導(dǎo)入樣式

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

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

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

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

4、使用dom控制樣式時(shí)的差別。當(dāng)時(shí)用JavaScript控制dom去改變樣式的時(shí)候，只能使用link標(biāo)簽，因?yàn)閐om操作元素的樣式時(shí)，用@import方式的樣式也許還未加載完成。

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

CSS語法

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

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

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

如：selector{property：value}

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

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

注釋格式：

/*css注釋語句 */

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

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

基本屬性：

字體屬性：

font-style：字體(斜體)

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

font-weight ：字體粗細(xì)

font-size：字體大小

font –family：字體名稱

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

尺寸屬性：

height：設(shè)置元素的高度

line-height：設(shè)置行高

max-height：設(shè)置元素的最大高度

max-width：設(shè)置元素的最大寬度

min-height：設(shè)置元素的最小高度

min-width：設(shè)置元素的最小寬度

width：設(shè)置元素的寬度

背景相關(guān)：

CSS說簡單也很簡單，無非就是記和練。記得全了，練習(xí)的多了，自然而然就會用了。說難也難，因?yàn)樗婕懊姹容^廣。所以說先從簡單的學(xué)起，邊學(xué)邊記邊練，只要把最常用的牢記并且熟練應(yīng)用，基本的任務(wù)也就可以輕松應(yīng)對。

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

總結(jié)

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

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