CSS學習
CSS是層疊樣式表（Cascading Style Sheets）的簡稱，
有時候也會稱之為CSS樣式表或級聯樣式表，
CSS也是一種標記語言，
CSS主要設定HTML頁面中的文本內容、圖片的外形以及版面的布局和外觀顯示樣式，
HTML可以專注去做結構，CSS用來做樣式，
CSS的語法規范
CSS由（1）選擇器和（2）宣告的樣式組成，一般寫在head中，
<style>
/* 選擇器{樣式} 如下，選擇器找到所有的p標簽，然后將樣式賦予所有的p標簽*/
/* 給誰改樣式{改什么樣式} */
p {
color: red;
font-size: 12px;
}
</style>
選擇器的分類
基礎選擇器
標簽選擇器
HTML的標簽名作為選擇器，為頁面中所有的同一標簽全部改樣式，
p {
color: red;
font-size: 12px;
}
類選擇器
如果要差異化選擇不同的標簽，使用類選擇器(開發最常用），型別太長可以用-來分隔，
/* 定義類選擇器 */
.red {
color: red;
}
.font35 {
font-size:35px
}
<!-- 使用類選擇器 -->
<p >hello world</p>
多類名的使用：
一個HTML元素中class可以指定多個類名，多類名之間必須用空格分開，
<p >hello world</p>
ID選擇器
id選擇器可以為標有特定id的HTML元素指定特定的樣式，ID選擇器只能被呼叫一次，
/* 定義ID選擇器 */
#pink {
color: pink;
}
<!-- 使用ID選擇器 -->
<p id="pink">hello world</p>
通配符選擇器
在CSS中，通配符選擇器使用“*”定義，它表示選取頁面中所有元素（標簽），
/* 定義通配符選擇器，這里將html，body，head等等標簽全部改為紅色 */
* {
color: red;
}
復合選擇器
復合選擇器是由兩個或更多個復合選擇器通過不同的方式組合而成的，
后代選擇器
/* 只改變ol中的li的樣式 */
ol li {
color: pink;
}
/* 也可以用帶class=nav的基礎選擇器來尋找 */
.nav li a {
color: pink;
}
子選擇器
只影響兒子標簽，不影響孫子標簽，
.nav > a {
color: red;
}
<div >
<a href="https://www.cnblogs.com/boniii/p/#">我是兒子</a>
<p>
<a href="https://www.cnblogs.com/boniii/p/#">我是孫子</a>
</p>
</div>
并集選擇器
并集選擇器可以選擇多組標簽，同時為他們定義相同的樣式，
div,
p {
color: red;
}
可以和別的選擇器混合使用，
div,
p,
.nav li{
color: red;
}
偽類選擇器
偽類選擇器有鏈接偽類、結構偽類、表單偽類等，
鏈接偽類
書寫順序link，visited，hover，active，
a:link選擇所有未被訪問的鏈接
a:visited選擇所有已被訪問的鏈接
a:hover選擇滑鼠指標位于其上的鏈接
a:active選擇活動鏈接（滑鼠按下未彈起的鏈接）
focus偽類選擇器
用于選擇焦點的表單元素，
input :focus{
background-color: yellow;
}
CSS字體屬性
字體系列
font-family定義文本的字體系列，當冒號后有多個字體，會從左往右選擇，直到選擇了電腦中存在的能顯示的為止，
h2 {
font-family: 'Microsoft Yahei';
}
文字大小
font-size定義文字的大小，
/* 標題和標簽比較特殊，需要單獨指定文字的大小 */
body {
font-size: 16px;
}
字體的粗細
font-weight定義文字的粗細，一般都用數字，
notmal（400）：正常字體，
bold（700）：粗體，
bolder：特粗體，
lighter：細體，
文字樣式
font-style定義字體的樣式：normal（默認），italic（傾斜）
字體的復合屬性
font用來設定復合屬性,各屬性用空格分開，不要的屬性可以省略，但是font-size和font-family屬性必須要有，
/* font的順序為font-style font-weight font-size/line-height font-family */
p {
font: italic 700 16px/20px 'Microsoft yahei'
}
CSS文本屬性
文本顏色
color定義文本顏色
div {
color: red;
/* color: #ff0000; */
/* color:rgb(200,0,0) */
}
文本對齊
text-align設定文本內容的水平對齊方式，
h1 {
/* 屬性有right，left，center */
text-align: center;
}
裝飾文本
text-decoration設定文本裝飾，
p {
/* 屬性有underline下劃線 line-through洗掉線 over-line上劃線 none去除文本默認下劃線 */
text-decoration: underline;
}
文本縮進
text-indent定義首行縮進，
p {
text-indent: 10px;
/* text-indent: 2em; 2個文字的大小*/
}
行間距
line-height屬性用于設定行間的距離（行高），
p {
/* 行間距包括文本高度+上間距+下間距 */
line-height: 26px;
}
CSS引入方式
行內樣式表（行內式）
直接寫在元素標簽內部的style屬性中設定CSS樣式，
<div style="color: red;font-size: 12px;">不關注嘉然今天吃什么的，有難了</div>
內部樣式表（嵌入式）
把CSS寫到html的內部的style標簽內部，一般吧style放在head里面，
外部樣式表（鏈接式）
將CSS單獨寫在外部的CSS檔案中，
<link rel="stylesheet" href="https://www.cnblogs.com/boniii/p/css檔案路徑">
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/288276.html
標籤：Html/Css
上一篇：[測驗]Sprint Boot