Cong's Blog.

css和js学习简录

字数统计: 2.1k阅读时长: 8 min
2019/07/31 Share

css简录

css指的是层叠样式表 是一种用来表现HTML等文件样式的计算机语言,css可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化,
css为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。
css具有以下特点:
1.丰富的样式定义:
css提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素的距离,以及元素边框与元素内容的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2.易于使用和修改
css可以将样式定义在HTML元素的style中,也可以将其定义在HTML文档的header部分,也可已将样式声明在一个专门的css文件中,以供HTML页面应用。总之,css样式表可以将所有的样式声明同意存放和管理。
3.多面应用
css样式表可以单独存放在一个css文件中,这样我们就可以在多个页面中使用同一个css样式表。css样式表理论上不输于任何文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的同一。
4.层叠
层叠就是对一个元素多次设置同一个样式,这将使用最后一次设置的属性值,例如对一个站点中的多个页面使用了同一套的css样式表,在某些页面中的某些元素想使用其他样式,就可以针对这些样式单独定义一个样式表应用到页面中。
5.页面压缩
在使用HTML定义页面效果的网站中,往往需要大量或者重复的表格和font元素形成各种规格的文字样式,这样做的后果就是会产生大量的HTML标签,从而使页面文件的大小增加。而将样式声明放到css样式表中,可以大大的减小网页的面积,这样在加载页面时使用的时间也会大大的减少。另外,css样式表的附庸更大程度的缩减了页面的体积,减少加载的时间。

css笔记杂记:
行内样式
1.

</>
2.内嵌式

<style>标签 .a_style 必须写在head标签了。
3. 加载一个css文件链接
4.css 0margin 属性 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
5.CSS注释以 “/*” 开始, 以 “*/“ 结束

javascript 学习简录

在HTML基础上,使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。 运行用Javascript编写的程序需要能支持Javascript语言的浏览器。Netscape公司 Navigator 3.0以上版本的浏览器都能支持 Javascript程序,微软公司Internet Explorer 3.0以上版本的浏览器基本上支持Javascript。微软公司还有自己开发的Javascript,称为JScript。 Javascript和Jscript基本上是相同的,只是在一些细节上有出入。 Javascript短小精悍, 又是在客户机上执行的,大大提高了网页的浏览速度和交互能力。 同时它又是专门为制作Web网页而量身定做的一种简单的编程语言。
JavaScript 使网页增加互动性。JavaScript 使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。

JavaScript学习杂记

1.Js是写在<script type=””></script>标签内的,只要是下载<html>标签内就都可以生效。
2.HTML DOM 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)
3.在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。var x=document.getElementById(“intro”); 如果找到该元素,则该方法将以对象(在 x 中)的形式返回该元素。如果未找到该元素,则 x 将包含 null。
4.通过标签名查找 HTML 元素 var x=document.getElementById(“main”); var y=x.getElementsByTagName(“p”);查找id=main的元素,然后查找这个元素中所有<p>元素。
5.改变 HTML 内容 修改 HTML 内容的最简单的方法是使用 innerHTML 属性 document.getElementById(id).innerHTML=新的 HTML
<html>
<body>

Hello World!

<script>
document.getElementById(“p1”).innerHTML=”新文本!”;
</script>

</body>
</html> 这是一个实例
6.改变 HTML 样式,document.getElementById(id).style.property=新样式。

<html>
<head>

菜鸟教程(runoob.com)

Hello World!

Hello World! document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; 以上段落通过脚本修改。 7.addEventListener() 方法 document.getElementById("myBtn").addEventListener("click", displayDate); addEventListener() 方法用于向指定元素添加事件句柄。addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。 你可以向一个元素添加多个事件句柄。你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。 你可以向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。如: window 对象。 () 方法可以更简单的控制事件(冒泡与捕获)。当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。你可以使用 removeEventListener() 方法来移除事件的监听. 语法:element.addEventListener(event, function, useCapture); 一个参数是事件的类型 (如 "click" 或 "mousedown"). 第二个参数是事件触发后调用的函数。第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。注意:不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。 8.创建新的 HTML 元素 (节点) - appendChild() 以下代码是用于创建 元素: var para = document.createElement("p"); 为 元素创建一个新的文本节点: var node = document.createTextNode("这是一个新的段落。"); 将文本节点添加到

元素中: para.appendChild(node); 最后,在一个已存在的元素中添加 p 元素。 查找已存在的元素: var element = document.getElementById("div1"); 添加到已存在的元素中: element.appendChild(para); 9.建新的 HTML 元素 (节点) - insertBefore() div id="div1">

这是一个段落。

这是另外一个段落。

var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node);

var element = document.getElementById(“div1”);
var child = document.getElementById(“p1”);
element.insertBefore(para, child);
</script>
运行结果是:

这是一个新的段落。

这是一个段落。

这是另外一个段落。
10.移除已存在的元素
实例:

这是一个段落。

这是另外一个段落。 var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); 运行结果:这是另外一个段落。 11. HTML 文档中 元素包含两个子节点(两个元素):

这是一个段落。

这是另外一个段落。

查找 id="div1" 的元素: var parent = document.getElementById("div1"); 查找 id="p1" 的 元素: var child = document.getElementById("p1"); 从父元素中移除子节点: parent.removeChild(child); tips:如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。 以下代码是已知要查找的子元素,然后查找其父元素,再删除这个子元素(删除节点必须知道父节点): var child = document.getElementById("p1"); child.parentNode.removeChild(child);

CATALOG
  1. 1. css简录
  2. 2. javascript 学习简录
    1. 2.1. JavaScript学习杂记