整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS樣式覆蓋規則
很多情況都會導致一個元素被運用上多種樣式，樣式覆蓋的規則也需要根據不同的情況來定，具體規則如下。規則一：由于繼承而發生樣式沖突時，最近祖先獲勝。CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況：
<html>
<head>
<title>rule1</title>
<style>
body {color:black;} p {color:blue;}
</style>
</head>
<body>
<p>welcome to <strong>加粗</strong></p>
</body>
</html>strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。
規則二：繼承的樣式和直接指定的樣式沖突時，直接指定的樣式獲勝。在上面的例子中，假如還指定了strong元素的樣式，如：
strong {color:red;}那么根據規則二，strong中的文字最終顯示為紅色。
規則三：直接指定的樣式發生沖突時，樣式權值高者獲勝。樣式的權值取決于樣式的選擇器，權值定義如下表。CSS選擇器 權值標簽選擇器 1偽元素(:first-child等) 1類選擇器 10ID選擇器 100內聯樣式 1000偽類(:link等) 10可以看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標簽選擇器，除此以外，后代選擇器的權值為每項權值之和，比如"#nav .current a"的權值為100 + 10 + 1 = 111。
規則四：樣式權值相同時，后者獲勝。考慮下面這種情況
<p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;}".byline a"與"p .email"都直接指定了上面的a元素，且權值都為11，根據規則四，最終顯示藍色。由于樣式表可以是外部的，也可以是內部的，規則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內部樣式表的出現位置。一般來說，內部樣式表出現在所有外部樣式表的引入之后，一般是在</head>之前。
規則五：!important的樣式屬性不被覆蓋。!important可以看做是萬不得已的時候，打破上述四個規則的"金手指"。如果你一定要采用某個樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規則四的例子為例，
.byline a {color:red !important;}
可以強行使鏈接顯示紅色。大多數情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。
SS中的浮動（Floats）、定位（Positioning）和顯示（Display）屬性是前端工程師掌握頁面布局的關鍵。本文將深入探討這些屬性的工作原理和使用場景，幫助開發者更好地理解和運用它們來構建響應式和精確的網頁布局。
浮動是CSS中用于實現元素排列的一種方式，它可以讓元素脫離正常的文檔流，并可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊緣。
.element {
float: left; /* 或者 'right' */
}
.clear-element {
clear: both; /* 可以是 'left', 'right', 或 'both' */
}
定位屬性允許你控制元素的位置，它可以是相對于它的正常位置、相對于最近的已定位祖先元素、相對于視口或絕對位置。
.element {
position: static | relative | absolute | fixed | sticky;
}
.relative-element {
position: relative;
top: 10px;
left: 20px;
}
.absolute-element {
position: absolute;
top: 0;
right: 0;
}
.fixed-element {
position: fixed;
bottom: 0;
left: 0;
}
.sticky-element {
position: sticky;
top: 10px;
}
display屬性是CSS中最重要的用于控制布局的屬性之一，它定義了元素如何顯示在頁面上。
.element {
display: block | inline | inline-block | flex | grid | none;
}
.block-element {
display: block;
}
.inline-element {
display: inline;
}
.inline-block-element {
display: inline-block;
}
.flex-container {
display: flex;
}
.grid-container {
display: grid;
}
.hidden-element {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Float, Position, and Display Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">
<div class="logo">Logo</div>
<div class="navigation">Navigation</div>
</div>
<div class="main-content">
<div class="sidebar">Sidebar</div>
<div class="content">Content</div>
</div>
<div class="footer">Footer</div>
<div class="fixed-element">Fixed Element</div>
</body>
</html>
/* Reset some default styles */
body, h1, p {
margin: 0;
padding: 0;
}
/* Header styles */
.header {
background-color: #f8f8f8;
border-bottom: 1px solid #e7e7e7;
padding: 10px;
overflow: hidden; /* Clearfix for floated elements */
}
.logo {
float: left;
font-size: 24px;
}
.navigation {
float: right;
font-size: 18px;
}
/* Main content styles */
.main-content {
padding: 20px;
}
.sidebar {
float: left;
width: 200px;
background-color: #ddd;
padding: 10px;
}
.content {
margin-left: 220px; /* Make space for the sidebar */
background-color: #eee;
padding: 10px;
}
/* Footer styles */
.footer {
background-color: #f8f8f8;
border-top: 1px solid #e7e7e7;
text-align: center;
padding: 10px;
position: relative; /* For demonstration purposes */
top: 20px; /* Move the footer down a bit */
}
/* Fixed element styles */
.fixed-element {
position: fixed;
bottom: 10px;
right: 10px;
padding: 5px 10px;
background-color: #333;
color: #fff;
z-index: 1000; /* Ensure it stays on top */
}
/* Clearfix hack */
.clearfix::after {
content: "";
clear: both;
display: table;
}
在這個例子中，我們創建了一個包含頭部、側邊欄、主要內容和頁腳的基本布局。我們使用浮動來對齊頭部的Logo和導航，以及創建一個側邊欄。我們還使用了相對定位來稍微下移頁腳，并使用固定定位為頁面添加了一個始終可見的固定元素。最后，我們使用了overflow: hidden;來清除頭部中浮動元素的影響。
浮動、定位和顯示屬性是CSS中構建復雜布局的強大工具。通過深入理解和正確應用這些屬性，前端工程師可以創建出既美觀又功能強大的網頁。隨著Web標準的不斷發展，我們也需要不斷學習和適應新的CSS特性，以保持我們技能的前沿性。
置字符編碼
屬性：http-equiv 值：Content-Type 內容：text/html; charset=utf-8
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />設置有效期
設置網頁的有效期之后, 過期網頁將無法脫機瀏覽, 只有重新登錄并連接該網頁才可以再次瀏覽。
屬性：http-equiv 值：expires 內容：Sun,1 Dec 2012 12:00:00 GMT
<meta http-equiv="Expires" content="Sun,1 Dec 2012 12:00:00 GMT" />
<meta http-equiv="Expires" content="<?php gmdate('D, d M Y H:i:s',time()+3600).' GMT'; ?>" />設置禁止緩存
網頁制作者希望隨時都能查看到最新的網頁內容，則可以設置禁止頁面緩存
屬性：http-equiv 值：cache-control 內容：no-cache
<meta http-equiv="cache-control" content="no-cache" />設置自動刷新
設置頁面自動刷新，以實現信息的自動實時顯示(秒)
屬性：http-equiv 值：refresh 內容：5
<meta http-equiv="Refresh" content="5" />設置自動跳轉
屬性：http-equiv 值：refresh 內容：5;url=http://www.xxx.com/
<meta http-equiv="Refresh" content="5;URL=http://www.xxx.com/" />設置網頁關鍵詞
屬性：name 值：keywords 內容：油漆，涂料，涂料行業，汽車涂料
<meta name="keywords" content="油漆，涂料，涂料行業，汽車涂料" />設置搜索限制
屬性：name 值：robots 內容：All
All 表示能搜索當前網頁與其鏈接的網頁，系統默認設置
Index 表示能搜素當前頁面
Nofollow 表示不能搜素與當前網頁鏈接的網頁
Noindex 表示不能搜素當前網頁
None 表示不能搜索當前網頁與其鏈接的網頁
<meta name="robots" content="All" />
設置網頁說明
屬性：name 值：description 內容：中國油漆網--您的油漆專家
<meta name="description" content="中國油漆網--您的油漆專家" />設置網頁的作者
屬性: name 值: author 內容: LAMP Brother UI Team
<meta name="author" content="LAMP Brother UI Team" />設置網頁的版權
屬性: name 值: copyright 內容: 2012-2014 EDU.
<meta name="copyright" content="2012-2014 EDU." />設置移動網站
<meta http-equiv="mobile-agent" content="format=html5;url=http://www.xxxxxx.com/mobile/"><base> 標簽
base 元素可規定頁面中所有鏈接的基準 URL。
通常情況下，瀏覽器會從當前文檔的 URL 中提取相應的元素來填寫相對 URL 中的空白。
使用 <base> 標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的 URL，而使用指定的基本 URL 來解析所有的相對 URL。
這其中包括 <a>、<img>、<link>、<form> 標簽中的 URL。
<base href="文件路徑" target="目標窗口"/>必需的屬性
href URL 規定頁面中所有鏈接的基準 URL。
target _blank 在何處打開頁面中所有的鏈接。可通過在每個鏈接中使用 target 屬性來覆蓋此屬性。
_parent
_self
_top
_blank 在一個新的未命名的窗口載入文檔
_self 在相同的框架或窗口中載入目標文檔
_parent 把文檔載入父窗口或包含了超鏈接引用的框架的框架集
_top 把文檔載入包含該超鏈接的窗口,取代任何當前正在窗口中顯示的框架
實例:
<base target="_blank"/>可以將該頁面的所有<a>鏈接的默認屬性設置為_blank
<base href="http://www.xxxxxx.com" />在網頁出現的相對鏈接"test.html"將對應htp://www.xxxxxx.com/test.html的頁面
<basefont face="" size="" color=""/>face屬性可以用于設置文字的名稱,可以是宋體、隸書、楷體等;
size屬性用于設置字號的大小(單位:字號),從 1 到 7 的數字,或h1-h6。瀏覽器默認值是 3。
color用于設置字體的顏色
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
