编写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>