瀏覽器內核
firefox:gecko
ie:trident
safari:webkit
chrome: webkit ---> 基于webkit開發了Blink
opera:Presto ---> webkit ---> Blink
css樣式表的組成
樣式表：
規則集：選擇器(瀏覽器從右向左讀)+宣告塊組成
宣告塊：宣告組成
宣告：合法的css屬性的鍵值對(屬性+屬性值)組成
引入樣式的三種方式
引入CSS樣式有三種方式，分別是：行內樣式、內部樣式、外部樣式，
行內樣式(優先級最高)
<標簽名 style="樣式">xxx</標簽名>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>行內樣式 demo</title>
</head>
<body>
<p style="color:blueviolet;font-size:15px;">Lorem ipsum dolor sit amet.</p>
</body>
</html>
內部樣式
將樣式寫在<head>標簽中，用style標簽將樣式包裹起來，
<head>
<style>
a{
display: block;
background-color: rgb(180, 146, 212);
width: 200px; /*轉換為塊元素后可設定其寬度*/
height: 200px; /*轉換為塊元素后可設定其高度*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">行內元素轉換為塊元素</a>
<a href="https://www.baidu.com">在CSS樣式中將display的值設定為block;</a>
</body>
外部樣式
在<head>標簽中寫<link rel="stylesheet" href="樣式表名.css">，href的值需要單獨建一個擴展名為.css的樣式檔案,注意路徑，
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet.</p>
</body>
CSS的基本使用方式
在編碼時，我們利用選擇器來為各個元素設定樣式，基本的選擇器分別為：標簽選擇器、類(class)選擇器、id選擇器，
選擇器語法
標簽選擇器
標簽名{樣式}
<style>
p{
font-size: 15px;
color: #81c6f8;
}
</style>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni
</p>
id選擇器
<標簽 id="id名">xxx</標簽>
#id名{樣式}
<head>
<style>
#p{
color: #eabdca;
font-style: italic;
}
</style>
</head>
<p id="p">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
后代選擇器
祖先元素選擇器 后代選擇器
<head>
<style>
#p{
color: #eabdca;
font-style: italic;
}
</style>
</head>
<div id="">
<p class="p">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
</p>
</div>
類(class)選擇器
<標簽 class="class名">xxx</標簽>
.class名{樣式}
<head>
<style>
.p{
font-family: 'Courier New', Courier, monospace;
color: blueviolet;
}
</style>
</head>
<p class="p">Lorem ipsum dolor sit amet consectetur adipisicing elit. </p>
其余更高級的選擇器可去以下地址查看
https://www.w3.org/TR/2011/REC-css3-selectors-20110929/
css層疊規則
選擇器特殊性(選擇器特殊性不進位)
--ID屬性值 0,1,0,0
--類，屬性，偽類 0,0,1,0
--元素，偽元素 0,0,0,1
--通配符 0,0,0,0
--行內宣告(標簽中的樣式) 1,0,0,0
--繼承沒有特殊性
注：當宣告發生沖突時，選擇器特殊性越大越占優勢，
重要宣告(!important)覆寫普通宣告，
0特殊性(通配符)大于無特殊性(繼承)，
宣告的優先級
--按來源排序
來源：
<1>讀者
<2>創作者
<3>用戶代理
權重：
<1>讀者的重要宣告(只有IE有)
<2>創作者的重要宣告
<3>創作者的普通宣告
<4>讀者的普通宣告
<5>用戶代理(瀏覽器)的宣告(無重要宣告)
--按選擇器的特殊性排序
如上：選擇器的特殊性
--最終按順序排序
前端坐標系
--
top left
x軸的正方向 就是 前端坐標系的正方向
y軸的負方向 才是 前端坐標系的正方向
--
bottom right
x軸的負方向 就是 前端坐標系的正方向
y軸的正方向 才是 前端坐標系的正方向
示意圖：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/264848.html
標籤：其他
上一篇：什么是konva.js？