JavaEE-03-CSS&JavaScript（导入CSS样式link和@import的区别）

最新推荐文章于 2022-11-03 21:22:30 发布

wy_0928

最新推荐文章于 2022-11-03 21:22:30 发布

阅读量1.3k

点赞数 1

分类专栏： No.8-【知识库收录勿删除】Java就业自学笔记（一）知识库收录文章

本文链接：https://blog.csdn.net/wy_0928/article/details/48111009

版权

No.8-【知识库收录勿删除】Java就业自学笔记（一）同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

知识库收录文章

1 篇文章 0 订阅

订阅专栏

编写CSS样式主要有如下三种方式：

（1）第一种：在style标签中编写css代码。只能用于本页面中，复用性不强。

格式：

<style type="text\css">
编写css的代码。
</style>
例子：
<style type="text\css">
a{
color:#F00;
text-decoration:none;
}
</style>

（2）第二种：可以引入外部的css文件。推荐使用。

方式1：使用link标签。推荐使用...
格式：
<link href="css文件的路径" rel="stylesheet">

例子： <link href="1.css" rel="stylesheet"/>

方式2：使用<style>引入

格式：
<style type="text/css" >
@import url("css的路径");
</style>

例子：
<style type="text/css" >
@import url("1.css");
</style>

（3）第三种方式：直接在html标签使用style属性编写。只能用于本标签中，复用性较差。不推荐使用。

例子：
<a style="color:#0F0; text-decoration:none" href="#">新闻的标题1</a>

========================================分割线===========================================

link和@import引入外部样式的区别

• 隶属上的差别

link属于HTML标签，而@import完全是CSS提供的一种方式。

• @import 次数限制

@import只能引入31次css文件。

• 加载顺序的不同

当页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS 会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式，然后突然样式会出现，网速慢的时候还挺明显。

• 兼容性上的差别

由于@import是CSS2.1提出的，@import只有在IE5以上的才能识别，而link标签无此问题

• 使用 DOM 控制样式时的差别

当使用javascript控制DOM(document.styleSheets)去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

========================================分割线===========================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
	字符串转数字
		parseInt()  可以把一个字符串转换成整数。
		parseFloat() 可以把一个字符串转换成小数。
*/
	var a = "12";
	a = 12.64;
	
	a = "123abc123"; /* parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字， */
	a = "a123";  // NaN not a number(不是一个数字)
	
	a = "012"; /* 12 如果首位是0，那么就想祛除0再进行转换。*/

	a = "0x10"; /* 如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理的。 */
	var b = parseInt(a);
	document.write("结果："+b+"<br/>");
	
	
	
	var c= "3.14";
	c = "10";   // 如果是一个字符串是整数的，那么使用parseFloat还是转换 成整数 。
	c = "100a";
	c = "abc123";
	c = parseFloat(c);
	document.write("结果："+c+"<br/>");
	


/*
	 javascript提供一个IsNaN的方法让我们判断该字符串是否是 一个数字。
	
	  is not a muber  不是一个数字。
	  
	  不是一个数字返回true，是一个数字返回false.
*/

	
	document.write(isNaN("123")+"<br/>");

	document.write(isNaN("abc123"));

	
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

========================================分割线===========================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
	运算符:	
		+(加法、正数、 连接符)
		
		true 是1. false是0
		

	var a = 1;
	document.write((1+true)+"<br/>");
	document.write((1+false)+"<br/>");
	document.write("hello"+1); // hello1
	
	除法：
	
	
	var a = 10;
	var b = 3;
	document.write("除法运算是："+(a/b)+"<br/>"); //如果两个整数相除不能整数的时候结果还是小数。
	
	
	比较运算符
	

字符串与字符串的比较规则是：
	
	情况1： 能找到对应位置上的不同字符，那么就比较第一个不同字符的大小。
	
	情况2： 不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度。
		
	

	document.write("10大于3吗？"+(10>3)+"<br/>");
	document.write("10字符串大于3字符串吗？"+("190">"19")+"<br/>"); //字符串与字符串比较
	document.write("10大于字符串9吗？"+( 10 > "9")+"<br/>"); /* 字符串还可以与数字进行比较。  凡是数字与字符串 进行比较，会先把字符串转换成数字再进行比较 的。



	逻辑运算符:	

	
	
	//没有单与的。
	document.write((true&&true)+"<br/>");
	document.write((true&&false)+"<br/>");
	document.write((false&&true)+"<br/>");
	document.write((false&&false)+"<br/>");
	
	
	document.write((true||true)+"<br/>");
	document.write((true||false)+"<br/>");
	document.write((false||true)+"<br/>");
	document.write((false||false)+"<br/>");


三目运算符	

	布尔表达式?值1:值2;
*/		

	var age = 10;
	
	document.write(age>18?"成年人":"未成年人");


	


</script>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
</body>
</html>

========================================分割线===========================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/*
控制流程语句

	if语句
	
	格式：
		if(判断条件){
			符合条件执行的代码	
		}	
	
	if语句的特殊之处： 
		1. 在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
		
		number  非0为true, 0为false.
		string  内容不能空是true， 内容空的时候是false。
		undefined：false
    	NaN:    false
	
	
	
	var workAge = 0;
	var str ="";
	var b;
	if(b){
		document.write("明天过来面试！！");
	}else{
		document.write("不要在投我们公司了，不要你！");	
	}
	

选择语句： 
	switch语句
	
		switch(变量){
			case 值1: 
				
				break;
			case 值2：
				
				break;
			case 值3:
				
				break;
				
			.....
				
			default：
				
				break;
			
		}
		
	特殊之处：
		1. 	在javascript中case后面可以跟常量与变量还可以跟表达式。
		
		
*/
	
	
	var option = "A";
	
	var a = "A";
	var score =98;
	switch(option){
		case score>=90?"A":"B":
			document.write("java");
			break;
		case "B":
			document.write("ps");
		
		case "C":
			document.write("javascript");
			break;
		case "D":
			document.write("C++");
			break;
	}








</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>


</body>
</html>

wy_0928

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaEE-03-CSS&JavaScript（导入CSS样式link和@import的区别）

编写CSS样式主要有如下三种方式：（1）第一种：在style标签中编写css代码。只能用于本页面中，复用性不强。格式：编写css的代码。例子： a{
复制链接

扫一扫