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