資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學每個開發者都應該知道的7個CSS技巧
CSS是層疊樣式表的縮寫。它用於製作美觀的網站。使用它可以使製作有效的網頁的過程更容易。
網站的設計至關重要。它透過促進使用者互動來改善網站的美觀性和整體質量。雖然可以不使用CSS建立網站，但樣式是必需的，因為沒有使用者想要與一個無聊、不吸引人的網站互動。在這篇文章中，我們討論了7個CSS技巧，每個開發者在網頁設計的某個階段都會用到。
使用CSS建立響應式圖片
使用各種稱為響應式圖片的技術，無論裝置的解析度、方向、螢幕尺寸、網路連線或頁面佈局如何，都可以載入正確的圖片。圖片不應該被瀏覽器拉伸以匹配頁面佈局，並且下載圖片不應該花費太長時間或使用過多的網際網路資源。因為圖片載入速度快，並且在人眼中看起來清晰，所以它改善了使用者體驗。要製作響應式圖片，請始終編寫以下語法：
img{
max-width: 100%;
height: auto;
}
建立高解析度圖片最簡單的技術是將其寬度和高度值設定為實際尺寸的一半。
將元素的內容居中
如果您想將任何元素的內容居中對齊，有多種方法。最簡單的方法如下所示。
position屬性
使用CSS position屬性透過指定以下語法來居中放置內容：
element{
position: absolute;
left: value;
top: value;
}
示例
<!DOCTYPE html>
<html>
<head>
<style>
h1{
text-align: center;
}
div{
position: absolute;
left: 45%;
}
</style>
</head>
<body>
<h1> Position property </h1>
<div> This is an example. </div>
</body>
</html>
使用<center>標籤
您希望居中對齊的內容應該寫在<center>標籤內。然後，整個內容將居中對齊。
使用text-align屬性
如果要居中對齊的內容只包含文字，則可以簡單地使用text-align屬性。
text-align: center;
萬用字元選擇器的使用
CSS星號(*)選擇器，也稱為CSS萬用字元選擇器，用於一次性選擇或匹配整個網頁的所有元素或元素的某些部分。選擇後，您可以使用任何CSS自定義屬性對其進行相應的樣式設定。它匹配任何型別的HTML元素，例如<div>、<section>、<nav>、<button>等。它還可以用於選擇和設定父元素的子元素的樣式。
萬用字元選擇器實際上是用來為網頁中的每個元素設定樣式的。通常，維護整個頁面的特定樣式格式很困難，因為瀏覽器設定了預設值。它使開發人員能夠為網頁準備預設樣式。最常見的用途是一起為網頁的所有元素設定樣式。
語法
*{
Css declarations
}
示例
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
text-align: center;
font-family: Imprint MT shadow;
}
</style>
</head>
<body>
<h1>Css Universal Selector</h1>
<h2>This is an example. It shows how to style the whole document altogether.</h2>
<div>
<p class = "para1"> This is the first paragraph. </p>
<p class= "para2"> This is the second paragraph </p>
</div>
</body>
</html>
覆蓋CSS樣式
通常，為了覆蓋CSS樣式，我們使用CSS類。但是，如果您想指定必須應用於元素的特定樣式，則使用!important。
語法
element{
property: value !important;
}
示例
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
color: blue;
}
.demo {
color: red !important;
}
</style>
</head>
<body>
<h2> This is an example #1 </h2>
<h2> This is an example #2 </h2>
<h2> This is an example #3 </h2>
<h2 class= "demo"> This is an example #4 </h2>
<h2> This is an example #5 </h2>
</body>
</html>
滾動行為
良好且高效的使用者體驗是網頁設計中最關鍵的因素。如果您的網站不友好，那麼製作網站就沒有意義。為了確保流暢的使用者體驗，您應該為您的網站新增流暢的滾動效果。
scroll-behavior屬性使開發人員能夠指定頁面在滾動過程中的行為。
html{
scroll-behaviour: smooth;
}
新增媒體查詢並使排版響應式
當媒體型別與顯示文件的裝置型別匹配時，使用該媒體型別的媒體查詢將樣式應用於內容。
@media (max-width: 100px){
{CSS rules….
}
}
如果您的網站要在不同的裝置上檢視，那麼最好使用視口單位。它確保內容將根據視口自行調整大小。
vw – 視口寬度
vh – 視口高度
vmin – 視口最小值
vmax – 視口最大值
CSS Flexbox
CSS Flexbox是一個容器，包含許多彈性元素。彈性元素可以根據需要排列成行或列。彈性專案是其父元素彈性容器的子元素。每個元素都使用CSS flexbox賦予了精緻和美觀的外觀。
display:flex幫助開發人員使每個元件看起來都合適且美觀。它透過對齊元素的子元素將其排列成行或列。
它將父元素中的子元素對齊成行或列。
示例
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: #097969;
align-items: center;
justify-content: center;
width: 60%;
}
.demo1, .demo2, .demo3, .demo4 {
background-color: yellow;
height : 50px;
width: 90%;
margin: 10px;
padding: 12px;
font-size: 17px;
font-weight: bold;
font-family: verdana;
text-align: center;
align-items: center;
color: brown;
}
.demo1{
order: 1;
}
.demo2{
order: 4;
}
.demo3{
order: 2;
}
.demo4{
order: 3;
}
</style>
</head>
<body>
<h1>Order of Flex Items</h1>
<p>The following list of flex elements has them in an ordered arrangement thanks to the order property:</p>
<div class="flex-container">
<div class= "demo1" > This </div>
<div class= "demo2"> example </div>
<div class= "demo3"> is </div>
<div class= "demo4"> an </div>
</div>
</body>
</html>
瀏覽量：105
