HTML 如何在我們的頁面中呈現
元素的 HTML 類型
主要
CSS 選擇器：-
CSS 繼承
當未直接在元素上設定繼承 CSS 屬性（即顏色）時，會遍歷父鏈直到找到該屬性的值。
<div class="body">
<p>This is a Paragraph, but it will have the blue color due to inheritance</p>
</div>
<style>
.body{
color: blue;
}
</style>
案例2
<div class="body">
<p>This is a Paragraph, but it will have the red color due to direct Specification</p>
</div>
<style>
p {
color: red;
}
.body{
color: blue;
}
</style>
案例3
<div class="body">
<p>This is a Paragraph, but it will have the blue color due to strong Specification</p>
</div>
<style>
p {
color: red;
}
.body p{
color: blue;
}
</style>
什麼是 CSS 特異性
注意：- 內嵌 CSS 更具特異性，!import 具有更多特異性
CSS 特異性計算器
艾姆和雷姆
EM:- 相對於其父字體側
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 2em; //16px * 2 = 32px;
}
p {
font-size: 2em; // 32px * 2 = 64px
}
</style>
REM：- 相對於 Root 字體側
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 2rem; //16px * 2 = 32px;
}
p {
font-size: 2rem; // 16px * 2 = 32px
}
</style>
%:- % 計算
<html>
<div>
<p></p>
</div>
</html>
<style>
html {
font-size: 16px;
}
div {
font-size: 120%; //1.2*16 = 19.2px;
}
p {
font-size: 120%; // 1.2 * 19.2 = 23.04px
}
</style>
CSS 組合器
1.後代選擇者 (ul li a)
<ul> <li><a href='#'></a></li> </ul>
2.子組合器（直接後代）(div.text > p)
<div> <div class="text"> <P>Here the CSS will apply<P> </div> <div> <p>No CSS will apply</p> </div> </div>
3.鄰近兄弟組合 (h1 + p)
注意：-
4.通用兄弟組合器 (p ~ 代碼)
注意：-
區塊元素修改器架構（BEM）
其他方法
封鎖
元素（區塊的一部分）
修飾符
.block__element--修飾符 語法
<form class=form> <input class='form__input'/> <input class="form__input form__input--disabled"/> <button class="form__button form__button--large"/> </form>
盒子模型：-（W.I.P）
我們需要從詳細資訊中添加更多資訊
注意：-
將有一篇單獨的文章介紹網格版面與 Flex 版面。
以上是CSS 詳細信息的詳細內容。更多資訊請關注PHP中文網其他相關文章！
