CSS快速入门

最新推荐文章于 2025-09-09 15:40:26 发布

原创最新推荐文章于 2025-09-09 15:40:26 发布 · 648 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

html+css 专栏收录该内容

2 篇文章

订阅专栏

CSS引入方式

内联样式：

在 HTML 元素中使用 style 属性来定义样式，例如：

<p style="color: red; font-size: 16px;">Hello, World!</p>

内部样式表：

使用 <style> 标签在 HTML 文件的头部或任意位置定义样式，例如：

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

外部样式表：

将样式定义在一个独立的 CSS 文件中，然后在 HTML 文件中通过<link>标签引入，例如：

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

@import：

在 CSS 文件中使用 @import 来引入其他 CSS 文件，例如：

@import url("styles.css");

三大选择器

元素选择器（Element Selector）：

特点：最基本的选择器，通过标签名称选择元素。
示例：p 选择所有段落元素，h1 选择所有一级标题元素。
应用：常用于为整个文档中特定类型的元素应用样式。
p{color:red}

类选择器（Class Selector）：

特点：通过类名选择元素，以 . 开头。
示例：.example 选择所有具有 example 类的元素。
应用：允许为多个元素应用相同的样式，提高样式的重用性。
.highlight{background-color:yellow;font-weight:bold;}
<p class="highlight">This is a highlighted paragraph.</p>

ID 选择器（ID Selector）：

特点：通过 ID 名称选择元素，以 # 开头。
示例：#header 选择具有 header ID 的元素。
应用：用于标识文档中唯一的元素，通常用于特定元素的样式定制。
#header{background-color:lightblue;color:white;}
<div id="header">This is the header.</div>

浮动

在CSS中，浮动（float）是一种布局属性，用于控制元素在页面中的位置。
通过浮动，可以使元素向左或向右移动，同时允许其他内容环绕在其周围。

常见的浮动属性包括：

float: left;：元素向左浮动，使其靠左对齐，并允许其他内容环绕在右侧。
float: right;：元素向右浮动，使其靠右对齐，并允许其他内容环绕在左侧。
clear: both;：清除浮动，防止浮动元素影响其父元素的高度。

浮动元素可能会导致一些布局问题，如父元素高度塌陷（父元素无法自动撑开以容纳浮动元素）。为了解决这些问题，可以使用清除浮动的方法，例如在父元素的最后添加一个空的元素并设置clear: both;。

例子

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 400px;
            border: 1px solid black;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            float: left;
            margin: 10px;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>
<body>

<div class="container clearfix">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
</div>

</body>
</html>

定位

CSS中的定位属性用于控制元素在页面中的位置。主要的定位属性有：
Static（静态定位）：元素按照它们在文档流中的顺序进行定位。这是默认值，通常不需要显式设置。
Relative（相对定位）：相对于元素在文档流中的初始位置进行定位，通过设置top、right、bottom、left属性来调整元素的位置，不会影响其他元素的布局。
Absolute（绝对定位）：相对于最近的已定位祖先元素（父元素或更高级元素）进行定位，如果没有已定位的祖先元素，则相对于最初的包含块定位。通过设置top、right、bottom、left属性来确定元素的位置，会脱离文档流其他元素会忽略它的位置。
Fixed（固定定位）：相对于浏览器窗口进行定位，当用户滚动页面时，元素始终会停留在相同的位置。也是脱离文档流的定位方式。
Sticky（粘性定位）：元素在跨越特定阈值前为相对定位，之后为固定定位。通常用于创建导航栏等元素，在用户滚动页面时固定在页面的某个位置。
这些定位属性可以通过CSS的position属性进行设置，如：position: static | relative | absolute | fixed | sticky;

盒子模型

CSS盒子模型是用来描述网页上的元素在页面中所占空间的模型。一个元素的盒子包括内容区域、内边距、边框和外边距四个部分。
- 内容区域 (Content): 盒子的内容部分，包括文本、图片或其他媒体内容。
- 内边距 (Padding): 内边距是内容区域与边框之间的空间，可以用来控制内容与边框之间的距离。
- 边框 (Border): 边框包围在内容区域和内边距外部，用来界定元素的边界。
- 外边距 (Margin): 外边距是盒子与其他元素之间的空间，用来控制元素与周围元素之间的距离。
在CSS中，可以通过设置不同的属性来控制盒子模型的各个部分，例如：
- width 和 height：控制内容区域的宽度和高度。
- padding：设置内边距。
- border：设置边框样式、宽度和颜色。
- margin：设置外边距。