2020-3-15 前端達(dá)人
CSS介紹
整理完了HTML的筆記，接下來(lái)就是CSS了。我們可以使用HTML構(gòu)建穩(wěn)定的結(jié)構(gòu)基礎(chǔ)，而頁(yè)面的風(fēng)格樣式控制則交給CSS來(lái)完成。網(wǎng)頁(yè)的樣式包括各種元素的顏色、大小、線形、間距等等，這對(duì)于設(shè)計(jì)或維護(hù)一個(gè)數(shù)據(jù)較多的網(wǎng)站來(lái)說(shuō)，工作量是巨大的。好在可以使用CSS來(lái)控制這些樣式，這將大大提高網(wǎng)頁(yè)設(shè)計(jì)和維護(hù)的效率，并且使網(wǎng)頁(yè)的整體風(fēng)格很容易做到統(tǒng)一。
CSS概述
CSS是英文Cascading Style Sheet的縮寫(xiě)，中文譯為層疊樣式表，也有人翻譯為級(jí)聯(lián)樣式表，簡(jiǎn)稱(chēng)樣式表。它是一種用來(lái)定義網(wǎng)頁(yè)外觀樣式的技術(shù)，在網(wǎng)頁(yè)中引入CSS規(guī)則，可以快捷地對(duì)頁(yè)面進(jìn)行布局設(shè)計(jì)，可以的控制HTML標(biāo)記對(duì)象的寬度、高度、位置、字體、背景等外觀效果。
CSS是一種標(biāo)識(shí)性語(yǔ)言，不僅可以有效的控制網(wǎng)頁(yè)的樣式，更重要的是實(shí)現(xiàn)了網(wǎng)頁(yè)內(nèi)容與樣式的分離，并允許將CSS規(guī)則單獨(dú)存放于一個(gè)文檔中， CSS文件的擴(kuò)展名為“css”。
CSS3
CSS3標(biāo)準(zhǔn)早在1995年就開(kāi)始制訂， 2001年提上W3C研究議程，但是，10年來(lái)CSS3可以說(shuō)是基本上沒(méi)有什么很大的變化，一直到2011年6月才發(fā)布了全新版本的CSS3，目前，許多瀏覽器都廣泛支持CSS3。
CSS3是CSS技術(shù)的一個(gè)升級(jí)版本，CSS3語(yǔ)言將CSS劃分為更小的模塊，在朝著模塊化的方向發(fā)展。以前的版本是一個(gè)比較龐大而且比較復(fù)雜模塊，所以，把它分解成為一個(gè)個(gè)小的簡(jiǎn)單的模塊，同時(shí)也加入了更多新的模塊。在CSS3中有字體、顏色、布局、背景、定位、邊框、多列、動(dòng)畫(huà)、用戶(hù)界面等等多個(gè)模塊。
CSS的基本用法
CSS的使用規(guī)則由兩部分組成：選擇器和一條或多條聲明。其基本基本語(yǔ)法如下：
CSS的使用規(guī)則由兩部分組成：選擇器和一條或多條聲明。其基本基本語(yǔ)法如下：
CSS屬性
CSS的屬性按照相關(guān)功能進(jìn)行了分組，包含了字體、文本、背景、列表、動(dòng)畫(huà)等多個(gè)分組，這些屬性的具體使用方法和示例將會(huì)在后續(xù)中提到。
在HTML文檔中使用CSS的方法
根據(jù)CSS在HTML文檔中的使用方法和作用范圍不同，CSS樣式表的使用方法分為三大類(lèi)：行內(nèi)樣式、內(nèi)部樣式表和外部樣式表，而外部樣式表又可分為鏈入外部樣式表和導(dǎo)入外部樣式表。本節(jié)我們從四個(gè)分類(lèi)來(lái)認(rèn)識(shí)在HTML中使用CSS的方法。
行內(nèi)樣式
內(nèi)部樣式表
外部樣式表
鏈入外部樣式表
導(dǎo)入外部樣式表
行內(nèi)樣式
行內(nèi)樣式（inline style），也叫內(nèi)聯(lián)樣式，它是CSS四種使用方法中最為直接的一種，它的實(shí)現(xiàn)借用HTML元素的全局屬性style，把CSS代碼直接寫(xiě)入其中即可。
嚴(yán)格意義上行內(nèi)樣式是一種不嚴(yán)謹(jǐn)?shù)氖褂梅绞剑恍枰x擇器，這種方式下CSS代碼和HTML代碼混合在一起，因此不推薦使用行內(nèi)樣式。行內(nèi)樣式的基本語(yǔ)法如下：
<標(biāo)記 style="屬性:值; 屬性:值; …">
當(dāng)單個(gè)文檔需要特殊的樣式時(shí)，應(yīng)該使用內(nèi)部樣式表。內(nèi)部樣式表是將樣式放在頁(yè)面的head區(qū)里，這樣定義的樣式就應(yīng)用到本頁(yè)面中了，內(nèi)部樣式表使用style標(biāo)記進(jìn)行聲明，是較為常用的一種使用方法。其基本語(yǔ)法如下：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
選擇器1｛屬性:值;…｝
選擇器2｛屬性:值;…｝
……
選擇器n｛屬性:值;…｝
</style>
</head>
<head>
<meta charset="utf-8" />
<title></title>
<link href="樣式表路徑" rel="stylesheet" type="text/css" />
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("樣式表路徑");
</style>
</head>
其中：
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
@import url("樣式表路徑");
</style>
</head>
記錄倉(cāng)促，遺漏之處日后補(bǔ)充，如有錯(cuò)誤或不足之處，還望指正
————————————————
版權(quán)聲明：本文為CSDN博主「狗狗狗狗狗樂(lè)啊」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_44122062/article/details/104848745
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.payeee.cn