CSS的基礎概念 CSS的作用就是對網頁中元素進行更精細的美化在網頁中加入CSS的三種方法比如：<p style=”今天天氣一般</p> <style type=”text/css”></style>開始與結束標簽之間的樣式表。然後：在html網頁中使用：或將外部樣式表引入到當前網頁中來。 ...

CSS的基礎概念

CSS的作用就是對網頁中元素進行更精細的美化

在網頁中加入CSS的三種方法

內嵌式：直接在HTML標簽中添加style屬性，在style屬性值裡面書寫css，

比如：<p style=”今天天氣一般</p>

內部樣式：是將CSS的內容書寫在本網頁中

外部樣式表：就是將css樣式的內容放在一個單獨的（擴展名為css，就是文件尾碼）的文件中。

然後：在html網頁中使用：

<link href=”css文件” rel=”stylesheet” type=”text/css”/>

或

<style type=”text/css”>@import url(CSS文件.css)；</style>

將外部樣式表引入到當前網頁中來。

CSS選擇器

選擇器就是將css樣式對應匹配到html標簽的一種機制，簡單說就是：樣式表中的哪個樣式該用在哪個html標簽上就匹配到哪個標簽上。

樣式類選擇器

一個html標簽的class屬性中不只是能使用一個樣式類，它可以使用多個樣式，類名之間用空格分隔,若兩個樣式都設置了高度寬度，使用多個樣式只有最後一個樣式設置的高寬度生效。

示例：class=”aa bb”

在樣式表中我需要給樣式起一個樣式名，

比如：

