1. CSS
CSS : Cascading Style Sheet 关联层叠样式表
给html标签进行渲染加入一些修饰,达到一定的视觉效果
1.1 使用CSS样式的方式
方式1: 行内样式,在每一个HTML标签上都有style属性
style="样式属性:样式属性值, 样式属性2,样式属性值2, ..."
弊端:一次只能控制某一个某一个标签,如果有同名的标签需要被同时控制,就很麻烦
方式2: 内联样式(内部样式)
在head标题书写 style标签
style标签中
选择器{
样式属性: 属性值1;
样式属性: 属性值2;
...
}
如果有同名的标签,可以通过选择器来控制标签
弊端:css样式代码和HTML标签混合在一起,不利于后期管理
方式3: 外联样式(外部样式)
将css样式单独放在.css文件中,放在指定的css文件夹中,通过在当前HTML页面使用link标签导入
link标签
属性 href="css文件"
固定属性 rel="stylesheet" 关联层叠样式表
1.2 CSS的选择器
1. 标签选择器
标签名称{
样式属性: 属性值;
样式属性2: 属性值2;
...
}
2. 类选择器
在标签中指定class属性="属性值"
在同一个页面下,class属性可以重名
.class属性值{
样式属性: 属性值;
样式属性2: 属性值2;
...
}
3. id选择器
在标签指定id属性, id = "id属性值"
在同一个页面下,id属性值必须唯一
后面在JavaScript, dom编程, 通过id获取标签对象,如果id 值重复, 就会获取不到
#id属性值{
样式属性: 属性值;
样式属性2: 属性值2;
...
}
4. 子元素选择器(交集选择器)
选择器1 选择器2 ...{
样式属性: 属性值;
样式属性2: 属性值2;
...
}
选择器2选择的标签是选择器1里面的子元素
5. 并集选择器
同时对多个标签进行控制
选择器1, 选择器2, 选择器3, ...{
样式属性: 属性值;
样式属性2: 属性值2;
...
}
6. 伪类选择器
用于定义元素的特殊状态
①link状态: 鼠标没有访问过的状态
②hover状态: 鼠标悬停在元素上的状态
③active: 获取元素焦点状态(点击元素,但是没有松开)
④visited: 鼠标访问过的状态(点击并松开)
选择器 : 状态名称(不区分大小写){
样式属性: 属性值;
样式属性2: 属性值2;
...
}
想不断的出现循环效果hover必须在link和visited的之后, active必须在hover之后
link->visited->hover->active
1.3 CSS常用样式属性
CSS文本样式
1. color:文本颜色
文本颜色可以用以下三种方式表示:
(1)颜色名称:英文单词
(2)十六进制数据:#ff0000;#00ff00;#0000ff;
(3)rgb(0~255,0~255,0~255);
color: red;
2. text_align:用于设置文本的水平对齐方式
left:左对齐
right:右对齐
center:居中对齐
text-align: left;
3. text-decoration:用于设置或删除文本装饰
none:不设置任何修饰
underline:下划线
overline:上划线
live-through:中划线
text-decoration: underline;
4. text-indent:用于指定文本首行缩进
text-indent: 30px; 首行缩进30像素
5. letter-spacing:用于指定文本中字符的间距
word-spacing:单词间距
浏览器解析:两个字组成一个单词,中间有空格(中文)
line-height:行高
6. text-transform: 用于文本中的英文字母的大小写转换
CSS背景样式
background-image:设置图像
如果图片分辨率和屏幕分辨率不同的话,导致图片x轴和y轴都在重复
background-repeat:设置背景图片是否重复以及如何重复
默认值:repeat:x轴和y轴都重复
no-repeat:不重复
repeat-x:x轴重复
repeat-y:y轴重复
background-position:设置图片的起始位置
图片的位置 图片在浏览器中显示的位置
默认值 top left
background-color:背景颜色
背景的简写属性
background: background-color background-image background-repeat background-position
可以将背景的属性写在同一行,按照上面顺序依次设置属性,每个属性之间用空格隔开
CSS边框样式
div块标签 四个边
边框的颜色样式属性:
border-color
边框宽度样式属性:
border-width
必须有边框样式属性
border-style
特点:
1)这些简写属性默认方向
上右下左
2)某一边如果没有设置边框的颜色,宽度,样式,
会补齐对边的颜色,宽度,样式
边框的简写属性:
border: border-width border-style(必须) border-color
div{
/* 边框的颜色 */
/* border-top-color: #0000FF;
border-bottom-color: #7FFFD4;
border-left-color: #9370DB;
border-right-color: #FF0000; */
/* 边框宽度 */
/* border-top-width: 10px;
border-bottom-width: 20px;
border-left-width: 30px;
border-right-width: 40px; */
/*
设置四个边框的样式
solid:单实线
dotted:点
double:双实线
dashed:虚线
*/
border: 3px solid #ADFF2F;
width: 100px;
height: 100px;
}
border-radius 圆角边框
CSS浮动属性样式
当为某个标签(div)设置浮动的时候,此时这个标签就表现的像块边框不存在一样
(脱离了这个文档流),它可以向左向右浮动,直到碰到其他块的边框
浮动属性:
left:左浮动
right:右浮动
清除浮动:clear
left:左边不浮动
right:右边不浮动
both:左右两边都不浮动
1.4 CSS的盒子模型
将任何标签都可以用div包裹,使用css选择器—控制样式
div+CSS---层级布局
将任何标签都可以看成一个盒子,使用div块标签将标签包裹起来
盒子容量大小:在div中指定的width和height 宽度和高度,可以指定像素,
或者百分比(占整个分辨率的百分比)
盒子的厚度:就是边框的大小,就是border
盒子的padding:就是盒子的内边距, 控制盒子的内容和边框线之间的距离
盒子的margin: 盒子的外边距,控制盒子和盒子之间的距离
1.5 CSS的定位属性
CSS绝对定位
属性: position : absolute
top:将整个盒子向下移动
left:向右移动
当前这个元素根据父元素的位置移动
CSS相对定位
属性: position : relative
根据这个元素当前位置进行移动
CSS固定定位
属性: position : fixed
当前这个元素处在浏览器的位置,永远处在这个位置,不会随着滚动条的滚动而滚动
2. JavaScript
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的 编程语言
2.1 js的使用方式
- 内部方式
在< head>标签体中,书写script标签 - 外部方式
将js代码写在.js文件中,保存在js文件夹中
在html页面导入js文件
< srcipt src=“js文件地址”></ srcipt>
js常用内置函数
//给浏览器写入内容
document.write("hello,javascript我来了") ;
//在浏览器的控制台打印日志
console.log("hello,javascript!") ;
//在浏览器中弹一个提示
//window可以不写
window.alert("hello,javascript")
2.2 JavaScript的基本数据类型
数据类型:
1. String--->String内置对象
2. number--->Number内置对象
3. boolean--->Boolean内置对象
4. object--->Object内置对象 : 代表所有js对象的模板
5. undefined : 未定义类型
注意:
- 在js中,定义变量用var, var可以省略不写
- 在js中,查看变量的数据类型使用 typeof(变量名) 函数
- 在js中,变量可以重复定义,后面的值会将前面的值覆盖掉
- 无论是小数还是整数,都是number类型–自动提升为浏览器内置对象Number
无论是字符还是字符串,都是string类型–自动提升为浏览器内置对象String
boolean类型–自动提升为浏览器内置对象Boolean
object类型–自动提升为浏览器内置对象Object(代表所有js对象的模板)
undefined:未定义类型,没有赋值,没有意义;
2.3 JavaScript的流程控制语句以及运算符
顺序结构:js代码由上而下一次加载
选择结构语句:
(1)if语句:
格式1:if(表达式){语句}
格式2:
if(表达式){
语句1;
}else{
语句2;
}
如果表达式为非空字符串,则条件成立
格式3:
if(表达式){
语句1;
}else if(表达式2){
语句2;
}else{
语句n;
}
(2)switch语句:
switch(表达式){
case 值1:
语句1;
break;
case 值2:
语句2:
break;
...
default:
语句n;
}
case语句的值可以是变量,也可以是常量
循环结构语句:
for
while
do...while(循环体至少执行一次)
for-in语句:用来遍历数组/自定义对象的属性(类似于Java中的增强for)
js中创建一个数组
var arr = new Array(5); 动态初始化
var 对象名 = new Array()[元素1,元素2,...];
for(var 变量名 in 数组对象名或者自定义对象名){
使用对象名[索引值];
}
//算术运算符
//+,-,*,/,%
var a = 3;
var b = 4;
document.write("(a+b):" + (a+b) + "<br />");
document.write("(a-b):" + (a-b) + "<br />");
document.write("(a*b):" + (a*b) + "<br />");
document.write("(a/b):" + (a/b) + "<br />");
document.write("(a%b):" + (a%b) + "<br />");
document.write((a+true));
document.write("<hr />");
//比较运算符
var x = 3;
var y = 4;
var z = 5;
document.write("<hr />");
//逻辑运算符
//逻辑单与& ,逻辑双与&&,逻辑单或|,逻辑双或||,逻辑非,逻辑异或^
//表示并列关系:多个条件必须同时满足逻辑双与&& ,跟Java一样,左边为false,右边不执行!
//表示或的关系:多个条件满足一条件即可 ||, 跟Java一样,左边true,右边不执行!
var m = 3 ;
var n = 4 ;
document.write("m:"+m+"<br/>") ;
document.write("n:"+n+"<br/>") ;
document.write(((++m)==3) && ((--n)==4)+"<br/>") ;
document.write("m:"+m+"<br/>") ;
document.write("n:"+n+"<br/>") ;
document.write("<hr/>") ;
//三元运算符 (表达式)?执行true的结果:执行false的结果
var age = 15 ;
document.write((age>18)?"成年人":"未成年人") ;
2.4 JavaScript的函数定义以及调用
定义函数的格式:
function 函数名(形参列表){
直接输出或者使用return关键字,返回结果
}
调用函数
如果调用的函数中是直接输出的,则可以直接调用
如果函数中有return,返回了结果,则需要赋值调用
注意事项:
1. 定义函数的时候,形参前面不需要写var
2. 虽然js中没有返回值类型,但是依然可以使用 return 关键字
3. JavaScript中没有方法重载的概念,后边定义的方法会将前面定义的方法覆盖掉
当实际参数个数小于形式参数个数是,语句依然执行,结果为NaN
当实际参数个数大于形式参数个数 , 函数也会调用, 多余的实际参数不参与运算
4. 函数内置一个数组 arguments , 就是将实际参数赋值给形参
2.5 JavaScript的内置对象
2.5.1 JS内置对象之String
创建一个字符串对象
var 对象名 = new String("字符串值");
常用方法:
valueOf():获取对象的原始值,比较内容是否相同
charAt(index):返回指定索引处的字符
concat(str):拼接一个字符串,返回一个新的字符串
fontcolor(颜色名):对字符串进行颜色标记
indexOf(str):查询子字符串在原字符串中第一次出现的索引值
spilt(str):使用指定的分隔符将字符串拆分成字符串数组
2.5.2 JS内置对象之Array
三种方式创建数组
var arr = new Array0 ;//不指定长度
var arr = new Array(size)://指定长度
var arr =[元素1,元素2.....]://静态初始化(推荐)
js中没角标越界,可以不断扩容
内置方法
join(str):使用str符号将数组元素拼接成字符串
2.5.3 JS内置对象之Date
Date:代表日期时间
创建日期对象: var 对象名 = new Date();
getYear:获取当前年份与1900年的差值
getFullYear:获取日期中的年份
getMonth:获取日期中的月份(0-11之间的整数)
getDate:获取月份中的日期(1-31之间的整数)
getHours:获取一天中的小时(0-23之间的整数)
getMinutes:获取分钟数(0-59之间的整数)
getSeconds:获取秒数(0-59之间的整数)
2.5.4 网页定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>网页时钟</title>
<!--
网页定时器
window对象的方法
setInteval("函数()",时间毫秒值):每经过这个毫秒值,重复执行这个任务函数
settimeout("函数()",时间毫秒值):经过毫秒值后,执行一次任务
-->
</head>
<body>
<h1>当前系统时间:</h1><span id="tip"></span>
</body>
<script>
function time() {
//1)获取当前时间
var date = new Date();
//2)拼接日期时间
var dateStr = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" +
date