CSS簡述

css是什麼？有什麼作用？

HTML------>頁面的結構------>人的面部(素顏)。

CSS------>美化頁面------>給人化妝。

CSS通常稱爲CSS樣式或層疊樣式表，主要用於設置HTML頁面中的文本內容(字體、大小、對其方式等)、圖片的外形(高寬、邊框樣式、邊距等)以及版面的佈局等外觀顯示樣式。
CSS可以使HTML頁面更好看，CSS色系的搭配可以讓用戶更舒服，CSS+DIV佈局更佳靈活，更容易繪製出用戶需要的結構。

css入門案例

步驟1:創建一個HTML文件。
步驟2:在HTML上創建一個字體標籤。
步驟3:字體標籤中新增一一個 style屬性，並修改style屬性值。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<font size="7">hell,oworld</font>
		<br />
		<font size="70">hell,oworld</font>
		<br />
		<font style="font-size: 70px;">hell,oworld</font>
	</body>
</html>

運行結果：
使用html的標籤設置字體大小時最大就是7，而使用css設置字體標籤時沒有最大值。

爲什麼使用CSS替代HTML屬性設置樣式

因爲HTML屬性在單獨使用時有一定的侷限性，所以要配合CSS樣式代碼纔可以展示更爲豐富的效果。

css的代碼規範

放置規範:
在< style >標籤內容體中書寫css樣式代碼。

< style >標籤放置在< head >標籤之中。

格式規範:
選擇器名稱 { 屬性名1:屬性值1; 屬性名2:屬性值2; … }

選擇器:即指定CSS樣式作用在哪些HTML標籤上。

代碼規範:
屬性名和屬性值之間是鍵值對關係。

屬性名和屬性值之間用“:”連接，最後“;”結尾。
例如: font-size:120px;

如果一個屬性名有多個值，多個值之間用空格隔開。
例如: border:5px solid red;

CSS註釋：
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				/* 設置span標籤的大小 */
				font-size: 70px;
				/* 設置span標籤的顏色 */
				color: red;
				/* 設置span標籤的線框，有多個屬性用空格隔開 */
				border: 1px solid blue;
			}
		</style>
	</head>
	<body>
		<span>111111111111</span>
		<br />
		<span>222222222222</span>
	</body>
</html>

運行結果：

css選擇器

基本選擇器

元素選擇器

HTML標籤又名HTML元素。

元素選擇器:即以HTML標籤名作爲選擇器名稱。

作用:選擇CSS樣式代碼作用於對應標籤名的標籤上。

格式：
標籤名：{
css樣式代碼
}
適用範圍：適用於將相同樣式作用在多個同名標籤上。
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 70px;
			}
		</style>
	</head>
	<body>
		<span>我是span11111111</span>
		<span>我是span22222222</span>
		<div>我是div1111111111</div>
		<div>我是div2222222222</div>
	</body>
</html>

運行結果：
修改了span標籤的樣式

類選擇器

每個HTML標籤都有一個class屬性，class 屬性值即爲類名。

類選擇器:即以HTML的類名 (class 屬性值) 作爲選擇器名稱。

作用:選擇CSS樣式代碼作用於對應類名的HTML標籤上。

格式：
.類名{
css樣式代碼
}
適用範圍:適用於將樣式一次作用在相同類名的標籤上。(即使標籤名不同)
示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.red{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>span1:我是黑色</span>
		<span class="red">span2我是紅色</span>
		<div>div1：我是黑色</div>
		<div class="red">div2：我是紅色</div>
	</body>
</html>

運行結果：
span和div的標籤名不一樣，但是設置了類名也是可以一起修改的。

id選擇器

每個HTML標籤都有一個id屬性，id的屬性值必須在本頁面是唯一的。

id選擇器:即以HTML的id (id 屬性值)作爲選擇器名稱。

作用:選擇CSS樣式代碼作用於某個規定id值的html標籤上。

格式：
#id值{
css樣式代碼
}

適用範圍:適用於將樣式作用某個標籤上。（更有針對性）

