HTML 学习-利用html、css 复制百度网页

copy百度页面中的css细节

引言

在学习html和css过程中，HTML与CSS作为一种图形展示工具而区别于逻辑精密复杂的编程语言，其存在繁多的标签与样式来达成各种页面效果，但是我初步学习它们时发现它被严重工具化、专一化了，或者认为它们的诞生便是为了作为专一化的工具而存在。这意味着学习该工具无法找到类似编程语言般的主要脉络来进行，因此在临摹中--copy 百度主页 学习如何为HTML搭配css样式无疑是一个可以快速学习并理解网页搭建及显示的好方法。

css存在4种引入方式

由常用程度排序：

  • 链接式
  • 内联式
  • 行内式
  • 导入式

引用方式不多赘述，我们来探索copy时 css样式表的第一个疑惑：css样式的作用优先级
在探索问题前，我们默认前置知识：

  • HTML的基本结构（HTML基础必要结构）
  • css规则集（css的范式）
  • HTML和css的连结（即如何使css作用于HTML）

已经被掌握，else：请利用搜索引擎的强大功能来学习
continue 目前关于css引入方式优先级的blog部分有误，实践永远是检验的标准，so 我们应该编写简易的html与css来验证：
html

<!DOCTYPE html>
<html>
    <head>
#改变<link>和 <style>的先后位置来观察浏览器的h1文字颜色确定css优先级
        <link rel="stylesheet" href="try.css"> 
        <style>
            h1 {
                color: tomato;
            }
        </style> 
        
    </head>
    <body>
        <h1 style="color: chartreuse;">xuexi is a whole life groess</h1>
    </body>
</html>

css

h1 {
    color: blue;
}

经过验证我们得知：上述三种css引用方式并无固定的顺序而是就近原则 css规则距离代码块越近越有效
即css规则逐步覆盖，最新读取的覆盖上一读取的css规则。因此，在上面代码块中，行内式style="color: chartreuse;"覆盖上次读取的

<style>
    h1 {
        color: tomato;
    }
</style>

最终h1文字颜色为绿色
然而，！important可以影响css的就近原则，使其有！important标注的优先显示
详细可以参考其他大佬的文章[css优先级]（https://www.cnblogs.com/qianzhengkai/p/10870654.html）

posted @ 2024-07-28 19:16:00 solity_top 阅读(39) 评论(0)
发表评论
昵称
邮箱
网址