CSS入門介紹

為了讓網頁元素的樣式更加豐富，也為了讓網頁的內容和樣式能拆分開，css由此思想而誕生，css是 cascading style sheets 的首字母縮寫，意思是層疊樣式表。有了css，html中大部分表現樣式的標籤就廢棄不用了，html只負責文件的結構和內容，表現形式完全交給css，html文件變得更加簡潔。

css基本語法

css的定義方法是：

選擇器

div

css引入頁面的方式有三種：

1、內聯式：通過標籤的style屬性，在標籤上直接寫樣式。

......

2、嵌入式：通過style標籤，在網頁上建立嵌入的樣式表。

1、標籤選擇器

標籤選擇器，此種選擇器影響範圍大，一般用來做一些通用設定，或用在層級選擇器中。

舉例：

div ...... 這是第乙個div 這是第二個div

2、類選擇器

通過類名來選擇元素，乙個類可應用於多個元素，乙個元素上也可以使用多個類，應用靈活，可復用，是css中應用最多的一種選擇器。

舉例：

.blue .big .box ...... .... ....

3、層級選擇器

主要應用在標籤巢狀的結構中，層級選擇器，是結合上面的兩種選擇器來寫的選擇器,它可與標籤選擇器結合使用，減少命名，同時也可以通過層級，限制樣式的作用範圍。

舉例：

.con .con span .con .pink .con .gold ...... .... .... .......

....

width 設定元素(標籤)的寬度，如：width:100px;

height 設定元素(標籤)的高度，如：height:200px;

border 設定元素四周的邊框，如：border:1px solid black; 設定元素四周邊框是1畫素寬的黑色實線

以上也可以拆分成四個邊的寫法，分別設定四個邊的：

border-top 設定頂邊邊框，如：border-top:10px solid red;

border-left 設定左邊邊框，如：border-left:10px solid blue;

border-right 設定右邊邊框，如：border-right:10px solid green;

border-bottom 設定底邊邊框，如：border-bottom:10px solid pink;

padding 設定元素包含的內容和元素邊框的距離，也叫內邊距，如padding:20px;padding是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:padding-top、padding-left、padding-right、padding-bottom。

margin 設定元素和外界的距離，也叫外邊距，如margin:20px;margin是同時設定4個邊的，也可以像border一樣拆分成分別設定四個邊:margin-top、margin-left、margin-right、margin-bottom。

float 設定元素浮動，浮動可以讓塊元素排列在一行，浮動分為左浮動：float:left; 右浮動：float:right;

color 設定文字的顏色，如： color:red;

font-size 設定文字的大小，如：font-size:12px;

font-family 設定文字的字型，如：font-family:『微軟雅黑』;為了避免中文字不相容，一般寫成：font-family:『microsoft yahei』;

font-weight 設定文字是否加粗，如：font-weight:bold; 設定加粗 font-weight:normal 設定不加粗

line-height 設定文字的行高，如：line-height:24px; 表示文字高度加上文字上下的間距是24px，也就是每一行占有的高度是24px

text-decoration 設定文字的下劃線，如：text-decoration:none; 將文字下劃線去掉

text-align 設定文字水平對齊方式，如text-align:center 設定文字水平居中

text-indent 設定文字首行縮排，如：text-indent:24px; 設定文字首行縮排24px

樣式中的注釋

/* 設定頭部的樣式 */

.header

CSS入門介紹

CSS入門介紹

css入門介紹

CSS入門介紹

相關推薦