CSS和JavaScript
1. CSS样式
1、CSS的概述
A.CSS的含义:
"层叠样式表"
B.CSS的作用:
a.美化HTML页面
b.解耦合,将HTML和CSS部分分离开来,多个程序员分工协作.一个写HTML.另一个写CSS
c.可以拓展HTML的标签的功能,例如:之前的字体大小有上限,使用CSS无上限。
C.三种静态网页技术的含义
a.HTML : 用于写HTML标签。例如: 建房子的毛坯房就是HTML
b.CSS :用于美化HTML界面。例如: 房子需要装修。
c.JavaScript : 用于制作特效,校验表格等效果。例如:房子的特效。智能家电,智能家居
2、CSS引入的三种方式
A.内联样式
a.作用域:
在当前的标签上面
b.格式:
<font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font>
B.内部样式
a.作用域:
在当前的HTML页面上面
b.格式:
<head>
<meta charset="UTF-8">
<title>CSS入门</title>
<style type="text/css">
font{
font-size: 66px;
color: #0000FF
}
</style>
</head>
<body>
<font style="font-size: 88px;color: #FF9900"> 你是真的不错!心有多大,字有多大 </font>
<br><br>
<font> 牛逼啊 </font>
<br><br>
<font> 我的哥就是你哥 倪歌(你哥) </font>
</body>
C.外部样式
a.作用域:
只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件)
b.格式:
<!-- HTML 代码 -->
<head>
<meta charset="UTF-8">
<title>CSS入门</title>
<link rel="stylesheet" href="css/a.css">
</head>
<body>
<font> 牛逼啊 </font>
<br><br>
<font> 我的哥就是你哥 倪歌(你哥) </font>
</body>
<!-- CSS 代码 -->
font{
font-size: 44px;
color: #FF0000
}
3、三种基本的选择器
A.ID选择器
a.含义:
(单独针对于某个HTML标签)"在一个HTML当中id要唯一"
b.语法:
#id的名称{}
B.类选择器
a.含义:
(设置同一个类的,可以是不同的标签类型)
b.语法:
.class的名称{ }
C.元素选择器(设置的是同一类的标签)
div{}
4、常见属性
border: #FF9900 1px solid;
height: 120px;
width: 480px;
float: left;
text-align:center;
line-height:80px;
font-size: x-large;
color: #0000FF;
5、盒子模型
A.外边距: margin 左上右下
B.内边距: padding 左上右下
注意事项:
内边距会影响原始的尺寸大小
可以设置 *{ box-sizing: border-box;}
2.JavaScript 基础语法
1、JavaScript 的概述
A.Java和JavaScript的关系
没有半毛线的关系. "雷锋"和"雷峰塔"
B.JavaScript的分类
a. ECMAScript JavaScript的标准语法
b. BOM 浏览器对象模型 Browser
c. DOM 文档对象模型 Document
2、JavaScript和HTML结合
A.内部定义(可以写在HTML的任意位置,建议大家写在</body>的前面)
<script>
alert("HelloWorld");
</script>
B.外部引入
<!--src里面是js文件的路径-->
<script src="../javascript/a.js"></script>
3、注释
A.单行注释
B.多行注释
4、数据类型
A.原始数据(基本数据类型)
a. number (整数,小数,NaN not a number)
b. string
c. boolean
d. null
e. undefined 未定义
B.引用数据类型(对象)
5、变量的使用
A.定义方式
var 变量名称 = 变量值;
B.了解语法(写到HTML页面当中)
document.write("<br>");
C.判断数据类型的操作
a.语法格式
typeof(变量名称) 返回值就是数据类型
b.注意事项
null 的typeof函数的返回值结果是 object 类型,这是JavaScript的bug
6、一元运算符
A.运算符的种类:
++ 自增
-- 自减
+ (正号)
-(负号)
B.其他数据类型转换为number的规则
a.string字符串:
情况1: 字符串的字面值,都是数字,就可以转换number类型
情况2: 字符串的字面值,不全是数字,转换出来的是 NaN (not a number)
b.boolean类型
true 转换为 1
false 转换为 0
c.null 转换:
null 转换为 number 类型的时候是 0
d.undefined 转换
undefined 转换为 NaN (not a number)
7、比较运算符
== 和 === 的区别在哪里?
a.双等比较的是 数据值 是否相等 "123"==123 true
b.三等比较的是 比较数据类型是否相等,再看数据值是否相等 "123"===123 false
8、逻辑运算符"非"!的转换
A.number: 0或NaN为false,其他为true
B.string: 空字符串""为false,其他为true
C.null和undefined: 全是false
D.对象:全部是true