国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術(shù)干貨  > css樣式大全

css樣式大全

來源:千鋒教育
發(fā)布人:zyh
時間: 2023-05-30 14:50:00 1685429400

  以下是一些 CSS 樣式大全:

  文本樣式

/* 文本顏色 */
color: #333;

/* 文本大小 */
font-size: 14px;

/* 字體 */
font-family: Arial, sans-serif;

/* 字體加粗 */
font-weight: bold;

/* 上、下、左、右文本邊距 */
padding-top: 10px;
padding-bottom: 10px;
padding-left: 10px;
padding-right: 10px;

/* 上、下、左、右外邊距 */
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;

/* 行高 */
line-height: 1.5;

/* 文本對齊方式 */
text-align: center;

/* 文本裝飾 */
text-decoration: underline;

/* 字母間隔 */
letter-spacing: 2px;

/* 單詞間隔 */
word-spacing: 5px;

/* 斜體 */
font-style: italic;

      背景樣式

/* 背景顏色 */
background-color: #f5f5f5;

/* 背景圖片 */
background-image: url('bg.jpg');

/* 背景大小 */
background-size: cover;

/* 背景重復 */
background-repeat: no-repeat;

/* 背景固定 */
background-attachment: fixed;

/* 背景位置 */
background-position: left top;

/* 單獨設(shè)置四個角的圓角 */
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;

/* 設(shè)置所有角的圓角 */
border-radius: 5px;

/* 盒子陰影 */
box-shadow: 0 0 10px #888888;

/* 模糊背景 */
backdrop-filter: blur(5px);

      常見元素樣式

/* 設(shè)置鏈接樣式 */
a {
color: blue;
text-decoration: none;
}

/* 設(shè)置按鈕樣式 */
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
}

/* 設(shè)置輸入框樣式 */
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}

/* 設(shè)置下拉列表樣式 */
select {
font-size: 16px;
padding: 12px 20px;
border: none;
border-radius: 4px;
background-color: #f2f2f2;
}

        動畫樣式 

/* 位移動畫 */
.move {
animation: move 2s ease;
}

@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

/* 旋轉(zhuǎn)動畫 */
.rotate {
animation: spin 2s linear infinite;
}

@keyframes spin {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}

/* 縮放動畫 */
.zoom {
animation: zoomInOut 2s linear 1s;
}

@keyframes zoomInOut {
from {
transform: scale(1);
}
to {
transform: scale(1.5);
}
}

      以上是一些 CSS 樣式大全,這些樣式可以幫助你快速實現(xiàn)常見的樣式效果。但是需要根據(jù)具體的頁面或應用進行進行調(diào)整和改進。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內(nèi)將與您1V1溝通
免費領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學 138****2860 剛剛成功領(lǐng)取
王同學 131****2015 剛剛成功領(lǐng)取
張同學 133****4652 剛剛成功領(lǐng)取
李同學 135****8607 剛剛成功領(lǐng)取
楊同學 132****5667 剛剛成功領(lǐng)取
岳同學 134****6652 剛剛成功領(lǐng)取
梁同學 157****2950 剛剛成功領(lǐng)取
劉同學 189****1015 剛剛成功領(lǐng)取
張同學 155****4678 剛剛成功領(lǐng)取
鄒同學 139****2907 剛剛成功領(lǐng)取
董同學 138****2867 剛剛成功領(lǐng)取
周同學 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT