為網頁添加樣式
術語解釋
h1{
color:red;
background-color:lightblue;
text-align: center;
}
CSS規則 = 選擇器 + 宣告塊
選擇器
選擇器：選中元素，選擇樣式作用范圍
- ID選擇器：選中的是對應id值的元素 加#
- 元素選擇器 h1、p
- 類選擇器 加.
宣告塊
出現在大括號中
宣告塊中包含很多宣告（屬性），每一個宣告（屬性）表達了某一方面的樣式，
CSS代碼書寫位置
內部樣式表
書寫在style元素中,一般放在head中，讓它最先加載
<style>
.red {
color: red;
}
.big-center {
font-size: 3em;
text-align: center;
}
</style>
<p >Lorem ipsum dolor sit amet.</p>
行內樣式表，元素樣式表
直接書寫在元素的style屬性中
<h1 style="color:red; background-color:lightblue;">
現在開始添加樣式
</h1>
外部樣式表（推薦）
將樣式書寫到獨立的css檔案中，
<link rel="stylesheet" href="https://www.cnblogs.com/dearroy/p/css/index.css">
<!-- link寫在head中 -->
<div >
Lorem ipsum dolor sit amet.
</div>
.red-big-center {
color: blue;
font-size: 5em;
text-align: center;
}
1). 外部樣式可以解決多頁面樣式重復的問題
2). 有利于瀏覽器快取，從而提高頁面回應速度
3). 有利于代碼分離（HTML和CSS），更容易閱讀和維護
常見樣式宣告
color
元素內部的文字顏色
預設值：定義好的單詞
三原色，色值：光學三原色（紅、綠、藍），每個顏色可以使用0-255之間的數字來表達，色值，
rgb表示法：
rgb(0, 255, 0)
hex（16進制）表示法：
#紅綠藍
淘寶紅：#ff4400, #f40
黑色：#000000，#000
白色：#ffffff, #fff
紅：#ff0000, #f00
綠：#00ff00, #0f0
藍：#0000ff, #00f
紫：#f0f
青：#0ff
黃：#ff0
灰色：#ccc
background-color
元素背景顏色
font-size
元素內部文字的尺寸大小
1）px：像素，絕對單位，簡單的理解為文字的高度占多少個像素
2）em：相對單位，相對于父元素的字體大小
每個元素必須有字體大小，如果沒有宣告，則直接使用父元素的字體大小，如果沒有父元素（html），則使用基準字號，
user agent，UA，用戶代理（瀏覽器）
font-weight
文字粗細程度，可以取值數字，可以取值為預設值
strong元素，默認加粗，
font-family
文字型別
必須用戶計算機中存在的字體才會有效，
使用多個字體，以匹配不同環境
div{
font-family: consolas,翩翩體-簡,微軟雅黑,Arial,sans-serif
}
sans-serif，非襯線字體
font-style
字體樣式，通常用它設定斜體
i元素，em元素，默認樣式，是傾斜字體; 實際使用中，通常用它表示一個圖示（icon）
text-decoration
文本修飾，給文本加線，
a元素
del元素：錯誤的內容
s元素：過期的內容
text-indent
首行文本縮進
line-height
每行文本的高度，該值越大，每行文本的距離越大，
設定行高為容器的高度，可以讓單行文本垂直居中
p{
background:#008c8c;
color:#fff;
height: 50px;
line-height: 50px;
}
行高可以設定為純數字，表示相對于當前元素的字體大小
多少倍行距
p{
line-height: 1.5;
}
width
寬度
height
高度
letter-space
文字間隙
text-align
元素內部文字的水平排列方式
選擇器
選擇器：幫助你精準的選中想要的元素
簡單選擇器
1. ID選擇器
2. 元素選擇器
3. 類選擇器
4. 通配符選擇器 *，選中所有元素
* {
color: red;
}
5.屬性選擇器
根據屬性名和屬性值選中元素
<a href="https://www.baidu.com">百度</a>
/* 選中所有具有href屬性的元素 */
[href]{
color:red;
}
6. 偽類選擇器
選中某些元素的某種狀態
<a href="https://www.baidu.com">百度</a>
1）link: 超鏈接未訪問時的狀態
a:link {
color: chocolate;
}
2）visited: 超鏈接訪問過后的狀態
a:visited {
color: rgb(113, 133, 0);
}
3）hover: 滑鼠懸停狀態
/* 選中滑鼠懸停時的a元素 */
a:hover{
color:red;
}
4）active：激活狀態，滑鼠按下狀態
/* 滑鼠按下時的a元素 */
a:active{
color:#008c8c;
}
l v h a
愛恨法則：love hate
7. 偽元素選擇器
before
after
<p>
袁老師和成老師的<span>HTML和CSS</span>課程真的是不錯呀！
</p>
span::before {
content: "《";
color: red;
}
span::after {
content: "》";
color: red;
}
選擇器的組合
并且
<p >
Lorem, ipsum dolor sitpisicin
</p>
p.red {
color: red;
}
/* 選中p元素中class為redde */
后代元素 —— 空格
后代元素包括兒子孫子
<div >
Lorem, ipsum dolor sit amet
<ul>
<li>Lorem.</li>
<li>Harum.</li>
<li>Eum!</li>
<li>Impedit?</li>
<li>Consequatur!</li>
</ul>
</div>
.red li {
color: #008c8c;
}
<div >
<p>Lorem.</p>
<p >Sequi?</p>
<p>Quasi.</p>
</div>
<p >
Lorem.
</p>
.abc .bcd{
color:red;
}
子元素 —— >
相鄰兄弟元素 —— +
后面出現的所有兄弟元素 —— ~
選擇器的并列
多個選擇器, 用逗號分隔
.special~li,p{
color: #008c8c;
}
語法糖:方便書寫
層疊
宣告沖突：同一個樣式，多次應用到同一個元素
層疊：解決宣告沖突的程序，瀏覽器自動處理（權重計算）
比較重要性
作者樣式表：開發者書寫的樣式
重要性從高到底：
1） 作者樣式表中的!important樣式
2) 作者樣式表中的普通樣式
3) 瀏覽器默認樣式表中的樣式
比較特殊性
看選擇器
總體規則：選擇器選中的范圍越窄，越特殊
具體規則：通過選擇器，計算出一個4位數（x x x x）
不是逢10進一，而是逢255進一
1.千位：如果是行內樣式，記1，否則記0
<a href="" style="color: chocolate;">Perspiciatis</a>
2.百位：等于選擇器中所有id選擇器的數量
<a href="" id="mylink">Perspiciatis</a>
#mylink{
color:#ccc;
}
3.十位：等于選擇器中所有類選擇器、屬性選擇器、偽類選擇器的數量
類選擇器
<a href="" >Perspiciatis</a>
.selected{
color:#ccc;
}
4.個位：等于選擇器中所有元素選擇器、偽元素選擇器的數量
元素選擇器
<body>
<a href="" id="mylink" >Perspiciatis.</a>
</body>
a {
color: red;
}
body a {
color: #fff;
}
比較源次序
代碼書寫靠后的勝出
應用
1.重置樣式表
書寫一些作者樣式，覆寫瀏覽器的默認樣式
重置樣式表 -> 瀏覽器的默認樣式
常見的重置樣式表：normalize.css、reset.css、meyer.css
2.愛恨法則
link > visited > hover > active
從前往后，重要性以此增加，后面覆寫前面
繼承
子元素會繼承父元素的某些CSS屬性
通常，跟文字內容相關的屬性都能被繼承
屬性值的計算程序
一個元素一個元素依次渲染，順序按照頁面檔案的樹形目錄結構進行
渲染每個元素的前提條件：該元素的所有CSS屬性必須有值
一個元素，從所有屬性都沒有值，到所有的屬性都有值，這個計算程序，叫做屬性值計算程序
特殊的兩個CSS取值：
- inherit：手動（強制）繼承，將父元素的值取出應用到該元素
- initial：初始值，將該屬性設定為默認值
盒模型
box：盒子，每個元素在頁面中都會生成一個矩形區域（盒子）
盒子型別：
1.行盒，display等于inline的元素
2.塊盒，display等于block的元素
行盒在頁面中不換行、塊盒獨占一行
display默認值為inline
瀏覽器默認樣式表設定的塊盒：容器元素、h1~h6、p
常見的行盒：span、a、img、video、audio
盒子的組成部分
無論是行盒、還是塊盒，都由下面幾個部分組成，從內到外分別是：
1.內容 content
width、height，設定的是盒子內容的寬高
內容部分通常叫做整個盒子的內容盒 content-box
2.填充(內邊距) padding
盒子邊框到盒子內容的距離
padding-left、padding-right、padding-top、padding-bottom
padding: 簡寫屬性
padding: 上 右 下 左
填充區+內容區 = 填充盒 padding-box
3.邊框 border
邊框 = 邊框樣式 + 邊框寬度 + 邊框顏色
邊框樣式：border-style 默認沒有
邊框寬度：border-width 默認為0
邊框顏色：border-color
邊框+填充區+內容區 = 邊框盒 border-box
4.外邊距 margin
邊框到其他盒子的距離
margin-top、margin-left、margin-right、margin-bottom
速寫屬性margin
盒模型應用
改變寬高范圍
默認情況下，width 和 height 設定的是內容盒寬高，
頁面重構師：將psd檔案（設計稿）制作為靜態頁面
衡量設計稿尺寸的時候，往往使用的是邊框盒，但設定width和height，則設定的是內容盒
- 精確計算
- CSS3：box-sizing
/* 改變寬高的影響范圍 */
box-sizing: border-box;
改變背景覆寫范圍
默認情況下，背景覆寫邊框盒
可以通過background-clip進行修改
溢位處理
overflow，控制內容溢位邊框盒后的處理方式
斷詞規則
word-break，會影響文字在什么位置被截斷換行
normal：普通，CJK字符（文字位置截斷），非CJK字符（單詞位置截斷）
break-all：截斷所有，所有字符都在文字處截斷
keep-all：保持所有，所有文字都在單詞之間截斷
空白處理
overflow: hidden;
white-space: nowrap
text-overflow: ellipsis;
/*文本顯示溢位顯示三個點*/
white-space:pre;
/* 空白折疊 */
行盒的盒模型
常見的行盒：包含具體內容的元素
span、strong、em、i、img、video、audio
顯著特點
1.盒子沿著內容沿伸，兩個相鄰的盒子連接
2.行盒不能設定寬和高
調整行盒的寬高，應該使用字體大小、行高、字體型別，間接調整，
3.內邊距（填充區）
水平方向有效，占據空間
垂直方向不會實際占據空間，只改變背景
4.邊框
水平方向有效，垂直方向不會實際占據空間，
5.外邊距
水平方向有效，垂直方向不會實際占據空間，
行塊盒
可以設定尺寸寬高的行盒(連著不獨占一行)
display：inline-block 的盒子
1.不獨占一行
2.盒模型中所有尺寸都有效
.pager a {
border: 1px solid #e1e2e3;
text-decoration: none;
color: #38f;
width: 34px;
height: 34px;
display: inline-block;
text-align: center;
line-height: 34px;
}
.pager a:hover {
border-color: #38f;
background: #f2f8ff;
}
.pager a.selected {
border: none;
color: #000;
background: initial;
}
<body>
<div >
<a href="">1</a>
<a href="">2</a>
<a href="" >3</a>
<a href="">4</a>
<a href="">5</a>
<a href="">6</a>
<a href="">7</a>
<a href="">8</a>
<a href="">9</a>
<a href="">10</a>
</div>
</body>
空白折疊
空白折疊，發生在行盒（行塊盒）內部 或 行盒（行塊盒）之間
可替換元素 和 非可替換元素
大部分元素，頁面上顯示的結果，取決于元素內容，稱為非可替換元素
少部分元素，頁面上顯示的結果，取決于元素屬性，稱為可替換元素
可替換元素：img、video、audio
絕大部分可替換元素均為行盒，
可替換元素是行盒但是可以設定寬高，類似于行塊盒，盒模型中所有尺寸都有效，
object-fit:設定填充方式
常規流
盒模型：規定單個盒子的規則
視覺格式化模型（布局規則）：頁面中的多個盒子排列規則
視覺格式化模型，大體上將頁面中盒子的排列分為三種方式：
- 常規流
- 浮動
- 定位
常規流布局
常規流、檔案流、普通檔案流、常規檔案流
所有元素，默認情況下，都屬于常規流布局
總體規則：塊盒獨占一行，行盒水平依次排列
包含塊（containing block）：每個盒子都有它的包含塊，包含塊決定了盒子的排列區域，
絕大部分情況下：盒子的包含塊，為其父元素的內容盒
塊盒
1.每個塊盒的總寬度，必須剛好等于包含塊的寬度
寬度的默認值是auto
margin的取值也可以是auto，默認值0
auto：將剩余空間吸收掉
width吸收能力強于margin
若寬度、邊框、內邊距、外邊距計算后，仍然有剩余空間，該剩余空間被margin-right全部吸收
在常規流中，塊盒在其包含快中居中，可以定寬、然后左右margin設定為auto，
2.每個塊盒垂直方向上的auto值
height:auto， 適應內容的高度
margin:auto， 表示0
3.百分比取值
padding、寬、margin可以取值為百分比
以上的所有百分比相對于包含塊的寬度，
高度的百分比：
1.包含塊的高度是否取決于子元素的高度，設定百分比無效
2.包含塊的高度不取決于子元素的高度，百分比相對于父元素高度
4.上下外邊距的合并
兩個常規流塊盒，上下外邊距相鄰，會進行合并，
兩個外邊距不一樣則取最大值，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/21302.html
標籤：其他