CSS（0）——基础入门

01 CSS入门

1.CSS是什么

CSS表示层叠样式表（Cascading Style Sheet，简称：CSS，又称串样式列表、级联样式表、串接样式表、阶层式样式表）是为网页添加样式的代码。

CSS 也不是真正的编程语言，甚至不是标记语言。它是一门样式表语言，是一种计算机语言。

2.CSS历史

CSS的出现是为了美化HTML的，并且让结构（HTML）与样式（CSS）分离

美化方式一：为HTML添加各种各样的样式，比如颜色、字体、大小、下划线等等
美化方式二：对HTML进行布局，按照某种结构显示（CSS进行布局 – 浮动、flex、grid）

3.编写方式

声明（Declaration）一个单独的CSS规则，如用来指定添加的CSS样式。

 color: red;

属性名（Property name）：要添加的css规则的名称
属性值（Property value）：要添加的css规则的值

4.CSS样式应用方式

CSS提供了3种方法，可以将CSS样式应用到元素上：

内联样式（inline style）
内部样式表（internal style sheet）、文档样式表（document style sheet）、内嵌样式表（embed style sheet）
外部样式表（external style sheet）

5.内联样式表inline

内联样式表存在于HTML元素的style属性之中

CSS样式之间用分号;隔开，建议每条CSS样式后面都加上分号;

<p style="color:red;font-size: 20px;">你同意吗？你去过几个呢？欢迎大家在评论区留言补充，大家一起讨论，谢谢。</p>

在开始标签中的公共属性style中写
并且可以写多个属性

在原生的HTML编写过程中确实这种写法是不推荐的，但是在Vue的template中某些动态的样式是会使用内联样式的

6.内部样式表internal

将CSS放在HTML文件‘<head>’元素里的‘<style>’元素之中

<style>
      /* 选择器 */
      /*选择所有的span元素*/
      span{
        color: gray;
      }
      /*选择class属性为time的元素*/
      .time{
        font-size: 20px;
      }
</style>

在Vue的开发过程中，每个组件也会有一个style元素，和内部样式表非常的相似（原理并不相同）

内部样式表解决：内联样式的书写冗余问题

7.外部样式表external

外部样式表（external style sheet）是将css编写一个独立的文件中，并且通过‘’元素引入进来。

使用外部样式表主要分成两个步骤：

第一步：将css样式在一个独立的css文件中编写（后缀名为.css），可以引入多个外部css文件
第二步：通过‘’元素引入进来(Link元素用来引入资源)

<link rel="stylesheet" href="./1.css">

改进:当出现很多css样式文件，如何解决html冗余问题——>重新建立一个索引css文件index.css，在这个文字中包含其他的css文件，最终只引用index.css即可。

可以在style元素或者CSS文件中使用@import导入其他的CSS文件。具体文件结构如下：

index.css

@import url（./1.css）;
@import url（./2.css）;
@import url（./3.css）;

1.html

<link rel="stylesheet" href="./index.css">

外部样式表解决：避免对相同样式的重复编写

8.注释

ctrl+/一键注释

内部样式表

posted @ 2025-04-17 12:55 卡卡max 阅读(16) 评论(0) 收藏举报

刷新页面返回顶部