CSS笔记

最新推荐文章于 2025-05-10 16:22:55 发布

原创最新推荐文章于 2025-05-10 16:22:55 发布 · 111 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS基础专栏收录该内容

11 篇文章

订阅专栏

1 CSS基础知识

1.1基本概念

CSS指层叠样式表（Cascading Style Sheets）

使用样式的三种方式：

（1）内联样式

<p style="font-size: 24px; color: plum">内联样式</p>

将样式定义在style属性中，内容和表现形式高度耦合，维护困难，不利于分工合作。

只能应用于当前标签

（2）内部样式

</head>
    <style>
       p{
          font-size: 24px;
           color: blue;
       }
    </style>

<body>
    <p>内部样式1</p>
</body>

在<head>标签中通过<style>标签来定义

内容和表现形式的耦合程度降低了，但还是都在html文件中，没有实现完全分离。

定义的样式只能在当前页面中使用

（3）外部样式表

首先需要定义一个样式表文件（.css）

/*
定义了应用于段落的样式
字体：36
颜色：红色
*/
p{
    font-size: 36px;
    color: red;
}

CSS中也可以使用注释，形式为/* ..........*/

然后在需要使用这些样式的HTML文件中引入该样式表文件。

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link  rel="stylesheet" type="text/css" href="CSS/E102-01-02.css">
</head>

外部样式表使得内容和表现形式彻底分离，有利于分工合作及维护。可在多个HTML文件中引用。

推荐尽量使用外部样式。但后面的案例为了方便，还会大量使用内部样式甚至是内联样式。

1.2颜色

自然界的颜色数量是无穷的，但是计算机只能表示有限的信息。

需要将连续的量（无穷）转化为离散的量（有限）的。

所有的颜色都可以由红色（red）、绿色（green）、蓝色（blue）三种颜色调配而成，这三种颜色俗称三原色。

CSS中用8位表示一个颜色，那么可以表示2⁸种颜色，即256种颜色。那么每个颜色值有24位来表示，总共可以表示256*256*256种颜色（真彩色）。

CSS中有多种颜色表现形式：

（1）十六进制形式：

<p style="color: #ff0000">十六进制颜色</p>

（2）RGB颜色

<p style="color: RGB(255,0,0)">RGB颜色</p>

（3）RGBA颜色

在RGB颜色基础上增加了透明度分量（Alpha），该分量的取值范围为0（完全透明）~1（完全不透明）。

<p style="color: RGBA(255,0,0,0.5)">RGBA颜色</p>

（4）HSL颜色

颜色也可以由另外三个分量来表示，即色调、饱和度和明度。

<p style="color:HSL(100,50%,50%)">HSL颜色表示形式</p>

（5）HSLA颜色

在HSL颜色基础上增加了Alpha分量

<p style="color:HSLA(100,50%,50%,0.5)">HSLA颜色表示形式</p>

（6）预定义颜色

CSS提供了一些常用的预定义颜色，比如red、green等

<p style="color:pink)">预定义颜色</p>

1.3尺寸单位

1. mm:毫米

2. cm:厘米

3. in:英寸（inch）

4. px:像素（pixel）

5. %:百分比

6. em:1em 等于当前的字体尺寸。

2em 等于当前字体尺寸的两倍。

例如，如果某元素以 12pt 显示，那么 2em 是24pt。

在 CSS 中，em是非常有用的单位，因为它可以自动适应用户所使用的字体。

7. vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。

8. vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。

相对单位有：em、%、vh、vw

絶対単位有：cm 、mm、in、px、