JavaScript学习笔记(3)

因为各种编程语言的语法,语句,变量,操作基本类似,所以直接跳过,开始学习DOM模型。

DOM——“Document object Model”,文档 对象 模型。

一个网页中的元素

一个网页中的元素可以分为<head><body>,再细分有如下类型。

tree.png

一个元素节点

一个元素节点包含属性节点文本节点

1
<p title="a gentle reminder">Don't forget to buy this stuff.</p>
tree2.png

CSS叠层样式表

通过CSS文件,告诉浏览器应该如何显示一份文档(Document)。

例如:

1
2
3
4
5
p{
color: yellow;
font-family: "arial",sans-serif;
font-size: 1.2em;
}

此例即对p元素进行各式定义。

HTML中引入CSS的方法

行内式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>行内样式</title>
</head>
<body>
<p style="background-color: #999900">行内元素,控制段落-1</p>
<h2 style="background-color: #FF6633">行内元素,h2 标题元素</h2>
<p style="background-color: #999900">行内元素,控制段落-2</p>
<strong style="font-size:30px;">行内元素,strong 比 em 效果要强</strong>
<div style="background-color:#66CC99; color:#993300; height:30px; line-height:30px;">行内元素,div 块级元素</div>
<em style="font-size:2em;">行内元素,em 强调</em>
</body>
</html>
段内式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css" title="字体14号">
p{
text-align: left; /*文本左对齐*/
font-size: 14px; /*字体大小 14 像素*/
line-height: 25px; /*行高 25 像素*/
text-indent: 2em; /*首行缩进两个文字大小空间*/
width: 500px; /*段落宽度 500 像素*/
margin: 0 auto; /*浏览器下居中*/
}
</head>
<body>
<p>“百度”这一公司名称便来自宋词“众里寻他千百度”。(百度公司会议室名为青玉案,即是这首词的词牌)。而“熊掌”图标的想法来源于“猎人巡迹熊爪”的刺激,与李博士的“分析搜索技术”非常相似,从而构成百度的搜索概念,也最终成为了百度的图标形象。</p>
</body>
</html>
链接式
1
2
3
4
5
6
7
8
9
10
11
12
13
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="test.css" type="text/css" rel="stylesheet" />
<link href="test_2.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p>我是被 lianjie-2.css 文件控制的,楼下的你呢??</p>
<h3>楼上的,<span>lianjie.css</span> 文件给我穿的花衣服。</h3>
</body>
</html>

test.css如下:

1
2
3
4
5
6
7
8
9
10
h3{
font-weight: normal; /*取消标题默认加粗效果*/
background-color: #66CC99; /* 设置背景色 */
height: 50px; /*设置标签的高度*/
line-height:50px; /* 设置标签的行高 */
}
span{
color: #FFOOOO; /* 字体颜色 */
font-weight:bold; /* 字体加粗 */
}

test_2.css

1
2
3
4
5
6
p{
color: #FF3333; /*字体颜色设置*/
font-weight: bold; /* 字体加粗 */
border-bottom: 3px dashed #009933; /* 设置下边框线 */
line-height: 30px; /* 设置行高 */
}
引入式

有点像Python导库的语法,以下的几种表达方式都是可行的。

1
2
3
4
5
6
@import daoru.css;
@import 'daomxss';
@import "daoru.css";
@import url(daoru.css);
@import url('daoru.css');
@import url("daoru.css");
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
@import url(lianjie.css);
@import url(daoru.css);
body { background-color: #e4e929; }
</style>
</head>
<body>
<div>
<p>我是被 lianjie-2.css 文件控制的,楼下的你呢??</p>
<h3>褛上的,<span>lianjie.css</span>文件给我穿的花衣服。</h3>
</div>
</body>
</html>

1-1Q1091640541b.gif

在上面示例中,必须是@import url("lianjie-2.css"); p{text-indent: 3em;},而不能是p{text-indent:3em;} @import url("lianjie-2.css");,否则将导入效果无效。在 CSS 文件中也需要将 @import 放在前面,后面加入 CSS 样式,否则也是无效。

链接式和引入式的对比
  • link 属于 HTML 标签,而 @import 是 CSS 提供的。

  • 页面被加载时,link 会同时被加载,而 @import 引用的 CSS 会等到页面被加载完再加载。

  • @import 只在 IE 5 以上才能识别,而 link 是 HTML 标签,无兼容问题。

  • link 方式的样式的权重高于 @import 权重。

本文标题:JavaScript学习笔记(3)

文章作者:zzzain46

发布时间:2020年01月15日 - 17:01

最后更新:2020年01月15日 - 21:01

原始链接:https://www.52debug.cn/posts/92c12c15.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

如果你觉得我的文章对你有用,请随意打赏!
0%