HEAD
刚在写博客的时候,突然有一股莫名的感受涌进心里,说不清楚。可能是我之前对于博客的态度太过随意,心里有些歉疚,所以删除了几篇之前写的乱七八糟的东西。
原谅我在这里发牢骚。在学习一个新东西的时候,闷头前进,应该会撞的头破血流吧,让我任性的发泄一下感觉。
内容
上一篇说了HTML、CSS、JavaScript的基本概念,HTML5的开发工具以及开发用的标记语言。
最后面还给自己留了个小作业,我可是认真完成了的!
这一篇学习一下CSS的引用
CSS的引用
CSS是层叠样式表,将HTML打扮起来,那么我们要使用Css,就需要引用:
行间样式引用
写法:在标签中,写一个style的属性:
<div style="width: 100px;height: 100px;color: red;background-color: pink;">我是行间样式引用</div>
优点:优先级最高
缺点:不利于代码维护,不利于代码重用
实际就是在标签里面写CSS样式,但是其他的标签不可以用到这些代码,不能实现重用。
并且一个html文件里面,会有很多很多个标签,如果每个标签都写一个,不止写起来极其麻烦,到维护的时候,脑袋都炸了。
内部样式表的引入
简单来说,就是将样式表放在HTML文件里面,位置在结构的头部:
写法:在head标签里面,写一个style标签<style></style>
,在标签里面,通过选择器来控制样式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5学习笔记——2</title>
<style>
</style>
</head>
<body>
<div>我是标签</div>
<div>我也是啊,好巧</div>
</body>
</html>
为了后面的效果对照,贴一张没有样式的效果图:
因为需求多样化,所以选择器也分为三种:
标签名选择器
HTML5开发使用的是标记语言,会有很多种标签。我们可以通过标签名在筛选出来一部分,做统一的样式定制。
写法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学习笔记——2</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div>我是标签</div>
<div>我也是啊,好巧</div>
</body>
</html>
实现效果如下:
即是:只要名为div的标签,都会被标签名选择器选中,并且修改标签的属性。
ID选择器
ID就像人们的身份证,是给标签添加的唯一标识。我们可以通过身份证号查找到某一个人,也可以通过ID获取到准确的标签。
写法:
首先在相应的标签中设置一个ID的属性,并且赋值
<div id="d1">我是带有ID的标签</div>
在样式表中的ID选择器实现代码
#d1{
width: 220px;
height: 50px;
background-color: pink;
}
提示:
- ID名要以英文字母开头
- ID名不可以重复,是唯一的
(在静态页面中,ID重复并不会造成错误,但是在JavaScript代码下,ID重复会造成错误,刚问的公司小牛)
整体代码以及实现效果对比
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学习笔记——2</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
#d1{
width: 220px;
height: 50px;
background-color: pink;
}
#d2{
width: 160px;
height: 33px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div>我是标签</div>
<div>我也是啊,好巧</div>
<div id="d1">我是带有ID的标签</div>
<div id="d2">嗯嗯,我也是带有ID的标签</div>
</body>
</html>
由上可以看出,ID选择器的优先级要大于标签名选择器的优先级。
class选择器
class,类,类别选择器,就是选择某个类别群体。
写法:
在标签中:
设置class属性字段,定义字段内容名
<div class="c1">带class的标签就是我了</div>
在样式表中:
.c1{
width: 333px;
height: 80px;
background-color: palegoldenrod;
}
整体代码及效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学习笔记——2</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
#d1 {
width: 220px;
height: 50px;
background-color: pink;
}
#d2 {
width: 160px;
height: 33px;
background-color: greenyellow;
}
.c1{
width: 333px;
height: 80px;
background-color: palegoldenrod;
}
</style>
</head>
<body>
<div>我是标签</div>
<div>我也是啊,好巧</div>
<div id="d1">我是带有ID的标签</div>
<div id="d2">嗯嗯,我也是带有ID的标签</div>
<div class="c1">带class的标签就是我了</div>
<div class="c1" id="d1">我不小心带了ID和class </div>
</body>
</html>
class选择器的优先级也要高于标签名选择器的优先级。但是,当赋予了class和ID属性,并且两者都被选择器选中时,优先执行ID选择器的样式。
外部样式表的引用
将样式表放在单独的文件中(.css文件),这样增加代码可读性。
在项目中,一般会创建三个文件夹:img,css,js。使用HBuilder的同学可以略过,创建项目的时候已经自动创建了。
写法
我们在css文件夹下创建.css文件:1.css
在head标签中,使用link标签关联css文件
<link rel="stylesheet" href="css/1.css" />
href里面是css文件的路径
在css文件中,操作代码为原文件style标签内的代码:
div {
width: 100px;
height: 100px;
background-color: red;
}
#d1 {
width: 220px;
height: 50px;
background-color: pink;
}
#d2 {
width: 160px;
height: 33px;
background-color: greenyellow;
}
.c1 {
width: 333px;
height: 80px;
background-color: palegoldenrod;
}
html文件全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML学习笔记——2</title>
<link rel="stylesheet" href="css/1.css" />
</head>
<body>
<div>我是标签</div>
<div>我也是啊,好巧</div>
<div id="d1">我是带有ID的标签</div>
<div id="d2">嗯嗯,我也是带有ID的标签</div>
<div class="c1">带class的标签就是我了</div>
<div class="c1" id="d1">我不小心带了ID和class </div>
</body>
</html>
实现效果参照上图,不再贴图。
优点:利于代码重用
缺点:需要加载服务器
END
选择器内容到这里结束。
使用哪种选择器或者内部外部引用或行间引用,都取决于项目的实际情况,没有办法说明哪种更优秀。
刚接触这些知识,如果有理解错误,希望能够指出,一定尽快改正。感谢!
给自己留个小作业:
将上面的流程在记事本中实现一遍。