CSS
簡(jiǎn)介：全稱,層疊樣式表，主要為HTML網(wǎng)頁(yè)添加美化的成分，處理HTML的各個(gè)標(biāo)簽的細(xì)節(jié)問(wèn)題。
-
引入方式：行內(nèi)樣式表，內(nèi)部樣式表，外部樣式表；
01——行內(nèi)樣式： <h1 style="color:red;font-size:111px;">CSS必須嵌入到HTML中，方可顯示其效果</h1> 02——內(nèi)部樣式 <head> h1{ color:green; font-size:99px } </head> 03——外部樣式（推薦） <link href="itcast.css" style="text/css" rel="stylesheet"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>css的引入方式</title>
<style type="text/css">
div{
font-size: 44px;
color: green;
}
</style>
<link href="../Css/out.css" style="text/css" rel="stylesheet"/>
</head>
<body>
<p style="font-size: 33px;color: red">十一快樂(lè)</p>
<p style="font-size: 35px;color: green;">十一快樂(lè)</p>
<div>元旦快樂(lè)</div>
<div>元旦快樂(lè)</div>
<div>元旦快樂(lè)</div>
<span>春節(jié)快樂(lè)</span>
<span>春節(jié)快樂(lè)</span>
<span>春節(jié)快樂(lè)</span>
<span>春節(jié)快樂(lè)</span>
<hr>
<h1>最大號(hào)標(biāo)題</h1>
</body>
CSS選擇器
定義：為一個(gè)或多個(gè)符合條件的標(biāo)簽統(tǒng)一添加屬性；
選擇器種類
01——標(biāo)簽選擇器 <h1>{}
02——類選擇器 .a{} class="a" 可以精確控制某個(gè)標(biāo)簽的樣式
03——ID選擇器 #name{} id="name"
04——組選擇器 h1,h2{}
05——父類選擇器 div h2{}
06——通用選擇器 *{}
07——偽類選擇器 根據(jù)用戶的動(dòng)作，顯示出標(biāo)簽的狀態(tài)，最常用的就是超鏈接
{
01——a:link 指值元素沒(méi)有被訪問(wèn)過(guò)的狀態(tài)
02——a:hover 指鼠標(biāo)經(jīng)過(guò)元素的狀態(tài)
03——a:active 指鼠標(biāo)按下激活元素的狀態(tài)
04——a:visited 指元素已經(jīng)訪問(wèn)的狀態(tài)
}
<style type="text/css">
/*標(biāo)簽選擇器*/
h1{
font-size: 88px;
color: yellow;
}
/*類選擇器，通過(guò)class來(lái)調(diào)用*/
.a{
color: blue;
}
.b{
color: black;
}
/*ID選擇器，通過(guò)ID來(lái)調(diào)用*/
#TYPE{
color: aqua;
}
/*組選擇器，定義一組標(biāo)簽的屬性*/
h2,h3{
color: fuchsia;
}/*父類選擇器 可以為子類選擇屬性*/
div h4{
color: maroon;
}
/*通用選擇器 為body內(nèi)的所有便簽統(tǒng)一選定屬性*/
*{
color: olive;
}
</style>
</head>
<body>
<h1>英國(guó)脫歐</h1>
<h1 class="a">美國(guó)被罰</h1>
<h1 class="b">中國(guó)得勝</h1>
<h1 id = "TYPE">小日本被操了</h1>
<h2>人民幣降息</h2>
<h3>人民幣降息</h3>
<div>
<h4>臺(tái)灣回來(lái)吧</h4>
<h4>美國(guó)一起來(lái)吧</h4>
</div>
<div>哈哈</div>
<span>呵呵</span>
</body>
CSS屬性
- CSS屬性分為以下幾類：背景，文本，字體，列表，邊框（具體看文CSS檔）
CSS的盒子模型
CSS盒子模型常用來(lái)WEB頁(yè)面的布局
-
屬性：padding文字與邊框的間距，margin 盒子與盒子的間距
<title>盒子模型</title> <style type="text/css"> .a{ border-style:dashed; width: 200px; height: 200px; background-color: red; /* padding-left: 140px; padding-top: 140px; */ margin-left: 50px; margin-top: 50px; } </style></head>
<body><div class="a">哈哈</div> </body>
絕對(duì)定位和相對(duì)定位
- 絕對(duì)定位：參照于原點(diǎn)坐標(biāo)，對(duì)象可重疊；
- 相對(duì)定位：參照于上一個(gè)臨近標(biāo)簽的坐標(biāo)，對(duì)象不可重疊
<title>相對(duì)和絕對(duì)定位</title>
<style type="text/css">
/*
.a{
border-style: double;
width: 200px;
height: 200px;
background-color: red;
position: absolute;
left: 50px;
top: 50px;
}
.b{
border-style: double;
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
left: 60px;
top: 60px;
}
*/
.a{
border-style: double;
width: 200px;
height: 200px;
background-color: red;
background-image:url("");
position: relative;
}
.b{
border-style: double;
width: 100px;
height: 100px;
background-color: blue;
position: relative;
left: 205px;
}
.c{
border-style: double;
width: 100px;
height: 100px;
background-color: fuchsia;
position: relative;
left: 310px;
}
</style>
</head>
<body>
<div class="a">
</div>
<div class="b">
</div>
<div class="c">
</div>
</body>
JavaScript
- 簡(jiǎn)介：基于對(duì)象（通過(guò)內(nèi)置對(duì)象或者自定義對(duì)象來(lái)完成邏輯），事件驅(qū)動(dòng)（js代碼不會(huì)自己運(yùn)行，需要用戶或系統(tǒng)的時(shí)間觸發(fā)后方可運(yùn)行，），解釋性，腳本弱類型語(yǔ)言；
- 用途：HTML中動(dòng)態(tài)內(nèi)容的制作和實(shí)現(xiàn)。
嵌入網(wǎng)頁(yè)的方式
01——在HTML標(biāo)簽中定義事件時(shí)，直接書(shū)寫(xiě)JS腳本
相同的JS代碼，在不同的瀏覽器或者同一種瀏覽器的不同版本中，運(yùn)行效果可能不同
02——在網(wǎng)頁(yè)中嵌入JS腳本
DHTML手冊(cè)主要查詢某個(gè)標(biāo)簽有哪些屬性，事件等
03——在網(wǎng)頁(yè)中調(diào)用獨(dú)立JS文件（推薦）
04——一個(gè)網(wǎng)頁(yè)中，多個(gè)用<script>標(biāo)簽定義的JS片段，可以相互訪問(wèn)
<script type="text/javascript">
//函數(shù)
function fun() {
window.alert("我們?nèi)グ俣攘?)
window.open('07_position.html')
}
</script>
<script type="text/javascript" src="../JS/out.js"></script>
</head>
<body>
<input
type="button"
value="去百度"
style="font-size: 100px"
onclick="fun()"
/>
<input
type="button"
value="去新浪"
style="font-size: 100px"
onclick="goSina()"
常量與變量
1.字符串大小寫(xiě)敏感
2.提倡采用換行或空白符讓代碼優(yōu)美，增強(qiáng)可讀性
3.JavaScript中以換行符做為語(yǔ)句的結(jié)束，建議一行只寫(xiě)一條語(yǔ)句，并用分號(hào)結(jié)束
4.變量以字母，字?jǐn)?shù)，下畫(huà)線，美元符號(hào)開(kāi)頭，不能以數(shù)字開(kāi)頭，不要使用關(guān)鍵字或保留字
5.變量分全局變量和局部變量，變量可以先聲明，后使用，也可以直接使用無(wú)需聲明（方法外的變量為全局變量，方法內(nèi)的變量叫局部變量）
<body>
<script type="text/javascript">
function sayHi(userName) {
//通過(guò)報(bào)警框顯示信息
window.alert(userName+"你好！！！");
}
sayHi("昭君");
</script>
<script type="text/javascript">
function a(num) {
var num = 10;
window.alert(num);
}
</script>
<script type="text/javascript">
var num = 100;
a(100);
window.alert(num)
</script>
</body>
數(shù)據(jù)類型
- Js的數(shù)據(jù)類型：基本數(shù)據(jù)類型：number（var）,boolean(0為假，非零為真),string;
- 特殊類型：null,undefind;
- 復(fù)合類型:數(shù)組，函數(shù)，對(duì)象；
<body>
<script type="text/javascript">
var num1 = 100;
var num2 = 0111;
var num3 = 0x13456;
//用js在瀏覽器的文檔區(qū)域中顯示數(shù)據(jù)
//documen表示瀏覽器中的文檔區(qū)域
window.document.write(num1+"<br/>");
window.document.write(num2+"<br/>");
window.document.write(num3+"<br/>");
</script>
</body>
<body>
<script type="text/javascript">
window.document.write("大'家'好");
window.alert("大家好\n我叫林培拔")
window.document.write('\u2605');
</script>
<body>
<script type="text/javascript">
function show(age) {
if(age<=16){
return "未成年";
}else{
return "成年了！"
}
}
</script>
<script type="text/javascript">
var msg = show(22);
window.alert(msg);
</script>
</body>
額外內(nèi)容
Uri 指web和非web的資源標(biāo)識(shí)符
Url:指web的資源標(biāo)識(shí)符
規(guī)定：:GET<=1KB
GET:這個(gè)方式提交數(shù)據(jù)是將數(shù)據(jù)編碼，添加在URL后面，發(fā)給服務(wù)器
POST:通過(guò)IO流的方式將數(shù)據(jù)傳到服務(wù)器
UTF-8 ：全世界所有文字的編碼和解碼方式，推薦用，漢字3字節(jié)，英文2字節(jié)
Iso8859-1:英語(yǔ)語(yǔ)系為主的編碼和解碼方式
GB2312：簡(jiǎn)體常用漢字編碼和解碼方式
GBK：簡(jiǎn)體或不常用常用漢字編碼和解碼方式
黑馬資源
三、CSS和HTML的結(jié)合方式
CSS代碼理論上位置是任意的，但通常寫(xiě)在style標(biāo)簽里
CSS和HTML的結(jié)合方式有3種：
a. 行級(jí)樣式表:采用style屬性,范圍只針對(duì)此標(biāo)簽適用
<div style = "border:1px solid red ;">大家好</div>
b. 內(nèi)嵌樣式表:采用<style>標(biāo)簽完成。范圍針對(duì)此頁(yè)面
c. 外部樣式表: 采用建立樣式表文件。針對(duì)多個(gè)頁(yè)面.
引入樣式表文件的方式:
1):采用<link>標(biāo)簽
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import，必須寫(xiě)在<style>標(biāo)簽中，并且必須是第一句
eg: @import url(a.css) ;
兩種引入方式的區(qū)別：
外部樣式表中不能寫(xiě)<link>標(biāo)簽,但是可以寫(xiě)import語(yǔ)句
四、CSS選擇器
選擇器分為兩大類:
1.基本選擇器
a.標(biāo)簽選擇器:指的就是選擇器的名字代表html頁(yè)面上的標(biāo)簽
p{
color:red ;
border:1px dashed green;
}
b.類選擇器：規(guī)定用圓點(diǎn).來(lái)定義
優(yōu)點(diǎn)：靈活
eg: .one{background-color:#ff0099; }
c. ID選擇器：規(guī)定用#來(lái)定義
eg: #one{cursor:hand; }
區(qū)別：標(biāo)簽選擇器針對(duì)的是頁(yè)面上的一類標(biāo)簽.
類選擇器可以供多種標(biāo)簽使用.
ID選擇器是值供特定的標(biāo)簽(一個(gè)). ID是此標(biāo)簽在此頁(yè)面上的唯一標(biāo)識(shí)。
d:通用選擇器： 用*定義,代表頁(yè)面上的所有標(biāo)簽。
*{
font-size:30px;
margin-left:0px;
margin-top:0px;
}
2.擴(kuò)展選擇器
a. 組合選擇器:采用逗號(hào)隔開(kāi)
eg: p,h1,h2,.one,#two{color:red ; }
b. 關(guān)聯(lián)選擇器(后代選擇器): 采用空格隔開(kāi)
eg: h4 span i{color:red ; }
表示h4標(biāo)簽中的span標(biāo)簽中的i標(biāo)簽的樣式
h4和span和i標(biāo)簽不一定是緊挨著的。
c. 偽類選擇器
1) :靜態(tài)偽類：規(guī)定是用:來(lái)定義.只有兩個(gè).只能用于超鏈接.
:link表示超鏈接點(diǎn)擊之前的顏色
:visited表示鏈接點(diǎn)擊之后的顏色
eg:a:link{color:red ;}
a:visited{color:yellow;}
注意： a:link{}定義的樣式針對(duì)所有的寫(xiě)了href屬性的超鏈接(不包括錨)
a{}定義的樣式針對(duì)所有的超鏈接(包括錨)
2) :動(dòng)態(tài)偽類 : 針對(duì)所有的標(biāo)簽都適用
:hover : 是移動(dòng)到某個(gè)標(biāo)簽上的時(shí)候
:focus : 是某個(gè)標(biāo)簽獲得焦點(diǎn)的時(shí)候
:active : 點(diǎn)擊某個(gè)標(biāo)簽沒(méi)有放松鼠標(biāo)時(shí)
eg: label:hover{color:#00ff00; }
input:focus{
background-color:#ff9999;
border:1px solid red;
}
a:active{
color:blue;
}
五、CSS各種選擇器的沖突(掌握)
CSS樣式的沖突:
1.ID選擇器 > 類選擇器 > 標(biāo)簽選擇器
2.行級(jí)樣式表 > 內(nèi)嵌樣式表 > 外部樣式表
外部樣式表的ID選擇器 > 內(nèi)嵌樣式表的標(biāo)簽選擇器
原則： 就近原則
六、CSS的各種屬性(掌握)
? CSS中尺度單位的介紹
CSS的單位:
a. 絕對(duì)單位 1in=2.54cm=25.4mm=72pt=6pc , pt是點(diǎn)或者磅，pc是派卡
b. 相對(duì)單位：px, em(印刷單位相當(dāng)于12個(gè)點(diǎn)), %(相對(duì)周圍的文字)
*字體設(shè)置
p{
font-size:50px; /*字體大小*/
font-style:italic ; /*斜體*/
font-weight:bold; /*粗體*/
font-family:幼圓; /*字體類型*/
font-variant:small-caps; /*小寫(xiě)變大寫(xiě)*/
}
*文本設(shè)置
p{
letter-spacing:0.5cm ; /*字母間距*/
word-spacing:1cm; /*單詞間距*/
text-align:center; /*在所包含容器的中間*/
text-decoration:overline; /*字體修飾 underline下劃線 line-through中劃線 overline上劃線*/
text-transform:lowercase; /*單詞字體大小寫(xiě)*/
color:red ;
}
*背景設(shè)置
body{
background-color:#ff99ff ; /*背景顏色*/
background-image:url(images/2.gif) ; /*背景圖片*/
background-repeat: no-repeat; /*no-repeat不要平鋪，repeat-x,橫向平鋪，repeat-y 縱向平鋪*/
background-position:center right; /*背景位置*/
background-attachment: scroll ; /*背景的移動(dòng) ,fixed跟著滾動(dòng)條一起移動(dòng)，scroll 不動(dòng)*/
}
*列表設(shè)置
ul li{
list-style:none; /*列表前樣式*/
list-style-image:url(images/2.gif) ; /*列表項(xiàng)前圖片*/
margin-left:80px;
}
*盒子模型(border margin padding)
padding:是內(nèi)容到邊的距離
border: 是邊的粗細(xì)
margin:是控件到控件的距離
*定位設(shè)置(position,float,clear,z-index)
#d{
position: absolute; /*
1.絕對(duì)定位: 定義橫縱坐標(biāo) .脫離了本身的順序流
2.相對(duì)定位: 相對(duì)的是自己在順序流中原來(lái)的位置
*/
left:100px; /*橫坐標(biāo)*/
top:100px; /*縱坐標(biāo)*/
border:1px solid red ;
width:100px;
height:100px;
background-color:#ff66ff;
}
#d1{
position: relative; /*相對(duì)位置*/
left:100px;
top:100px;
border:1px solid green ;
width:100px;
height:100px;
background-color:#339900;
}
span{
position: relative;
left:20px;
top:20px;
}
z-index:值任意，值越大離我們?cè)浇? float : 浮動(dòng)
overflow: 超出范圍怎么辦