前端學習 CSS基礎設定

2021-10-09 22:27:55 字數 2569 閱讀 3184

2.顏色表示

3.字型

4.行間距

7.以上僅為常見,更多搞手冊了解

畫素 px;

px 是網頁中使用最多的乙個單位,乙個畫素相當於螢幕中的乙個小點。螢幕由這些畫素點構成。畫素點越小,螢幕越清晰。

百分比%;

使用百分比可以根據父元素的值來計算其大小,就永遠為父元素的一定比例大小,比較靈活,可以跟著父元素一直改變,用於做自適應頁面。

________________

//css樣式

em與百分比類似,em是以當前元素的字型大小來計算的,1em=1個font-size。字型大小改變,em大小也會改變。

通常用於與字型大小相關的樣式中。

直接用英文單詞來表示顏色;

例如:紅色:red

綠色:green

黃色;yellow

rgb值表示:

原理:red,green,blue 紅綠藍三原色。

通過三種顏色的不同濃度來表示不同顏色

例如:rgb(紅色的濃度,綠色的濃度,藍色的濃度);

濃度表示方法

瀏覽器一般預設16個畫素大小,畫素高的會 根據比例增大。

font-size設定的不是文字本身的大小,在頁面中,每個文字都處在乙個框中,所以font-size設定的是框的大小,並不是文字的大小。一般情況下文字會比框小一點,也有可能比框大。這就要看字型了。不同字型顯示效果不同。

通過font-family指定,

例子:font-family:微軟雅黑;

選擇多個:font-family:微軟雅黑 ,arial ,華文彩雲;在網頁中將字型分為5大類:

- serif(襯線字型)

- sans-serif(非襯線字型)

- monospace(等寬字型)一般**就是

- cursive(草書字型)

- fantasy(虛幻字型)

這些是字型的五個大類,在font-family中可以設定為這些大類,設定後字型顯示就是靠各種瀏覽器不同的認識進行顯示了,很難讓人滿意。一般將這些大類放在font-family後面一排候選字型的最後乙個,以保證最後能顯示出字型樣式。

例子:font-family:微軟雅黑,arial,華文彩雲,sans-serif;

font-style可以用來設定文字的風格,比如說設定文字為斜體

可選值:

font-weight可以用來設定文字的粗體效果;

可選值:

font-variant可以用來設定小型大寫字母,就是把小寫字母變為大寫,然後比正常的大寫字母小一些,比如:

可選值(常用):

一般設定:

.p1

font樣式:直接寫入所有引數,同時進行設定,記得空格間隔

font:italic small-caps bold 60px "華文彩雲";

注意:使用font時,斜體 加粗 大寫小字母 之間沒有順序要求,也可以不寫,不寫就是預設值。__但是文字的大小和字型必須要寫。字型一定放最後,大小一定倒數第二。__font因為只要解析一次,所以效能會更好。

例子實現:

css沒有提供乙個直接設定行間距的方式,我們要通過行高的設定來間接設定行間距,行高越大行間距就會越大。

行間距=行高-字型大小;

行高使用 line-height:進行設定;文字預設是在行高空間中垂直居中顯示。

line-height設定方式:line-height:40px;

注意:後面的值有三種表達方式

.p1

小技巧:對於單行文字來說,將行高設定與父元素的高度相同,可以設定乙個文字位於父元素居中的樣式。

例子:

class

="p1"

>

href

="">

乙個超連結a

>

div>

.p1效果圖

此外font也能設定行高,方式為:font:30px/40px 「華文彩雲」;就是字型大小後斜桿加行高。如果寫了font而不設定行高,會按照預設值實現。所以使用line-height或者font-size,font-varilty等等,要有效果的話就放在font後面,保證不被效果覆蓋。

前端學習(九) CSS基礎

css的樣式可以寫在哪呢?其實css的樣式插入式十分靈活的 按照插入的形勢來看,可以分為三種情況 而接下來就對這三種情況進行簡單的討論 css樣式表是可以直接把 放在現有的標籤裡面去的 這種方法就稱為內嵌式 文字顏色為紅色 把對應的style屬性,寫在p標籤的開始標籤中 css樣式 要寫在style...

前端學習 CSS基礎(一)

css派生選擇器 id選擇器 w3school css 教程 示例 提示 以下例子中的 css 均位於 html 的 head 部分,這樣做的目的是為了利於演示例子本身。在實際的開發中,使用 css 最好的方式是引用外部樣式表。type text css body h1h2 pp.no2 style...

前端學習之路CSS基礎學習二

1 width 為元素設定寬度 2 height 為元素設定高度 ps 塊兒級標籤才能設定長寬行內標籤設定長寬沒有任何影響 p 字型樣式 關鍵字 font family 作用 更改字型的樣式 字型大小 關鍵字 font size 作用 更改使用者的字型大小 p 文字顏色 關鍵字 color 作用 更...