CSS CSS3常用的樣式

2022-02-02 20:18:19 字數 4170 閱讀 8595

強制文字顯示

讓一段文字在固定寬度在一行顯示,最後乙個字元為省略標記(...),css樣式如下

單行顯示語法:white-space:nowrap;

div
效果:

多行文字最後省略號:

div
效果:

...**位置,置左

...**位置,置中

設定**邊框大小(使用數字)

設定**的背景顏色

設定**邊框的顏色

設定**暗邊框的顏色

設定**亮邊框的顏色

指定內容與格線之間的間距(使用數字)

指定格線與格線之間的距離(使用數字)

指定**的欄數

設定**外框線的顯示方式

指定**的寬度大小(使用數字)

指定**的高度大小(使用數字)

指定儲存格合併欄的欄數(使用數字)

指定儲存格合併列的列數(使用數字)

h1

效果:

css**:

.demo1
-moz-box-shadow: 投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;

//safari and google chrome10.0-

-webkit-box-shadow: 投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;

、 google chrome 10.0+ 、 oprea10.5+ and ie9

box-shadow: 投影方式 x軸偏移量 y軸偏移量 陰影模糊半徑 陰影擴充套件半徑 陰影顏色;

html**:

div class="demo1" style="width: 100px;height: 100px; border: 1px solid gray">

div>

效果:

<

html

>

<

head

>

<

style

type

="text/css"

>

h1 h4

style

>

head

>

<

body

>

<

h1>this is header 1

h1>

<

h4>this is header 4

h4>

body

>

html

>

效果:

<

html

>

<

head

>

head

>

<

body

>

<

textarea

>

textarea

>

<

textarea

style

= "overflow:hidden; resize:none; "

>

textarea

>

body

>

html

>

效果:

去掉效果後文字域不可拉伸

<

html

>

<

head

>

<

style

type

="text/css"

>

h1 p.uppercase

p.lowercase

p.capitalize

style

>

head

>

<

body

>

<

h1>this is an h1 element

h1>

<

p class

="uppercase"

>this is some text in a paragraph.

p>

<

p class

="lowercase"

>this is some text in a paragraph.

p>

<

p class

="capitalize"

>this is some text in a paragraph.

p>

body

>

html

>

效果:

滑鼠懸停變成小手:cursor:pointer隨便加在樣式中

<

html

>

<

head

>

<

style

type

="text/css"

>

h1style

>

head

>

<

body

>

<

h1>滑鼠懸停變小手

h1>

body

>

html

>

效果:自己試試。不好截圖

li標籤去掉前面的小圓點

<

html

>

<

head

>

<

style

type

="text/css"

>

.list li

style

>

head

>

<

body

>

<

ul>

<

li>1

li>

<

li>2

li>

ul>

<

ul class

="list"

>

<

li>1

li>

<

li>2

li>

ul>

body

>

html

>

效果:

a標籤去掉下劃線

效果:

CSS CSS3常用的樣式

強制文字顯示 讓一段文字在固定寬度在一行顯示,最後乙個字元為省略標記 css樣式如下 單行顯示語法 white space nowrap div效果 多行文字最後省略號 div效果 位置,置左 位置,置中 設定 邊框大小 使用數字 設定 的背景顏色 設定 邊框的顏色 設定 暗邊框的顏色 設定 亮邊框...

CSS css3動畫知識

1 值 perspective number none,number 元素距離檢視的距離,以畫素計。none 預設值,與 0 相同,不設定透視。2 屬性 3d立體檢視的可視效果,近大遠小 3 實現方式 方式一 寫在所有的動畫元素的父元素上 parentsrtyle方式二 寫在當前元素上 parent...

css CSS3中的單位

from css3中的單位 css3中引入了一些新的單位 ch 字元0 零 的寬度 rem 根元素 html元素 的font size vw viewpoint width,視窗寬度,1vw等於視窗寬度的1 vh viewpoint height,視窗高度,1vh等於視窗高度的1 vmin vw和v...