CSS的學習

一、CSS 概述(瞭解)

*.CSS ：Cascading Style Sheet 層疊樣式表

*.CSS ：作用就是給HTML頁面標籤添加各種樣式

*.爲什麼用CSS

HTML的缺陷：1. 不能夠適應多種設備

2. 要求瀏覽器必須智能化足夠龐大

3. 數據和顯示沒有分開

4. 功能不夠強大

CSS 優點：

1.使數據和顯示分開

2.降低網絡流量

3.使整個網站視覺效果一致

4.使開發效率提高了

二、CSS語法

p{color：red;}

選擇器{屬性名：屬性值 ;}

選擇器後一定是大括號。屬性名後必須用冒號隔開。屬性值後用分號。

屬性名和冒號之間最好不要有空格。

三、CSS和HTML的結合方式

CSS代碼理論上位置是任意的，但通常寫在style標籤裏

CSS和HTML的結合方式有3種：</head>前

a. 行級樣式表：採用style屬性,範圍只針對此標籤適用 <p style="color:red">你好</p>

<div style = "border:1px solid red ;">大家好</div>

b. 內嵌樣式表：採用<style>標籤完成。範圍針對此頁面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document</title>
</head>
	<style type="text/css">
		p{
			font-weight:bold;
			font-style:italic;
		}
	</style>
<body>
	<p>你好</p>
	<p>你好</p>
	<p>你好</p>
	<p>你好</p>
</body>
</html>

c. 外部樣式表: 採用建立樣式表文件。針對多個頁面。

引入樣式表文件的方式：<title>前

1):採用<link>標籤

eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>

2):採用import，必須寫在<style>標籤中，並且必須是第一句

eg: @import url(a.css) ;

兩種引入方式的區別：

外部樣式表中不能寫<link>標籤,但是可以寫import語句

四、CSS選擇器

選擇器分爲兩大類:

1.基本選擇器

a.標籤選擇器：指的就是選擇器的名字代表html頁面上的標籤選擇了頁面上的一類標籤

p{

color:red ;

border:1px dashed green;

}

p{
border:1px dashed green;
}
<p>啦啦啦</p>

b.類選擇器：規定用圓點.來定義

優點：靈活

eg: .one{background-color:#ff0099; }
.one{
border:1px dashed red;
}
<div class="one">萌萌噠</div>

c. ID選擇器：規定用#來定義

eg: #one{cursor:hand; }
#two{
border:1px solid blue;
}
<div id="two">萌萌噠</div>
區別：標籤選擇器針對的是頁面上的一類標籤.

類選擇器可以供多種標籤使用.

ID選擇器是值供特定的標籤(一個). ID是此標籤在此頁面上的唯一標識。

d:通用選擇器：用*定義,代表頁面上的所有標籤。

*{

font-size:30px;

margin-left:0px;

margin-top:0px;

}

通常用來去掉瀏覽器自己添加的margin pandding等，方便頁面佈局

基本選擇器示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
	<style type="text/css">
		.one{
			border:1px dashed red;
		}
		p{
			border:1px dashed green;
		}
		#two{
			border:1px solid blue;
		}
		*{
		padding:0px;
		margin:0px;
		color:#00FF00;
		}
	</style>
</head>

<body>
	<div class="one">萌萌噠</div>
	<div>萌萌噠</div>
	<div>萌萌噠</div>
	<div id="two">萌萌噠</div>
	<p>啦啦啦</p>
</body>
</html>

2.擴展選擇器

a. 組合選擇器:採用逗號隔開

eg: p,h1,h2,.one,#two{color:red ; }

b. 關聯選擇器(後代選擇器): 採用空格隔開

eg: h4 span i{color:red ; }

表示h4標籤中的span標籤中的i標籤的樣式

h4和span和i標籤不一定是緊挨着的。

c. 僞類選擇器

1) :靜態僞類：規定是用:來定義.只有兩個.只能用於超鏈接.

:link表示超鏈接點擊之前的顏色

:visited表示鏈接點擊之後的顏色

eg:a:link{color:red ;}

a:visited{color:yellow;}

注意： a:link{}定義的樣式針對所有的寫了href屬性的超鏈接(不包括錨)

a{}定義的樣式針對所有的超鏈接(包括錨)

2) :動態僞類 : 針對所有的標籤都適用

:hover : 是移動到某個標籤上的時候

:focus : 是某個標籤獲得焦點的時候

:active : 點擊某個標籤沒有放鬆鼠標時

eg: label:hover{color:#00ff00; }

input:focus{

background-color:#ff9999;

border:1px solid red;

}

a:active{

color:blue;

}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>擴展選擇器</title>
	<style type="text/css">
		div,p,h1,.one,#two{
			border:2px double blue;
		}
		h3 i .one{
			color:red;
		}
		a:link{
			color:red;
		}
		a:visited{
			color:blue;
		} 
		input:focus{
			border:2px solid #6633CC;
			color:#33FF00;
			background-color:#6633FF;
		}
		p:active{
			color:#FF0066;
		}
		label:hover{
			cursor:crosshair;
		}
		table{
			width:300px;
			height:300px;
			border:2px solid red;
			border-collapse:collapse;
		}
		
		td{
			border:2px solid blue;
		}
		
		tr:hover{
			background-color:green;
		}

	</style>