.aa{text-indent:-18.0000pt;mso-char-indent-count:0.0000;mso-list:l4 level1 lfo2;">

2. 在html元素的標簽中，我們要定義一個class屬性，其屬性值對應樣式表中的樣式類名，這樣我們就可以讓該元素按照樣式表中指定的樣式來顯示。

ID選擇器

在樣式表中我需要給樣式起一個ID名，

比如：

#aa{text-indent:-18.0000pt;mso-char-indent-count:0.0000;mso-list:l2 level1 lfo3;">

2. 在html元素的標簽中，我們要定義一個ID屬性，其屬性值對應樣式表中的ID名，這樣我們就可以讓該元素按照樣式表中指定的樣式來顯示。

標簽選擇器

標簽選擇其直接對應一種html標簽，比如：段落P，A,TABLE,IMG

在樣式表中直接書寫html標簽名，比如：

P{}

這樣就能夠將網頁中所有的段落<p>標簽的背景色，一次性改變。

組合選擇器（層級選擇器）

我們可以使用層級選擇器來根據選擇器之間的關係匹配到相應的html元素，選擇器之間用空格分隔，左邊的選擇器比右邊的選擇器高一個層級。意思就是說，右邊的選擇器必須包含在左邊的選擇器之中才行。

比如：

.x1 .x2{color:red;}

分組選擇器

通常運用與多個選擇器代的表多個html元素同時設置相同的樣式，多個選擇器之間用逗號分隔。

比如：

.a1, .a3{color:blue;}

Css字體設置

設置字體顏色color

<color>的值可以是六位的16進位數，也可以是顏色的名字（英語），或者使用rgb（red，blue，green）紅藍綠三色值。

比如

.a1{color:rgb(255,0,0);}

字體的名稱

可以設置網頁中文字設置為電腦內安裝了的字體樣式。

比如：

font family:”華文行楷”;

字體大小

使用font-size屬性進行設置，在網頁中通常使用像素為單位。

字體粗細

使用font-weight屬性可以設置文字是加粗還是正常顯示。

normal正常顯示

bold加粗

比如：

Font-weight：normal

字體傾斜

示例：

Font-style：italic

CSS中的文本格式設置

文本對齊text-align

文本在容器之內的水平對齊方向。

示例：

.dd22{text-align:center;}

文本線條text-decoration

給文本添加刪除線line-through、上劃線overline、下劃線underline

示例：

.dd22{text-decoration:line-through;}

文本行高line-height

每一行的高度，也可以用於行與行之間產生距離。可用於除了表格外的垂直居中。表格有vline來垂直居中。

示例：

line-height:100px

字間距letter-spacing

字母或漢字之間的距離

示例：

letter-spacing:20px

單詞間距word-spacing

示例：

word-spacing

Css中的背景

背景色background-color

示例：

background-color:green

背景圖background-image

示例：

background-image：圖片地址

背景重覆方式background-repeat

當我們對一個html容器設置背景圖之後，我們就可以對其設定，背景重覆的方式。因為當背景圖片小於容器大小時，背景圖會自動平鋪滿整個容器。

也就是background-repeat的預設值：repeat。

屬性值：

Repeat：鋪滿整個容器

Repeat-x：橫向平鋪

Repeat-y：縱向平鋪

No-repeat：背景圖只顯示一次，不會重覆。

背景位置background-position

是指當背景圖沒有占滿或鋪滿一個html容器時，我們可以用這個屬性來調整圖片相對於容器出現的位置。

屬性通常有兩個值，第一個代表橫向位置，第二個代表縱向位置。

示例：

Background-position：center cottom；

就是指讓圖片出現在容器的底部中間位置。

屬性值：top、bottom、center、left，right。

背景附著background-attachment

通常用於令背景圖固定在一個位置上，為不會隨著內容位置的滾動而改變。

比如：

<body style:”background-image:url(cc.jpg);Background-attachment:fixed;”>

固定整個網頁的背景。

CSS屬性

Padding內邊距

內容與容器邊緣之間的距離

示例：

padding：10px（四邊）

padding：10px 20px 30px 40px（上右下左）

padding：10px 20px（上下，左右）

Margin外邊距

Auto：可以讓div整體居中。*

容器邊緣與其他容器之間的距離

示例：

Margin：10px（四邊）

Margin：10px 20px 30px 40px（上右下左）

Margin：10px 20px（上下，左右）

Border邊框線

容器的邊框線的寬度、樣式、顏色。

Border-width：邊框寬度如：border-width：10px

Border-color：邊框顏色如：border-color：black

Border-style：邊框樣式如：border-style：solid

屬性：

Solid：實線

Dotted：點化線

Border的縮寫

Border：10px（寬度） solid（樣式） black（顏色），屬性值用空格分開。

Border-width的縮寫

Border-width：10px 20px 30px 40px；

Border-width：5px 20px；

Float浮動屬性

針對容器本身來設置其對其方式。

線性元素inline	塊級元素block
<span>	<div>
多個線性元素可以處於同一行	多個併列的塊級元素是不能處於同一行的

<span>標簽

通常沒有明顯的顯示效果，一般僅僅是作為一個概念上的容器來使用。

<div>標簽

特性：

在預設情況下，兩個div不能夠同時處於同一行。
一邊載入一邊顯示，因此可以增強用戶體驗。
兩個div必須都設置了width、height屬性。並且兩個div的寬度的寬度之合不能超過父容器的寬度。
兩個div必須都設置了float屬性。
在不設置寬度高度的情況下，預設寬度是父容器的100%，預設高度是0，所以看不見。

如何讓兩個div處於同一行

盒子模型

幾乎所有的html容器，都可以設置padding、border、margin屬性，因此，一個html容器其真正占用的寬度與高度，是這四者相加的結果。

比如：

寬度=width+padding-left+padding-right+margin-left+margin-right+border-left-width+border-rigth-width

高度=height+padding-top+padding-bottom+margin-top+margin-bottom+border-top-width+border-right-bottom

Position屬性

Absolute（絕對）
Relative（相對）

浮動層

要想讓一個元素比如：div浮動在網頁正文的上方，需要兩個div相配合才能完成。

必須要有兩個是父子嵌套關係的div。
這兩個div中父div的css屬性中包含position：relative；子div的css屬性中包含position：absolute。
子div的css屬性中通過top，left，right，bottom屬性來控制浮動div的位置。0代表父div的邊緣，也可以通過負值來讓浮動層超出父div的範圍。

◀清除浮動：float對齊效果

示例：

Clear:both;

Clear屬性用於清除當前元素與上一個元素的浮動對齊效果，令其另起一行。

Clear：left 清除左浮動

Clear：right 清除右浮動

Clear：both 清除左右浮動

Clear的附加作用：在很多時候，由於div的高度定義問題導致頁面出現內容重疊現象，這通常是由於上方的div無法指定具體的高度。此時，我們就可以使用clear：both；來讓div自動適應內容的高度。

Overflow內容超出容器的處理方式

Overflow:visible;預設值，在容器外可見。

Overflow；hidden；在容器外隱藏

Overflow；scroll；出現滾動條

幾乎所有瀏覽器都可以按F12顯示網頁代碼

塊級/線性元素轉換

Display屬性：

用於轉換html元素的顯示方式，通常在塊級元素與線性元素轉換時使用。

比如：

<style type="text/css">

span{ display:block;}————將所有span抓換為塊級元素。

div{ display:inline;}—————將所有div轉換為線性元素。

</style>

隱藏一個元素

Div{display:none;}

UL+CSS

示例：

ul,li{display:black;}

通常在網頁中很多人習慣於用ul來代替div，作為菜單或列表的容器。好處之一是，避免滿篇清一色的div而造成混淆。

偽類

超鏈接的顏色，並不能直接通過在容器的css中加入color屬性的方式來改變。

偽類是專門用來描述超鏈接在不同的狀態下，以不同的方式去顯示。

比如：

正常狀態，滑鼠移動到超鏈接上的狀態，被訪問過的超鏈接狀態。

語法：

A:link{}————代表這個沒有被訪問應該是什麼樣子

A:hover{}———代表滑鼠移動到超鏈接上是什麼樣子

A:visited{}———代表這個地方被訪問過是什麼樣子

A:active{}———代表滑鼠點下未抬起的超鏈接樣子

滑鼠形狀

Css中的cursor屬性代表滑鼠移動到物體上方時的形狀。

比如：

pointer 手指

網頁與網站的區別

一個html文件就是一個網頁，一個網站則是網頁的集合。

練習題：

寫一首古詩：《登黃鶴樓》

每一行都放在一個段落P標簽中，將所有的P標簽背景色設置為黃色，

第一行用ID選擇器設置為紅色，第二行用類選擇器設置綠色

製作一個一行兩列的表格，左側是所有名字的名字，右側是一個內嵌頁，將班級所有同學資料做成一個網頁，輪流切換顯示在內嵌頁中。
寫古詩：《贈汪倫》或《靜夜思》

第一行使用內嵌式，微軟雅黑，紅色，48px

第二行使用內部樣式，黑體，藍色，42px

第三行使用外部樣式，華文行楷，紫色，36px

第四行與第二行一樣，要求使用分組選擇器實現。

我的ASP.NET學習筆記03CSS基礎知識