CSS簡介

css：cascading style sheet的縮寫，意為層疊樣式表，主要是用于描述網頁的表現形式（網頁元素的大小、顏色）

CSS的語法規則

css的語法規則主要是三部分組成：選擇器{屬性1:屬性1值…;}

1、選擇器：用來選擇要定義樣式的網頁中元素的東西

2、屬性：表示網頁中元素要定義什么樣的類型屬性（顏色、大小）

3、屬性值：表示屬性的顯示值（網頁中的顯示效果）

選擇器

要選擇器為以下三種，css還提供了其他類型選擇器，比如分組選擇器，后代選擇器…有興趣去查文檔了解

<!--id選擇器：通過要定義樣式元素的id屬性值（唯一）來鎖定要定義樣式的元素，語法：#id屬性值-->
<span id="idSel">id選擇器</span><!--元素選擇器：通過要定義樣式元素的標簽名來鎖定要定義樣式的元素，語法：元素-->
<span>元素選擇器</span><!--類選擇器：通過要定義樣式元素的class屬性值來所鎖定要定義的元素，語法：.class屬性值-->
<span class="classSel">類選擇器</span>

id選擇器

通過要定義樣式元素的id屬性值(唯一)來鎖定要定義樣式的元素，語法：#id屬性值{}

#idSel{color: red;
}

元素選擇器

通過要定義樣式元素的標簽名來鎖定要定義樣式的元素，語法：元素{}

span{font-family: cursive;
}

類選擇器

通過要定義樣式元素的class屬性值來所鎖定要定義的元素，語法：.class屬性值{}

.classSel{color: crimson;
}

選擇器優先級

d選擇器 > 類選擇器 > 元素選擇器

CSS注釋

css的注釋方法：/**/
/*.classSel{*/
/*    color: crimson;*/
/*}*/

CSS常用設置樣式

顏色

可以定義元素的顏色，color、background-color等屬性可以設置顏色樣式，常用設置顏色樣式有以下6中方法：指定顏色可以通過使用預定義的顏色名稱、RGB、HEX、HSL、RGBA、HSLA 值

顏色名稱(常用)

顏色名稱：比如red、green等顏色的具體名稱來設置顏色，名稱不區分大小寫

<h1 style="color: red">顏色名稱</h1>

RGB(常用)

RGB：是通過rgb()函數對三原色(red、green、blue)的強度來進行控制來實現不同顏色的設置

<h2 style="color: rgb(255,100,100)">rgb</h2>

RGBA(常用)

RGBA：在RGB上進行擴展，A代表設置顏色的透明度

<h4 style="color: rgba(100,255,0,100)">rgba</h4>

HEX(常用)

HEX：使用十六進制碼以 #RRGGBB 或 #RGB（比如 #ff0000）的形式設置具體顏色，“#” 后跟 6 位或 3 位十六進制字符（0-9, A-F）

<h3 style="color: #ffa500">hex</h3>

HSL

HSL：通過 hsl(hue：色調、saturation：飽和度、lightness：亮度) 函數對顏色的色調、飽和度、亮度進行調節，從而實現不同的顏色

<h5 style="color: hsl(0,50%,50%)">hsl</h5>

HSLA

HSLA：在hsl上進行擴展，A代表設置顏色的透明度

<h6 style="color: hsla(0, 100%, 50%, 0.5)">hsla</h6>

背景

背景主要是定義元素的背景效果，css中可以設置背景樣式的常用屬性有以下幾種

background-color

background-color 為元素設置背景顏色-

<p style="background-color: blue">background-color屬性</p>

background-image

background-image 用來為某個元素設置背景圖像

<p style="background-image: url('../HTML/64960446_p0.jpg')">background-image屬性</p>

background-size

background-size 屬性用來設置背景圖像的尺寸

<p style="background-image: url('../HTML/64960446_p0.jpg');background-size: contain;">background-size 屬性</p>

字體

文本主要定義元素內文本的字符間距、對齊方式、縮進，常用的屬性有以下幾種

text-align

text-align 屬性用來設置元素中文本的水平對齊方式

<p style="text-align: left">左對齊</p>
<p style="text-align: right">右對齊</p>
<p style="text-align: center">居中對齊</p>

text-decoration

text-decoration 屬性用于設置或刪除文本的裝飾，最常用的做法就是使用 text-decoration 屬性來刪除標簽的默認下劃線

<p style="text-decoration: underline">帶下劃線文字</p>
<p style="text-decoration: overline">帶上劃線文字</p>
<p style="text-decoration: line-through">帶貫穿線文字</p>

text-indent

text-indent 屬性用來為元素中的文本添加首行縮進的效果

<p style="text-indent: 2em;direction: ltr;">text-indent 屬性用來為元素中的文本添加首行縮進的效果，至于是從左側還是從右側縮進則取決于 direction 屬性定義的文本方向。</p>
<p style="text-indent: 2em;direction: rtl;">text-indent 屬性用來為元素中的文本添加首行縮進的效果，至于是從左側還是從右側縮進則取決于 direction 屬性定義的文本方向。</p>

line-height

line-height 屬性用來設置文本的行高

<p style="line-height: 200%">line-height 屬性用來設置文本的行高</p>

邊框

邊框是圍繞著元素內容和內邊距的一條或多條線段，可以設置這些線段的樣式、寬度和顏色，常見的邊框屬性是以下幾種

border-style

border-style 屬性用來設置元素中所有邊框的樣式

<p style="border-style:dotted">border-style 屬性</p>

border-width

border-width 屬性用來設置元素中所有邊框的寬度

<p style="border-width: 2px 2px;border-style: solid">border-width 屬性</p>

border

border 屬性同時定義一下三個屬性：border-width 用來設置邊框的寬度；border-style 用來設置邊框的樣式；border-color 用來設置邊框的顏色

<p style="border: 2px dotted red">border</p>

表格

設置表格的布局以及整體外觀，常用屬性以下幾種

table-layout 屬性用來設置表格布局時所用的布局算法

border-collapse 屬性用來設置是否合并表格中相鄰的邊框

<table style="table-layout: auto;border-collapse: collapse;" border="2"><tr><th>編號</th><th>姓名</th><th>年齡</th></tr><tr><td>1</td><td>張三</td><td>15</td></tr><tr><td>2</td><td>李四</td><td>11</td></tr>
</table>

列表

設置列表的布局以及整體外觀，常用屬性以下幾種

list-style-type

list-style-type 屬性可以設置列表中每個列表項前標記的樣式

<ul style="list-style-type: circle"><li>CSS鏈接</li><li>CSS邊框</li><li>CSS表格</li>
</ul>

list-style-position

list-style-position 屬性可以設置在何處放置列表項前的標記

<ol style="list-style-position: inside"><li>CSS鏈接</li><li>CSS邊框</li><li>CSS表格</li>
</ol>

list-style-image

list-style-image 屬性可以將列表項前的標記替換為一個圖像

<!--<ul style="list-style-image: url('../HTML/64960446_p0.jpg')">-->
<!--    <li>CSS鏈接</li>-->
<!--    <li>CSS邊框</li>-->
<!--    <li>CSS表格</li>-->
<!--</ul>-->

總結

CSS是樣式非常多，顯示效果非常豐富，有興趣可以查看w3school 在線教程手冊試試看