day02 css 和JavaScript
1.web网页标准
-
结构 :指的的是通过html代码编写 相当于我们家里的毛坯房
-
样式：指的的是通过css代码编写 相当于我们对房子进行装修
-
行为 ：指的的是通过JavaScript实现。相当于改变房子的样式。
2.css基本使用
1.在htmlhead标签里面加入 一个style标签。声明一个type属性type=text/css，声明之后可以改变html中标签样式 比如 p div。
<style type="text/css">
/* 在这个里面写css的代码 下改变div 标签的样式 */
语法构成：属性名和属性值之间用：表示 多个属性之间通过；分割
div{
width: 100px;
height: 100px;
background-color: blue;
}
p{
width: 200px;
height: 200px;
background-color: green;
}
</style>
2.样式写好之后，直接在body里面声明标签即可。3 css的基本选择器分类
-
标签名选择器：直接通过html的标签来声明 比如 p div
语法：直接使用html中标签名 + {} 大括号里面是声明属性 格式：属性名+属性值 p{ width: 200px; height: 200px; background-color: green; } -
类名选择器
语法： 通过 英文状态的.+名称 + { 大括号里面是声明属性 格式：属性名+属性值 } -
id选择器
语法：通过 # + 名称{ 大括号里面是声明属性 格式：属性名+属性值 }
4.html元素（标签）类型
分为3钟类型：
【1】行内元素：默认在一行显示，并且宽和高不起作用 span。
【2】块元素 ：默认每个元素独占一行。并且宽高起作用。div p。
【3】行内块元素：默认在一行显示。并且宽高起作用。input。
可以通过display属性转换元素的类型：
display: block; 转换为块元素
display: inline; 转换为行内元素
display: inline-block;转换为行内块元素。5 谷歌logo小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通过标签名选择器改变文字大小 */
span{
font-size: 150px;
}
/* 通过类名选择器改变样式 */
.one{
color: blue;
}
.two{
color: red;
}
.three{
color: yellow;
}
p{ font-size: 100px;
display: inline;
}
</style>
</head>
<body>
<!-- 第一种实现方式 -->
<span class="one">G</span>
<span class="two">O</span>
<span class="three">O</span>
<span class="one">G</span>
<span class="two">L</span>
<span class="three">E</span>
<!-- 第二种实现方式 用p -->
<hr>
<p class="one">G</p>
<p class="two">O</p>
<p class="three">O</p>
<p class="one">G</p>
<p class="two">L</p>
<p class="three">E</p>
</body>
</html>6.css特性
-
继承性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: blue; } /* p会继承div的宽 */ p{ background-color: red; } span{ background-color: green; } </style> </head> <body> <div> <p>div下的p</p> <span>div下的span</span> </div> </body> </html> -
覆盖性
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; } p{ background-color: red; } /* 第二个p颜色会覆盖第一个p设置颜色 */ p{ background-color: yellow; } </style> </head> <body> <div> <p>aaa</p> </div> </body> </html> -
优先级
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 通过标签名选择器 改变样式 */ div{ width: 100px; height: 100px; background-color: red; } /* 在声明一个类选择器 */ .test1{ width: 200px; height: 200px; background-color: yellow; } /* 在声明一个id选择器 */ #test2{ width: 300px; height: 300px; background-color: blue; } </style> </head> <body> <div id="test2" class="test1"> 中国 </div> </body> </html> 总结：id选择器 > 类选择器 > 标签名选择器。7 复合选择器：
1.为什么有了普通选择器还需要复合选择器？ 因为我们在做网页的时候。标签非常的都，如果给每个标签都设置样式，非常的麻烦。所以可以通过复合选择器来改变样式。 2.后代选择器 语法：祖先元素 后代元素 后代元素{ 属性和属性值 } 3.并列选择器 语法：选择器1，选择器2{ 属性和属性值 }8.css文件存储位置
-
行内式
<p style="width: 100px; height:100px; background-color: red;">中国</p> -
内嵌式
<style type="text/css"> /* 把行内元素转换为块级元素 */ span{ width: 100px; height: 100px; background-color: red; display: inline-block; } </style> -
外链式
1.要先在css目录下 声明css文件 2.在html中通过link标签引入外部的css文件 <link rel="stylesheet" type="text/css" href="css/test.css"/>
-
9.内边距和外边距
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.one{
width: 200px;
height: 200px;
background-color: red;
padding-left: 20px;
padding-top: 20px;
}
.two{
width: 200px;
height: 200px;
background-color: green;
/* margin-top: 20px;
margin-left: 20px; */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="one">11111111</div>
<div class="two">2222222</div>
</body>
</html>
总结：内边距 padding
外边距 margin10.a伪类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* 通过标签名选择器去改 */
a{
text-decoration:none ;
}
/* 代表超链接默认颜色 */
a:link{
color: #000000;
}
/* 代表鼠标悬停到超链接上的颜色 */
a:hover{
color: #0000FF;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
11.js代码和html代码结合的两种方式：
1.<!-- <script type="text/javascript">
// 弹出一个对话框
alert('中国')
</script> -->
2.在js的目录下声明js文件
<script type="text/javascript" src="js/test1.js"></script>12 js的变量
C语言 java语言 python语言
去饭店点餐 宫保鸡丁
面向过程： 自己去菜市场买菜 （自己买食材） 择菜 洗菜 放油 放调料。。。。。吃
面向对象： 我直接告诉服务员点一个宫保鸡丁。
变更的声明：
语法： var 变量名 = 变量值
变量的类型：数值型 字符串（‘’ “”） Boolean（true，false） 对象13js中运算符
1.算术运算符 + - * / % ++ --
2.赋值运算符 = += -= *+ /= %=
3.比较运算符 ==（等值） ===（等型等值）> >= < <= ?
4.逻辑运算符 && || !
5.类型判断 typeof返回变量的数据类型 instanceof判断是否是实例14.if语句
var age = 40
// if单分支
// if(age < 18){
// alert('未成年')
// }else{
// alert('已经成年')
// }
// if的多分支
if(age < 18){
alert('未成年')
}else if(age>18 && age<=30){
alert('青年')
}else if(age>30 && age<=50){
alert('中年')
}else{
alert('老年')
}15.switch语句
// 通过switch语句模拟游戏关卡
var game = 2
switch (game){
case 1:
alert('简单')
break;
case 2:
alert('一般')
break;
case 3:
alert('困难')
break;
default:
alert('无数据')
break;
}16.while循环的使用
//便利1到10之间所有的整数
//求1-100的和
// var n = 1
// while(n <= 10){
// console.log(n)
// //需要动态的改变n的值 否则就形成死循环
// n++
// }
var n = 1
var sum = 0
while(n<=100){
sum+=n
n++
}
alert(sum)
17.for循环语句
var sum = 0
for(var n=1;n<=100;n++){
sum+=n
}
alert(sum)18.函数的使用
// 函数作用:对代码的封装.完成一定的功能 计算器软件
//代表声明了一个函数
// function test1(){
// console.log('aaaa')
// }
//函数声明后 必须经过调用才执行
// test1()
// 代表计算器相加的函数
function add(x,y){
var result = x + y
console.log(result)
}
add(100,100)19.js中事件类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function test(){
console.log('事件执行了')
}
</script>
</head>
<!-- 1 当body的内容加载完毕就会产生一个事件 onload -->
<body onload="test()">
<!-- 演示js中常见的事件 -->
<!-- 2单机事件 -->
<button type="button" onclick="test()">测试按钮</button>
<!--3.失去焦点的事件 -->
用户名 <input type="text" onblur="test()" />
<!-- 4.当内容改变产生事件 -->
学历:
<select onchange="test()">
<option>本科</option>
<option>大专</option>
<option>小学</option>
</select>
<!-- 5 提交表单的事件 -->
<form onsubmit="test()">
<input type="submit"/>
</form>
</body>
</html>
总结：
事件注册2钟方式: 静态注册和动态注册
(声明：本文章为智酷道捷学习笔记，仅供学习，禁止商用，如有侵权，请联系删除)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
