CSS學習之css介紹和引入

2021-08-20 01:42:37 字數 1529 閱讀 7011

1>引子

如之前的html,當我們想要修改html元素的樣式的時候,需要為每個html標籤新增屬性,當html內容非常多時,

會重複定義很多相同屬性(例如不同標籤擁有相當屬性,需在每個標籤內單獨定義),修改也需逐個修改,後期

極難維護,所以,css出現了。

2>css概念

層疊樣式表(

cascading 

style 

sheets),樣式定義如何顯示html元素,樣式通常存放於樣式表中,也就是css把頁面

內容與顯示格式分離了,html就負責(通過標籤)組織並展示內容,css負責 展示方式/顯示格式,把html元素的樣式

集中管理,這--------就是css。

3>如何使用css

通常會把規則的內容都儲存在css檔案中,此時該css檔案被稱為外部樣式表,然後在html檔案中通過link標籤

引用該css檔案即可。這樣瀏覽器在解析到該link標籤的時候就會載入該css檔案,並按照該檔案中的樣式規則

渲染html檔案。

4>css語法

分為兩部分:1、選擇器;2、宣告

選擇器就是通過 標籤或者屬性 定位到乙個或一組標籤,然後通過宣告定義樣式,

宣告由屬性和值組成,多個宣告之間用分號分隔。

如下例項

注:css注釋

/*color:#f00;*/
5>引用css樣式

引用有三種方式,1>內聯樣式;2>行內樣式表;3>外部樣式表(又包含 鏈結式和匯入式);

內嵌式----顧名思義,嵌在html裡面,如下,在html的裡面加入標籤,在裡面根據選擇器定義樣式

行內樣式表---在標籤內直接定義

外聯樣式表

--->鏈結式

先建立css檔案如 1.css,裡面包含 p

然後在html中通過link標籤引入

--->匯入式--- @import url()匯入樣式檔案

@import url(other.css)
注意:

@import url()必須寫在檔案最開始的位置。

各種方式優先順序對比: 行內》內嵌》外鏈

css介紹及引入方式

當了解html靜態網頁的基本結構後,發現要想實現更好的介面效果,實現更多的功能還得使用另外的工具來對這些現有的功能進行修飾,接下來高階階段,了解css使用。1.什麼是css?css是 cascading style sheets 的首字母縮寫,意思是層疊樣式表。有了css,html中大部分表現樣式的...

CSS學習之樣式表引入

style height 100px weight 50px x p 注意點 內聯樣式只能包含乙個宣告塊,不能放樣式表 import 完整的規則。type text css media print,screen color red font size 100px style 注意點 1.可以設定me...

css筆記之引入css樣式表

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...