CSS基本知識

2021-10-01 09:30:55 字數 3664 閱讀 7005

css又名層疊樣式表(英文全稱:cascading style sheets)是一種用來表現html(標準通用標記語言的乙個應用)或xml(標準通用標記語言的乙個子集)等檔案樣式的計算機語言。css不僅可以靜態地修飾網頁,還可以配合各種指令碼語言動態地對網頁各元素進行格式化

css 能夠對網頁中元素位置的排版進行畫素級精確控制,支援幾乎所有的字型字型大小樣式,擁有對網頁物件和模型樣式編輯的能力。

如果說html

1是房子的框架,那麼css就是房子的裝修

以統一的方式實現樣式的定義

提高頁面樣式的可重用性和可維護性

實現了內容(html)和表示(css)的分離

html和css之間有什麼關係?

html:構建網頁的結構

css :構建html元素的樣式

color:red  字型顏色

font-size 字型大小

font-family:字型樣式

background-color 背景顏色

width:寬度

height: 高度

內聯樣式將樣式宣告在元素的style屬性中

style

="color;red(樣式宣告)

">

1p>

樣式宣告: 表示乙個具體的顯示效果,可以多個同時存在的,多個樣式之間用 ; 進行隔開

每個樣式宣告都有兩部分組成

color:  樣式屬性

red : 屬性值

內部樣式表1.在head裡面加上乙個 style標籤

2.在style中新增任意多的樣式

p選擇器:規範了頁面中哪些元素能夠使用定義好的樣式

外部樣式表

1.建立乙個單獨的樣式表檔案儲存樣式規則

在css資料夾下新建乙個css檔案 並在裡面新增好樣式

2.在需要使用得頁面上新增 link 標籤 進行引入

引入方式的優先順序: 就近原則 誰離這個標籤進 最後就是誰的樣式

繼承性

子級標籤可以直接使用父級元素宣告好的樣式 (大部分的css樣式是可以被繼承)

層疊性

可以同時寫多個樣式

優先順序

低: 瀏覽器的預設值

中: 就近原則

高: 內聯樣式

!improtant規則

作用: 強制調整優先順序 (一定是最後顯示的)

打破了優先順序

作用:規範了頁面中哪些元素能夠使用定義好的樣式

目的:匹配頁面元素(找到頁面的元素)

通用選擇器

作用:匹配頁面中的所有元素

用法:*{}

標籤選擇器

作用:匹配當前所有這一類的標籤

用法 p{}

類選擇器

作用:由css定義好,可以被任意標記的class屬性值進行引用的選擇器

語法:1.在標籤內 加上class屬性

2.在樣式表中 .類名{} 進行引入

注意: 類名或者id名 不能以數字開頭

除了 _ -以外不能有其他的特殊字元

**示例見下方複雜選擇器?

群組選擇器

作用:選擇器宣告式以 , 分割 的選擇器列表

後代選擇器

後代: 只要是具備層級關係的元素

使用空格 隔開

子代選擇器

子代:只具備一級層級的關係的元素

使用 > 隔開

**示例:

class

="p1"

>

我是p1p

>

class

="p1"

id="p2"

>

我是p2p

>

>

我是p3p

>

>

>

>

我是tdtd

>

tr>

table

>

作用:使用者設定元素的寬度和高度 單位為px 百分比

寬度屬性和高度屬性

width

height 設定元素的寬高

max-width

max-height 最大的寬度 和 最大的高度

min-width

min-height 最小的寬度 和 最小的高度

允許被修改高度和寬度的元素

1.塊級元素允許被設定寬高

2.行內塊大部分允許被設定寬高的 例如 表單控制項 單選和複選 是不能修改尺寸

3.存在width和height屬性的元素 可以設定寬高的樣式 img table

溢位使用尺寸屬性限制元素大小的時候,如果內容所需要的空間太小大於元素本身,會導致溢位效果

屬性:overflow

visible:預設的效果 溢位可見

hidden: 隱藏 溢位的時候隱藏

scroll 滾動 當元素溢位的時候會出現滾動條 溢位時滾動條可用

auto 自動 內容溢位的時候會出現但是沒有溢位的時候不出現

示例**:

.div

此為自動樣式

屬性:  box-shadow

h-shadow :水平位置

v-shadow :垂直位置

blur :模糊距離

spread :陰影尺寸

color :顏色

inset :將**影變成內陰影

div1

實現樣式

!improtant規則輕易不要使用,因為這個規則打破了優先順序規則,可能影響後期對網頁的維護

id選擇器在css裡面盡量不要使用,因為在頁面中只能有乙個獨一無二的id,所以css樣式無法重用 ,加重程式設計負擔,優先使用class類選擇器,id選擇器可以在js中使用,如果在css中同時使用可能產生某些不可描述的錯誤

html↩︎

CSS基本知識

選擇符表示要定義樣式的物件,可以是元素本身,也可是一類元素或制定名稱的元素 在css選擇符中,大致可有10種 類選擇符 id選擇符 class選擇符 萬用字元 群組選擇符 包含選擇符 偽類選擇符 偽物件選擇符 關於選擇符的權重問題,css中用四位數來表示權重,權重的表示式如0000 在這裡特別要注意...

CSS 基本知識

html示例 塊級元素 display block 每個塊級元素佔一行,多個塊級元素上下堆疊顯示,它的寬度預設為父元素的寬度,高度由它的內容高度決定 內容撐開 塊級元素有 6級標籤 段落 有序列表 列表項 等等行內元素 display inline 多個行內元素在一行內顯示,當同一行寬度不夠時,才到...

CSS樣式基本知識

外部式 css樣式表就是把css 直接寫在現有的html標籤中,如下面 style color red 這裡文字是紅色。p 注意要寫在元素的開始標籤裡,下面這種寫法是錯誤的 這裡文字是紅色。p style color red 並且css樣式 要寫在style 雙引號中,如果有多條css樣式 設定可以...