CSS介绍

最新推荐文章于 2023-03-16 17:16:44 发布

weixin_34294649

最新推荐文章于 2023-03-16 17:16:44 发布

阅读量73

点赞数

原文链接：https://juejin.im/post/5c715bdae51d4526643fac56

版权

什么是CSS？

定义：CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。 通俗说就是样式，就像人身上的装饰。用<style></style>包裹。目前使用的是CSS2.1版本

CSS语法

CSS两个主要的部分构成：选择器，以及一条或多条声明。如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS介绍</title>
  <style>
    h1{
      color: red;
      background: yellow;
    }
  </style>
</head>
<body>
</body>
<ml>
复制代码

h1是选择器一种，color和background叫属性，后面的是属性值。CSS要写在head标签里，HTML写在body标签里。

CSS如何引入

内联样式

<body>
  <h1 style="color: red;text-align:center;">标题</h1>
  <p>段落</p>
</body>
复制代码

直接写在HTML标签里，但是这种写法现在不用。再看第二种。

style标签


  <style>
    h1{
      color: red;
      background: yellow;
    }
  </style>
复制代码

这个就是现在的写法，注意标点符号，对齐问题。

CSS link 外部文件假如你做的项目很大，需要写很多CSS，你也可以创建一个a.css文件(可以为任何名字，后缀必须是css)，把css内容写在文件内。然后在head里添加这样一段 <link rel="stylesheet" href="·/a.css"> 意思是引入当前a.css文件,第一个点代表当前文件夹的。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>CSS介绍</title>
  <link rel="stylesheet" href="./a.css"> //看到没，我在这
</head>
<body>
  <h1 style="color: red;text-align:center;">标题</h1>
  <p>段落</p>
</body>
<ml>
复制代码

a.css文件里面直接这样写就行

   h1{
     color: red;
     background: yellow;
   }
复制代码

@inport url = "·/a.css" 创建一个b.css文件，里面同样是css样式。再在a.css文件内第一行写入@inport url = "·/a.css" 意思是在引入a.css之前引入下b.css

@inport url = "·/a.css"
<style>
   h1{
     color: red;
     background: yellow;
   }
 </style>
复制代码

转载于:https://juejin.im/post/5c715bdae51d4526643fac56

weixin_34294649

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS介绍

什么是CSS？定义：CSS 指层叠样式表 (Cascading Style Sheets)，是一种用来表现 HTML 文档样式的语言，样式定义如何显示 HTML 元素，是能够真正做到网页表现与结构分离的一种样式设计语言。样式通常存储在样式表中，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一。通俗说就是样式，就像人身上的装饰。用<style></style>...
复制链接

扫一扫