</head>	
<body>
	<div>你好</div>
	<p>劉德華</p>
	<h1>成龍</h1>
	<h4 class="one">林志玲</h4>
	<h3>北京<b>傳智<i>播<sup class="one">客</sup></i>黑馬</b>訓練營</h3>
	<i>北京</i><br />
	<a href="02-css的基本選擇器.html" name="b">網易</a><br />
	<a href="#b">啦啦啦</a><br />
	<input type="text" /><br />
	<label>北京，你好</label>
	<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

</body>
</html>

五、CSS各種選擇器的衝突(掌握)

CSS樣式的衝突:

1.ID選擇器 > 類選擇器 > 標籤選擇器（無論寫在內外）

2.行級樣式表 > 內嵌樣式表 > 外部樣式表

外部樣式表的ID選擇器 > 內嵌樣式表的標籤選擇器

原則：就近原則，外部樣式表指引入位置，內部指定義位置

引入多個類標籤 <h2 class="one two">哈哈</h2> 用空格隔開

六、CSS的各種屬性(掌握)

? CSS中尺度單位的介紹 CSS必須寫單位！！！！html默認一種單位：像素

CSS的單位:

a. 絕對單位 1in=2.54cm=25.4mm=72pt=6pc , pt是點或者磅，pc是派卡

b. 相對單位：px, em(印刷單位相當於12個點), %(相對周圍的文字) 後面的

1、*字體設置

p{

font-size:50px; /*字體大小*/

font-style:italic ; /*斜體*/

font-weight:bold; /*粗體*/

font-family:幼圓,華文彩雲; /*字體類型*/ 逗號隔開，一個一個找是否支持

font-variant:small-caps; /*小寫變大寫*/

}

font是總的。例如font:30px 華文彩雲;

2、*文本設置

p{

letter-spacing:0.5cm ; /*字母間距*/

word-spacing:1cm; /*單詞間距*/

text-align:center; /*在所包含容器的中間*/

text-decoration:overline; /*字體修飾 underline下劃線 line-through中劃線 overline上劃線*/

text-transform:lowercase; /*單詞字體大小寫*/ 每個單詞的首字母大寫 capitalize

color:red ;

}

3、*背景設置

body{

background-color:#ff99ff ; /*背景顏色*/

background-image:url(images/2.gif) ; /*背景圖片*/

background-repeat: no-repeat; /*no-repeat不要平鋪，repeat-x,橫向平鋪，repeat-y 縱向平鋪*/

background-position:right center; /*背景位置*/ 右中

background-attachment: scroll ; /*背景的移動 ,fixed跟着滾動條一起移動，scroll 不動*/

}

4、*列表設置

ul li{

list-style:none; /*列表前樣式*/ 啥都沒有

list-style-image:url(images/2.gif) ; /*列表項前圖片*/

margin-left:80px;

}

5、*盒子模型(border margin padding)

padding:是內容到邊的距離

border: 是邊的粗細

margin:是控件到控件的距離並列關係，而不是父子關係

如果給定兩個值，第一個是上下，第二個是左右 padding:20px 30px; 三個值的話，第一個是上，第二個是左右，第三個是下 padding:20px 40px 30px; 四個值，上右下左

6、*定位設置(position,float,clear,z-index)

順序流：所有的標籤初始排列順序就是順序流。

兩種情況標籤脫離順序流：

當我們把空間的位置設置爲絕對定位。
當我們設置空間的float屬性的時候。
脫離順序流的是一個平面，沒脫離順序流的是一個平面

#d{

position: absolute; /*

1.絕對定位: 定義橫縱座標 .脫離了本身的順序流原點位於父容器的左上角，向下爲正，向右爲正

2.相對定位: 相對的是自己在順序流中原來的位置左上角爲原點

*/

left:100px; /*橫座標*/

top:100px; /*縱座標*/

border:1px solid red ;

width:100px;

height:100px;

background-color:#ff66ff;

}

#d1{
position: relative; /*相對位置*/
left:100px;
top:100px;
border:1px solid green ;
width:100px;
height:100px;
background-color:#339900;
}

span{
position: relative;
left:20px;
top:20px;
}

定位屬性示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>定位屬性</title>
<style type="text/css">
	*{
		padding:0px;
		margin:0px;
	}
	#d{
		position:absolute;
		left:20px;
		top:20px;
		width:200px;
		height:200px;
		border:1px solid red;
	}
	#d1{
		position:relative;
		left:200px;
		width:200px;
		height:200px;
		border:1px solid red;
	}
</style>
</head>

<body>
	<div id="d">
		<p>你好</p>
	</div>
	<div id="d1">d1</div>
</body>
</html>

z-index:值任意，值越大離我們越近 z方向上，上下層關係實例：鼠標放在不同的導航文字上，浮現出不同的

float : 浮動打破順序流

overflow: 超出範圍怎麼辦 auto;加滾動條 hidden;多餘的隱藏 visible;適當調整大小使文字可見！！

鼠標樣式設置(cursor) pointer 手的形狀

七、濾鏡(瞭解)

CSS的註釋：

/* */

一、CSS 概述(瞭解)

二、CSS語法

三、CSS和HTML的結合方式

四、CSS選擇器

五、CSS各種選擇器的衝突(掌握)

六、CSS的各種屬性(掌握)

response、request對象-中文問題，web開發中的地址問題，生成驗證碼，表單獲取信息，url地址編碼，request的請求轉發

會話管理-cookie，session，禁用cookie的URL重寫，token的單態設計模式，異常拋出，UUID，MD5，base64編碼

JavaScript學習2-BOM

Javascript學習1

JSP技術-page，include指令，一個servlet不能既有字節流又有字符流，異常處理

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結