HTML5学习笔记——2

来源：互联网发布：js 全国城市字母排序编辑：程序博客网时间：2024/06/08 07:11

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选择器
由上可以看出，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

选择器内容到这里结束。
使用哪种选择器或者内部外部引用或行间引用，都取决于项目的实际情况，没有办法说明哪种更优秀。

刚接触这些知识，如果有理解错误，希望能够指出，一定尽快改正。感谢！

给自己留个小作业：
将上面的流程在记事本中实现一遍。

0 0