CSS基本語法,引入,文字,顏色,選擇器 一

2021-08-27 08:51:41 字數 2892 閱讀 9794

昨天弄完了html,今天來總結一下css,先整個css目錄出來:

1:css基本語法及頁面引用

2:css文字設定

3:css顏色表示

4:css選擇器

5:css盒子模型

6:css元素溢位

7:css塊元素、內聯元素、內聯塊元素

8:css浮動

9:css定位

10:background屬性

應該要分三篇吧,最好的情況就是今天總結完,應該差不多可以的。然後就期待中秋和國慶的假期!!!

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

css是將結構與樣式分離。

css的定義方法是:

選擇器

選擇器是將樣式和頁面元素關聯起來的名稱,屬性是希望設定的樣式屬性每個屬性有乙個或多個值。**示例:

div

"stylesheet"

type="text/css" href="css/main.css">

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

type="text/css">

div ......

style>

3、內聯式:通過標籤的style屬性,在標籤上直接寫樣式。

style="width:100px; height:100px; color:red ">......div>
常用的應用文字的css樣式:

1.color 設定文字的顏色,如: color:red;

2.font-size 設定文字的大小,如:font-size:12px;

3.font-family 設定文字的字型,如:font-family:』微軟雅黑』;

4.font-style 設定字型是否傾斜,如:font-style:』normal』; 設定不傾斜,font-style:』italic』;設定文字傾斜

5.font-weight 設定文字是否加粗,如:font-weight:bold; 設定加粗 font-weight:normal 設定不加粗

6.font 同時設定文字的幾個屬性,寫的順序有相容問題,建議按照如下順序寫: font:是否加粗 字型大小/行高 字型;如: font:normal 12px/36px 『微軟雅黑』;

7.line-height 設定文字的行高,如:line-height:24px;

8.text-decoration 設定文字的下劃線,如:text-decoration:none; 將文字下劃線去掉

9.text-indent 設定文字首行縮排,如:text-indent:24px; 設定文字首行縮排24px

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

css顏色值主要有三種表示方法:

1、顏色名表示,比如:red 紅色,gold 金色

2、rgb表示,比如:rgb(255,0,0)表示紅色

3、16進製制數值表示,比如:#ff0000 表示紅色,這種可以簡寫成 #f00

常用的選擇器有如下幾種:

1:標籤選擇器

標籤選擇器,此種選擇器影響範圍大,建議盡量應用在層級選擇器中。

舉例:

*

div

....div>

class="box">....div>

2:id選擇器
#box 

id="box">....div>

3:類選擇器

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

舉例:

.red

.big

.mt10

class="red">....div>

class="red big mt10">....h1>

class="red mt10">....p>

4:層級選擇器

主要應用在選擇父元素下的子元素,或者子元素下面的子元素,可與標籤元素結合使用,減少命名,同時也可以通過層級,防止命名衝突。

舉例:

.box span

.box .red

.red

class="box">

....span>

href="#"

class="red">....a>

div>

class="red">....h3>

5:組選擇器

多個選擇器,如果有同樣的樣式設定,可以使用組選擇器。

舉例:.box1

.box2

.box2

class="box1">....div>

class="box2">....div>

class="box3">....div>

6:偽類及偽元素選擇器

常用的偽類選擇器有hover,表示滑鼠懸浮在元素上時的狀態,偽元素選擇器有before和after,它們可以通過樣式在元素中插入內容。

.box2:before

.box3:after

class="box1">....div>

class="box2">....div>

class="box3">....div>

css 文字顏色 文字裝飾 選擇器 行內塊元素

控制文字的大小 font size 控制文字的字型庫 font family 楷體 預設的字型是微軟雅黑 控制字型是否加粗 font weight normal 正常,就是不加粗 400 bold 文字加粗 700 控制字型是否傾斜 font style italic normal 正常不傾斜 it...

css基本語法

最近 要經常用到css,但是語法 老是忘記,先貼起來!摘自http www.webjx.com 1.css的語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 語法 selector 選擇符 說明 選擇符是可以是多種形式,一般是你要定義...

CSS基本語法

1.基本語法 css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector 選擇符 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以通過此方法定義它的屬性和值,屬性和值要用冒...