CSS的概念

Cascading Style Sheets 層疊樣式表

層疊：多個樣式可以作用在同一個html的元素上，同時生效

CSS的好處

功能強大
将内容展示和樣式控制分離

*降低耦合度——解耦

*讓分工協作更容易

*提高開發效率

CSS的使用：CSS與html結合

一、内部樣式

在head标簽内，定義style标簽，style标簽的标簽體内容就是CSS代碼

<head>

<style>

div{

color: aqua;

}

</style>

</head>

<body>

<div>hello css</div>

</body>

二、外部樣式

定義CSS資源檔案
在head标簽内，定義link标簽，引入外部的資源檔案

選擇器

格式：

選擇器 {

屬性名1:屬性值1；

屬性名2:屬性值2；

……

}
選擇器：篩選具有相似特征的元素
注意點：每一對屬性需要使用；隔開，最後一對屬性可以不加

一、基本選擇器

id建議唯一，class可重複

1.id選擇器

選擇具體id屬性值的元素

文法：#id屬性值{}

2.元素選擇器

選擇具有相同标簽名稱的元素

文法：标簽名稱{}

3.類選擇器

選擇具有相同的class屬性值的元素

文法：.class屬性值{}

二、擴充選擇器

1.選擇所有元素

文法：*{}

2.并集選擇器

文法：選擇器1，選擇器2{}

3.子選擇器

文法：選擇器1 選擇器2{}

篩選選擇器1元素下的選擇器2元素

4.父選擇器

文法：選擇器1 > 選擇器2{}

篩選選擇器2的父元素選擇器1

5.屬性選擇器

文法：元素名稱[屬性名=“屬性值”]{}

選擇元素名稱，屬性名=屬性值的元素

适用input标簽的type屬性

6.僞類選擇器

選擇一些元素具有的狀态

文法：元素：狀态{}

例如：<a>狀态有

link：初始化的狀态

visited：被通路過的狀态

active：正在通路的狀态

hover：滑鼠懸浮的狀态

a:link{

color: #1E9FFF;

}

屬性

1.字型、文本

font-size：字型大小
color：文本顔色
text-align：對齊方式

style="text-align: center;" //文字居中

line-height：行高

2.背景

background：背景，複合屬性

3.邊界

border：設定邊框，複合屬性

style="margin: 4px; border-bottom: dotted #ccc;padding: 4px;"

//外邊距為4px，下邊界為點綴型，顔色#ccc，内邊距為4px

4.尺寸

width：寬度
height：高度

