CSS是一種可以將HTML文檔渲染成漂亮頁面的強(qiáng)大語言,下面是一些關(guān)于CSS的經(jīng)典語句:
/* 選中所有元素 */ * { margin: 0; padding: 0; } /* 禁用文本選中效果 */ user-select: none; -webkit-user-select: none; /* 讓文本在一行內(nèi)溢出部分顯示省略號(hào) */ text-overflow: ellipsis; white-space: nowrap; overflow: hidden; /* 水平居中 */ margin: 0 auto; /* 垂直居中 */ display: flex; align-items: center; justify-content: center; /* 絕對(duì)定位時(shí),元素垂直和水平居中 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 清除浮動(dòng) */ .clearfix:after { content: ""; display: block; clear: both; } /* 背景漸變 */ background: linear-gradient(to bottom right, #1E90FF, #00BFFF); /* 字體圖標(biāo) */ font-family: 'Font Awesome 5 Free'; content: '\f067'; /* 元素沿著一個(gè)路徑運(yùn)動(dòng) */ path { stroke-dasharray: $itemLength; stroke-dashoffset: $itemLength; animation: stroke-offset 1s ease-in-out forwards; } /* 鼠標(biāo)懸停效果 */ :hover { color: #1E90FF; background-color: #F0F8FF; border: 1px solid #1E90FF; } /* 媒體查詢 */ @media (max-width: 768px) { /* some rules */ }
以上這些經(jīng)典語句可以幫助我們更高效地編寫CSS代碼,當(dāng)然,還有更多有用的技巧和實(shí)現(xiàn)方法等待我們?nèi)W(xué)習(xí)和探索。