注意：必須手動保證id值在本頁唯一。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d2{
				color: red;
			}
		</style>
	</head>
	<body>
		<span>span1：我是黑色</span>
		<span>span2：我是黑色</span>
		<div>div1：我是黑色</div>
		<div id="d2">div2：我是紅色</div>
	</body>
</html>

運行效果：

基本選擇器的組合方式

層級關係

標籤和標籤之間有層級關係，例如: 標籤的子標籤爲< body >標籤。

我們可以對基本選擇器進行組合,表現出層級關係，從而更加針對性地把樣式作用於某些標籤上。

格式：
選擇器1 選擇器2…{
css樣式代碼
}
選擇器1下的選擇器2，相當於< html >標籤下的< body >。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div font{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<div>
			<font>我想變紅</font>
		</div>
		
		<font>我保持黑色</font>
		
	</body>
</html>

運行結果：
通過層級關係將div標籤下的font標籤中的內容體改爲了紅色。

邊框屬性

所有的HTML標籤都有邊框，默認邊框不可見。

邊框：border

設置邊框的樣式

格式:寬度樣式顏色
例如: border:1px solid red ，1像素粗的實線紅色邊框。
線條樣式:solid實線，none無邊，double 雙線。

寬度：width

用於設置標籤的寬度

高度：height

用於設置標籤的高度

背景顏色：background - color

用於設置標籤的背景顏色。

背景顏色設置的兩種主流方式:
①英文單詞
例如: red,blue,yellow
②顏色代碼
格式: #紅綠藍，每一個顏色用兩個16進制位數表示。
例如: #ff1100 紅色ff，綠色11，藍色00，紅色顏色最重，綠色其次，沒有藍色。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div {
				border: 1px solid red;
				width: 100px;
				height: 100px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div>hello,word</div>
	</body>
</html>

運行結果：

佈局

浮動屬性：float

通常默認的排版方式，將頁面中的元素從上到下一一羅列，而實際開發中，需要左右方式進行排版，就需要使用浮動屬性。

格式：
選擇器{float:屬性值;}
常用屬性值:
none:元素不浮動(默認值)。
left:元素向左浮動。
right:元素向右浮動。

注意:因爲元素設置浮動屬性後，會脫離原有文檔流(會脫離原有的板式),從而會影響其他元素的樣式，所以設置浮動以後，頁面樣式需要重新調整。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#d1 {
				background-color: red;
				width: 100px;
				height: 100px;
				float: right;
			}

			#d2 {
				background-color: green;
				width: 110px;
				height: 110px;
				float: right;
			}

			#d3 {
				background-color: blue;
				width: 120px;
				height: 120px;
				float: right;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<div id="d2"></div>
		<div id="d3"></div>
	</body>
</html>

運行結果：
將三個div浮動到右方

轉換

display

display屬性可以使得元素在行內元素和塊元素之間相互轉換。

格式:
選擇器{display:屬性值}
常用的屬性值:。
block:此元素將顯爲塊元素(塊元素默認的display屬性值)
inline:此元素將顯示爲行內元素(行內元素默認的display屬性值)。
none:此元素將被隱藏，不顯示，也不佔用頁面空間。

示例：
沒有添加轉換時的頁面

添加轉換

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				display: inline;
			}
			li{
				display: inline;
			}
			span{
				display: block;
			}
			a{
				display: none;
			}
		</style>
	</head>
	<body>

		<h2>塊級元素1-div----------由塊元素轉換爲行內元素</h2>
		<div>div1</div>
		<div>div2</div>

		<h2>塊級元素2-無序列表</h2>
		<ul>
			<li>111</li>
			<li>222</li>
			<li>333</li>
		</ul>

		<h2>行內元素1-span----------由行內元素轉換爲塊元素</h2>
		<span>span1</span>
		<span>span2</span>

		<h2>行內元素2-a</h2>
		<a>a1</a>
		<a>a2</a>
		html

	</body>
</html>

運行結果：
塊級元素都轉換爲了行內元素，而行內元素也轉換爲了塊元素，最後的a標籤頁設置了none屬性而隱藏了起來，但是也不佔頁面空間。

字體

大小：font-size

用於設置字體的大小。

顏色：color

