day02 css+js
CSS：
Cascading Style Sheets 層疊樣式表javascript
做用：一、增強htmlcss
二、將顯示與修飾進行分離html
CSS的增強：
內聯樣式表：java
<div style="font-size:200px"> helloworld! </div>
內部樣式表：head標籤中有子標籤瀏覽器
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
div{
font-size:100px;
}
</style>
</head>
<body>
<div>
helloworld!
</div>
</body>
</html>
外部樣式表：單獨的、、、、字體
div{
font-size:50px;
}
<!DOCTYPE html> <html> <head> <title>demo.html</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <div> helloworld! </div> </body> </html>
.：指的是當前目錄url
..：向上一個目錄spa
樣式表的優先級：就近原則code
外部導入（瞭解）htm
<style type="text/css"> @import "demo.css" </style>
爲何只是瞭解
(1)好多瀏覽器不支持
(2)先加載文本信息，最後加載樣式，客戶體驗度很差
(3)js不能操做import導入進來的樣式
選擇器：
id選擇器（加#號）
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
#myid{
color:red;
}
</style>
</head>
<body>
<div id="myid">
helloworld!
</div>
</body>
</html>
class選擇器（加.）
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
.myclass{
color:blue;
}
</style>
</head>
<body>
<div class="myclass">
helloworld!
</div>
</body>
</html>
標籤（元素）選擇器
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
div{
color:yellow;
}
</style>
</head>
<body>
<div>
helloworld!
</div>
</body>
</html>
屬性選擇器
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
input[type="text"]{
border:1px solid red;
}
input[type="password"]{
border:1px solid blue;
}
</style>
</head>
<body>
<input type="text"><br/>
<input type="password">
</body>
</html>
僞類：
在原有的修飾上在添加新的修飾。//只能是a標籤（超連接標籤）。
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
a:link{color:red} <!--沒有任何操做的樣式-->
a:visited{color:blue} <!--點擊之後的樣式-->
a:hover{color:yellow} <!--鼠標放上去的樣式-->
a:active{color:green} <!--按住鼠標的樣式-->
</style>
</head>
<body>
<a href="#">click me!</a>
</body>
</html>
字體屬性
font-style: italic; /*斜體 */
font-family: "宋體";
文本屬性：
border:文本框框
letter-spacing: 字符與字符間距
word-spacing: 詞與詞之間的距離
背景：
background-color：背景顏色
background-image：url(1.gif)背景圖片
background-repeat:repeat-x;repeat-y;no-repeat; ：重複
background-size:cover 拉伸
列表：
ul li{
list-style-type:none;//square;//列表項的符號
list-style-image:url(1.gif); //列表項的符號用圖片顯示
}
表格：
border-collapse：collapse 合併內邊框和外邊框
border-spacing：5px 50px 若是一個值，兩個都是
兩個值，一個水平，一個垂直（x，y）
輪廓：
outline-color:
outline-width:
outline-style:
瞭解：
浮動：
float:right;
清除浮動：
clear
<!DOCTYPE html>
<html>
<head>
<title>demo.html</title>
<style type="text/css">
#mydiv{
border:1px solid red;
width:200px;
height:200px;
float:left;
}
#mydi{
border:1px solid blue;
width:400px;
height:200px;
clear:left;
}
</style>
</head>
<body>
<div id="mydiv"></div>
<div id="mydi"></div>
</body>
</html>
小手的效果
style="cursor:pointer "
定位：
position定位
相對定位：relative 相對於本身 （看本身和邊邊的距離）
絕對定位：absolute 相對於父標籤（看和父標籤的相對位置）
.mycl{
border:1px solid blue;
width:250px;
height:250px;
position: absolute;
top:50px;
盒子模型
內邊距（padding）
padding-left:左變大（氣球打氣）
padding:100px;上右下左 內邊距的距離
外邊距(保護的光圈,你必須離我多遠，超過這個距離，我就離你遠一點)
margin-left:
邊框
border
border-top
border-top-style ： double（兩條線） solid（實線）
border-right-style
border-bottom-style
border-left-style
border-top-color
border-right-color
border-bottom-color
border-left-color
javascript（js）:
一種腳本語言（不用編譯）。
插入到html中的腳本語言，瀏覽器能夠直接解析解釋。
做用：
一、表單驗證
二、能夠操做html的屬性或者css的樣式。
三、能夠操做html標籤
js的核心組成：
ECMAScript：核心語法
BOM：Browser Object Model（瀏覽器對象模型）提供了一些操做瀏覽器的方法
DOM：Document Object Model（文檔對象模型）
js如何插入html
1、（在javaScript標籤中寫js代碼，能夠寫在html文件中的任意位置）
(1)
<script type="text/javascript"> alert(2); </script>
(2)
<script> alert(1); </script>
(3)
<script language="text/javascript"> alert(31); </script>
2、引入js文件（至關於css的外聯式）
<type="text/javascript" src="demo.js"></script>
3、寫在要用的js代碼中，至關於css的內聯式
<input type="button" value="點擊我 " onclick="javascript:alert(5)">
註釋（寫在javascript中的js代碼）：
//
/* */
執行順序：從上到下
問題：
（1）<script>標籤寫在html文件任意位置
（2）若是<script>標籤用src從外部引入js代碼，那麼咱們就不能在<script>開始標籤和結束標籤中間寫js代碼。
js的變量（js是一種弱類型語言）
var 變量的類型取決於變量的值
js的數據類型：
原始數據類型
number boolean string null undefined
引用數據類型
Number String Boolean Array Math Date RegExp
instanceof
（判斷引用數據類型的類型 若是是返回 true 若是不是返回false）
<script type="text/javascript">
var str = new String("ss");
alert(str instanceof String);
</script>
數據類型轉換
僞對象：number boolean string 是僞對象，能夠調用相應對象的屬性和方法。
String （number boolean 能夠直接調用 toString();）
<script type="text/javascript"> var nu = 23; var str = nu.toString(); alert(str); </script>
Number轉換
parseInt()
parseFloat()
強制類型轉換（瞭解）
轉換的時候 類數字字符串 轉換成數字， 不然轉換成NaN(not a number);
<script type="text/javascript"> var nu = true; var str = Number(true); alert(str); var nu = "123"; alert(parseInt(nu)); var num = "123.9"; alert(parseFloat(num)); </script>
強制類型轉換
<script type="text/javascript"> var s = 100; alert(Boolean(s)); alert(Number(s)); alert(String(s)); </script>
總結： Boolean： "" null undefined 0 NaN轉換成false 其他的是true。
Number：undefined 非類數字字符串 new Object（） 轉換成NaN .
String：能夠把全部的類型轉換成字符串。
基礎語法：
void ：防止一些不應返回的值返回。
<a href="javascript: window.open('demo1.html','new')">點擊</a> 錯誤寫法
<a href="javascript:void window.open('demo1.html','new')"> 點擊</a> 正確的寫法
加：減號不是字符串拼接（會把雙引號中的字符串類的數字自動轉換成Number,而後進行加減運算）
<script type="text/javascript"> var s = 100; var m = "29"; alert(s-m); </script>
最後輸出71
等號：
== != 只判斷值
=== !== 不只判斷值，還判斷類型
- 1. day02
- 2. Day02
- 3. py day02
- 4. JavaSE Day02
- 5. Spring day02
- 6. Spring-day02
- 7. rhcsa day02
- 8. javascript day02
- 9. day02下
- 10. springMVC-day02
- 更多相關文章...
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. day02
- 2. Day02
- 3. py day02
- 4. JavaSE Day02
- 5. Spring day02
- 6. Spring-day02
- 7. rhcsa day02
- 8. javascript day02
- 9. day02下
- 10. springMVC-day02