CSS|快速入门及优势

最新推荐文章于 2022-12-11 14:50:37 发布

Alan_Lowe

最新推荐文章于 2022-12-11 14:50:37 发布

阅读量105

点赞数 1

分类专栏： # CSS 文章标签： html css

本文链接：https://blog.csdn.net/qq_45985728/article/details/119080000

版权

CSS 专栏收录该内容

30 篇文章 1 订阅

订阅专栏

CSS|快速入门及优势

1.入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>快速入门</title>

<!--
规划<style> 可以编写css的代码
语法：
选择器{
    声明1;
    声明2;
    声明3;
}
-->
  <style>
      h1{
        color: red;
      }
  </style>
</head>
<body>

<h1>标题</h1>

</body>
</html>

在head中使用style编写css的代码，如上述所示，选择器的括号内写上声明，就把h1这个等级的标题字体改成了红色。

在这里插入图片描述

2.分离（外部引用）

在编写C++或者其他语言的程序的时候，都会用到函数，因为把所有的内容都写在main里面，会很臃肿，不方便自身的构思和后续debug，在html中也可以做类似的操作。

上述例子是在head中加入了style，我只写了一个选择器h1，并且只写了一个字体颜色的样式，就已经占据了很多内容，怎么样能把它分离出去呢?

使用link进行分离（外部引用）

新建一个css文件：

h1{
    background-color: aqua;
}

分离器中写上了将h1的背景颜色设置为aqua

在html的head中使用link标签金庸该css文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分离</title>
<!--
link标签
默认的rel为stylesheet
在href处写上要引用的css的地址即可
-->
  <link rel="stylesheet" href="Style-demo01.css">
</head>
<body>

<h1>第二个标题</h1>

</body>
</html>

这样子使用一行link标签就可以实现引用css，而具体的实现就不在html文件中了，看起来会更清晰：

在这里插入图片描述

具体实现：

在这里插入图片描述

3.CSS的优势

内容与表现分离了
网页结构表现统一，可以实现复用
样式十分的丰富
建议使用独立于html的css文件
利用SEO，容易被搜索引擎收录

人生没有白走的路，每一步都算数！

Alan_Lowe

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS|快速入门及优势

CSS|快速入门及优势1.入门<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>快速入门</title> <style> h1{
复制链接

扫一扫