CSS顏色及文本字體
CSS顏色表示法
-
顏色名錶示，比如：red 紅色，yellow黃色，pick粉色
-
16進制數值表示，比如：#ff0000 表示紅色，這種可以簡寫成 #f00
-
RGB顏色: 紅(R)、綠(G)、藍(B)三個顏色通道的變化 background-color: rgb(200,100,0);
-
RGBA顏色: 紅(R)、綠(G)、藍(B)、透明度(A) background-color: rgba(0,0,0,0.5);
16進制： 0-9 a-f<br> rgb的值：0-255
CSS文本設置
常用的應用文本的css樣式：
color 設置文字的顏色
font-size 設置文字的大小
font-family 設置文字的字體
font-style 設置字體是否傾斜
line-height 設置文字的行高
text-decoration 設置文字的下劃線
text-indent 設置文字首行縮進
text-align 設置文字水平對齊方式
color:red;
font-size:12px;
font-family:'微軟雅黑';
font-style:'normal'; 設置不傾斜<br> font-style:'italic';設置文字傾斜
font-weight:bold; 設置加粗 <br> font-weight:normal 設置不加粗
line-height:24px;
text-decoration:none; 將文字下劃線去掉
text-indent:24px; 設置文字首行縮進24px
text-align:center 設置文字水平居中
CSS邊框屬性
- border:寬度 樣式 顏色;
border: 1px solid red;
樣式：solid實線，dotted點狀線，dashed虛線
- 屬性的順序可以自由改變
border: red 1px solid;
- 可以單獨設置一項屬性或一條邊
border-top-color: red;
- border-radius：圓角處理
- 只給一個屬性值默認設置四個角
- 給兩個值設置對角，第一個設置左上和右下，第二個設置右上和左下
- 給四個屬性值按照順時針方法設置四個角，從左上開始。
border-radius: 30px;
border-radius: 20px 40px;
border-radius: 10px 20px 30 px 40px;
- box-shadow: 陰影設置
- 第一個值：設置水平方向位移 正直往右偏移 負值往左偏移
- 第二個值：設置垂直方向位移 正直向下 負值向上
- 第三個值：設置模糊程度
- 第四個值：設置擴散範圍
- 第五個值：設置陰影顏色
- 第六個值：設置是否爲內陰影 如果爲內陰影就設置insert如果不設置內陰影可以不寫
box-shadow:-10px -20px 30px 40px red inset
背景屬性
-
background-color: 背景顏色
background-color:red;<br> background:green
-
background-image: 背景圖片
bckground-image:url(.example.jpg);<br> background:url(./example.jpg);<br>
-
background-repeat：是否重複，如何重複?(平鋪)
background-repeat:no-repeat;
-
background-position：定位
- 第一個值：水平方向
- 第二個值：垂直方向
background-position:10px -20px;
-
background-size: 背景大小
- 第一個值：寬度
- 第二個值：高度
background-size:100px 50px;
元素溢出
當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。
overflow的設置項：
- visible 默認值。內容不會被修剪，會呈現在元素框之外。
- hidden 內容會被修剪，並且其餘內容是不可見的，此屬性還有清除浮動、清除margin-top塌陷的功能。
- scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其餘的內容。
- auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其餘的內容。
overflow:hidden;<br> overflow:scroll;<br> overflow:auto;