用於設置字體的顏色。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 70px;
				color: red;
			}
		</style>
	</head>
	<body>
		你好嗎
		<span>我想要變大變紅</span>
		你好啊
	</body>
</html>

運行結果：

css盒子模型

什麼是盒子模型

所有的HTML元素，我們都可以看成一個四邊形，即一個盒子。

用CSS來設置元素盒子的內邊距、邊框和外邊距的樣式的方式。

相當於設置盒子的樣式，所以我們將其稱之爲盒子模型。

邊框（border回顧及再概述）

邊框：HTML元素盒子的框體，和css的邊框屬性是一樣的。

邊框有四個屬性可以設置:

border- top:上邊框。

border -right:右邊框。

border -bottom:下邊框。

border -left:左邊框。

示例：

<span style="border-top: 1px solid red;">內容體</span>

效果：

通用性設置：
一次性設置上下左右邊框樣式爲：1像素的實體紅色線。
border:1px solid red;e
示例：

<span style="border: 1px solid red;">內容體</span>

效果：

內邊距：padding

內邊距: HTML元素裏的內容體到HTML元素邊框的距離。

內邊距有四個屬性可以設置:

padding-top:上邊距

padding-right:右邊距

padding-bottom:下邊距

padding-left:左邊距

通用性設置：
次性設置上下左右內邊距距離爲10px
padding:10px;

示例：

使用了通用性設置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<div>內容體</div>
	</body>
</html>

運行結果：

外邊距：margin

外邊距: HTML元素邊框到其他HTML元素邊框的距離

外邊距有四個屬性可以設置:
margin-top:上邊距

margin-right:右邊距

margin-bottom:下邊距

margin-left:左邊距

通用性設置:
一次性設置上下左右外邊距距離爲10px
margin:10px;

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				border: 1px solid red;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		內容體
		<div>內容體</div>
	</body>
</html>

運行結果：

css和html的結合方式

內部樣式

行內樣式

行內樣式，是通過標籤的style屬性來設置元素的樣式。

格式:
< html標籤 style="css 樣式代碼”/ >

示例：

<span style="font-size: 100px; color: red; ">hello,world</span>

效果：

< style >標籤方式

當某些樣式在頁面中被多個標籤重複使用，爲了編碼更加靈活，避免書寫重複代碼。

我們將樣式代碼從標籤style屬性中抽取出來，統一寫入到style標籤中。

格式：
< style >
css樣式
< /style >

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			span{
				font-size: 100px;
				color: red;
			}
		</style>
	</head>
	<body>
		<span>hello,world</span>
		<br />
		<span>html</span>
	</body>
</html>

運行結果：

應用環境:適合頁面中進行樣式複用，設置多個標籤。

外部樣式

< link/ >標籤方式

< link/ >又稱爲鏈入式，是將所有的樣式放在一個或多個以css爲擴展名的外部樣式表文件中，通過< link >標籤將樣式連接到HTML文檔中。

格式:
< link rel=“stylesheet” type=“text/css” href=“css文件路徑”/ >
rel=“stylesheet” ,固定值，表示樣式表

type=“text/css”，固定值，表示css類型

href，表示css文件位置

適合：不同頁面進行樣式複用。

示例：

HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css.css" />
	</head>
	<body>
		<a>hello</a>
		<a>hello</a>
		<a>hello</a>
		<a>hello</a>
	</body>
</html>

css文件

a{
	font-size: 100px;
	color: red;
}

運行結果：

JavaWeb（2）之CSS

CSS簡述

css是什麼？有什麼作用？

css入門案例

爲什麼使用CSS替代HTML屬性設置樣式

css的代碼規範

css選擇器

基本選擇器

元素選擇器

類選擇器

id選擇器

基本選擇器的組合方式

層級關係

邊框屬性

邊框：border

寬度：width

高度：height

背景顏色：background - color

佈局

浮動屬性：float

轉換

display

字體

大小：font-size

顏色：color

css盒子模型

什麼是盒子模型

邊框（border回顧及再概述）

內邊距：padding

外邊距：margin

css和html的結合方式

內部樣式

行內樣式

< style >標籤方式

外部樣式

< link/ >標籤方式