css樣式表分類 ,選擇器,尺寸屬性,邊框陰影

2021-10-01 08:40:59 字數 3074 閱讀 9511

css 指層疊樣式表 (cascading style sheets)

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

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

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

html和css之間有什麼關係?

html:構建網頁的結構

css :構建html元素的樣式

樣式表又分為

外部樣式表(external style sheet)內部樣式表(internal style sheet)

當單個文件需要特殊的樣式時,就應該使用內部樣式表。可以使用

內聯樣式(inline style)

由於要將表現和內容混雜在一起,內聯樣式會損失掉樣式表的許多優勢。請慎用這種方法,例如當樣式僅需要在乙個元素上應用一次時。

要使用內聯樣式,你需要在相關的標籤內使用樣式(style)屬性。style 屬性可以包含任何 css 屬性。

這是乙個段落。

樣式彙總:

color:red 字型顏色

font-size 字型大小

font-family:字型樣式

background-color 背景顏色

width:寬度

height: 高度

字型使用例項(樣式)

font-family 字型的種類

font-size 字型大小

color 字型的顏色

font-weigh 字型的粗細

*css樣式表的特徵*

1、繼承性

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

2.層疊性

可以同時寫多個樣式

3.優先順序

低: 瀏覽器的預設值

中: 就近原則

高: 內聯樣式

4.!improtant規則

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

打破了優先順序規則

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

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

1.通用選擇器

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

用法:*{}

段落也為紅色

2.id 選擇器

(id selector,is):使用 # 標識selector,語法格式:#s(s為選擇器名)

red text

3.類選擇器

center text

4.標籤選擇器(element selector,es):又叫標籤選擇器,

italic text

5.後代選擇器

(brother selector,bs):

no red text

no red text

red text

6.子代選擇器(sub-selector,ss):類似於ps,指定目標選擇器必須處在某個選擇器對應的元素內部,兩者區別在於ps允許"子標籤"甚至"孫子標籤"及巢狀更深的標籤匹配相應的樣式,而ss強制指定目標選擇器作為 包含選擇器對應的標籤 內部的標籤,語法格式:a>b(a、b為html元素/標籤)。

red text

no red text;

7.群組選擇器

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

選擇器優先順序: 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 如果內容被修剪,則瀏覽器會顯示滾動條以便檢視其餘的內容。

inherit 規定應該從父元素繼承 overflow 屬性的值。

div

屬性:  box-shadow

h-shadow :水平位置 必需的。水平陰影的位置。允許負值

v-shadow :垂直位置 必需的。垂直陰影的位置。允許負值

blur :模糊距離 可選。模糊距離

spread :陰影尺寸 可選。陰影的大小

color :顏色 可選。陰影的顏色。在css顏色值尋找顏色值的完整列表

inset :將**影變成內陰影 可選。從外層的陰影(開始時)改變陰影內側陰影

box-shadow: h-shadow v-shadow blur spread color inset;

css樣式表 樣式表分類 選擇器

一 樣式表分三類 1.內聯樣式表。放在元素的開始標記中。只對當前元素起作用。例 結果 2.內嵌樣式表。放在頁面的中間。可以對整個頁面。你好 執行結果 3.外部樣式表。放在乙個單獨的.css樣式表檔案中。可以對整個 操作 新建乙個css檔案,用來存放樣式表 在html中呼叫樣式表,要在html中右鍵 ...

css樣式表 選擇器 字型屬性 尺寸屬性 邊框陰影

css樣式表的特徵 css基礎選擇器 複雜的選擇器 尺寸屬性 邊框陰影 以統一的方式實現樣式的定義 提高頁面樣式的可重用性和可維護性實現了內容 html 和表示 css 的分離 屬性解釋 color 字型顏色 font size 字型大小 font family 字型樣式 font weight 字...

CSS 樣式表的分類以及選擇器的分類

樣式表,css 層疊式樣式表 style 字尾名 css 1 樣式表分類 1 內聯樣式 優先順序最高 常用 重複使用性最差 當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 css 屬性。2 內嵌樣式表 優先順序第二 最不常用...