Web基礎之CSS入門

一、什麼是CSS：

CSS 指層疊樣式表 (Cascading Style Sheets),是爲了解決內容與表現分離的問題。
<body bgcolor='red'></body>
body爲內容
bgcolor爲表現

二、CSS的使用方式（樣式表）：

1、內聯樣式表：

第一種定義css的方式：內鏈樣式表
<body bgcolor="red" >
<body style="background-color: red" >
但是這種方式還是沒有將內容和表現分離

2、嵌入式樣式表：

第二種定義css的方式：嵌入式樣式表
<style type="text/css"></style>
需要將樣式放在<head></head>中
<body bgcolor="yellow" >
<style type="text/css">
body{background-color:yellow}
</style>
但是這種方式還是沒有將內容和表現完全分離

3、引入式樣式表：

第三種定義css的方式：引入式樣式表
<link rel="StyleSheet" type="text/css" href="style.css">
style.css中
body{background-color:yellow}
這種方式完全將內容和表現完全分離

三、選擇器

1、選擇器分類：

通過選擇器，我們可以定位到css樣式需要修飾的目標，常用的選擇器有：
<p id='p1' class='c1'>選我啊，選我啊</p>
標籤選擇器 p{color:red}
類選擇器 .c1{color:red}
ID選擇器 #p1{color:red}
組合選擇器如果有多個類型選擇器使用同一種樣式p,.p1,#c1,h1,h2,h2{color:red}
僞元素選擇器 a:link{color:black}a:hover、a:active、a:visited

2、選擇器的優先級問題：

ID>類>標籤
<p id='p1' class='c1'>選我啊，選我啊</p>
#p1{color:red}
.c1{color:blue}
p{color:yellow}
同級時選擇離元素最近的一個
#p { color: red }
#p { color: #f60 }
執行顏色爲#f60的

四、常用的CSS屬性：

顏色屬性
顏色屬性表達方式有多種：
color：green
color：#ff6600
color：rgb（255,255,255）
color：rgba（255,255,255,1）

字體屬性
font-size 字體大小
font-family：font-family：微軟雅黑，serif，可以使用“，”隔開，以確保當字體不存在的時候直接使用下一個
font-weight：normal(默認值)、bold(粗)、bolder(更粗)、lighter(更細)

背景屬性
背景顏色 background-color
背景圖片 background-image
background-image:url(圖片路徑)，無背景圖片值爲none

背景重複 background-repeat
background-repeat：repeat/repeat-x/repeat-y/no-repeat
背景位置 background-position
橫向（left,center,right）縱向（top,center,bottom）：background-position:left top;
直接使用數值：background-position:30px 30px;

簡寫方式
background:背景顏色 url(圖像) 重複位置
background:#ff6600 url(images/bg,jpg) no-repeat top center

文本屬性
text-align 橫向排列
可選值爲left，center，right
line-height 文本行高
%基於字體大小的百分比行高
數值來設置固定值
text-indent 首行縮進
letter-spacing 字符間距
word-spacing
normal 默認
length設置具體的數值（可以設置負值）
inherit 繼承
direction：ltr/rtl/inherit
text-transform：capitalize(單詞首字母大寫)lowercase/uppercase/inherit

邊框屬性
border-style 邊框風格
border-bottom-style，border-top-style，border-left-style，border-right-style
屬性值
none無邊框/solid直線邊框/dashed虛線邊框/dotted點狀邊框/double雙線邊框
groove 凸槽邊框/ridge 壟狀邊框/inset inset邊框/outset outset邊框
inherit繼承
border-width 邊框寬度
border-top-width，border-top-width，border-left-width，border-right-width
屬性值：thin 細邊框/medium 中等邊框/thick 粗邊框/inherit繼承/px 固定值的邊框
border-color 邊框顏色
border-top-color，border-top-color，border-left-color，border-right-color
一個值：border-color：（上、下、左、右）；
兩個值：border-color：（上下）（左右）；
三個值：border-color:（上）（左、右）（下）;
四個值：border-color：（上）（右）（下）（左）;
簡寫方式：
border：solid 2px #f60

列表屬性

標記的類型:list-style-type
屬性值：none,disc（默認）,circle
標記的位置:list-style-position
inside列表項目標記放置在文本以內，且環繞文本根據標記對齊。
outside默認值。保持標記位於文本的左側。列表項目標記放置在文本以外，且環繞文本不根據標記對齊。
inherit規定應該從父元素繼承 list-style-position 屬性的值。
設置圖像列表標記:list-style-image
URL 圖像的路徑。
none 默認。無圖形被顯示。
inherit 規定應該從父元素繼承 list-style-image 屬性的值。
簡寫方式
list-style:square inside url('/images/a.jpg');

五、DIV與SPAN

DIV和SPAN在整個HTML標記中，沒有任何意義，他們的存在就是爲了應用CSS樣式;

DIV和span的區別在與， span是內聯元素，div是塊級元素。
<style type="text/css">
div{
background-color: green;
}
span
{
background-color: green;
}
</style>

<div>華信教育</div> 同時可以定義其寬度
<span>華信教育</span> 單獨定義其寬度，沒有效果

六、案例源代碼以及效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS應用</title>
		<style type="text/css">
			span{
				color: white;
				font-family: "微軟雅黑";
				font-weight: bolder;
				font-size: 20px;
			}
			
		</style>
	</head>
	<body bgcolor="black">
		<span >CSS應用入門</span>
		<span >第一行文字</span>
		<span >所有文字</span>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>列表樣式</title>
		<style type="text/css">
		ul{
			list-style-type: circle;
		}
		 ol li{
			list-style-image: url(img/1.png); 
			
			/*list-style-type: square;*/
		}
		</style>
	</head>
	<body>
		<ul>
			<li>計算機學院</li>
			<li>核科學學院</li>
			<li>數理學院</li>
		</ul>
		<ol>
			<li>語文</li>
			<li>數學</li>
			<li>英語</li>
		</ol>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>選擇器應用</title>
		<style type="text/css">
		/*元素選擇器*/
			span{
				color: white;
				font-family: "宋體";
				font-size: 50px;
				font-weight: bolder;
			}
			/*ID選擇器*/
			#span1{
				color: red;
				font-family:"微軟雅黑";
				font-size: 50px;
				font-weight: bolder;
			}
			/*類選擇器*/
			.span2{
				color: green;
				font-family:"楷體";
				font-size: 50px;
				font-weight: bolder;
			}
			/*組合選擇器*/
			p span{
				color:yellow;
				font-family:arial;
				font-size: 50px;
				font-weight: bolder;
			}
			
			a:hover{
				color:red;
			}
		</style>
	</head>
	<body >
		<span>這裏是文字</span><br />
		<span id="span1">第二段文字</span>
		<span class="span2">又來了一個</span>
		<p>
			<span>這裏是段落裏面的文字</span>
		</p>
		<p>
			<a href="http://www.taobao.com">訪問淘寶</a>
		</p>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>背景網頁</title>
		<style type="text/css">
			#imgdiv{
				background-image: url(head2.gif);
				width: 100%;
				height: 600px;
				background-repeat: no-repeat;
			}
			#imgdiv span{
				color:chartreuse;
				font-size: 30px;
				font-family: "微軟雅黑";
			}
		</style>
	</head>
	<body >
		<img src="head2.gif"/ height="300px;" height="300px;">
		<div id="imgdiv">
			<span>這是黃眼人</span>
		</div>
	</body>
</html>