CSS的基本知識

2021-10-01 08:55:25 字數 3486 閱讀 1268

css是什麼

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

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

css的作用

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

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

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

html與css之間的關係

html:構建網頁的結構

css :構建html元素的樣式

樣式彙總:

color:red 字型顏色

font-size 字型大小

font-family:字型樣式

background-color 背景顏色

width:寬度

height: 高度

字型使用例項(樣式)

font-family 字型的種類

font-size 字型大小

color 字型的顏色

font-weigh 字型的粗細

樣式表分類

內聯樣式表

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

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

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

color: 樣式屬性

red : 屬性值

內部樣式表

1.在head裡面加上乙個  style標籤

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

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

外部樣式表

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

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

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

優先順序

就近原則 誰離這個標籤近 最後就是誰的樣式

樣式表的特徵

1、繼承性

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

2.層疊性

可以同時寫多個樣式

3.優先順序

低: 瀏覽器的預設值

中: 就近原則

高: 內聯樣式

4.!improtant規則

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

打破了優先順序規則

css基礎選擇器

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

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

選擇器的分類

**通用選擇器**

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

用法:*{}

**標籤選擇器**

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

用法 p{}

**類選擇器**

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

(class 選擇器用於描述一組元素的樣式,class 選擇器有別於id選擇器,class可以在多個元素中使用。)

語法:class 選擇器在html中以class屬性表示, 在 css 中,類選擇器以乙個點"."號顯示:

1.在標籤內 加上class屬性

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

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

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

**.id選擇器**

(id 選擇器可以為標有特定 id 元素指定特定的樣式。

元素以id屬性來設定id選擇器,css 中 id 選擇器以 "#" 來定義

id屬性不要以數字開頭,數字開頭的id在 mozilla/firefox 瀏覽器中不起作用。

) 作用:針對指定id值的元素去定義樣式

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

2.在樣式表中 使用 #id名{} 進行引入

選擇器的優先順序:id>class>p(標籤)>*

權值

標籤選擇器: 0,0,0,1

類選擇器 0,0,1,0

id選擇器 0,1,0,0

內聯樣式 1,0,0,0

選擇器的權值加到一起,大的優先;如果權值相同,後定義的優先

複雜的選擇器

群組選擇器

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

後代選擇器

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

使用空格 隔開

子代選擇器

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

使用 > 隔開

尺寸屬性

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

2.寬度屬性和高度屬性

width height 設定元素的寬高

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

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

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

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

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

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

4.溢位

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

屬性:overflow

visible:預設的效果 溢位可見

hidden: 隱藏 溢位的時候隱藏

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

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

邊框陰影

屬性: box-shadow

h-shadow :水平位置

v-shadow :垂直位置

blur :模糊距離

spread :陰影尺寸

color :顏色

inset :將**影變成內陰影

CSS基本知識

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

CSS 基本知識

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

CSS基本知識

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