CSS概述
层叠样式表
作用：美化页面
层叠样式：对同一个标签添加多个不同的样式，所有样式会叠加在一起展示出来的效果
HTML引入CSS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>css&js</title>
<style>
span {
font-size: 50px;
color: red;
border: 1px solid skyblue;
}
</style>
</head>
<body>
<span>中国加加油</span><br>
<span>武汉加油</span><br>
<span>中国强大</span><br>
</body>
</html>
优点：
- 实现了样式和内容分离，提高了显示的效果和复用性
- 降低耦合性，分工更加明确，CSS专门用于美化，HTML专门用于结构搭建
三种方式：
1、行内样式：所有的标签都有一个共同的属性 style
语法：<h1 style="css样式"></h1>
2、内部样式：使用style
语法：<style type="text/css"></style> type="text/css"告知浏览器把解析器切换为css类型 作业范围是当前页面
3、外部样式：使用link标签引入外部css样式
语法：<link rel="stylesheet" href="外部css文件地址"> rel="stylesheet"告知浏览器把解析器切换为css类型
作用范围：所有引入的html页面
css样式优先级：就近原则 浏览器的执行顺序自上而下
style标签可以在html的任意位置，推荐放在head头部
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--外部样式-->
<link rel="stylesheet" href="../css/mycss.css">
<!--内部样式-->
<style type="text/css">
h1{
color: darkgreen;
}
</style>
</head>
<body>
<!--
1、行内样式：所有的标签都有一个共同的属性 style
语法：<h1 style="css样式"></h1>
2、内部样式：使用style
语法：<style type="text/css"></style> type="text/css"告知浏览器把解析器切换为css类型 作业范围是当前页面
3、外部样式：使用link标签引入外部css样式
语法：<link rel="stylesheet" href="外部css文件地址"> rel="stylesheet"告知浏览器把解析器切换为css类型
作用范围：所有引入的html页面
css样式优先级：就近原则 浏览器的执行顺序自上而下
style标签可以在html的任意位置，推荐放在head头部
-->
<h1 style="color: red">行内样式</h1>
<h1 > 内部样式</h1>
<h1>外部样式</h1>
</body>
</html>
CSS书写规范
基本选择器
选择器：作用选定一组特有的标签
1、标签 标签名{css样式} 特点：此名称的所有标签受到控制
2、类选择器： .class{css样式}
3、id选择器 特点 具有唯一性 #id{css样式}
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
}
.famle {
color: green;
}
.male {
color: antiquewhite;
}
.male{
font-weight: bold;/*加粗*/
}
#boss{
font-weight: bold;/*加粗*/
}
</style>
</head>
<body>
<!--
选择器：作用选定一组特有的标签
1、标签 标签名{css样式} 特点：此名称的所有标签受到控制
2、类选择器： .class{css样式}
3、id选择器 特点 具有唯一性 #id{css样式}
-->
</body>
<span class="famle">黑寡妇</span>
<span class="famle">娜扎</span>
<span class="famle">热巴</span>
<span class="male">灭霸</span>
<span id="boss">英雄</span>
</html>
扩展选择器
1、并集 选择器1，选择器2......{css样式}
2、后代 父 子（孙子）{css样式}
3、父子 父>子{css样式}
4、属性 选择器[属性名="属性值"]{css样式}
CSS常用样式
字体和文本属性
渲染需求
1.所有文字绿色
2.所有文字大小20px
3.所有行高40px
4.所有字体加粗
5.所有字体楷体
6.第一句文字倾斜
7.第一句隐藏下划线
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>05-字体和文本属性</title>
<style>
div p{
color: green;/*所有文字绿色*/
font-size: 20px;/*所有文字大小20px*/
line-height: 40px;/*所有行高40px*/
font-weight: bold;/*所有字体加粗*/
font-family: 楷体;/*所有字体楷体*/
}
div p a{
font-style: italic;/*第一句文字倾斜*/
text-decoration: none;/*第一句隐藏下划线*/
}
</style>
</head>
<body>
<div>
<p>
<a href="#"> 学习的误区：</a><br/>
眼睛：看了一遍记住了<br/>
耳朵：听了一遍明白了<br/>
脑子：想了一遍搞懂了<br/>
手：你们会个屁！^_^ <br>
</p>
</div>
</body>
</html>
背景属性
背景属性
background-color：背景色
background-image：背景图片
取值：url('图片地址')
background-repeat：平铺方式
取值：repeat（水平和垂直）、repeat-x（水平）、repeat-y（垂直）、no-repeat（不平铺）
简写方式
background:color image repeat;
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>07-背景属性</title>
<style>
/*body{
background-color: #3b1f1f;
background-image: url("../img/girl.jpg");
background-repeat: no-repeat;
}*/
body{
background: #3b1f1f url("../img/girl.jpg") no-repeat;
}
</style>
</head>
<body>
<h1 style="color: white">我是标题</h1>
</body>
</html>
显示属性
显示属性：display
1）inline：将标签改为行内元素
2）block：将标签改为块级元素
3）none：隐藏此标签
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>08-显示属性</title>
<style>
span,div{
border: 1px solid red;
}
span{
display: block;/*块级元素*/
}
div{
display: inline;/*行内元素*/
}
ul li{
display: inline;/**/
}
</style>
</head>
<body>
<span>内联标签span1</span>
<span>内联标签span2</span>
<span>内联标签span3</span>
<div>块级标签div1</div>
<div>块级标签div2</div>
<div style="display: none">块级标签div3</div>
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
</ul>
</body>
</html>
浮动属性
浮动：float
取值：left、right
清除浮动：clear
取值：both
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-浮动属性</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
text-align: center;
}
#long{
float: left;
}
#hu{
float: right;
}
</style>
</head>
<body>
<div class="box" id="long">左青龙</div>
<div class="box" id="hu">右白虎</div>
<div style="clear: both"></div>
<div class="box">最后砍成米老鼠</div>
</body>
</html>
盒子模型
盒子模型
1）宽和高
width：300px
height：300px
2）边框
border：宽度 类型 颜色
类型：solid 单线、double 双线、dashed 虚线
3）内边距
padding-top 上
padding-right 右
padding-bottom 下
padding-left 左
简写：padding: 上右下左
4）外边距
margin-top 上
margin-right 右
margin-bottom 下
margin-left 左
简写：margin：上右下左
特殊：margin:auto 水平居中
5）盒子类型
box-sizing：content-box（默认） 盒子大小（宽和高+内边距+边框） ，计算起来就比较麻烦
box-sizing：border-box 盒子大小（宽和高）包含（内边距和边框），计算方法就比较简单了
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>10-盒子模型</title>
<style>
.box {
width: 300px;
height: 300px;
border: 10px dashed skyblue;
padding: 10px;
margin: auto;
margin-top: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">
<img src="../img/girl.jpg" width="260px" height="260px" alt="">
</div>
</body>
</html>
JavaScript
概述
作用：网页交互
组成：
1.ECMAScript 基础语法
2.BOM(Brower Object Model) 浏览器对象模型
3.DOM(Document Object Model) 文档对象模型
特点：
- js源码不需要编译，浏览器可以直接解释运行
- js是弱类型语言，js变量声明不需要指明类型
HTML引入JS
HTML引入js的二种方式
1）内部脚本
语法：<script type="text/javascript">js代码</script>
2）外部脚本
语法：<script src="外部js文件地址"></script>
补充：script标签可以在页面任意位置，推荐放在body尾部... 页面顺序：css、html、js
经验值：
1）script标签不能自闭合
2）如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码...
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入JS</title>
</head>
<body>
<script type="text/javascript">
document.write('<h1>我是内部脚本</h1>');
</script>
<script src="../js/myjs.js">
document.write('哈哈，这是一个错误的示范，我不会被加载.....')
</script>
</body>
</html>
JS三种输出方式
JS三种输出方式
1. 浏览器弹框输出字符
2. 输出html内容到页面
3. 输出到浏览器控制台
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-JS三种输出方式</title>
</head>
<body>
<script>
// 1. 浏览器弹框输出字符
alert('浏览器弹框输出字符');
// 2. 输出html内容到页面
document.write('输出html内容到页面')
// 3. 输出到浏览器控制台
console.log('输出到浏览器控制台')
</script>
</body>
</html>
JS变量声明
js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-JS变量声明</title>
</head>
<body>
<!--
js变量的声明
es6之后 开始推出 let 声明变量，const 声明常量
-->
<script>
// 字符串：String str = "用心做教育";
let str = "用心做教育";
console.log(str);
// 整型：int i = 1314;
let i = 1314;
console.log(i);
// 浮点型：double d = 521.1314;
let d = 521.1314;
console.log(d);
// 常量：final Integer PI = 3.14;
const PI =3.14;
console.log(PI);
// 布尔：boolean b = true;
let b = true;
console.log(b);
// 感知弱类型语言不注重变量的定义
let a; // 声明变量，但未定义类型
console.log(a); // undefined
a='hello';
console.log(a);
a=123;
console.log(a);
a=true;
console.log(a);
a=new Object();
console.log(a);
</script>
</body>
</html>
JS数据类型
基本数据类型
1.number 数值（整型、浮点）
2.string 字符串 （单引号、双引号） 在js中没有字符的概念，都是字符串...
3.boolean 布尔（true、false）
4.undefined 未定义；例如：let a;
引用数据类型
let obj = new Object();
let date = new Date();
判断变量的数据类型
语法：typeof 变量名
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-JS数据类型</title>
</head>
<body>
<script>
let a; // 声明变量，但未定义类型
console.log(typeof a); // undefined
a='c';
console.log(typeof a); // string
a=123.321;
console.log(typeof a); // number
a=true;
console.log(typeof a);//boolean
a=new Object();
console.log(typeof a); // object
// 创建一个学生对象
let stu = new Object();
stu.id=1;
stu.name='马尔扎哈';
stu.age=18;
console.log(stu);
</script>
</body>
</html>
