CSS和JS的学习

最新推荐文章于 2024-05-09 22:46:56 发布

climber.

最新推荐文章于 2024-05-09 22:46:56 发布

阅读量813

点赞数 1

分类专栏： Web前端学习

本文链接：https://blog.csdn.net/weixin_44039136/article/details/92063548

版权

Web前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS概述z

Cascading Style Sheets：层叠样式表

HTML的块标签

div标签：默认占一行
span标签：内容显示在同一行

主要作用

用来美化我们的 HTML 页面的
HTML 决定网页的骨架
CSS 化妆
将页面的 HTML 和美化进行分离

简单语法

在一个 style 标签中，去编写 CSS 内容，最好将 style 标签写在这个 head 标签中

<style>
	选择器{
		属性名称：属性的值；
		属性名称2：属性的值2；
	}
</style>

CSS 选择器：帮助我们找到我们要修饰的标签或元素

CSS选择器

元素选择器：

元素的名称{
	属性名称：属性的值；
	属性名称：属性的值；
}

ID 选择器

以 # 开头 ID在整个页面中是唯一的
#ID的名称{
	属性名称：属性的值；
	属性名称：属性的值；
}

类选择器

以.开头
.类的名称{
	属性名称：属性的值；
	属性名称：属性的值；
}

属性选择器

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 修改包含title属性的a标签 -->
		<style type="text/css">
			/* a[title='bbb']{
				color: red;
			} */
			a[href][title]{
				color: red;
			}
		</style>
	</head>
	<body>
		
		<a href="#" title="aaa">张三</a>
		<a href="#" >李四</a>
	</body>

后代选择器

后代选择器：爷爷选择器孙子选择器：找出所有的后代（中间是空格）
子元素选择器：父选择器 > 儿子选择器：找出儿子（中间是 > 号）

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 将h1下面的所有 em 元素的内容颜色改成红色*/
			/* 中间以空格隔开的是后代选择器 */
			h1>em{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>This is a 
			<em>儿子</em>
			<strong>
				<em>孙子</em>
			</strong>
			heading
		</h1>
	</body>

伪类选择器

一般用在 a 标签上

<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{color: red;} /* 未访问的链接*/
			a:visited{color: #00FF00;} /* 已访问的链接*/
			a:hover{color: #FF00FF;}  /* 鼠标移动到链接上*/
			a:active{color: #0000FF;}  /* 选定的链接*/
		</style>
	</head>
	<body>
		<a href="#">程序员</a>
	</body>

CSS的引入方式

外部样式：通过 link 标签引入一个外部的 CSS 文件
内部样式：直接在 style 标签内编写 CSS 代码
行内样式：直接在标签中添加一个 style 属性，编写 CSS 样式

选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器

使用 DIV+CSS 完成页面的优化

盒子模型

内边距：

paddding-top：
padding-right：
padding-bottom：

padding-left：

  pading：10px；上下左右都是10px
  padding：10px 20px：上下是10px 左右是 20px
  padding： 10px 20px 30px； 上10px 右20px 下20px 左20px
  padding：10px 20px 30px 40px：上右下左，顺时针的顺序

外边距：

margin-top：
margin-right：
margin-bottom：
margin-left：

CSS 绝对定位

position: absolute
top:控制距离顶部的位置
left：控制距离左边的位置

JS

JS入门

JavaScript 是一种直译式脚本语言

什么是脚本语言

java源代码 - - -> 编译成 .class 文件 - - - > java虚拟机中才能执行
脚本语言：源码 - - ->解释执行
JS由我们的浏览器解释执行
HTML：决定了页面的框架
CSS ：美化我们的页面
JS：提供用户的交互

JS的组成

ECMAScript： 核心部分，描述了该语言的所有属性，方法和对象
DOM：Document Object Model： 文档对象模型，主要用来管理页面的
BOM: Browser Object Model： 浏览器对象模型，前进，后退，页面刷新，地址栏，历史记录，屏幕宽高等

JS的语法

变量是弱类型
区分大小写
语句结束之后的封号可以有，也可以没有
写在 script 标签内

JS 的数据类型

基本类型
- string
- number
- boolean
- undefine
- null
引用类型
- 对象，内置对象
类型转换
- js 内部自动转换

JS 的运算符和语句

运算符和 java 一样
- “===” 全等号：值和类型都必须想等
- “==” 号：值相等就可以
语句和 java 一样

JS 的输出

alert（）： 直接弹框
document.write（）：向页面输出
console.log（）：向控制台输出
innerHTML : 向页面输出
获取页面元素：document.getElementByld

JS的开发步骤

1.确定事件
2.通常事件都会触发一个函数
3.函数里面通常都会去操作页面元素，做一些交互动作

图片自动轮播

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 
		 1.确定事件：文档加载完成的事件 onload
		 2，事件要触发：init()
		 3.函数里面要做一些事情：(通常去操作页面元素，提供交互)
			（1）开启定时器：需要去执行切换图片的函数 changeImg()
		 4. changeImg()
				1.获得要切换的图片的那个元素
		 -->
		 <script type="text/javascript">
			 var index =0;
			 function changeImg(){
				 //1.获得要切换的图片的那个元素
				 var img = document.getElementById("img2");
				 
				 //计算出当前要切换到第几张图片
				 var curindex = index%3+1 ;
				 img.src = "../img/"+curindex+".jpg";
				 index = index + 1;
			 }
		 	function init(){
				setInterval("changeImg()",3000);
			}
			
		 </script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" id="img2" >
	</body>