初步了解css

2021-09-28 22:36:01 字數 2585 閱讀 6746

css的基本概念

我們看到的網頁都是有很漂亮的樣式的,而html僅僅只是做到了對網頁中的內容進行簡單修飾。那麼網頁的布局,主題風格等是怎麼被做出來的?

css是什麼?

層疊式樣式表cascading style sheet

目的:將html內容與html顯示的樣式相分離提出的一種解決方案。

html:骨骼

內容: 肌肉

css: 外形

css好處

將html**變的更加簡潔,易讀

將html內容和html樣式進行了分離 更加便於後期維護

css可以使用樣式的統一管理,統一改變

css樣式分離使**前台風格變化更加方便了

css語法規則

選擇器所有的css屬性值都不需要引號

注釋:/**/注釋不要巢狀

css引入方式

行內的css:如果**中只有一兩處使用某種樣式

頁內的css:如果某個專題頁(特殊頁面)和整個**的風格不同時,可以在專題頁面中使用頁內css

外部的css

格式:首先建立css檔案 .css

引入css檔案

link寫在head中(stylesheet:樣式指令碼)

使用外部 css 的注意點:

css 檔案的路徑(相對路徑要掌握)

rel=「stylesheet」 千萬不能丟掉或者寫錯

css裡面的內容 跟寫在頁面內的時候是一樣的

css的大括號後面,絕對不能出現 ;

不同的屬性之間要用分號隔開table

引入時的優先順序

行內的css優先順序最高

外部的css和頁內的css優先順序相同

優先順序體現在相同的屬性之間的覆蓋,而不同的css形式中的不同的屬性會疊加顯示(看引入的先後順序來顯示,後引入的覆蓋先引入的效果);

選擇器:某乙個樣式的識別符號

標籤選擇器

用html標籤名作為選擇器,修飾的是頁面中所有的這種標籤

格式:標籤名

id選擇器

**中每個頁面只允許使用一次同乙個id(id的值唯一性),一般是用作布局使用,或者不用 給你想要修飾的標籤乙個適當的id

格式:選擇器名

class(類)選擇器

**中如果某一類標籤都使用同樣的樣式,用作頁面內的具體內容

格式:.選擇器名

級聯選擇器

給某些標籤的子標籤設定樣式,可以節省取名的次數,可以使html頁面更加簡潔化

格式:選擇器1 選擇器2 …

並列選擇器

如果某些標籤的樣式相同,可以使用並列式定義法一起定義

格式:選擇器1,選擇器2,選擇3,…

通用選擇器

選中頁面中所有的html標籤

選擇器之間的優先順序

標籤選擇器(1)《類選擇器(10)body

color_name 規定顏色值為顏色名稱的背景顏色(比如 red)。

hex_number 規定顏色值為十六進製制值的背景顏色(比如 #ff0000)。

rgb_number 規定顏色值為 rgb **的背景顏色(比如 rgb(255,0,0))。

transparent 預設。背景顏色為透明。

background-image 屬性

設定背景影象

元素的背景佔據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距。

預設地,背景影象位於元素的左上角,並在水平和垂直方向上重複。

body

url(『url』) 指向影象的路徑。

none 預設值。不顯示背景影象。

background-repeat 屬性

設定是否及如何重複背景影象。

body

repeat 預設。背景影象將在垂直方向和水平方向重複。

repeat-x 背景影象將在水平方向重複。

repeat-y 背景影象將在垂直方向重複。

no-repeat 背景影象將僅顯示一次。

background-position 屬性

設定背景影象的開始位置。

body

scroll 預設值。背景影象會隨著頁面其餘部分的滾動而移動。

fixed 當頁面的其餘部分滾動時,背景影象不會移動。

background 屬性

在乙個宣告中設定所有的背景屬性。

通常建議使用這個屬性,而不是分別使用單個屬性,因為這個屬性在較老的瀏覽器中能夠得到更好的支援,而且需要鍵入的字母也更少。

body

background-size 屬性

規定背景影象的尺寸

div語法 background-size: length|percentage|cover|contain;

length 設定背景影象的高度和寬度。 第乙個值設定寬度,第二個值設定高度。 如果只設定乙個值,則第二個值會被設定為 「auto」。

percentage 以父元素的百分比來設定背景影象的寬度和高度。 第乙個值設定寬度,第二個值設定高度。 如果只設定乙個值,則第二個值會被設定為 「auto」。

cover 把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。 背景影象的某些部分也許無法顯示在背景定位區域中。

contain 把影象影象擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域。

初步了解css

css是 cascading style sheets 的首字母縮寫,意思是層疊樣式表。有了css,html中大部分表現樣式的標籤就廢棄不用了,html只負責文件的結構和內容,表現形式完全交給css,html文件變得更加簡潔。css的定義方法是 選擇器 選擇器是將樣式和頁面元素關聯起來的名稱,屬性是...

css初步了解animation

檢索或設定物件所應用的動畫名稱,必須與規則 keyframes配合使用,因為動畫名稱由 keyframes定義。keyframes run moz keyframes run webkit keyframes run在專案中需要注意相容性 div keyframes run20 100 style ...

C Boost 初步了解

boost是由c 標準委員會成員發起 眾多c 業界高人參與設計並實現的乙個涉及面廣 質量高且業已廣泛使用的c 標準後備庫,其中 tr1已經被納入c 0x標準庫。不論從風格和內容組織上講,都可以認為boost專案是c 標準庫的延伸。截止到boost 1.43版本,boost專案擁有大約100個用途廣泛...