HTML5学习笔记——2

最新推荐文章于 2024-06-03 14:21:40 发布

一缸米

最新推荐文章于 2024-06-03 14:21:40 发布

阅读量560

点赞数 1

分类专栏： html5学习笔记文章标签： html5 css 开发工具 html

本文链接：https://blog.csdn.net/Martin0207/article/details/71439199

版权

html5学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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>