CSS基础知识（易懂秒杀）初学者

InsecureFluoxetine
76 阅读5分钟

1.CSS是什么？

CSS是层叠样式表（Cascading Style Sheet)，取单词首字母这也是命名由来。是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。说通俗点：CSS就是用来美化界面和控制页面布局的一种语言。HTML是身体躯干，CSS就是外貌修饰（发型、衣服......），JavaScript是灵魂、精神。

CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。

2.CSS该怎样使用？

CSS 应用于文档的三种方法：使用外部样式表、使用内部样式表和使用内联样式。

那什么是外部样式表？

外部样式表在一个单独的扩展名为 .css 的文件中包含 CSS。这是将 CSS 应用到文档中最常见和最有用的方法。

可以通过link标签来达到此目的（ 元素的 href 属性需要引用你文件系统中的一个文件。在上面的例子中，CSS 文件与 HTML 文档在同一个文件夹中，但你可以把它放在其他地方，并调整路径。）（*CSS文件另写）

格式：

例： 1.先建立CSS文件，在其中写入你需要修饰的文字、背景........布局...

924f8927f1124962baff797faa010ded.png

2.然后在HTML中link调用css文件

9cf97d366caa43b7b7ff33dbd6b65523.png

                                1+2=外部样式表的使用

什么是内部样式表？

内部样式表是将CSS代码写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

例：

<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的 CSS 测试</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hello World!</h1>
    <p>这是我的第一个 CSS 示例</p>
  </body>
</html>

我们可以看到这与外部样式表最大的不同是没有单独去建立CSS文件，而是直接将要修饰和控制的东西写在了style标签中。

什么是内联样式？

就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这些的：

内联样式有很多种表达方式

<h1 :style="{color:'red','font-size':'50px'}">加油</h1>
    </div>

通常格式：<标签名 style="属性1:属性值1; ........"> 内容 </标签名>

3.CSS的基础语法规则

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

8dbdcb72b240e0edaf07c64b92a5d366.jpeg

选择器通常是您需要改变样式的 HTML 元素（***如果HTML不太熟可以看看我上一篇文章的介绍）。

规律：每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 选择器在CSS中分为伪类选择器、伪元素选择器、标签选择器（最常用）、ID选择器、类选择器、子选择器........等

什么是伪类选择器？ 伪类是 W3C 制定的一套选择器的特殊状态，通过伪类您可以设置元素的动态状态，例如悬停（hover）、点击（active）以及文档中不能通过其它选择器选择的元素（这些元素没有 ID 或 class 属性），例如第一个子元素（first-child）或者最后一个子元素（last-child）。

特点：伪类的名称不区分大小写，但需要以冒号:开头。另外，伪类需要与 CSS 中的选择器结合使用，语法格式如下：

例如几个常见的：

fb9d63def7a64d3d9c1149ca1a3a6392.png 什么是伪元素选择器？ CSS 伪元素是用来添加一些选择器的特殊效果

特点：用于选择元素的特定部分而不是整个元素本身。伪元素允许你在已选择的元素内部创建或修改内容，而无需在文档结构中添加额外的HTML元素。伪元素的语法以::（双冒号）作为前缀，（伪元素是一个附加在选择器末尾的关键词，通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式，或者在元素之前、之后插入一些内容等等。

在 CSS1 和 CSS2 中，伪元素的使用与伪类相同，都是使一个冒号:与选择器相连。但在 CSS3 中，将伪元素单冒号的使用方法改为了使用双冒号::，以此来区分伪类和伪元素。因此，建议在使用伪元素时使用双冒号而不是单冒号。） 如::before和::after。 例：

353dc6a0b48249fbba9ed30d9c31ca3f.png

后面的选择器就不讲了，难懂的就这两种。

个人建议“写法”：在代码中合理的添加注释是个非常好的习惯，通过注释您可以对代码加以解释说明（例如描述某段代码的功能、使用方法等），浏览器会自动忽略注释的内容。注释对开发人员非常重要，它可以帮助开发人员更快的理解代码的用途。

在 CSS 中注释以/开头（起始符），以/结尾（结束符），/与/是成对出现的，所有在/与/之间的内容都会被看作注释的内容。CSS 中的注释只有这一种写法，无论是在单行中使用还是跨越多行使用，只要保证注释的内容在/与/之间即可。

avatar
文章
阅读
粉丝