div{

background: url("image/DominusNoob.jpg") no-repeat center;

border: 1px red solid;

width: 1000px;

height: 1000px;

值	描述
auto	預設。浏覽器會計算出實際的高度。
length	使用 px、cm 等機關定義高度。
%	基于包含它的塊級對象的百分比高度。
inherit	規定應該從父元素繼承 height 屬性的值。

5.盒子模型：控制布局

padding：内邊距

内邊距會影響整個盒子的大小。因為内容是固定的，修改内邊距（内容與邊界的距離），等于修改盒子大小
box-sizing：border-box；設定盒子的屬性，讓width和height就是最終盒子的大小

.div1{

width: 200px;

height: 200px;

padding: 50px;

box-sizing: border-box;

padding: 8px 16px; //上下的内邊距是8px，左右的内邊距是16px

margin：外邊距

margin:20px 上下左右外邊距都是20px

margin: 10px 0px; //上下10px，左右0px

float：浮動

盒子預設換行，若想讓盒子不換行，就添加浮動屬性

非盒子模型的标簽

經常會發現正常div的屬性在a标簽上或者p标簽上都不管用，這是因為a标簽和p标簽都不是盒子模型。

例如：

這是有效的距離，但是

這就是無效的距離

原因很簡單，margin是針對盒子的，a标簽和p标簽都不是盒子模型，但是可以把他們變成盒子模型

style="display:block"

變成塊級元素後，就成為盒子模型了，就可以設定margin等屬性了。

7. position

position 屬性規定應用于元素的定位方法的類型。

有五個不同的位置值：

static
relative
fixed
absolute
sticky

元素其實是使用 top、bottom、left 和 right 屬性定位的。但是，除非首先設定了 position 屬性，否則這些屬性将不起作用。根據不同的 position 值，它們的工作方式也不同。

注意：

relative

、

absolute

fixed

這三個屬性值有一個共同點，都是相對于某個基點的定位，不同之處僅僅在于基點不同。是以，隻要了解了它們的基點是什麼，就很容易掌握這三個屬性值。

這三種定位都不會對其他元素的位置産生影響，是以元素之間可能産生重疊。

static

是

position

屬性的預設值。如果省略

position

屬性，浏覽器就認為該元素是

static

定位。

這時，浏覽器會按照源碼的順序，決定每個元素的位置，這稱為"正常的頁面流"（normal flow）。每個塊級元素占據自己的區塊（block），元素與元素之間不産生重疊，這個位置就是元素的預設位置。

注意，

static

定位所導緻的元素位置，是浏覽器自主決定的，是以這時

top

bottom

left

right

這四個屬性無效。

相對定位

position: relative;

的元素相對于其正常位置定位

relative

表示，相對于預設位置（即

static

時的位置）進行偏移，即定位基點是元素的預設位置。

它必須搭配

top

bottom

left

right

這四個屬性一起使用，用來指定偏移的方向和距離。

固定定位

position: fixed;

的元素是相對于視窗定位的（固定的顯示在螢幕上），這意味着即使滾動頁面，它也始終位于同一位置。 top、right、bottom 和 left 屬性用于定位此元素。

固定定位的元素不會在頁面中通常應放置的位置上留出空隙。

絕對定位

position: absolute;

的元素相對于 static 定位以外的第一個父元素進行定位

它有一個重要的限制條件：定位基點（一般是父元素）不能是

static

定位，否則定位基點就會變成整個網頁的根元素

html

。另外，

absolute

定位也必須搭配

top

bottom

left

right

這四個屬性一起使用

absolute

定位的元素會被"正常頁面流"忽略，即在"正常頁面流"中，該元素所占空間為零，周邊元素不受影響。

style="position: absolute;right: 10px;" //絕對定位，右邊距父元素10px

8. z-index

zIndex 屬性設定元素的堆疊順序。

該屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。

注意：如果兩個定位的元素重疊而未指定 z-index，則位于 HTML 代碼中最後的元素将顯示在頂部。

style="position: absolute;right: 10px;" //絕對定位，右邊隻剩下10px

style="position: fixed;width: 100%;z-index: 999;" //固定定位，寬度占視窗100%，

9. display

display 屬性設定元素如何顯示


none	此元素不會被顯示。
block	此元素将顯示為塊級元素，此元素前後會帶有換行符。
inline	預設。此元素會被顯示為内聯元素，元素前後沒有換行符。
inline-block	行内塊元素。（CSS2.1 新增的值）
list-item	此元素會作為清單顯示。
run-in	此元素會根據上下文作為塊級元素或内聯元素顯示。
compact	CSS 中有值 compact，不過由于缺乏廣泛支援，已經從 CSS2.1 中删除。
marker	CSS 中有值 marker，不過由于缺乏廣泛支援，已經從 CSS2.1 中删除。
table	此元素會作為塊級表格來顯示（類似 <table>），表格前後帶有換行符。
inline-table	此元素會作為内聯表格來顯示（類似 <table>），表格前後沒有換行符。
table-row-group	此元素會作為一個或多個行的分組來顯示（類似 <tbody>）。
table-header-group	此元素會作為一個或多個行的分組來顯示（類似 <thead>）。
table-footer-group	此元素會作為一個或多個行的分組來顯示（類似 <tfoot>）。
table-row	此元素會作為一個表格行顯示（類似 <tr>）。
table-column-group	此元素會作為一個或多個列的分組來顯示（類似 <colgroup>）。
table-column	此元素會作為一個單元格列顯示（類似 <col>）
table-cell	此元素會作為一個表格單元格顯示（類似 <td> 和 <th>）
table-caption	此元素會作為一個表格标題顯示（類似 <caption>）
	規定應該從父元素繼承 display 屬性的值。

css快速入門CSS的概念CSS的好處CSS的使用：CSS與html結合選擇器屬性