CSS（中）

阿新 • • 發佈：2021-01-31

技術標籤：CSS css

6.尺寸+顏色-單位

尺寸：
	1）絕對單位
		Px
	2）相對單位
		百分比
		1em~1個M的寬度（16px）
顏色：
	1.關鍵字
		red  blue
	2.rgb(r，g，b)
		r：red
		g：green
		b：blue
		0-255
	3.rgba(r，g，b，a)
		a：apcaity透明度
		0-1：
		0：完全透明
		1：完全不透明
	4.16進位制顏色值
		#
		#ff0000
		#fff：白色
		#ccc：灰色
		
	font-family：" "
	@font-face {
         font-family: 'myfont';
          src: url('myfont');
     }

7.文字樣式

color:

	c:/winodws/Fonts

web-font：

	網路字型
	1）下載字型檔案
	2）宣告字型
		安裝
	3）引用
div{
            color: rgb(0, 255, 25);
            font-family: "方正舒體","宋體","微軟雅黑";
            font-size: 30px;
            font-family: 'myfont';
}

<div>
    hello,哈利.波特
    <span class="fa fa-gift mytext fa-5x">
    </span>
</div>

字型圖示：

1.font-awesome
	1）下載框架壓縮包
	2）在HTML中引入外部css檔案
	3）在行內元素上，設定class="fa fa-xxx"
 @font-face {
        font-family: 'myfont';
        src: url('./fonts/Glascow.otf');
}
<link rel="stylesheet" href="./font-awesome-4.7.0/css/font-awesome.min.css">

<span class="fa fa-gift mytext fa-5x">
		

2.icon-font
	1）下載壓縮包
	2）在HTML中引入外部css檔案
	3）在行內元素上，設定class='iconfont xxxx'
<link rel="stylesheet" href="./iconfont/iconfont.css">

<span class="iconfont icon-bad"></span> 
<span class="iconfont icon-chart-pie"></span>

傾斜：

		 font-style: italic;

字型加粗：

	         font-weight: lighter;  /*100-900之間的數字*/

文字居中：

	         text-align: center;

字型樣式（大小寫）：

		text-transform: capitalize;

文字修飾（上下劃線/刪除線）：

		a{
		       text-decoration: none;
		}

文字陰影：

		p{
			text-shadow: 10px 10px 10px #cccccc;
			//向右下投射陰影，相反的方向用複數
		}

letter-spacing：

增加或減少字元間的空白（字元間距）

word-spacing：

增加或減少字與字之間的空白

width：

min-width：
max-width：

overflow：

	設定超出元素部分的展示形式
	overflow: hidden;      //超出部分隱藏
	overflow: scroll;       //超出部分在元素內部以滾動條的形式展示

元素的隱藏和顯示：

	display：
		none：元素的隱藏
			不但隱藏元素本身，還會隱藏元素所佔用的空間
		block：元素的顯示
	visibility：
		hidden：元素的隱藏
			只隱藏元素，不隱藏元素所佔用的空間
		visible：元素的顯示
		div:nth-child(2){
            /* display: block; */
            visibility: hidden;
		}

表格樣式：

table{
            border-collapse: collapse;    //表格邊框合併
            caption-side: left;   // 表格標題位置
    }

列表樣式：

li{
            /* list-style-type: decimal; */
            border: 1px solid skyblue;
            list-style-position: inside;
            height: 50px;
            text-align: center;      /* 塊級元素不能使用 */
            line-height: 50px;
            /* list-style-image: url(./我喜歡的音樂.png); */
}

盒子：

	1）盒子的組成
		盒子=內容+內邊距+邊框+外邊距
		
		盒子的高度=內容+內邊距+邊框
		盒子所佔空間高度=內容+內邊距+邊框+外邊距
	2）盒子分類
		a.標準盒子/w3c盒子
			預設是標準盒子
			特點：
				設定的寬高屬性——》設定給元素的內容
				box-sizing：content-box；
		b.邊框盒子/怪異盒子
			box-sizing：border-box；
			特點：
				寬高屬性——》盒子：內容+內邊距+邊框
背景樣式設定：
	background
邊框樣式設定：
	border

8.佈局：

預設文件流：所有元素根據本身特性在瀏覽器頁面中進行的排序
從上到下，從左到右

佈局規則：
	新進行行級佈局，再進行列級佈局

a.display

	inline：將塊級元素轉換為行內元素
	block：將行內元素轉換為塊級元素
	inline-block：將元素轉換為兼具行內和塊級特性的元素（既可以設定寬高，又能在一行中顯示）

b.浮動：

	特點：
		浮動元素不遮擋行內元素和文字
	
	脫離預設文件流，飄起來了
	float：
		none
		left
		right
		
	對元素的影響：
		1.如果浮動屬性設定給塊級元素
			塊級元素可以在一行中顯示，寬度由元素內容撐起
		2.如果浮動屬性設定給行內元素
			行內元素可以設定寬高
	
	浮動何時停止？
		1.遇到父元素邊框
		2.遇到其他浮動元素
	
		     article{
		            background-color: #cccccc;
		            overflow: hidden;
			}
		        div{
		            width: 100px;
		            height: 100px;
		            border: 1px solid red;
		            font-size: 30px;
		            margin: 10px;
		            float: left;
		        }
		
			<article>
			        <div>div1</div>
			        <div>div2</div>
			        <div>div3</div>
		        </article>

清除浮動：（塊級元素）

	clear：
		left
		right
		both
	a.給浮動元素和非浮動元素之間新增一個塊級元素
		clear
	b.給所有浮動元素的父元素設定
		::after{
			display：block；
			content：' ';
			clear：left/right/both
		}
selection既沒有樣式又是塊級元素