學習來源：尚硅谷前端html+css零基礎教程，2023最新前端開發(fā)html5+css3視頻
系列筆記：
- 【HTML4】（一）前端簡介
- 【HTML4】（二）各種各樣的常用標簽
- 【HTML4】（三）表單及HTML4收尾
- 【CSS2】（四）CSS基礎及CSS選擇器
- 【CSS2】（五）CSS三大特性及常用屬性
- 【CSS2】（六）CSS盒子模型
- 【CSS2】（七）浮動
- 【CSS2】（ 八）定位與布局
- 【實操】（ 九）尚品匯實操練習
- 【HTML5】（ 十）HTML5簡介及相關新增屬性
- 【CSS3】（ 十一）CSS3簡介及基本語法（上）| 相關新增屬性
- 【CSS3】（ 十二）CSS3簡介及基本語法（中）| 變換、過渡與動畫
- 【CSS3】 （十三）CSS3簡介及基本語法（下）| 伸縮盒模型
??前文回顧：前端 | （四）CSS基礎及CSS選擇器 | 尚硅谷前端html+css零基礎教程2023最新
??前文對應p57-p86，本文對應p87-p112
??補充網(wǎng)站：W3school，MDN
??CSS三大屬性
??層疊性
- 如果發(fā)生了樣式?jīng)_突（元素的同一個樣式名，被設置了不同的值），那就回根據(jù)一定的規(guī)則（選擇器優(yōu)先級），進行樣式的層疊（覆蓋）。
??繼承性
- 元素會自動擁有其父元素、或其祖先元素上所設置的某些樣式。優(yōu)先繼承離得近的。
- 參照MDN網(wǎng)站，可查詢屬性是否可被繼承。
??優(yōu)先級
-
!important>行內(nèi)樣式>id選擇器>類選擇器>元素選擇器>*>繼承的樣式 - 具體比較需要計算權重，詳見前文。
??CSS常用屬性
??像素的概念
??顏色的表示
??表示方式一：顏色名
??表示方式二：rgb或rgba
??表示方式三：HEX或HEXA
??表示方式四：HSL或HSLA
??CSS字體屬性
??字體大小
font-size：控制字體的大小
div{
font-size:40px;
}
??字體族
font-family：控制字體類型
div{
font-family:"STCaiyun","Microsoft YaHei",sans-serif
}
??字體風格
font-style：控制字體是否為斜體。
div{
font-style:italic;
}
??字體粗細
font-weight：控制字體的粗細。
div{
font-weight:bold;
}
div{
font-weight:600;
}
??字體復合寫法
-
font：可以把上述字體樣式合并成一個屬性。 -
編寫規(guī)則：
- 字體大小、字體族必須寫上。
- 字體族必須是最后一位、字體大小必須是倒數(shù)第二位。
- 各個屬性間用空格隔開。
-
實際開發(fā)中更推薦復合寫法，但這也不是絕對的，比如只想設置字體大小，那就直接用
font-size屬性。
??CSS文本屬性
??文本顏色
??文本間距
??文本修飾
??文本縮進
??文本對齊_水平
??行高
??文本對齊_垂直
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本對齊_垂直方向</title>
<style>
div{
font-size: 40px;
height: 400px;
/* 垂直居中：line-height=height */
/* line-height: 400px; */
/* 底部對齊，height*2 - font-size */
line-height: 760px;
background-color: pink;
}
</style>
</head>
<body>
<div>尚硅谷</div>
</body>
</html>
??文本對齊_所在那一行
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文本對齊_垂直方向</title>
<style>
div{
font-size: 100px;
height: 300px;
background-color: pink;
}
span{
font-size: 40px;
background-color: orange;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
atguigu尚硅谷x<span>x前端</span>
</div>
</body>
</html>
??CSS列表屬性
??CSS表格屬性
??邊框相關屬性（其他元素也能用）
??表格獨有屬性（只有table標簽才能使用）
??CSS背景屬性
文章來源：http://www.zghlxwxcb.cn/news/detail-582904.html
??CSS鼠標屬性
文章來源地址http://www.zghlxwxcb.cn/news/detail-582904.html
到了這里，關于前端 | （五）CSS三大特性及常用屬性 | 尚硅谷前端html+css零基礎教程2023最新的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
